From 1352feca21fb80f792474538befaf4bc2a1cd4ad Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 16 Sep 2020 13:58:14 +0100
Subject: [PATCH] design nitpicks
---
src/App.tsx | 4 ++++
src/components/Avatar.scss | 10 +++++++---
src/components/ClientTile.scss | 6 ++++--
src/components/HomeserverOptions.tsx | 14 ++++++--------
src/components/Input.tsx | 10 +++++-----
src/components/InviteTile.scss | 8 +++++++-
src/components/InviteTile.tsx | 4 ++--
src/components/RoomPreview.scss | 7 +++----
src/components/RoomPreview.tsx | 6 +++++-
src/components/TextButton.scss | 6 +++++-
src/components/Toggle.scss | 4 ++++
src/components/UserPreview.scss | 5 ++---
src/components/UserPreview.tsx | 6 +++++-
src/pages/LinkRouter.tsx | 12 ++++++++++--
14 files changed, 69 insertions(+), 33 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 46e5698..164190c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,8 +36,12 @@ const App: React.FC = () => {
</>
);
+ // Some hacky uri decoding
+ location.href = decodeURIComponent(location.href);
+
const [hash, setHash] = useState(location.hash);
+ console.log(hash);
useEffect(() => (window.onhashchange = () => setHash(location.hash)), []);
if (hash) {
diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss
index 7895a82..794064a 100644
--- a/src/components/Avatar.scss
+++ b/src/components/Avatar.scss
@@ -14,11 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-@import "../color-scheme";
+@import '../color-scheme';
.avatar {
border-radius: 100%;
border: 1px solid $borders;
- height: 50px;
- width: 50px;
+ height: 60px;
+ width: 60px;
+}
+
+.avatarNoCrop {
+ border-radius: 0;
}
diff --git a/src/components/ClientTile.scss b/src/components/ClientTile.scss
index 2beb41a..996c56f 100644
--- a/src/components/ClientTile.scss
+++ b/src/components/ClientTile.scss
@@ -45,12 +45,14 @@ limitations under the License.
}
p {
- margin-right: 20px;
+ margin-right: 8px;
text-align: left;
}
.button {
- width: 50%;
+ height: 40px;
+ width: 130px;
+ margin-top: 16px;
}
}
diff --git a/src/components/HomeserverOptions.tsx b/src/components/HomeserverOptions.tsx
index 23a5a6e..ab30a3c 100644
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@@ -41,7 +41,8 @@ function validateURL(values: FormValues): Partial<FormValues> {
try {
string().url().parse(values.HSUrl);
} catch {
- errors.HSUrl = 'This must be a valid url';
+ errors.HSUrl =
+ 'This must be a valid homeserver URL, starting with https://';
}
return errors;
}
@@ -74,7 +75,7 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
muted={!values.HSUrl}
type="text"
name="HSUrl"
- placeholder="https://example.com"
+ placeholder="Preferred homeserver URL"
/>
{values.HSUrl && !errors.HSUrl ? (
<Button secondary type="submit">
@@ -92,12 +93,9 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
<div>
<h3>About {link.identifier}</h3>
<p>
- 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.
+ A homeserver will show you metadata about the link, like
+ a description. Homeservers will be able to relate your
+ IP to things you've opened invites for in matrix.to.
</p>
</div>
<img
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index b094061..21ce342 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -29,13 +29,13 @@ interface IProps extends React.InputHTMLAttributes<HTMLElement> {
const Input: React.FC<IProps> = ({ className, muted, ...props }) => {
const [field, meta] = useField(props);
- const error =
- meta.touched && meta.error ? (
- <div className="inputError">{meta.error}</div>
- ) : null;
+ const errorBool = meta.touched && meta.value !== '' && meta.error;
+ const error = errorBool ? (
+ <div className="inputError">{meta.error}</div>
+ ) : null;
const classNames = classnames('input', className, {
- error: meta.error,
+ error: errorBool,
inputMuted: !!muted,
});
diff --git a/src/components/InviteTile.scss b/src/components/InviteTile.scss
index 6d23632..f9a8cdd 100644
--- a/src/components/InviteTile.scss
+++ b/src/components/InviteTile.scss
@@ -14,16 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+@import '../color-scheme';
+
.inviteTile {
display: grid;
row-gap: 24px;
.inviteTileClientSelection {
- margin: 0 5%;
+ margin: 0 auto;
display: grid;
justify-content: space-between;
row-gap: 20px;
+
+ h2 + p {
+ color: $foreground;
+ }
}
hr {
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index fad18a4..269e47e 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -87,8 +87,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
advanced = (
<>
<hr />
- <h3>Almost done!</h3>
- <p>Pick a client to open {link.identifier}</p>
+ <h2>Almost done!</h2>
+ <p>Great, pick a client below to confirm and continue</p>
<ClientSelection link={link} />
</>
);
diff --git a/src/components/RoomPreview.scss b/src/components/RoomPreview.scss
index ef82fb9..b7e7b36 100644
--- a/src/components/RoomPreview.scss
+++ b/src/components/RoomPreview.scss
@@ -16,16 +16,15 @@ limitations under the License.
.roomPreview {
> .avatar {
- margin-top: 20px;
- margin-bottom: 16px;
+ margin-bottom: 8px;
}
> h1 {
- font-size: 20px;
+ font-size: 24px;
margin-bottom: 4px;
}
}
.roomTopic {
- padding-top: 32px;
+ padding-top: 8px;
}
diff --git a/src/components/RoomPreview.tsx b/src/components/RoomPreview.tsx
index e7e5404..2874f2b 100644
--- a/src/components/RoomPreview.tsx
+++ b/src/components/RoomPreview.tsx
@@ -31,11 +31,15 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
: room.aliases
? room.aliases[0]
: room.room_id;
+ const members =
+ room.num_joined_members > 0 ? (
+ <p>{room.num_joined_members.toLocaleString()} members</p>
+ ) : null;
return (
<div className="roomPreview">
<RoomAvatar room={room} />
<h1>{room.name ? room.name : roomAlias}</h1>
- <p>{room.num_joined_members.toLocaleString()} members</p>
+ {members}
<p>{roomAlias}</p>
</div>
);
diff --git a/src/components/TextButton.scss b/src/components/TextButton.scss
index a5168e0..cdaed54 100644
--- a/src/components/TextButton.scss
+++ b/src/components/TextButton.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-@import "../color-scheme";
+@import '../color-scheme';
.textButton {
background: none;
@@ -24,4 +24,8 @@ limitations under the License.
font-weight: normal;
font-size: 14px;
line-height: 24px;
+
+ &:hover {
+ cursor: pointer;
+ }
}
diff --git a/src/components/Toggle.scss b/src/components/Toggle.scss
index e4601b2..5d82223 100644
--- a/src/components/Toggle.scss
+++ b/src/components/Toggle.scss
@@ -37,4 +37,8 @@ limitations under the License.
}
}
}
+
+ &:hover {
+ cursor: pointer;
+ }
}
diff --git a/src/components/UserPreview.scss b/src/components/UserPreview.scss
index 3ff72b6..c711e5a 100644
--- a/src/components/UserPreview.scss
+++ b/src/components/UserPreview.scss
@@ -20,12 +20,11 @@ limitations under the License.
width: 100%;
> .avatar {
- margin-top: 20px;
- margin-bottom: 16px;
+ margin-bottom: 8px;
}
h1 {
- font-size: 20px;
+ font-size: 24px;
margin-bottom: 4px;
}
diff --git a/src/components/UserPreview.tsx b/src/components/UserPreview.tsx
index 6f90e19..b1a38ee 100644
--- a/src/components/UserPreview.tsx
+++ b/src/components/UserPreview.tsx
@@ -53,7 +53,11 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
const avatar = user ? (
<UserAvatar user={user} userId={userId} />
) : (
- <Avatar label={`Placeholder icon for ${userId}`} avatarUrl={icon} />
+ <Avatar
+ className="avatarNoCrop"
+ label={`Placeholder icon for ${userId}`}
+ avatarUrl={icon}
+ />
);
const className = classNames('miniUserPreview', {
centeredMiniUserPreview: !user,
diff --git a/src/pages/LinkRouter.tsx b/src/pages/LinkRouter.tsx
index ae797aa..cf3b4d6 100644
--- a/src/pages/LinkRouter.tsx
+++ b/src/pages/LinkRouter.tsx
@@ -22,6 +22,8 @@ import InvitingClientTile from '../components/InvitingClientTile';
import { parseHash } from '../parser/parser';
import { LinkKind } from '../parser/types';
+/* eslint-disable no-restricted-globals */
+
interface IProps {
link: string;
}
@@ -36,8 +38,14 @@ const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
case LinkKind.ParseFailed:
feedback = (
<Tile>
- <h1>Invalid matrix.to link</h1>
- <p>{link}</p>
+ <p>
+ That URL doesn't seem right. Links should be in the
+ format:
+ </p>
+ <br />
+ <p>
+ {location.host}/#/{'<'}matrix-resourceidentifier{'>'}
+ </p>
</Tile>
);
break;
--
GitLab