Restyle link creation form

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>
                 <div className="bottomSpacer" />
             </SingleColumn>
         </GlobalContext>

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 {

src/components/CreateLinkTile.scss

@@ -17,8 +17,6 @@ limitations under the License.
 @import '../color-scheme';
 
 .createLinkTile {
-    background: none;
-
     row-gap: 24px;
 
     * {

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;

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>

src/components/Input.scss

@@ -24,9 +24,9 @@ limitations under the License.
     background: $background;
 
     border: 1px solid $foreground;
-    font: lighten($grey, 60%);
+    border-radius: 16px;
-    border-radius: 24px;
 
+    font: lighten($grey, 60%);
     font-size: 14px;
     line-height: 24px;
 

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

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

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;

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

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;