diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 0fefdab314b6f45236519e3a4d4762b7d71baf40..e9027a769fd282325c7babd4fb7a983fa99fb4c4 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -6,6 +6,7 @@ interface Props { readonly contrast?: boolean; readonly plain?: boolean; readonly error?: boolean; + readonly gold?: boolean; readonly iconbutton?: boolean; } @@ -125,4 +126,22 @@ export default styled.button<Props>` background: var(--error); } `} + + ${(props) => + props.gold && + css` + color: black; + font-weight: 600; + background: goldenrod; + + &:hover { + filter: brightness(1.2); + background: goldenrod; + } + + &:disabled { + cursor: not-allowed; + background: goldenrod; + } + `} `; diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index de554cd6915d58c4bdd1c1fc1d8a4ea52e2ed295..0574b42ace2670da7260f89a6ed4d18f24ba371b 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -1,3 +1,4 @@ +import { Coffee } from "@styled-icons/boxicons-regular"; import { Home as HomeIcon } from "@styled-icons/boxicons-solid"; import { Link } from "react-router-dom"; @@ -17,7 +18,8 @@ export default function Home() { <Text id="app.navigation.tabs.home" /> </Header> <h3> - <Text id="app.special.modals.onboarding.welcome" />{" "} + <Text id="app.special.modals.onboarding.welcome" /> + <br /> <img src={wideSVG} /> </h3> <div className={styles.actions}> @@ -26,6 +28,14 @@ export default function Home() { Join testers server </Button> </Link> + <a + href="https://insrt.uk/donate" + target="_blank" + rel="noreferrer"> + <Button contrast gold> + Donate to Revolt + </Button> + </a> <Link to="/settings/feedback"> <Button contrast>Give feedback</Button> </Link> @@ -34,12 +44,6 @@ export default function Home() { <Button contrast>Open settings</Button> </Tooltip> </Link> - <a - href="https://gitlab.insrt.uk/revolt" - target="_blank" - rel="noreferrer"> - <Button contrast>Source code</Button> - </a> </div> </div> );