From 7d9a9904f56c63d5a19de05a31832df2c167b5c3 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 25 Jun 2020 02:01:53 +0100 Subject: [PATCH] Add matrix logo --- src/App.scss | 4 ++-- src/App.tsx | 3 +++ src/components/CreateLinkTile.scss | 6 +++-- src/components/MatrixTile.scss | 22 ++++++++++++++++++ src/components/MatrixTile.tsx | 36 ++++++++++++++++++++++++++++++ src/components/Tile.scss | 5 ++--- src/imgs/matrix-logo.svg | 10 +++++++++ src/index.scss | 8 +++++++ src/layouts/SingleColumn.scss | 6 +++-- 9 files changed, 91 insertions(+), 9 deletions(-) create mode 100644 src/components/MatrixTile.scss create mode 100644 src/components/MatrixTile.tsx create mode 100644 src/imgs/matrix-logo.svg diff --git a/src/App.scss b/src/App.scss index dbfb868..00c13ac 100644 --- a/src/App.scss +++ b/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: 10vh; + height: 20vh; } .bottomSpacer { diff --git a/src/App.tsx b/src/App.tsx index 43dd368..f44cfa3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,12 +19,15 @@ import "./App.scss"; import SingleColumn from "./layouts/SingleColumn"; import CreateLinkTile from "./components/CreateLinkTile"; +import MatrixTile from "./components/MatrixTile"; const App: React.FC = () => { return (
+
+
); diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss index 7ad283d..d5aadc5 100644 --- a/src/components/CreateLinkTile.scss +++ b/src/components/CreateLinkTile.scss @@ -17,8 +17,9 @@ limitations under the License. .createLinkTile { background: none; - > * { - margin: 12px 0; + row-gap: 24px; + + * { width: 100%; } @@ -26,5 +27,6 @@ limitations under the License. display: grid; row-gap: 24px; align-self: center; + padding: 0 30px; } } diff --git a/src/components/MatrixTile.scss b/src/components/MatrixTile.scss new file mode 100644 index 0000000..1b71ad4 --- /dev/null +++ b/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; +} diff --git a/src/components/MatrixTile.tsx b/src/components/MatrixTile.tsx new file mode 100644 index 0000000..8855b95 --- /dev/null +++ b/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 ( + + matrix-logo +
+ Matrix.to is a stateless URL redirecting service for the{" "} + Matrix ecosystem. +
+ + ); +}; + +export default MatrixTile; diff --git a/src/components/Tile.scss b/src/components/Tile.scss index f3c5da0..57c22ee 100644 --- a/src/components/Tile.scss +++ b/src/components/Tile.scss @@ -22,9 +22,8 @@ limitations under the License. border-radius: 8px; padding: 1rem; - display: flex; - flex-direction: column; - align-items: center; + display: grid; + justify-items: center; text-align: center; } diff --git a/src/imgs/matrix-logo.svg b/src/imgs/matrix-logo.svg new file mode 100644 index 0000000..9f2c322 --- /dev/null +++ b/src/imgs/matrix-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/index.scss b/src/index.scss index 037d5af..9cbef8b 100644 --- a/src/index.scss +++ b/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; } @@ -49,3 +52,8 @@ a { color: $link; text-decoration: none; } + +hr { + border: 1px solid lighten($grey, 50); + margin: 0 40px; +} diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss index d28f7a9..00edf39 100644 --- a/src/layouts/SingleColumn.scss +++ b/src/layouts/SingleColumn.scss @@ -6,6 +6,8 @@ max-width: 550px; - display: flex; - flex-direction: column; + display: grid; + row-gap: 60px; + + align-items: center; }