Implement design review changes

src/App.scss

@@ -20,6 +20,7 @@ limitations under the License.
     background-color: $app-background;
     background-image: url('./imgs/background.svg');
     background-repeat: no-repeat;
+    background-size: stretch;
     background-position: 50% -20%;
 }
 
@@ -32,7 +33,7 @@ limitations under the License.
 .topSpacer {
     @include spacer;
 
-    height: 20vh;
+    height: 10vh;
 }
 
 .bottomSpacer {

src/App.tsx

@@ -21,6 +21,7 @@ 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';
 
@@ -32,7 +33,6 @@ const App: React.FC = () => {
     let page = (
         <>
             <CreateLinkTile />
-            <hr />
         </>
     );
 
@@ -50,12 +50,18 @@ const App: React.FC = () => {
     }
 
     return (
+        <GlobalContext>
             <SingleColumn>
                 <div className="topSpacer" />
-            <GlobalContext>{page}</GlobalContext>
-            <MatrixTile />
+                {page}
+                <div>
+                    <MatrixTile isLink={!!location.hash} />
+                    <br />
+                    <Footer />
+                </div>
                 <div className="bottomSpacer" />
             </SingleColumn>
+        </GlobalContext>
     );
 };
 

src/components/Avatar.tsx

@@ -19,7 +19,7 @@ import classNames from 'classnames';
 import { Room, User } from 'matrix-cypher';
 
 import { getMediaQueryFromMCX } from '../utils/cypher-wrapper';
-import logo from '../imgs/matrix-logo.svg';
+import logo from '../imgs/chat-icon.svg';
 
 import './Avatar.scss';
 

src/components/Button.scss

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "../color-scheme";
+@import '../color-scheme';
 
 .button {
     width: 100%;
 
-    padding: 1rem;
+    height: 48px;
+
     border-radius: 2rem;
     border: 0;
 
@@ -28,6 +29,31 @@ limitations under the License.
 
     font-size: 14px;
     font-weight: 500;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    position: relative;
+
+    .buttonIcon {
+        position: absolute;
+        height: 24px;
+        width: 24px;
+
+        left: 18px;
+        top: 12px;
+    }
+}
+
+.buttonSecondary {
+    background-color: $background;
+    color: $foreground;
+    border: 1px solid $foreground;
+}
+
+.errorButton:hover {
+    cursor: not-allowed;
 }
 
 .buttonHighlight {

src/components/Button.stories.tsx

@@ -27,3 +27,7 @@ export const WithText: React.FC = () => (
         {text('label', 'Hello Story Book')}
     </Button>
 );
+
+export const Secondary: React.FC = () => (
+    <Button secondary>Secondary button</Button>
+);

src/components/Button.tsx

@@ -22,6 +22,9 @@ import './Button.scss';
 interface IProps extends React.ButtonHTMLAttributes<Element> {
     // Briefly display these instead of the children onClick
     flashChildren?: React.ReactNode;
+    secondary?: boolean;
+    icon?: string;
+    flashIcon?: string;
 }
 
 /**
@@ -31,7 +34,16 @@ const Button: React.FC<
     IProps & React.RefAttributes<HTMLButtonElement>
 > = React.forwardRef(
     (
-        { onClick, children, flashChildren, className, ...props }: IProps,
+        {
+            onClick,
+            children,
+            flashChildren,
+            className,
+            secondary,
+            icon,
+            flashIcon,
+            ...props
+        }: IProps,
         ref: React.Ref<HTMLButtonElement>
     ) => {
         const [wasClicked, setWasClicked] = React.useState(false);
@@ -51,8 +63,15 @@ const Button: React.FC<
 
         const classNames = classnames('button', className, {
             buttonHighlight: wasClicked,
+            buttonSecondary: secondary,
         });
 
+        const iconSrc = wasClicked && flashIcon ? flashIcon : icon;
+
+        const buttonIcon = icon ? (
+            <img className="buttonIcon" src={iconSrc} alt="" />
+        ) : null;
+
         return (
             <button
                 className={classNames}
@@ -60,6 +79,7 @@ const Button: React.FC<
                 ref={ref}
                 {...props}
             >
+                {buttonIcon}
                 {content}
             </button>
         );

src/components/ClientSelection.tsx

@@ -38,7 +38,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
                 }}
                 checked={rememberSelection}
             >
-                Remember my selection for future invites in this browser
+                Remember choice for future invites in this browser
             </StyledCheckbox>
             <StyledCheckbox
                 onChange={(): void => {
@@ -79,7 +79,6 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
     return (
         <div className="advanced">
             {options}
-            <h4>Clients you can accept this invite with</h4>
             <ClientList link={link} rememberSelection={rememberSelection} />
             {clearSelection}
         </div>

src/components/ClientTile.scss

@@ -19,7 +19,7 @@ limitations under the License.
 .clientTile {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
 
     min-height: 150px;
     width: 100%;
@@ -28,7 +28,10 @@ limitations under the License.
 
     > img {
         flex-shrink: 0;
-        height: 130px;
+        height: 116px;
+        width: 116px;
+        margin-right: 14px;
+        border-radius: 16px;
     }
 
     > div {
@@ -47,11 +50,10 @@ limitations under the License.
         }
 
         .button {
-            margin: 5px;
+            width: 50%;
         }
     }
 
-    border: 1px solid $borders;
     border-radius: 8px;
 
     padding: 15px;
@@ -59,8 +61,8 @@ limitations under the License.
     // For the chevron
     position: relative;
 
-    &::hover {
-        background-color: $grey;
+    &:hover {
+        background-color: $app-background;
     }
 }
 
@@ -68,12 +70,4 @@ limitations under the License.
     position: relative;
 
     width: 100%;
-
-    &::after {
-        // TODO: add chevron top right
-        position: absolute;
-        right: 10px;
-        top: 5px;
-        content: '>';
-    }
 }

src/components/CreateLinkTile.scss

@@ -29,7 +29,6 @@ limitations under the License.
         display: grid;
         row-gap: 24px;
         align-self: center;
-        padding: 0 30px;
     }
 
     > a {
@@ -39,4 +38,56 @@ limitations under the License.
     h1 {
         word-break: break-all;
     }
+
+    .createLinkReset {
+        height: 40px;
+        width: 40px;
+
+        border-radius: 100%;
+        border: 1px solid lighten($grey, 50%);
+
+        background: $background;
+
+        padding: 6px;
+
+        position: relative;
+
+        > div {
+            // This is a terrible case of faking it till
+            // we make it. It will break. I'm so sorry
+            position: absolute;
+            display: none;
+
+            width: max-content;
+            top: -35px;
+            left: -17px;
+
+            border-radius: 30px;
+            padding: 5px 15px;
+
+            background: $background;
+
+            word-wrap: none;
+        }
+
+        img {
+            height: 100%;
+            width: 100%;
+            border: 0;
+
+            filter: invert(12%);
+        }
+
+        &:hover {
+            border: 0;
+
+            background: $foreground;
+
+            cursor: pointer;
+
+            > div {
+                display: block;
+            }
+        }
+    }
 }

src/components/CreateLinkTile.tsx

@@ -19,11 +19,13 @@ import { Formik, Form } from 'formik';
 
 import Tile from './Tile';
 import Button from './Button';
-import TextButton from './TextButton';
 import Input from './Input';
 import { parseHash } from '../parser/parser';
 import { LinkKind } from '../parser/types';
-
+import linkIcon from '../imgs/link.svg';
+import copyIcon from '../imgs/copy.svg';
+import tickIcon from '../imgs/tick.svg';
+import refreshIcon from '../imgs/refresh.svg';
 import './CreateLinkTile.scss';
 
 interface ILinkNotCreatedTileProps {
@@ -38,11 +40,16 @@ interface FormValues {
 function validate(values: FormValues): Partial<FormValues> {
     const errors: Partial<FormValues> = {};
 
+    if (values.identifier === '') {
+        errors.identifier = '';
+        return errors;
+    }
+
     const parse = parseHash(values.identifier);
 
     if (parse.kind === LinkKind.ParseFailed) {
         errors.identifier =
-            "That link doesn't look right. Double check the details.";
+            "That identifier doesn't look right. Double check the details.";
     }
 
     return errors;
@@ -72,14 +79,26 @@ const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
                     );
                 }}
             >
+                {(formik): JSX.Element => (
                     <Form>
                         <Input
                             name={'identifier'}
                             type={'text'}
                             placeholder="#room:example.com, @user:example.com"
+                            autoFocus
                         />
-                    <Button type="submit">Get Link</Button>
+                        <Button
+                            type="submit"
+                            icon={linkIcon}
+                            disabled={!!formik.errors.identifier}
+                            className={
+                                formik.errors.identifier ? 'errorButton' : ''
+                            }
+                        >
+                            Create Link
+                        </Button>
                     </Form>
+                )}
             </Formik>
         </Tile>
     );
@@ -102,14 +121,20 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
 
     return (
         <Tile className="createLinkTile">
-            <TextButton onClick={(): void => props.setLink('')}>
-                Create another lnk
-            </TextButton>
+            <button
+                className="createLinkReset"
+                onClick={(): void => props.setLink('')}
+            >
+                <div>New link</div>
+                <img src={refreshIcon} />
+            </button>
             <a href={props.link}>
                 <h1>{props.link}</h1>
             </a>
             <Button
                 flashChildren={'Copied'}
+                icon={copyIcon}
+                flashIcon={tickIcon}
                 onClick={(): void => {
                     navigator.clipboard.writeText(props.link);
                 }}

src/components/Footer.scss

+/*
+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.
+*/
+
+@import '../color-scheme';
+
+.footer {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+    column-gap: 5px;
+
+    * {
+        color: $font;
+    }
+
+    .textButton {
+        margin: 0;
+        padding: 0;
+    }
+}

src/components/Footer.tsx

+/*
+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.
+*/
+
+import React, { useContext } from 'react';
+
+import HSContext, {
+    HSOptions,
+    ActionType as HSACtionType,
+} from '../contexts/HSContext';
+import ClientContext, {
+    ActionType as ClientActionType,
+} from '../contexts/ClientContext';
+import TextButton from './TextButton';
+
+import './Footer.scss';
+
+const Footer: React.FC = () => {
+    const [hsState, hsDispatch] = useContext(HSContext);
+    const [clientState, clientDispatch] = useContext(ClientContext);
+
+    const clear =
+        hsState.option !== HSOptions.Unset || clientState.clientId !== null ? (
+            <>
+                {' · '}
+                <TextButton
+                    onClick={(): void => {
+                        hsDispatch({
+                            action: HSACtionType.Clear,
+                        });
+                        clientDispatch({
+                            action: ClientActionType.ClearClient,
+                        });
+                    }}
+                >
+                    Clear preferences
+                </TextButton>
+            </>
+        ) : null;
+
+    return (
+        <div className="footer">
+            <a href="https://github.com/matrix-org/matrix.to">
+                A github project
+            </a>
+            {' · '}
+            <a href="https://github.com/matrix-org/matrix.to/tree/matrix-two/src/clients">
+                Add your client
+            </a>
+            {clear}
+        </div>
+    );
+};
+
+export default Footer;

src/components/HomeserverOptions.scss

@@ -46,6 +46,7 @@ limitations under the License.
             width: 62px;
             padding: 11px;
             border-radius: 100%;
+            margin-left: 14px;
         }
     }
 

src/components/HomeserverOptions.stories.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 
 import HomeserverOptions from './HomeserverOptions';
+import { LinkKind } from '../parser/types';
 
 export default {
     title: 'HomeserverOptions',
@@ -29,4 +30,13 @@ export default {
     },
 };
 
-export const Default: React.FC = () => <HomeserverOptions />;
+export const Default: React.FC = () => (
+    <HomeserverOptions
+        link={{
+            identifier: '#banter:matrix.org',
+            arguments: { vias: [] },
+            kind: LinkKind.Alias,
+            originalLink: 'This is all made up',
+        }}
+    />
+);

src/components/HomeserverOptions.tsx

@@ -23,12 +23,14 @@ import HSContext, { TempHSContext, ActionType } from '../contexts/HSContext';
 import icon from '../imgs/telecom-mast.svg';
 import Button from './Button';
 import Input from './Input';
-import Toggle from './Toggle';
 import StyledCheckbox from './StyledCheckbox';
+import { SafeLink } from '../parser/types';
 
 import './HomeserverOptions.scss';
 
-interface IProps {}
+interface IProps {
+    link: SafeLink;
+}
 
 interface FormValues {
     HSUrl: string;
@@ -44,16 +46,19 @@ function validateURL(values: FormValues): Partial<FormValues> {
     return errors;
 }
 
-const HomeserverOptions: React.FC<IProps> = () => {
+const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
     const HSStateDispatcher = useContext(HSContext)[1];
     const TempHSStateDispatcher = useContext(TempHSContext)[1];
+
     const [rememberSelection, setRemeberSelection] = useState(false);
-    const [usePrefered, setUsePrefered] = useState(false);
+
+    // Select which disaptcher to use based on whether we're writing
+    // the choice to localstorage
     const dispatcher = rememberSelection
         ? HSStateDispatcher
         : TempHSStateDispatcher;
 
-    const hsInput = usePrefered ? (
+    const hsInput = (
         <Formik
             initialValues={{
                 HSUrl: '',
@@ -63,23 +68,36 @@ const HomeserverOptions: React.FC<IProps> = () => {
                 dispatcher({ action: ActionType.SetHS, HSURL: HSUrl })
             }
         >
+            {({ values, errors }): JSX.Element => (
                 <Form>
                     <Input
+                        muted={!values.HSUrl}
                         type="text"
                         name="HSUrl"
                         placeholder="https://example.com"
                     />
-                <Button type="submit">Set HS</Button>
+                    {values.HSUrl && !errors.HSUrl ? (
+                        <Button secondary type="submit">
+                            Use {values.HSUrl}
+                        </Button>
+                    ) : null}
                 </Form>
+            )}
         </Formik>
-    ) : null;
+    );
 
     return (
         <Tile className="homeserverOptions">
             <div className="homeserverOptionsDescription">
                 <div>
+                    <h3>About {link.identifier}</h3>
                     <p>
-                        Let's locate a homeserver to show you more information.
+                        Select a homeserver to learn more about{' '}
+                        {link.identifier}. <br />
+                        The homeserver will provide metadata about the link such
+                        as an avatar or description. Homeservers will be able to
+                        relate your ip to resources you've opened invites for in
+                        matrix.to
                     </p>
                 </div>
                 <img
@@ -94,18 +112,14 @@ const HomeserverOptions: React.FC<IProps> = () => {
                 Remember my choice.
             </StyledCheckbox>
             <Button
+                secondary
                 onClick={(): void => {
                     dispatcher({ action: ActionType.SetAny });
                 }}
             >
                 Use any homeserver
             </Button>
-            <Toggle
-                checked={usePrefered}
-                onChange={(): void => setUsePrefered(!usePrefered)}
-            >
-                Use my prefered homeserver only
-            </Toggle>
+
             {hsInput}
         </Tile>
     );

src/components/Input.scss

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "../color-scheme";
-@import "../error";
+@import '../color-scheme';
+@import '../error';
 
 .input {
     width: 100%;
@@ -23,7 +23,8 @@ limitations under the License.
 
     background: $background;
 
-    border: 1px solid $font;
+    border: 1px solid $foreground;
+    font: lighten($grey, 60%);
     border-radius: 24px;
 
     font-size: 14px;
@@ -32,9 +33,18 @@ limitations under the License.
     &.error {
         @include error;
     }
+
+    &:focus {
+        border: 1px solid $font;
+        font: $font;
+    }
 }
 
 .inputError {
     @include error;
     text-align: center;
 }
+
+.inputMuted {
+    border-color: lighten($grey, 60%);
+}

src/components/Input.tsx

@@ -20,12 +20,13 @@ import { useField } from 'formik';
 
 import './Input.scss';
 
-interface IProps extends React.InputHTMLAttributes<Element> {
+interface IProps extends React.InputHTMLAttributes<HTMLElement> {
     name: string;
     type: string;
+    muted?: boolean;
 }
 
-const Input: React.FC<IProps> = ({ className, ...props }) => {
+const Input: React.FC<IProps> = ({ className, muted, ...props }) => {
     const [field, meta] = useField(props);
 
     const error =
@@ -35,6 +36,7 @@ const Input: React.FC<IProps> = ({ className, ...props }) => {
 
     const classNames = classnames('input', className, {
         error: meta.error,
+        inputMuted: !!muted,
     });
 
     return (

src/components/InviteTile.scss

@@ -25,4 +25,9 @@ limitations under the License.
         justify-content: space-between;
         row-gap: 20px;
     }
+
+    hr {
+        width: 100%;
+        margin: 0;
+    }
 }

src/components/InviteTile.tsx

@@ -25,7 +25,6 @@ import ClientSelection from './ClientSelection';
 import { Client, ClientKind } from '../clients/types';
 import { SafeLink } from '../parser/types';
 import TextButton from './TextButton';
-import FakeProgress from './FakeProgress';
 
 interface IProps {
     children?: React.ReactNode;
@@ -39,10 +38,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
     let advanced: React.ReactNode;
 
     if (client === null) {
-        invite = showAdvanced ? (
-            <FakeProgress />
-        ) : (
-            <Button onClick={() => setShowAdvanced(!showAdvanced)}>
+        invite = showAdvanced ? null : (
+            <Button onClick={(): void => setShowAdvanced(!showAdvanced)}>
                 Accept invite
             </Button>
         );
@@ -89,7 +86,9 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
         if (client === null) {
             advanced = (
                 <>
-                    <h4>Pick an app to accept the invite with</h4>
+                    <hr />
+                    <h3>Almost done!</h3>
+                    <p>Pick a client to open {link.identifier}</p>
                     <ClientSelection link={link} />
                 </>
             );
@@ -104,12 +103,15 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
         }
     }
 
+    advanced = advanced ? (
+        <div className="inviteTileClientSelection">{advanced}</div>
+    ) : null;
     return (
         <>
             <Tile className="inviteTile">
                 {children}
                 {invite}
-                <div className="inviteTileClientSelection">{advanced}</div>
+                {advanced}
             </Tile>
         </>
     );

src/components/LinkPreview.tsx

@@ -47,13 +47,12 @@ const invite = async ({
     link: SafeLink;
 }): Promise<JSX.Element> => {
     // TODO: replace with client fetch
-    const defaultClient = await client(clientAddress);
     switch (link.kind) {
         case LinkKind.Alias:
             return (
                 <RoomPreviewWithTopic
                     room={
-                        await getRoomFromAlias(defaultClient, link.identifier)
+                        await getRoomFromAlias(clientAddress, link.identifier)
                     }
                 />
             );
@@ -61,14 +60,14 @@ const invite = async ({
         case LinkKind.RoomId:
             return (
                 <RoomPreviewWithTopic
-                    room={await getRoomFromId(defaultClient, link.identifier)}
+                    room={await getRoomFromId(clientAddress, link.identifier)}
                 />
             );
 
         case LinkKind.UserId:
             return (
                 <UserPreview
-                    user={await getUser(defaultClient, link.identifier)}
+                    user={await getUser(clientAddress, link.identifier)}
                     userId={link.identifier}
                 />
             );
@@ -76,10 +75,10 @@ const invite = async ({
         case LinkKind.Permalink:
             return (
                 <EventPreview
-                    room={await getRoomFromPermalink(defaultClient, link)}
+                    room={await getRoomFromPermalink(clientAddress, link)}
                     event={
                         await getEvent(
-                            defaultClient,
+                            await client(clientAddress),
                             link.roomLink,
                             link.eventId
                         )
@@ -128,7 +127,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                     checked={showHSOptions}
                     onChange={(): void => setShowHSOPtions(!showHSOptions)}
                 >
-                    Show more information
+                    About {link.identifier}
                 </Toggle>
             </>
         );
@@ -136,7 +135,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
             content = (
                 <>
                     {content}
-                    <HomeserverOptions />
+                    <HomeserverOptions link={link} />
                 </>
             );
         }
@@ -164,7 +163,9 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                 originalLink: '',
             }}
         />
-    ) : null;
+    ) : (
+        <p style={{ margin: '0 0 10px 0' }}>You're invited to join</p>
+    );
 
     return (
         <InviteTile client={client} link={link}>