Skip to content

Commit 9b8fe6d

Browse files
MrFlashAccountMrFlashAccount
committed
THings
1 parent 2eb6f3d commit 9b8fe6d

File tree

4 files changed

+92
-77
lines changed

4 files changed

+92
-77
lines changed

‎app/gui/src/dashboard/components/AnimatedBackground.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,16 @@ AnimatedBackground.Item = memo(function AnimatedBackgroundItem(props: AnimatedBa
9292
animationClassName,
9393
children,
9494
isSelected,
95-
underlayElement = <div className={twJoin('h-full w-full', animationClassName)} />,
95+
underlayElement: rawUnderlayElement,
9696
} = props
9797

98+
const defaultUnderlayElement = useMemo(
99+
() => <div className={twJoin('h-full w-full', animationClassName)} />,
100+
[animationClassName],
101+
)
102+
103+
const underlayElement = rawUnderlayElement ?? defaultUnderlayElement
104+
98105
const context = useContext(AnimatedBackgroundContext)
99106
invariant(context, '<AnimatedBackground.Item /> must be placed within an <AnimatedBackground />')
100107
const { value: activeValue, transition, layoutId } = context

‎app/gui/src/dashboard/components/AriaComponents/Inputs/Selector/SelectorOption.tsx

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { forwardRef } from '#/utilities/react'
55
import type { VariantProps } from '#/utilities/tailwindVariants'
66
import { tv } from '#/utilities/tailwindVariants'
77
import * as React from 'react'
8+
import { memo } from 'react'
89
import { TEXT_STYLE } from '../../Text'
910

1011
/** Props for a {@link SelectorOption}. */
@@ -95,41 +96,43 @@ export const SELECTOR_OPTION_STYLES = tv({
9596
},
9697
})
9798

98-
export const SelectorOption = forwardRef(function SelectorOption(
99-
props: SelectorOptionProps,
100-
ref: React.ForwardedRef<HTMLLabelElement>,
101-
) {
102-
const {
103-
label,
104-
value,
105-
size,
106-
rounded,
107-
variant,
108-
className,
109-
variants = SELECTOR_OPTION_STYLES,
110-
...radioProps
111-
} = props
99+
export const SelectorOption = memo(
100+
forwardRef(function SelectorOption(
101+
props: SelectorOptionProps,
102+
ref: React.ForwardedRef<HTMLLabelElement>,
103+
) {
104+
const {
105+
label,
106+
value,
107+
size,
108+
rounded,
109+
variant,
110+
className,
111+
variants = SELECTOR_OPTION_STYLES,
112+
...radioProps
113+
} = props
112114

113-
const styles = variants({ size, rounded, variant })
115+
const styles = variants({ size, rounded, variant })
114116

115-
return (
116-
<AnimatedBackground.Item
117-
value={value}
118-
className={styles.base()}
119-
animationClassName={styles.animation()}
120-
>
121-
<Radio
122-
ref={ref}
123-
{...radioProps}
117+
return (
118+
<AnimatedBackground.Item
124119
value={value}
125-
className={(renderProps) =>
126-
styles.radio({
127-
className: typeof className === 'function' ? className(renderProps) : className,
128-
})
129-
}
120+
className={styles.base()}
121+
animationClassName={styles.animation()}
130122
>
131-
{label}
132-
</Radio>
133-
</AnimatedBackground.Item>
134-
)
135-
})
123+
<Radio
124+
ref={ref}
125+
{...radioProps}
126+
value={value}
127+
className={(renderProps) =>
128+
styles.radio({
129+
className: typeof className === 'function' ? className(renderProps) : className,
130+
})
131+
}
132+
>
133+
{label}
134+
</Radio>
135+
</AnimatedBackground.Item>
136+
)
137+
}),
138+
)

‎app/gui/src/dashboard/layouts/Settings/SetupTwoFaForm.tsx

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -185,51 +185,56 @@ function TwoFa() {
185185
}),
186186
})
187187

188-
const { field } = Form.useField({ name: 'display' })
189-
190188
return (
191189
<>
192190
<div className="flex w-full flex-col gap-4">
193191
<Selector name="display" items={['qr', 'text']} aria-label={getText('display')} />
194192

195-
{field.value === 'qr' && (
196-
<>
197-
<Alert variant="neutral" icon={ShieldCheck}>
198-
<Text.Group>
199-
<Text variant="subtitle" weight="bold">
200-
{getText('scanQR')}
201-
</Text>
202-
203-
<Text>{getText('scanQRDescription')}</Text>
204-
</Text.Group>
205-
</Alert>
206-
207-
<div className="self-center">
208-
<LazyQRCode
209-
value={data.url}
210-
bgColor="transparent"
211-
fgColor="rgb(0 0 0 / 60%)"
212-
size={192}
213-
className="rounded-2xl border-0.5 border-primary p-4"
214-
/>
215-
</div>
216-
</>
217-
)}
218-
219-
{field.value === 'text' && (
220-
<>
221-
<Alert variant="neutral" icon={ShieldCheck}>
222-
<Text.Group>
223-
<Text variant="subtitle" weight="bold">
224-
{getText('copyLink')}
225-
</Text>
226-
<Text>{getText('copyLinkDescription')}</Text>
227-
</Text.Group>
228-
</Alert>
229-
230-
<CopyBlock copyText={data.url} />
231-
</>
232-
)}
193+
<Form.FieldValue name="display">
194+
{(display) =>
195+
display === 'qr' && (
196+
<>
197+
<Alert key="alert" variant="neutral" icon={ShieldCheck}>
198+
<Text.Group>
199+
<Text variant="subtitle" weight="bold">
200+
{getText('scanQR')}
201+
</Text>
202+
203+
<Text>{getText('scanQRDescription')}</Text>
204+
</Text.Group>
205+
</Alert>
206+
207+
<div className="self-center">
208+
<LazyQRCode
209+
value={data.url}
210+
bgColor="transparent"
211+
fgColor="rgb(0 0 0 / 60%)"
212+
size={192}
213+
className="rounded-2xl border-0.5 border-primary p-4"
214+
/>
215+
</div>
216+
</>
217+
)
218+
}
219+
</Form.FieldValue>
220+
<Form.FieldValue name="display">
221+
{(display) =>
222+
display === 'text' && (
223+
<>
224+
<Alert key="alert" variant="neutral" icon={ShieldCheck}>
225+
<Text.Group>
226+
<Text variant="subtitle" weight="bold">
227+
{getText('copyLink')}
228+
</Text>
229+
<Text>{getText('copyLinkDescription')}</Text>
230+
</Text.Group>
231+
</Alert>
232+
233+
<CopyBlock copyText={data.url} />
234+
</>
235+
)
236+
}
237+
</Form.FieldValue>
233238

234239
<OTPInput
235240
className="max-w-96"

‎app/gui/src/dashboard/layouts/Settings/Tab.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,14 @@ export default function SettingsTab(props: SettingsTabProps) {
7070
))}
7171
</div>
7272
: <div
73-
className="flex min-h-full grow flex-col gap-settings-section lg:h-auto lg:flex-row"
73+
className="grid min-h-full grow grid-cols-1 gap-settings-section lg:h-auto lg:grid-cols-2"
7474
{...contentProps}
7575
>
7676
{columns.map((sectionsInColumn, i) => (
7777
<div
7878
key={i}
7979
className={twMerge(
80-
'flex h-fit flex-1 flex-col gap-settings-subsection pb-12',
80+
'flex h-fit max-w-[500px] flex-1 flex-col gap-settings-subsection pb-12',
8181
classes[i],
8282
)}
8383
>

0 commit comments

Comments
 (0)