diff --git a/src/App.scss b/src/App.scss
index 6b61de3ddae386f4fc39d6b57cbc78d68b6703db..7179a17d6a02df1600dbea84a2c5f61975d6d44b 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 47543592eca0f56e19793278b4bc532f587aafcd..f4977b731c414e0ef774f330a5b1251f2ee0d8c6 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 794ba0a6b8bdbe3219453f80614fcf74d32f21e1..8a41d4a3302f228806dd4270697e1a2611dd9540 100644
--- a/src/components/ClientSelection.tsx
+++ b/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>
diff --git a/src/components/ClientTile.scss b/src/components/ClientTile.scss
index 18a8be053f669ed6a61027d858a3980895165345..0b8f0916f9cc33988d8ad87158669602c04f7411 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;
- }
-
- p {
- margin-right: 20px;
- margin-top: 20px;
- text-align: left;
+ > div {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ h1 {
+ text-align: left;
+ font-size: 14px;
+ line-height: 24px;
+ }
+
+ 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 6367b72bd748507a62cc21fd22fb07cd3c7f3c4a..7644782c187f1500c598c4dbb63623cafdbf6c6b 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<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>
);
diff --git a/src/components/FakeProgress.scss b/src/components/FakeProgress.scss
new file mode 100644
index 0000000000000000000000000000000000000000..32cd224414d2038c35d6133bb061cf6348ef20d9
--- /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 0000000000000000000000000000000000000000..587a7e3419fdcb9a8358f7ba9b7ad132915b00b3
--- /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 = () => (
+ <div className="fakeProgress">
+ <div />
+ </div>
+);
+
+export default FakeProgress;
diff --git a/src/components/InviteTile.scss b/src/components/InviteTile.scss
index 35d45c57edb80155eeef76a820618c5037829b07..042192719668df728970908d6fa01858072f8002 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 b719f7d2a065abf35d721bff81e24440582e0d41..1311f9f39710d9c8f1b79c03123aea77a51740c1 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<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 ? (
- <TextButton onClick={(): void => setShowAdvanced(!showAdvanced)}>
- Hide advanced options
- </TextButton>
- ) : (
+ const advancedToggle = (
<p>
{inviteUseString}
<TextButton
@@ -83,9 +84,23 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
);
}
- if (client === null || showAdvanced) {
- advanced = <ClientSelection link={link} />;
- advancedPlaceholder = <div className="advancedPlaceholder" />;
+ if (showAdvanced) {
+ if (client === null) {
+ 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}
</>
);
};
diff --git a/src/index.scss b/src/index.scss
index 2c9c50645cffc9be6f901bf8ac878a34c5f1a0b4..a9b22d8629edaab6f1da73e81245b5a9e20e5a0e 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 045504f21bfe45ed5bd5613927028f553c17b525..00edf39fa1c288324379cbf6ee447f6254eb7d23 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;
- }
}