From a82c318ecf7ff2cd070e6e1d46933e4be4db42c7 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 10 Sep 2020 11:27:47 +0100 Subject: [PATCH] Update client selection to match figma --- src/App.scss | 2 +- src/components/ClientSelection.scss | 2 -- src/components/ClientSelection.tsx | 1 + src/components/ClientTile.scss | 37 ++++++++++++++++--------- src/components/ClientTile.tsx | 8 ++++++ src/components/FakeProgress.scss | 31 +++++++++++++++++++++ src/components/FakeProgress.tsx | 27 +++++++++++++++++++ src/components/InviteTile.scss | 8 ++++-- src/components/InviteTile.tsx | 42 +++++++++++++++++++---------- src/index.scss | 5 ++++ src/layouts/SingleColumn.scss | 5 ---- 11 files changed, 132 insertions(+), 36 deletions(-) create mode 100644 src/components/FakeProgress.scss create mode 100644 src/components/FakeProgress.tsx diff --git a/src/App.scss b/src/App.scss index 6b61de3..7179a17 100644 --- a/src/App.scss +++ b/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 { diff --git a/src/components/ClientSelection.scss b/src/components/ClientSelection.scss index 4754359..f4977b7 100644 --- a/src/components/ClientSelection.scss +++ b/src/components/ClientSelection.scss @@ -15,8 +15,6 @@ limitations under the License. */ .advanced { - margin: 0 5%; - display: grid; row-gap: 20px; diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx index 794ba0a..8a41d4a 100644 --- a/src/components/ClientSelection.tsx +++ b/src/components/ClientSelection.tsx @@ -84,6 +84,7 @@ const ClientSelection: React.FC = ({ link }: IProps) => { return (
{options} +

Clients you can accept this invite with

{clearSelection}
diff --git a/src/components/ClientTile.scss b/src/components/ClientTile.scss index 18a8be0..0b8f091 100644 --- a/src/components/ClientTile.scss +++ b/src/components/ClientTile.scss @@ -19,36 +19,49 @@ 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; } - h1 { - text-align: left; - font-size: 14px; - line-height: 24px; - } + > div { + display: flex; + flex-direction: column; + justify-content: space-between; + h1 { + text-align: left; + font-size: 14px; + line-height: 24px; + } - p { - margin-right: 20px; - margin-top: 20px; - text-align: left; + p { + margin-right: 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 { diff --git a/src/components/ClientTile.tsx b/src/components/ClientTile.tsx index 6367b72..7644782 100644 --- a/src/components/ClientTile.tsx +++ b/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 = ({ client, link }: IProps) => { const className = classNames('clientTile', { clientTileLink: client.kind === ClientKind.LINKED_CLIENT, }); + + const inviteButton = + client.kind === ClientKind.LINKED_CLIENT ? ( + + ) : null; + let clientTile = ( {client.name @@ -44,6 +51,7 @@ const ClientTile: React.FC = ({ client, link }: IProps) => {

{client.name}

{client.description}

{inviteLine} + {inviteButton} ); diff --git a/src/components/FakeProgress.scss b/src/components/FakeProgress.scss new file mode 100644 index 0000000..32cd224 --- /dev/null +++ b/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; + } +} diff --git a/src/components/FakeProgress.tsx b/src/components/FakeProgress.tsx new file mode 100644 index 0000000..587a7e3 --- /dev/null +++ b/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 = () => ( +
+
+
+); + +export default FakeProgress; diff --git a/src/components/InviteTile.scss b/src/components/InviteTile.scss index 35d45c5..0421927 100644 --- a/src/components/InviteTile.scss +++ b/src/components/InviteTile.scss @@ -18,7 +18,11 @@ limitations under the License. display: grid; row-gap: 24px; - .advancedPlaceholder { - height: 245px; + .inviteTileClientSelection { + margin: 0 5%; + display: grid; + + justify-content: space-between; + row-gap: 20px; } } diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx index b719f7d..1311f9f 100644 --- a/src/components/InviteTile.tsx +++ b/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 = ({ 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 ? ( + + ) : ( + + ); } else { let inviteUseString: string; @@ -60,11 +65,7 @@ const InviteTile: React.FC = ({ children, client, link }: IProps) => { break; } - const advancedToggle = showAdvanced ? ( - setShowAdvanced(!showAdvanced)}> - Hide advanced options - - ) : ( + const advancedToggle = (

{inviteUseString} = ({ children, client, link }: IProps) => { ); } - if (client === null || showAdvanced) { - advanced = ; - advancedPlaceholder =

; + if (showAdvanced) { + if (client === null) { + advanced = ( + <> +

Pick an app to accept the invite with

+ + + ); + } else { + advanced = ( + <> +
+

Change app

+ + + ); + } } return ( @@ -93,9 +108,8 @@ const InviteTile: React.FC = ({ children, client, link }: IProps) => { {children} {invite} - {advancedPlaceholder} +
{advanced}
 - {advanced} ); }; diff --git a/src/index.scss b/src/index.scss index 2c9c506..a9b22d8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -49,6 +49,11 @@ h1 { text-align: center; } +h4 { + text-align: left; + width: 100%; +} + a { color: $link; text-decoration: none; diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss index 045504f..00edf39 100644 --- a/src/layouts/SingleColumn.scss +++ b/src/layouts/SingleColumn.scss @@ -10,9 +10,4 @@ row-gap: 60px; align-items: center; - - .advanced { - position: relative; - top: -335px; - } }