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

UX refresh
2020-11-24 12:05:42 +00:00 · 2020-11-24 12:05:42 +00:00 · 685950ba43
commit 685950ba43
parent 92ba3546a2 0e5a08a870
16 changed files with 60 additions and 30 deletions
--- a/src/App.tsx
+++ b/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>
--- a/src/components/Button.scss
+++ b/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;
    }
--- a/src/components/CreateLinkTile.scss
+++ b/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 {
--- a/src/components/CreateLinkTile.tsx
+++ b/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}
--- a/src/components/Details.scss
+++ b/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;
--- a/src/components/Details.tsx
+++ b/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) => (
-    <label className="toggle">
+const Details: React.FC<IProps> = ({ children, ...props }: IProps) => (
+    <label className="details">
        {children}
        <input type="checkbox" {...props} />
        <img src={chevron} alt="" />
    </label>
 );

-export default Toggle;
+export default Details;
--- a/src/components/Footer.scss
+++ b/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;
--- a/src/components/Footer.tsx
+++ b/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>
--- a/src/components/Input.scss
+++ b/src/components/Input.scss
@ -24,9 +24,9 @@ limitations under the License.
    background: $background;

    border: 1px solid $foreground;
-    font: lighten($grey, 60%);
-    border-radius: 24px;
+    border-radius: 16px;

+    font: lighten($grey, 60%);
    font-size: 14px;
    line-height: 24px;

--- a/src/components/InviteTile.tsx
+++ b/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}
            </>
        );
    }
--- a/src/components/LinkPreview.tsx
+++ b/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) {
--- a/src/components/MatrixTile.scss
+++ b/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;
 }
--- a/src/components/MatrixTile.tsx
+++ b/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>
    );
--- a/src/components/Tile.scss
+++ b/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;
--- a/src/index.scss
+++ b/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;
 }

--- a/src/layouts/SingleColumn.scss
+++ b/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;