Restyle link creation form

This commit is contained in:
J. Ryan Stinnett 2020-10-23 16:56:32 +01:00
parent 6d0acdafce
commit 820d90ee86
11 changed files with 18 additions and 19 deletions

View File

@ -21,7 +21,6 @@ import CreateLinkTile from './components/CreateLinkTile';
import MatrixTile from './components/MatrixTile'; import MatrixTile from './components/MatrixTile';
import Tile from './components/Tile'; import Tile from './components/Tile';
import LinkRouter from './pages/LinkRouter'; import LinkRouter from './pages/LinkRouter';
import Footer from './components/Footer';
import './App.scss'; import './App.scss';
@ -67,11 +66,7 @@ const App: React.FC = () => {
<SingleColumn> <SingleColumn>
<div className="topSpacer" /> <div className="topSpacer" />
{page} {page}
<div>
<MatrixTile isLink={!!location.hash} /> <MatrixTile isLink={!!location.hash} />
<br />
<Footer />
</div>
<div className="bottomSpacer" /> <div className="bottomSpacer" />
</SingleColumn> </SingleColumn>
</GlobalContext> </GlobalContext>

View File

@ -21,13 +21,13 @@ limitations under the License.
height: 48px; height: 48px;
border-radius: 2rem; border-radius: 16px;
border: 0; border: 0;
background-color: $foreground; background-color: $accent;
color: $background; color: $background;
font-size: 14px; font-size: 15px;
font-weight: 500; font-weight: 500;
&:hover { &:hover {

View File

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

View File

@ -21,6 +21,7 @@ limitations under the License.
grid-auto-flow: column; grid-auto-flow: column;
justify-content: center; justify-content: center;
column-gap: 5px; column-gap: 5px;
font-size: 11px;
* { * {
color: $font; color: $font;

View File

@ -52,10 +52,10 @@ const Footer: React.FC = () => {
return ( return (
<div className="footer"> <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"> <a href="https://github.com/matrix-org/matrix.to/tree/main/src/clients">
Add your client Add your app
</a> </a>
{clear} {clear}
</div> </div>

View File

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

View File

@ -16,7 +16,9 @@ limitations under the License.
.matrixTile { .matrixTile {
background: none; background: none;
row-gap: 8px; box-shadow: none;
row-gap: 16px;
padding: 0 40px; padding: 0 40px;
justify-items: left;
text-align: left;
} }

View File

@ -16,6 +16,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import Tile from './Tile'; import Tile from './Tile';
import Footer from './Footer';
import logo from '../imgs/matrix-logo.svg'; import logo from '../imgs/matrix-logo.svg';
@ -43,6 +44,7 @@ const MatrixTile: React.FC<IProps> = ({ isLink }: IProps) => {
<Tile className="matrixTile"> <Tile className="matrixTile">
<img src={logo} alt="matrix-logo" /> <img src={logo} alt="matrix-logo" />
{copy} {copy}
<Footer />
</Tile> </Tile>
</div> </div>
); );

View File

@ -20,6 +20,7 @@ limitations under the License.
background-color: $background; background-color: $background;
border-radius: 16px; border-radius: 16px;
box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
padding: 2rem; padding: 2rem;
display: grid; display: grid;

View File

@ -46,7 +46,7 @@ h1 {
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: left;
color: $foreground; color: $foreground;
} }

View File

@ -4,7 +4,7 @@
padding: 0 1em; padding: 0 1em;
margin: 0 auto; margin: 0 auto;
max-width: 550px; max-width: 480px;
display: grid; display: grid;
row-gap: 60px; row-gap: 60px;