fix(SW-556): removed old caption label component, fixed outline on button

This commit is contained in:
Christian Andolf
2024-10-21 10:03:48 +02:00
parent fde233dac4
commit 3508253afe
6 changed files with 19 additions and 189 deletions

View File

@@ -14,7 +14,6 @@ import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -39,13 +38,15 @@ export default function Surprises({
return null
}
const surprise = surprises[selectedSurprise]
function showSurprise(n: number) {
setSelectedSurprise((surprise) => surprise + n)
}
function viewRewards(id?: string) {
if (id) {
update.mutate({ id })
function viewRewards() {
if (surprise.id) {
update.mutate({ id: surprise.id })
}
}
@@ -69,13 +70,12 @@ export default function Surprises({
}
}
const surprise = surprises[selectedSurprise]
return (
<ModalOverlay
className={styles.overlay}
isOpen={open}
onOpenChange={setOpen}
isKeyboardDismissDisabled
>
<Modal className={styles.modal}>
<Dialog aria-label="Surprises" className={styles.dialog}>
@@ -84,7 +84,7 @@ export default function Surprises({
<>
<div className={styles.top}>
{surprises.length > 1 && showSurprises && (
<CaptionLabel uppercase>
<Caption type="label" uppercase>
{intl.formatMessage(
{ id: "{amount} out of {total}" },
{
@@ -92,7 +92,7 @@ export default function Surprises({
total: surprises.length,
}
)}
</CaptionLabel>
</Caption>
)}
<button
onClick={() => closeModal(close)}
@@ -123,7 +123,6 @@ export default function Surprises({
<>
<nav className={styles.nav}>
<Button
wrapping
variant="icon"
intent="tertiary"
disabled={selectedSurprise === 0}
@@ -138,7 +137,6 @@ export default function Surprises({
{intl.formatMessage({ id: "Previous" })}
</Button>
<Button
wrapping
variant="icon"
intent="tertiary"
disabled={selectedSurprise === surprises.length - 1}
@@ -178,7 +176,7 @@ export default function Surprises({
</Caption>
</Surprise>
) : (
<Surprise title={surprise.title}>
<Surprise title={intl.formatMessage({ id: "Surprise!" })}>
<Body textAlign="center">
{intl.formatMessage({
id: "We have a special gift waiting for you!",
@@ -195,12 +193,13 @@ export default function Surprises({
<Button
intent="primary"
onPress={() => {
viewRewards(surprise.id)
viewRewards()
setShowSurprises(true)
}}
size="medium"
theme="base"
fullWidth
autoFocus
>
{intl.formatMessage(
{

View File

@@ -103,6 +103,14 @@
}
.nav button {
&:nth-child(1) {
padding-left: 0;
}
&:nth-child(2) {
padding-right: 0;
}
&[disabled] {
visibility: hidden;
}