Merge pull request #168 from matrix-org/bwindels/ux-refresh

UX refresh

src/App.tsx

@@ -21,7 +21,6 @@ import CreateLinkTile from './components/CreateLinkTile';
 import MatrixTile from './components/MatrixTile';
 import Tile from './components/Tile';
 import LinkRouter from './pages/LinkRouter';
-import Footer from './components/Footer';
 
 import './App.scss';
 
@@ -67,11 +66,7 @@ const App: React.FC = () => {
             <SingleColumn>
                 <div className="topSpacer" />
                 {page}
-                <div>
                 <MatrixTile isLink={!!location.hash} />
-                    <br />
-                    <Footer />
-                </div>
                 <div className="bottomSpacer" />
             </SingleColumn>
         </GlobalContext>

src/components/Button.scss

@@ -21,15 +21,19 @@ limitations under the License.
 
     height: 48px;
 
-    border-radius: 2rem;
+    border-radius: 24px;
     border: 0;
 
-    background-color: $foreground;
+    background-color: $accent;
     color: $background;
 
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 500;
 
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
     &:hover {
         cursor: pointer;
     }

src/components/CreateLinkTile.scss

@@ -17,8 +17,6 @@ limitations under the License.
 @import '../color-scheme';
 
 .createLinkTile {
-    background: none;
-
     row-gap: 24px;
 
     * {
@@ -33,6 +31,11 @@ limitations under the License.
 
     > a {
         color: $foreground;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 32px;
+        text-align: left;
+        text-decoration: underline;
     }
 
     .createLinkReset {

src/components/CreateLinkTile.tsx

@@ -128,7 +128,9 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
                 <div>New link</div>
                 <img src={refreshIcon} alt="Go back to matrix.to home page" />
             </button>
-            <h1 className="linkHeader matrixIdentifier">{props.link}</h1>
+            <a className="matrixIdentifier" href={props.link}>
+                {props.link}
+            </a>
             <Button
                 flashChildren={'Copied'}
                 icon={copyIcon}

src/components/Details.scss

@@ -16,9 +16,13 @@ limitations under the License.
 
 @import '../mixins';
 
-.toggle {
+.details {
     display: flex;
 
+    > :first-child {
+        min-width: 100%;
+    }
+
     > input[type='checkbox'] {
         // Remove the OS's representation
         display: none;

src/components/Details.tsx

@@ -18,18 +18,18 @@ import React from 'react';
 
 import chevron from '../imgs/chevron-down.svg';
 
-import './Toggle.scss';
+import './Details.scss';
 
 interface IProps extends React.InputHTMLAttributes<Element> {
     children?: React.ReactNode;
 }
 
-const Toggle: React.FC<IProps> = ({ children, ...props }: IProps) => (
+const Details: React.FC<IProps> = ({ children, ...props }: IProps) => (
-    <label className="toggle">
+    <label className="details">
         {children}
         <input type="checkbox" {...props} />
         <img src={chevron} alt="" />
     </label>
 );
 
-export default Toggle;
+export default Details;

src/components/Footer.scss

@@ -21,6 +21,7 @@ limitations under the License.
     grid-auto-flow: column;
     justify-content: center;
     column-gap: 5px;
+    font-size: 11px;
 
     * {
         color: $font;

src/components/Footer.tsx

@@ -52,10 +52,10 @@ const Footer: React.FC = () => {
 
     return (
         <div className="footer">
-            <a href="https://github.com/matrix-org/matrix.to">GitHub</a>
+            <a href="https://github.com/matrix-org/matrix.to">GitHub project</a>
             {' · '}
             <a href="https://github.com/matrix-org/matrix.to/tree/main/src/clients">
-                Add your client
+                Add your app
             </a>
             {clear}
         </div>

src/components/Input.scss

@@ -24,9 +24,9 @@ limitations under the License.
     background: $background;
 
     border: 1px solid $foreground;
-    font: lighten($grey, 60%);
+    border-radius: 16px;
-    border-radius: 24px;
 
+    font: lighten($grey, 60%);
     font-size: 14px;
     line-height: 24px;
 

src/components/InviteTile.tsx

@@ -63,7 +63,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                 break;
         }
 
-        const advancedToggle = (
+        const advancedButton = (
             <p>
                 {inviteUseString}
                 <TextButton
@@ -77,7 +77,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
         invite = (
             <>
                 {invite}
-                {advancedToggle}
+                {advancedButton}
             </>
         );
     }

src/components/LinkPreview.tsx

@@ -25,7 +25,7 @@ import EventPreview from './EventPreview';
 import GroupPreview from './GroupPreview';
 import HomeserverOptions from './HomeserverOptions';
 import DefaultPreview from './DefaultPreview';
-import Toggle from './Toggle';
+import Details from './Details';
 import { clientMap } from '../clients';
 import {
     getRoomFromId,
@@ -133,7 +133,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
         content = (
             <>
                 <DefaultPreview link={link} />
-                <Toggle
+                <Details
                     checked={showHSOptions}
                     onChange={(): void => setShowHSOPtions(!showHSOptions)}
                 >
@@ -143,7 +143,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                             {link.identifier}
                         </span>
                     </span>
-                </Toggle>
+                </Details>
             </>
         );
         if (showHSOptions) {

src/components/MatrixTile.scss

@@ -16,7 +16,9 @@ limitations under the License.
 
 .matrixTile {
     background: none;
-    row-gap: 8px;
+    box-shadow: none;
-
+    row-gap: 16px;
     padding: 0 40px;
+    justify-items: left;
+    text-align: left;
 }

src/components/MatrixTile.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import Tile from './Tile';
+import Footer from './Footer';
 
 import logo from '../imgs/matrix-logo.svg';
 
@@ -43,6 +44,7 @@ const MatrixTile: React.FC<IProps> = ({ isLink }: IProps) => {
             <Tile className="matrixTile">
                 <img src={logo} alt="matrix-logo" />
                 {copy}
+                <Footer />
             </Tile>
         </div>
     );

src/components/Tile.scss

@@ -20,6 +20,7 @@ limitations under the License.
     background-color: $background;
 
     border-radius: 16px;
+    box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
     padding: 2rem;
 
     display: grid;

src/index.scss

@@ -46,7 +46,7 @@ h1 {
     font-weight: bold;
     font-size: 24px;
     line-height: 32px;
-    text-align: center;
+    text-align: left;
     color: $foreground;
 }
 

src/layouts/SingleColumn.scss

@@ -1,10 +1,26 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 .singleColumnLayout {
     height: 100%;
 
     padding: 0 1em;
     margin: 0 auto;
 
-    max-width: 550px;
+    max-width: 480px;
 
     display: grid;
     row-gap: 60px;