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 = () => {
{page}
-
-
-
-
-
+
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 (
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 = ({ isLink }: IProps) => {
{copy}
+
);
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;