cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve Home design.

Browse source
This commit is contained in:
Paul 2021-08-17 13:52:02 +01:00
parent 745b03452b
commit e12efe3533
2 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/pages/home/Home.module.scss
View file

@ -13,11 +13,17 @@
.actions { .actions {
gap: 8px; gap: 8px;
min-width: 240px;
margin: auto; margin: auto;
display: flex; display: flex;
width: fit-content; width: fit-content;
align-items: center; align-items: stretch;
flex-direction: column; flex-direction: column;
a {
width: 100%;
}
} }
} }

31
src/pages/home/Home.tsx
View file

@ -5,9 +5,10 @@ import styles from "./Home.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import wideSVG from "../../assets/wide.svg"; import wideSVG from "../../assets/wide.svg";
import Emoji from "../../components/common/Emoji";
import Tooltip from "../../components/common/Tooltip"; import Tooltip from "../../components/common/Tooltip";
import Button from "../../components/ui/Button";
import Header from "../../components/ui/Header"; import Header from "../../components/ui/Header";
import CategoryButton from "../../components/ui/fluent/CategoryButton";
export default function Home() { export default function Home() {
return ( return (
@ -23,26 +24,38 @@ export default function Home() {
</h3> </h3>
<div className={styles.actions}> <div className={styles.actions}>
<Link to="/invite/Testers"> <Link to="/invite/Testers">
<Button contrast error> <CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
Join testers server Join testers server
</Button> </CategoryButton>
</Link> </Link>
<a <a
href="https://insrt.uk/donate" href="https://insrt.uk/donate"
target="_blank" target="_blank"
rel="noreferrer"> rel="noreferrer">
<Button contrast gold> <CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
Donate to Revolt Donate to Revolt
</Button> </CategoryButton>
</a> </a>
<Link to="/settings/feedback"> <Link to="/settings/feedback">
<Button contrast>Give feedback</Button> <CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
Give feedback
</CategoryButton>
</Link> </Link>
<Link to="/settings">
<Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home."> <Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home.">
<Button contrast>Open settings</Button> <Link to="/settings">
</Tooltip> <CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
Settings
</CategoryButton>
</Link> </Link>
</Tooltip>
</div> </div>
</div> </div>
); );