design nitpicks

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) {

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;
+    height: 60px;
-    width: 50px;
+    width: 60px;
+}
+
+.avatarNoCrop {
+    border-radius: 0;
 }

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;
         }
     }
 

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{' '}
+                        A homeserver will show you metadata about the link, like
-                        {link.identifier}. <br />
+                        a description. Homeservers will be able to relate your
-                        The homeserver will provide metadata about the link such
+                        IP to things you've opened invites for in matrix.to.
-                        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

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 =
+    const errorBool = meta.touched && meta.value !== '' && meta.error;
-        meta.touched && meta.error ? (
+    const error = errorBool ? (
-            <div className="inputError">{meta.error}</div>
+        <div className="inputError">{meta.error}</div>
-        ) : null;
+    ) : null;
 
     const classNames = classnames('input', className, {
-        error: meta.error,
+        error: errorBool,
         inputMuted: !!muted,
     });
 

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 {

src/components/InviteTile.tsx

@@ -87,8 +87,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
             advanced = (
                 <>
                     <hr />
-                    <h3>Almost done!</h3>
+                    <h2>Almost done!</h2>
-                    <p>Pick a client to open {link.identifier}</p>
+                    <p>Great, pick a client below to confirm and continue</p>
                     <ClientSelection link={link} />
                 </>
             );

src/components/RoomPreview.scss

@@ -16,16 +16,15 @@ limitations under the License.
 
 .roomPreview {
     > .avatar {
-        margin-top: 20px;
+        margin-bottom: 8px;
-        margin-bottom: 16px;
     }
 
     > h1 {
-        font-size: 20px;
+        font-size: 24px;
         margin-bottom: 4px;
     }
 }
 
 .roomTopic {
-    padding-top: 32px;
+    padding-top: 8px;
 }

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>
     );

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;
+    }
 }

src/components/Toggle.scss

@@ -37,4 +37,8 @@ limitations under the License.
             }
         }
     }
+
+    &:hover {
+        cursor: pointer;
+    }
 }

src/components/UserPreview.scss

@@ -20,12 +20,11 @@ limitations under the License.
     width: 100%;
 
     > .avatar {
-        margin-top: 20px;
+        margin-bottom: 8px;
-        margin-bottom: 16px;
     }
 
     h1 {
-        font-size: 20px;
+        font-size: 24px;
         margin-bottom: 4px;
     }
 

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,

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>
-                    <p>{link}</p>
+                        That URL doesn't seem right. Links should be in the
+                        format:
+                    </p>
+                    <br />
+                    <p>
+                        {location.host}/#/{'<'}matrix-resourceidentifier{'>'}
+                    </p>
                 </Tile>
             );
             break;