Merge pull request #88 from matrix-org/matrixtwo/basic-components

Add landing page

.eslintrc.js

@@ -1,39 +1,7 @@
 module.exports = {
-    parser: "@typescript-eslint/parser",
+    "extends": [
-    parserOptions: {
+        "matrix-org/ts",
-        sourceType: "module",
+        "matrix-org/react",
-    },
-    env: {
-        browser: true,
-        jest: true,
-    },
-    extends: ["eslint:recommended", "google"],
-    plugins: [
-        "jest",
     ],
-    rules: {
-        "max-len": ["error", {
-            code: 90,
-            ignoreComments: true,
-        }],
-        curly: ["error", "multi-line"],
-        "prefer-const": ["error"],
-        "comma-dangle": ["error", {
-            arrays: "always-multiline",
-            objects: "always-multiline",
-            imports: "always-multiline",
-            exports: "always-multiline",
-            functions: "always-multiline",
-        }],
-        quotes: ["single"],
-        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
-        "camelcase": ["error", { properties: "always" } ],
-        "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
-        "space-before-function-paren": ["error", {
-            "anonymous": "never",
-            "named": "never",
-            "asyncArrow": "always",
-        }],
-        "arrow-parens": "error",
-    }
 }
+

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

README.md

@@ -43,4 +43,4 @@ practice for legibility we bend the rules and include it verbatim)
 You can discuss matrix.to in
 [`#matrix.to:matrix.org`](https://matrix.to/#/#matrix.to:matrix.org)
 
-
+A development build of matrix-two can be found at https://matrix-to.vercel.app

package.json

@@ -3,27 +3,28 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
+        "classnames": "^2.2.6",
-    "@testing-library/react": "^9.3.2",
+        "formik": "^2.1.4",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-scripts": "3.4.1",
-    "typescript": "~3.7.2"
+        "yup": "^0.29.1"
     },
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test",
-    "eject": "react-scripts eject"
+        "eject": "react-scripts eject",
+        "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix"
     },
     "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+        "src/**/*.{js,jsx,ts,tsx}": [
-      "prettier --write",
+            "eslint --fix",
+            "prettier --write --tab-width 4",
+            "git add"
+        ],
+        "src/**/*.{json,css,scss,md}": [
+            "prettier --write --tab-width 4",
             "git add"
         ]
     },
@@ -32,9 +33,6 @@
             "pre-commit": "lint-staged"
         }
     },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
     "browserslist": {
         "production": [
             ">0.2%",
@@ -48,10 +46,20 @@
         ]
     },
     "devDependencies": {
-    "@typescript-eslint/parser": "^3.0.2",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.3.2",
+        "@testing-library/user-event": "^7.1.2",
+        "@types/classnames": "^2.2.10",
+        "@types/jest": "^24.0.0",
+        "@types/node": "^12.0.0",
+        "@types/react": "^16.9.0",
+        "@types/react-dom": "^16.9.0",
+        "@types/yup": "^0.29.3",
+        "eslint-config-matrix-org": "^0.1.0",
         "husky": "^4.2.5",
         "lint-staged": "^10.2.7",
         "node-sass": "^4.14.1",
-    "prettier": "^2.0.5"
+        "prettier": "^2.0.5",
+        "typescript": "~3.7.2"
     }
 }

src/App.scss

@@ -16,14 +16,14 @@ limitations under the License.
 
 @mixin spacer {
     width: 100%;
-  flex-grow: 1;
+    flex-grow: 0;
     flex-shrink: 0;
 }
 
 .topSpacer {
     @include spacer;
 
-  height: 30vh;
+    height: 20vh;
 }
 
 .bottomSpacer {

src/App.tsx

@@ -18,14 +18,19 @@ import React from "react";
 import "./App.scss";
 
 import SingleColumn from "./layouts/SingleColumn";
+import CreateLinkTile from "./components/CreateLinkTile";
+import MatrixTile from "./components/MatrixTile";
 
-function App() {
+const App: React.FC = () => {
     return (
         <SingleColumn>
             <div className="topSpacer" />
+            <CreateLinkTile />
+            <hr />
+            <MatrixTile />
             <div className="bottomSpacer" />
         </SingleColumn>
     );
-}
+};
 
 export default App;

src/_color-scheme.scss

@@ -1,6 +1,24 @@
+/*
+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.
+*/
+
 $app-background: #f4f4f4;
 $background: #ffffff;
 $foreground: #000000;
 $font: #333333;
 $grey: #666666;
 $accent: #0098d4;
+$error: #d6001c;
+$link: #0098d4;

src/_error.scss

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+@mixin error {
+    color: $error;
+    border-color: $error;
+}

src/components/Button.scss

@@ -0,0 +1,35 @@
+/*
+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";
+
+.button {
+    width: 100%;
+
+    padding: 1rem;
+    border-radius: 2rem;
+    border: 0;
+
+    background-color: $foreground;
+    color: $background;
+
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.buttonHighlight {
+    background-color: $accent;
+}

src/components/Button.tsx

@@ -0,0 +1,69 @@
+/*
+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 classnames from "classnames";
+
+import "./Button.scss";
+
+interface IProps extends React.ButtonHTMLAttributes<Element> {
+    // Briefly display these instead of the children onClick
+    flashChildren?: React.ReactNode;
+}
+
+/**
+ * Like a normal button except it will flash content when clicked.
+ */
+const Button: React.FC<
+    IProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef(
+    (
+        { onClick, children, flashChildren, className, ...props }: IProps,
+        ref: React.Ref<HTMLButtonElement>
+    ) => {
+        const [wasClicked, setWasClicked] = React.useState(false);
+
+        const wrappedOnClick: React.MouseEventHandler = (e) => {
+            if (onClick) {
+                onClick(e);
+            }
+
+            setWasClicked(true);
+            window.setTimeout(() => {
+                setWasClicked(false);
+            }, 1000);
+        };
+
+        const content = wasClicked && flashChildren ? flashChildren : children;
+
+        const classNames = classnames("button", className, {
+            buttonHighlight: wasClicked,
+        });
+
+        return (
+            <button
+                className={classNames}
+                onClick={wrappedOnClick}
+                ref={ref}
+                {...props}
+            >
+                {content}
+            </button>
+        );
+    }
+);
+
+export default Button;

src/components/CreateLinkTile.scss

@@ -0,0 +1,32 @@
+/*
+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.
+*/
+
+.createLinkTile {
+    background: none;
+
+    row-gap: 24px;
+
+    * {
+        width: 100%;
+    }
+
+    > form {
+        display: grid;
+        row-gap: 24px;
+        align-self: center;
+        padding: 0 30px;
+    }
+}

src/components/CreateLinkTile.tsx

@@ -0,0 +1,116 @@
+/*
+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, { useEffect, useRef } from "react";
+import Tile from "./Tile";
+import Button from "./Button";
+import TextButton from "./TextButton";
+import Input from "./Input";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+import "./CreateLinkTile.scss";
+
+interface ILinkNotCreatedTileProps {
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => {
+    return (
+        <Tile className="createLinkTile">
+            <h1>
+                Create shareable links to Matrix rooms, users or messages
+                without being tied to any app
+            </h1>
+            <Formik
+                initialValues={{
+                    identifier: "",
+                }}
+                validationSchema={Yup.object({
+                    identifier: Yup.string()
+                        .test(
+                            "is-identifier",
+                            "That link doesn't look right. Double check the details.",
+                            (link) => link
+                        )
+                        .required("Required"),
+                })}
+                onSubmit={(values) => {
+                    props.setLink(
+                        document.location.protocol +
+                            "//" +
+                            document.location.host +
+                            "/" +
+                            values.identifier
+                    );
+                }}
+            >
+                <Form>
+                    <Input
+                        name={"identifier"}
+                        type={"text"}
+                        placeholder="#room:example.com, @user:example.com"
+                    />
+                    <Button type="submit">Get Link</Button>
+                </Form>
+            </Formik>
+        </Tile>
+    );
+};
+
+interface ILinkCreatedTileProps {
+    link: string;
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus button on render
+    useEffect(() => {
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    });
+
+    return (
+        <Tile className="createLinkTile">
+            <TextButton onClick={() => props.setLink("")}>
+                Create another lnk
+            </TextButton>
+            <h1>{props.link}</h1>
+            <Button
+                flashChildren={"Copied"}
+                onClick={() => navigator.clipboard.writeText(props.link)}
+                ref={buttonRef}
+            >
+                Copy Link
+            </Button>
+        </Tile>
+    );
+};
+
+const CreateLinkTile: React.FC = () => {
+    const [link, setLink] = React.useState("");
+    console.log(link);
+    if (!link) {
+        return <LinkNotCreatedTile setLink={setLink} />;
+    } else {
+        return <LinkCreatedTile link={link} setLink={setLink} />;
+    }
+};
+
+export default CreateLinkTile;

src/components/Input.scss

@@ -0,0 +1,40 @@
+/*
+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";
+@import "../error";
+
+.input {
+    width: 100%;
+    padding: 12px;
+
+    background: $background;
+
+    border: 1px solid $font;
+    border-radius: 24px;
+
+    font-size: 14px;
+    line-height: 24px;
+
+    &.error {
+        @include error;
+    }
+}
+
+.inputError {
+    @include error;
+    text-align: center;
+}

src/components/Input.tsx

@@ -0,0 +1,48 @@
+/*
+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 classnames from "classnames";
+import { useField } from "formik";
+
+import "./Input.scss";
+
+interface IProps extends React.InputHTMLAttributes<Element> {
+    name: string;
+    type: string;
+}
+
+const Input: React.FC<IProps> = ({ className, ...props }) => {
+    const [field, meta] = useField(props);
+
+    const error =
+        meta.touched && meta.error ? (
+            <div className="inputError">{meta.error}</div>
+        ) : null;
+
+    const classNames = classnames("input", className, {
+        error: meta.error,
+    });
+
+    return (
+        <>
+            <input type="text" className={classNames} {...field} {...props} />
+            {error}
+        </>
+    );
+};
+
+export default Input;

src/components/MatrixTile.scss

@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+.matrixTile {
+    background: none;
+    row-gap: 8px;
+
+    padding: 0 40px;
+}

src/components/MatrixTile.tsx

@@ -0,0 +1,36 @@
+/*
+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 Tile from "./Tile";
+
+import logo from "../imgs/matrix-logo.svg";
+
+import "./MatrixTile.scss";
+
+const MatrixTile: React.FC = () => {
+    return (
+        <Tile className="matrixTile">
+            <img src={logo} alt="matrix-logo" />
+            <div>
+                Matrix.to is a stateless URL redirecting service for the{" "}
+                <a href="https://matrix.org">Matrix</a> ecosystem.
+            </div>
+        </Tile>
+    );
+};
+
+export default MatrixTile;

src/components/TextButton.scss

@@ -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 "../color-scheme";
+
+.textButton {
+    background: none;
+    border: none;
+    color: $link;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 24px;
+}

src/components/TextButton.tsx

@@ -0,0 +1,30 @@
+/*
+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 classnames from "classnames";
+
+import "./TextButton.scss";
+
+const TextButton: React.FC<React.ButtonHTMLAttributes<Element>> = ({
+    className,
+    ...props
+}) => {
+    return (
+        <button className={classnames("textButton", className)} {...props} />
+    );
+};
+export default TextButton;

src/components/Tile.scss

@@ -0,0 +1,29 @@
+/*
+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";
+
+.tile {
+    background-color: $background;
+
+    border-radius: 8px;
+    padding: 1rem;
+
+    display: grid;
+    justify-items: center;
+
+    text-align: center;
+}

src/components/Tile.tsx

@@ -0,0 +1,35 @@
+/*
+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 classnames from "classnames";
+
+import "./Tile.scss";
+
+interface IProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+const Tile: React.FC<IProps> = (props: IProps) => {
+    return (
+        <div className={classnames("tile", props.className)}>
+            {props.children}
+        </div>
+    );
+};
+
+export default Tile;

src/imgs/matrix-logo.svg

@@ -0,0 +1,10 @@
+<svg width="66" height="28" viewBox="0 0 66 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.975097 0.640961V27.359H2.89517V28H0.238281V0H2.89517V0.640961H0.975097Z" fill="#2D2D2D"/>
+<path d="M8.37266 9.11071V10.4628H8.4111C8.7712 9.94812 9.20494 9.54849 9.71306 9.26518C10.2208 8.98235 10.8029 8.84036 11.4586 8.84036C12.0885 8.84036 12.664 8.96298 13.1846 9.2074C13.7054 9.45223 14.1009 9.88336 14.371 10.5015C14.6665 10.0638 15.0683 9.67744 15.5764 9.34266C16.0842 9.00804 16.6852 8.84036 17.3797 8.84036C17.9069 8.84036 18.3953 8.90487 18.8457 9.03365C19.2955 9.16242 19.6812 9.36843 20.0027 9.65166C20.3239 9.93515 20.5746 10.3053 20.755 10.7621C20.9349 11.2196 21.025 11.7698 21.025 12.4139V19.0966H18.2861V13.4373C18.2861 13.1027 18.2734 12.7872 18.2475 12.4908C18.2216 12.1949 18.1512 11.9375 18.0354 11.7183C17.9196 11.4996 17.7491 11.3256 17.5243 11.1967C17.2993 11.0684 16.9938 11.0037 16.6081 11.0037C16.2225 11.0037 15.9106 11.0782 15.6727 11.2257C15.4346 11.374 15.2483 11.5673 15.1134 11.8052C14.9784 12.0438 14.8884 12.314 14.8435 12.6168C14.7982 12.9192 14.7759 13.2252 14.7759 13.5342V19.0966H12.0372V13.4955C12.0372 13.1994 12.0305 12.9063 12.0181 12.6168C12.005 12.3269 11.9506 12.0598 11.8539 11.815C11.7575 11.5706 11.5967 11.374 11.3717 11.2257C11.1467 11.0782 10.8156 11.0037 10.3785 11.0037C10.2497 11.0037 10.0794 11.0327 9.86746 11.0908C9.65528 11.1487 9.44941 11.2584 9.25027 11.4191C9.05071 11.5802 8.88053 11.812 8.73908 12.1143C8.59754 12.4171 8.5269 12.8128 8.5269 13.3021V19.0966H5.78833V9.11071H8.37266Z" fill="#2D2D2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8596 9.55506C23.4223 9.81286 23.0621 10.1539 22.7794 10.5789C22.4962 11.0036 22.3357 11.5382 22.2974 12.1818H25.036C25.0872 11.6412 25.2676 11.2547 25.5761 11.023C25.8847 10.7912 26.309 10.6752 26.8491 10.6752C27.0931 10.6752 27.3215 10.6917 27.5338 10.7234C27.7458 10.7558 27.9322 10.8202 28.093 10.9167C28.2537 11.0132 28.3823 11.1487 28.4787 11.3224C28.5752 11.4962 28.6233 11.7313 28.6233 12.0273C28.6359 12.3108 28.5523 12.5264 28.3726 12.6745C28.1924 12.8227 27.9483 12.9352 27.6397 13.0124C27.3311 13.0897 26.9774 13.1477 26.5789 13.1864C26.1802 13.225 25.7753 13.2766 25.3638 13.3408C24.9523 13.4056 24.5441 13.4923 24.1392 13.6016C23.734 13.711 23.374 13.8752 23.0592 14.094C22.7437 14.3131 22.4867 14.6059 22.2876 14.9731C22.0879 15.3398 21.9884 15.8067 21.9884 16.3731C21.9884 16.8879 22.0753 17.3326 22.2489 17.706C22.4225 18.0793 22.6635 18.3884 22.9722 18.6327C23.2807 18.8778 23.6406 19.0579 24.0522 19.1739C24.4636 19.2896 24.9072 19.3476 25.3831 19.3476C26.0003 19.3476 26.6046 19.2572 27.1963 19.0774C27.7873 18.897 28.3018 18.5815 28.739 18.1308C28.7517 18.2983 28.7741 18.4625 28.8065 18.6232C28.8385 18.7843 28.8804 18.9418 28.932 19.0965H31.7091C31.5805 18.8906 31.4903 18.5815 31.4393 18.1693C31.3877 17.7573 31.362 17.3264 31.362 16.8751V11.6798C31.362 11.0745 31.227 10.5883 30.957 10.2214C30.6868 9.85459 30.3398 9.56787 29.9155 9.36194C29.4911 9.15619 29.0217 9.0176 28.5074 8.94652C27.9931 8.87594 27.4854 8.84036 26.9838 8.84036C26.431 8.84036 25.8812 8.89531 25.3348 9.00463C24.7882 9.1142 24.2966 9.2976 23.8596 9.55506ZM27.6302 14.5965C27.8293 14.5578 28.0159 14.5096 28.1893 14.4518C28.363 14.3937 28.5076 14.3134 28.6235 14.21V15.2339C28.6235 15.3884 28.6072 15.5944 28.5754 15.8519C28.5431 16.1098 28.4562 16.3636 28.3149 16.6146C28.1732 16.8659 27.9548 17.0817 27.6592 17.2618C27.3632 17.4423 26.9455 17.5322 26.4055 17.5322C26.1868 17.5322 25.9747 17.5129 25.7692 17.4742C25.5632 17.4358 25.3833 17.368 25.2291 17.2715C25.0748 17.175 24.9525 17.0431 24.8625 16.8754C24.7724 16.7084 24.7275 16.502 24.7275 16.2576C24.7275 16.0001 24.7724 15.7876 24.8625 15.6201C24.9525 15.4531 25.0713 15.3145 25.2194 15.205C25.3671 15.0956 25.5407 15.0089 25.7402 14.9441C25.9393 14.88 26.1418 14.828 26.3476 14.7897C26.566 14.7511 26.7846 14.719 27.0034 14.693C27.2219 14.6674 27.4308 14.6352 27.6302 14.5965Z" fill="#2D2D2D"/>
+<path d="M38.5753 9.11176V10.9467H36.5696V15.8914C36.5696 16.3547 36.6467 16.6639 36.8011 16.8183C36.9552 16.9728 37.264 17.05 37.7268 17.05C37.8812 17.05 38.0288 17.0437 38.1704 17.0307C38.3117 17.0181 38.4468 16.9985 38.5753 16.9729V19.0975C38.3439 19.1362 38.0866 19.1618 37.8039 19.1749C37.521 19.1873 37.2446 19.194 36.9746 19.194C36.5503 19.194 36.1484 19.1649 35.7692 19.1069C35.3897 19.0491 35.0555 18.9367 34.7663 18.7691C34.4769 18.602 34.2486 18.3635 34.0816 18.0544C33.9143 17.7457 33.8308 17.3399 33.8308 16.8375V10.9467H32.1722V9.11176H33.8308V6.11795H36.5696V9.11176H38.5753Z" fill="#2D2D2D"/>
+<path d="M42.4905 9.11088V10.9652H42.5291C42.6575 10.6559 42.831 10.3697 43.0498 10.1055C43.2684 9.84179 43.519 9.61625 43.8019 9.42953C44.0845 9.24315 44.3869 9.09824 44.7086 8.99491C45.0297 8.89207 45.3642 8.84036 45.7115 8.84036C45.8914 8.84036 46.0905 8.87278 46.3093 8.93705V11.4868C46.1806 11.4608 46.0263 11.4382 45.8465 11.4191C45.6663 11.3997 45.4928 11.39 45.3256 11.39C44.8242 11.39 44.3999 11.474 44.0529 11.6411C43.7057 11.8086 43.4262 12.0369 43.2139 12.3267C43.0018 12.6166 42.8504 12.9544 42.7605 13.3408C42.6706 13.727 42.6256 14.1457 42.6256 14.5963V19.0966H39.8869V9.11088H42.4905Z" fill="#2D2D2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.467 5.3064V7.56622H50.2059V5.3064H47.467ZM50.2054 19.0974V9.11166H47.4665V19.0974H50.2054Z" fill="#2D2D2D"/>
+<path d="M51.6319 9.1106H54.7563L56.5115 11.7181L58.2473 9.1106H61.2753L57.9966 13.7849L61.6805 19.0964H58.5559L56.4729 15.9482L54.3898 19.0964H51.3235L54.9107 13.843L51.6319 9.1106Z" fill="#2D2D2D"/>
+<path d="M65.0246 27.359V0.640961H63.1046V0H65.7616V28H63.1046V27.359H65.0246Z" fill="#2D2D2D"/>
+</svg>

src/index.scss

@@ -34,6 +34,9 @@ body,
     font-family: Helvetica Neue;
     font-style: normal;
 
+    font-size: 14px;
+    line-height: 24px;
+
     background-color: $app-background;
     color: $font;
 }
@@ -44,3 +47,13 @@ h1 {
     line-height: 32px;
     text-align: center;
 }
+
+a {
+    color: $link;
+    text-decoration: none;
+}
+
+hr {
+    border: 1px solid lighten($grey, 50);
+    margin: 0 40px;
+}

src/layouts/SingleColumn.scss

@@ -6,6 +6,8 @@
 
     max-width: 550px;
 
-  display: flex;
+    display: grid;
-  flex-direction: column;
+    row-gap: 60px;
+
+    align-items: center;
 }

src/layouts/SingleColumn.tsx

@@ -22,6 +22,8 @@ interface IProps {
     children?: React.ReactNode;
 }
 
-export default (props: IProps) => {
+const SingleColumn: React.FC<IProps> = (props: IProps) => {
     return <div className="singleColumnLayout">{props.children}</div>;
 };
+
+export default SingleColumn;