mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Theme skip setup card

Browse source
This commit is contained in:
mrjvs 2024-01-20 12:24:02 +01:00
parent 6a81b30585
commit de5d47a730
7 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/overlays/Modal.tsx
View file

@ -19,7 +19,7 @@ export function useModal(id: string) {
export function ModalCard(props: { children?: ReactNode }) { export function ModalCard(props: { children?: ReactNode }) {
return ( return (
<div className="w-full max-w-[30rem] m-4"> <div className="w-full max-w-[30rem] m-4">
<div className="w-full bg-dropdown-background rounded-xl p-8 pointer-events-auto"> <div className="w-full bg-modal-background rounded-xl p-8 pointer-events-auto">
{props.children} {props.children}
</div> </div>
</div> </div>

16
src/pages/onboarding/Onboarding.tsx
View file

@ -31,18 +31,20 @@ export function OnboardingPage() {
<PageTitle subpage k="global.pages.onboarding" /> <PageTitle subpage k="global.pages.onboarding" />
<Modal id={skipModal.id}> <Modal id={skipModal.id}>
<ModalCard> <ModalCard>
<ModalCard> <Heading1 className="!mt-0 !mb-4 !text-2xl">
<Heading1 className="!mt-0"> {t("onboarding.defaultConfirm.title")}
{t("onboarding.defaultConfirm.title")} </Heading1>
</Heading1> <Paragraph className="!mt-1 !mb-12">
<Paragraph>{t("onboarding.defaultConfirm.description")}</Paragraph> {t("onboarding.defaultConfirm.description")}
</Paragraph>
<div className="flex items-end justify-between">
<Button theme="secondary" onClick={skipModal.hide}> <Button theme="secondary" onClick={skipModal.hide}>
{t("onboarding.defaultConfirm.cancel")} {t("onboarding.defaultConfirm.cancel")}
</Button> </Button>
<Button theme="danger" onClick={() => completeAndRedirect()}> <Button theme="purple" onClick={() => completeAndRedirect()}>
{t("onboarding.defaultConfirm.confirm")} {t("onboarding.defaultConfirm.confirm")}
</Button> </Button>
</ModalCard> </div>
</ModalCard> </ModalCard>
</Modal> </Modal>
<CenterContainer> <CenterContainer>

5
themes/default.ts
View file

@ -138,6 +138,11 @@ export const defaultTheme = {
accentB: tokens.blue.c500, accentB: tokens.blue.c500,
}, },
// Modals
modal: {
background: tokens.shade.c800,
},
// typography // typography
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,

4
themes/list/blue.ts
View file

@ -95,6 +95,10 @@ export default createTheme({
accentB: tokens.blue.c500 accentB: tokens.blue.c500
}, },
modal: {
background: tokens.shade.c800,
},
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,
text: tokens.shade.c50, text: tokens.shade.c50,

4
themes/list/gray.ts
View file

@ -95,6 +95,10 @@ export default createTheme({
accentB: tokens.blue.c500 accentB: tokens.blue.c500
}, },
modal: {
background: tokens.shade.c800,
},
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,
text: tokens.shade.c50, text: tokens.shade.c50,

4
themes/list/red.ts
View file

@ -95,6 +95,10 @@ export default createTheme({
accentB: tokens.blue.c500 accentB: tokens.blue.c500
}, },
modal: {
background: tokens.shade.c800,
},
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,
text: tokens.shade.c50, text: tokens.shade.c50,

4
themes/list/teal.ts
View file

@ -95,6 +95,10 @@ export default createTheme({
accentB: tokens.blue.c500 accentB: tokens.blue.c500
}, },
modal: {
background: tokens.shade.c800,
},
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,
text: tokens.shade.c50, text: tokens.shade.c50,