From 820d90ee86a30b5f0d130c69d6851a64e5362ebb Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 23 Oct 2020 16:56:32 +0100
Subject: [PATCH] Restyle link creation form

---
 src/App.tsx                        | 7 +------
 src/components/Button.scss         | 6 +++---
 src/components/CreateLinkTile.scss | 2 --
 src/components/Footer.scss         | 1 +
 src/components/Footer.tsx          | 4 ++--
 src/components/Input.scss          | 4 ++--
 src/components/MatrixTile.scss     | 6 ++++--
 src/components/MatrixTile.tsx      | 2 ++
 src/components/Tile.scss           | 1 +
 src/index.scss                     | 2 +-
 src/layouts/SingleColumn.scss      | 2 +-
 11 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 684787d..fe11e17 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,6 @@ import CreateLinkTile from './components/CreateLinkTile';
 import MatrixTile from './components/MatrixTile';
 import Tile from './components/Tile';
 import LinkRouter from './pages/LinkRouter';
-import Footer from './components/Footer';
 
 import './App.scss';
 
@@ -67,11 +66,7 @@ const App: React.FC = () => {
             <SingleColumn>
                 <div className="topSpacer" />
                 {page}
-                <div>
-                    <MatrixTile isLink={!!location.hash} />
-                    <br />
-                    <Footer />
-                </div>
+                <MatrixTile isLink={!!location.hash} />
                 <div className="bottomSpacer" />
             </SingleColumn>
         </GlobalContext>
diff --git a/src/components/Button.scss b/src/components/Button.scss
index c1a6d70..121eb35 100644
--- a/src/components/Button.scss
+++ b/src/components/Button.scss
@@ -21,13 +21,13 @@ limitations under the License.
 
     height: 48px;
 
-    border-radius: 2rem;
+    border-radius: 16px;
     border: 0;
 
-    background-color: $foreground;
+    background-color: $accent;
     color: $background;
 
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 500;
 
     &:hover {
diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss
index 0fba4fc..31d0259 100644
--- a/src/components/CreateLinkTile.scss
+++ b/src/components/CreateLinkTile.scss
@@ -17,8 +17,6 @@ limitations under the License.
 @import '../color-scheme';
 
 .createLinkTile {
-    background: none;
-
     row-gap: 24px;
 
     * {
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
index b416bbb..ba0f90b 100644
--- a/src/components/Footer.scss
+++ b/src/components/Footer.scss
@@ -21,6 +21,7 @@ limitations under the License.
     grid-auto-flow: column;
     justify-content: center;
     column-gap: 5px;
+    font-size: 11px;
 
     * {
         color: $font;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d76cbae..ca8dba5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -52,10 +52,10 @@ const Footer: React.FC = () => {
 
     return (
         <div className="footer">
-            <a href="https://github.com/matrix-org/matrix.to">GitHub</a>
+            <a href="https://github.com/matrix-org/matrix.to">GitHub project</a>
             {' · '}
             <a href="https://github.com/matrix-org/matrix.to/tree/main/src/clients">
-                Add your client
+                Add your app
             </a>
             {clear}
         </div>
diff --git a/src/components/Input.scss b/src/components/Input.scss
index f052af1..8163678 100644
--- a/src/components/Input.scss
+++ b/src/components/Input.scss
@@ -24,9 +24,9 @@ limitations under the License.
     background: $background;
 
     border: 1px solid $foreground;
-    font: lighten($grey, 60%);
-    border-radius: 24px;
+    border-radius: 16px;
 
+    font: lighten($grey, 60%);
     font-size: 14px;
     line-height: 24px;
 
diff --git a/src/components/MatrixTile.scss b/src/components/MatrixTile.scss
index 1b71ad4..6c8f17b 100644
--- a/src/components/MatrixTile.scss
+++ b/src/components/MatrixTile.scss
@@ -16,7 +16,9 @@ limitations under the License.
 
 .matrixTile {
     background: none;
-    row-gap: 8px;
-
+    box-shadow: none;
+    row-gap: 16px;
     padding: 0 40px;
+    justify-items: left;
+    text-align: left;
 }
diff --git a/src/components/MatrixTile.tsx b/src/components/MatrixTile.tsx
index 643e830..9808a09 100644
--- a/src/components/MatrixTile.tsx
+++ b/src/components/MatrixTile.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import Tile from './Tile';
+import Footer from './Footer';
 
 import logo from '../imgs/matrix-logo.svg';
 
@@ -43,6 +44,7 @@ const MatrixTile: React.FC<IProps> = ({ isLink }: IProps) => {
             <Tile className="matrixTile">
                 <img src={logo} alt="matrix-logo" />
                 {copy}
+                <Footer />
             </Tile>
         </div>
     );
diff --git a/src/components/Tile.scss b/src/components/Tile.scss
index a5dabae..e97d907 100644
--- a/src/components/Tile.scss
+++ b/src/components/Tile.scss
@@ -20,6 +20,7 @@ limitations under the License.
     background-color: $background;
 
     border-radius: 16px;
+    box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
     padding: 2rem;
 
     display: grid;
diff --git a/src/index.scss b/src/index.scss
index 9ac7302..7bbbad4 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -46,7 +46,7 @@ h1 {
     font-weight: bold;
     font-size: 24px;
     line-height: 32px;
-    text-align: center;
+    text-align: left;
     color: $foreground;
 }
 
diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss
index 00edf39..18a4202 100644
--- a/src/layouts/SingleColumn.scss
+++ b/src/layouts/SingleColumn.scss
@@ -4,7 +4,7 @@
     padding: 0 1em;
     margin: 0 auto;
 
-    max-width: 550px;
+    max-width: 480px;
 
     display: grid;
     row-gap: 60px;