Update client selection to match figma

src/App.scss

@@ -20,7 +20,7 @@ limitations under the License.
     background-color: $app-background;
     background-image: url('./imgs/background.svg');
     background-repeat: none;
-    background-position: 50% 10%;
+    background-position: 50% -20%;
 }
 
 @mixin spacer {

src/components/ClientSelection.scss

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 .advanced {
-    margin: 0 5%;
-
     display: grid;
     row-gap: 20px;
 

src/components/ClientSelection.tsx

@@ -84,6 +84,7 @@ 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,17 +19,22 @@ limitations under the License.
 .clientTile {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
-    height: 155px;
+    min-height: 150px;
     width: 100%;
 
     color: $foreground;
 
     > img {
         flex-shrink: 0;
-        height: 100%;
+        height: 130px;
     }
 
+    > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         h1 {
             text-align: left;
             font-size: 14px;
@@ -38,17 +43,25 @@ limitations under the License.
 
         p {
             margin-right: 20px;
-        margin-top: 20px;
             text-align: left;
         }
 
+        .button {
+            margin: 5px;
+        }
+    }
+
     border: 1px solid $borders;
     border-radius: 8px;
 
-    padding: 8px;
+    padding: 15px;
 
     // For the chevron
     position: relative;
+
+    &::hover {
+        background-color: $grey;
+    }
 }
 
 .clientTileLink {

src/components/ClientTile.tsx

@@ -20,6 +20,7 @@ import classNames from 'classnames';
 import { Client, ClientKind } from '../clients/types';
 import { SafeLink } from '../parser/types';
 import Tile from './Tile';
+import Button from './Button';
 
 import './ClientTile.scss';
 
@@ -37,6 +38,12 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
     const className = classNames('clientTile', {
         clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
     });
+
+    const inviteButton =
+        client.kind === ClientKind.LINKED_CLIENT ? (
+            <Button>Accept invite</Button>
+        ) : null;
+
     let clientTile = (
         <Tile className={className}>
             <img src={client.logo} alt={client.name + ' logo'} />
@@ -44,6 +51,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
                 <h1>{client.name}</h1>
                 <p>{client.description}</p>
                 {inviteLine}
+                {inviteButton}
             </div>
         </Tile>
     );

src/components/FakeProgress.scss

@@ -0,0 +1,31 @@
+/*
+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';
+
+.fakeProgress {
+    width: 100%;
+    height: 4px;
+    background-color: lighten($grey, 50%);
+    border-radius: 4px;
+
+    > div {
+        width: 60%;
+        height: 100%;
+        background-color: $foreground;
+        border-radius: 4px;
+    }
+}

src/components/FakeProgress.tsx

@@ -0,0 +1,27 @@
+/*
+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 from 'react';
+
+import './FakeProgress.scss';
+
+const FakeProgress = () => (
+    <div className="fakeProgress">
+        <div />
+    </div>
+);
+
+export default FakeProgress;

src/components/InviteTile.scss

@@ -18,7 +18,11 @@ limitations under the License.
     display: grid;
     row-gap: 24px;
 
-    .advancedPlaceholder {
+    .inviteTileClientSelection {
-        height: 245px;
+        margin: 0 5%;
+        display: grid;
+
+        justify-content: space-between;
+        row-gap: 20px;
     }
 }

src/components/InviteTile.tsx

@@ -20,10 +20,12 @@ import './InviteTile.scss';
 
 import Tile from './Tile';
 import LinkButton from './LinkButton';
+import Button from './Button';
 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;
@@ -35,12 +37,15 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
     const [showAdvanced, setShowAdvanced] = useState(false);
     let invite: React.ReactNode;
     let advanced: React.ReactNode;
-    // This i s a hacky way to get a the overlapping list of client
-    // options working.
-    let advancedPlaceholder: React.ReactNode;
 
     if (client === null) {
-        invite = null;
+        invite = showAdvanced ? (
+            <FakeProgress />
+        ) : (
+            <Button onClick={() => setShowAdvanced(!showAdvanced)}>
+                Accept invite
+            </Button>
+        );
     } else {
         let inviteUseString: string;
 
@@ -60,11 +65,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                 break;
         }
 
-        const advancedToggle = showAdvanced ? (
+        const advancedToggle = (
-            <TextButton onClick={(): void => setShowAdvanced(!showAdvanced)}>
-                Hide advanced options
-            </TextButton>
-        ) : (
             <p>
                 {inviteUseString}
                 <TextButton
@@ -83,9 +84,23 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
         );
     }
 
-    if (client === null || showAdvanced) {
+    if (showAdvanced) {
-        advanced = <ClientSelection link={link} />;
+        if (client === null) {
-        advancedPlaceholder = <div className="advancedPlaceholder" />;
+            advanced = (
+                <>
+                    <h4>Pick an app to accept the invite with</h4>
+                    <ClientSelection link={link} />
+                </>
+            );
+        } else {
+            advanced = (
+                <>
+                    <hr />
+                    <h4>Change app</h4>
+                    <ClientSelection link={link} />
+                </>
+            );
+        }
     }
 
     return (
@@ -93,9 +108,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
             <Tile className="inviteTile">
                 {children}
                 {invite}
-                {advancedPlaceholder}
+                <div className="inviteTileClientSelection">{advanced}</div>
             </Tile>
-            {advanced}
         </>
     );
 };

src/index.scss

@@ -49,6 +49,11 @@ h1 {
     text-align: center;
 }
 
+h4 {
+    text-align: left;
+    width: 100%;
+}
+
 a {
     color: $link;
     text-decoration: none;

src/layouts/SingleColumn.scss

@@ -10,9 +10,4 @@
     row-gap: 60px;
 
     align-items: center;
-
-    .advanced {
-        position: relative;
-        top: -335px;
-    }
 }