Skip to content
Snippets Groups Projects
Commit 820d90ee authored by J. Ryan Stinnett's avatar J. Ryan Stinnett
Browse files

Restyle link creation form

parent 6d0acdaf
No related branches found
No related tags found
No related merge requests found
......@@ -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>
<MatrixTile isLink={!!location.hash} />
<div className="bottomSpacer" />
</SingleColumn>
</GlobalContext>
......
......@@ -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 {
......
......@@ -17,8 +17,6 @@ limitations under the License.
@import '../color-scheme';
.createLinkTile {
background: none;
row-gap: 24px;
* {
......
......@@ -21,6 +21,7 @@ limitations under the License.
grid-auto-flow: column;
justify-content: center;
column-gap: 5px;
font-size: 11px;
* {
color: $font;
......
......@@ -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>
......
......@@ -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;
......
......@@ -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;
}
......@@ -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>
);
......
......@@ -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;
......
......@@ -46,7 +46,7 @@ h1 {
font-weight: bold;
font-size: 24px;
line-height: 32px;
text-align: center;
text-align: left;
color: $foreground;
}
......
......@@ -4,7 +4,7 @@
padding: 0 1em;
margin: 0 auto;
max-width: 550px;
max-width: 480px;
display: grid;
row-gap: 60px;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment