From 820d90ee86a30b5f0d130c69d6851a64e5362ebb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" 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 = () => {
{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) => { matrix-logo {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;