Skip to content

Commit 329a2ac

Browse files
beemanbeeman
committed
refactor(settings): improve responsive styles on small viewports
1 parent 72c9d9a commit 329a2ac

22 files changed

+121
-79
lines changed

‎packages/i18n/locales/en/settings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"networkInputNameDescription": "Provide the name of the network",
4343
"networkInputNameLabel": "Name",
4444
"networkInputNamePlaceholder": "Network name",
45-
"networkInputTypeDescription": "You can't change the type of network after you created it.",
45+
"networkInputTypeDescription": "You cannot change the type of network after you created it.",
4646
"networkInputTypeLabel": "Network",
4747
"networkPageAddTitle": "Add Network",
4848
"networkPageEditTitle": "Edit network",
@@ -61,7 +61,7 @@
6161
"pageWalletName": "Wallets",
6262
"themeDark": "Dark",
6363
"themeLight": "Light",
64-
"walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
64+
"walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
6565
"walletAddAccountDeriveTitle": "Derive an account",
6666
"walletAddAccountImportDescription": "Import an account from a base58 secret key or byte array",
6767
"walletAddAccountImportLabel": "Enter secret key (base58 or byte array)",

‎packages/i18n/src/resources.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ interface Resources {
106106
networkInputNameDescription: 'Provide the name of the network'
107107
networkInputNameLabel: 'Name'
108108
networkInputNamePlaceholder: 'Network name'
109-
networkInputTypeDescription: 'You can't change the type of network after you created it.'
109+
networkInputTypeDescription: 'You cannot change the type of network after you created it.'
110110
networkInputTypeLabel: 'Network'
111111
networkPageAddTitle: 'Add Network'
112112
networkPageEditTitle: 'Edit network'
@@ -125,7 +125,7 @@ interface Resources {
125125
pageWalletName: 'Wallets'
126126
themeDark: 'Dark'
127127
themeLight: 'Light'
128-
walletAddAccountDeriveDescription: 'Derive an account from the Wallet's mnemonic'
128+
walletAddAccountDeriveDescription: "Derive an account from the Wallet's mnemonic"
129129
walletAddAccountDeriveTitle: 'Derive an account'
130130
walletAddAccountImportDescription: 'Import an account from a base58 secret key or byte array'
131131
walletAddAccountImportLabel: 'Enter secret key (base58 or byte array)'

‎packages/settings/src/settings-feature-general-danger-delete-database.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function SettingsFeatureGeneralDangerDeleteDatabase() {
1313
const navigate = useNavigate()
1414

1515
return (
16-
<div className="space-y-6">
16+
<div className="space-y-2 md:space-y-6">
1717
<div className="flex items-start gap-3">
1818
<Checkbox checked={accept} id={acceptId} onCheckedChange={() => setAccept((prev) => !prev)} />
1919
<div className="grid gap-2">

‎packages/settings/src/settings-feature-general.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,12 @@ export function SettingsFeatureGeneral() {
1313
const { t } = useTranslation('settings')
1414
const page = useSettingsPage({ pageId: 'general' })
1515
return (
16-
<div className="space-y-4">
17-
<UiCard contentProps={{ className: 'grid gap-4 space-y-4' }} description={page.description} title={page.name}>
16+
<div className="space-y-2 md:space-y-4">
17+
<UiCard
18+
contentProps={{ className: 'space-y-2 md:space-y-6 md:py-2' }}
19+
description={page.description}
20+
title={page.name}
21+
>
1822
<SettingsFeatureGeneralLanguage />
1923
<SettingsFeatureGeneralTheme />
2024
<SettingsFeatureGeneralApiEndpoint />

‎packages/settings/src/settings-feature-wallet-add-account.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export function SettingsFeatureWalletAddAccount() {
8484
description={t(($) => $.walletPageAddAccountDescription)}
8585
title={<SettingsUiWalletItem item={item} />}
8686
>
87-
<div className="space-y-6">
87+
<div className="space-y-2 md:space-y-6">
8888
<Item variant="outline">
8989
<ItemMedia variant="icon">
9090
<AccountUiIcon type="Derived" />

‎packages/settings/src/settings-feature-wallet-details.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ import { UiError } from '@workspace/ui/components/ui-error'
77
import { UiIcon } from '@workspace/ui/components/ui-icon'
88
import { UiLoader } from '@workspace/ui/components/ui-loader'
99
import { UiNotFound } from '@workspace/ui/components/ui-not-found'
10-
import { Link, useParams } from 'react-router'
10+
import { Link, useLocation, useParams } from 'react-router'
1111
import { useSortAccounts } from './data-access/use-sort-accounts.tsx'
1212
import { SettingsUiAccountTable } from './ui/settings-ui-account-table.tsx'
1313
import { SettingsUiWalletItem } from './ui/settings-ui-wallet-item.tsx'
1414

1515
export function SettingsFeatureWalletDetails() {
1616
const { t } = useTranslation('settings')
17+
const { pathname: from } = useLocation()
1718
const { walletId } = useParams() as { walletId: string }
1819
const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
1920
const accounts = useAccountLive({ walletId })
@@ -33,15 +34,16 @@ export function SettingsFeatureWalletDetails() {
3334
<UiCard
3435
backButtonTo="/settings/wallets"
3536
title={
36-
<div className="flex w-full items-center justify-between">
37-
<SettingsUiWalletItem item={item} />
37+
<div className="flex w-full items-center justify-between whitespace-nowrap">
3838
<div className="flex items-center gap-2">
39-
<Button asChild title={t(($) => $.actionEditWallet)} variant="outline">
40-
<Link to={`./edit`}>
39+
<SettingsUiWalletItem item={item} />
40+
<Button asChild size="icon" title={t(($) => $.actionEditWallet)} variant="ghost">
41+
<Link state={{ from }} to={`./edit`}>
4142
<UiIcon className="size-4" icon="edit" />
42-
{t(($) => $.actionEditWallet)}
4343
</Link>
4444
</Button>
45+
</div>
46+
<div className="flex items-center gap-2">
4547
<Button asChild title={t(($) => $.actionEditWalletMessage)} variant="outline">
4648
<Link to={`./add`}>
4749
<UiIcon className="size-4" icon="add" />
@@ -52,7 +54,7 @@ export function SettingsFeatureWalletDetails() {
5254
</div>
5355
}
5456
>
55-
<div className="space-y-6">
57+
<div className="space-y-2 md:space-y-6">
5658
<SettingsUiAccountTable items={sorted} />
5759
</div>
5860
</UiCard>

‎packages/settings/src/settings-feature-wallet-generate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function SettingsFeatureWalletGenerate() {
1919
return (
2020
<UiCard
2121
backButtonTo="/settings/wallets/create"
22-
contentProps={{ className: 'grid gap-6' }}
22+
contentProps={{ className: 'space-y-2 md:space-y-6' }}
2323
title={t(($) => $.walletPageGenerateTitle)}
2424
>
2525
<SettingsUiWalletMnemonicStrength setStrength={setStrength} strength={strength} />

‎packages/settings/src/settings-feature-wallet-list.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useSetting } from '@workspace/db-react/use-setting'
12
import { useWalletDelete } from '@workspace/db-react/use-wallet-delete'
23
import { useTranslation } from '@workspace/i18n'
34
import { Button } from '@workspace/ui/components/button'
@@ -17,8 +18,8 @@ export function SettingsFeatureWalletList() {
1718
onError: () => toastError('Error deleting wallet'),
1819
onSuccess: () => toastSuccess('Wallet deleted'),
1920
})
20-
const { wallets, active } = useActiveWallet()
21-
21+
const { wallets } = useActiveWallet()
22+
const [activeId] = useSetting('activeWalletId')
2223
return wallets.length ? (
2324
<UiCard
2425
action={
@@ -30,7 +31,7 @@ export function SettingsFeatureWalletList() {
3031
title={page.name}
3132
>
3233
<SettingsUiWalletList
33-
active={active}
34+
activeId={activeId}
3435
deleteItem={(input) => deleteMutation.mutateAsync({ id: input.id })}
3536
items={wallets}
3637
/>

‎packages/settings/src/settings-feature-wallet-update.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import { UiCard } from '@workspace/ui/components/ui-card'
55
import { UiError } from '@workspace/ui/components/ui-error'
66
import { UiLoader } from '@workspace/ui/components/ui-loader'
77
import { UiNotFound } from '@workspace/ui/components/ui-not-found'
8-
import { useNavigate, useParams } from 'react-router'
8+
import { useLocation, useNavigate, useParams } from 'react-router'
99
import { SettingsUiWalletFormUpdate } from './ui/settings-ui-wallet-form-update.tsx'
1010

1111
export function SettingsFeatureWalletUpdate() {
1212
const { t } = useTranslation('settings')
1313
const navigate = useNavigate()
1414
const { walletId } = useParams() as { walletId: string }
15+
const { state } = useLocation()
16+
const from = state?.from ?? `/settings/wallets/${walletId}`
1517
const updateMutation = useWalletUpdate()
1618
const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
1719

@@ -26,12 +28,12 @@ export function SettingsFeatureWalletUpdate() {
2628
}
2729

2830
return (
29-
<UiCard backButtonTo={`/settings/wallets/${item.id}`} title={t(($) => $.walletPageEditTitle)}>
31+
<UiCard backButtonTo={from} title={t(($) => $.walletPageEditTitle)}>
3032
<SettingsUiWalletFormUpdate
3133
item={item}
3234
submit={async (input) =>
3335
await updateMutation.mutateAsync({ id: item.id, input }).then(() => {
34-
navigate(`/settings/wallets/${item.id}`)
36+
navigate(from)
3537
})
3638
}
3739
/>

‎packages/settings/src/ui/settings-ui-network-form-create.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function SettingsUiNetworkFormCreate({ submit }: { submit: (input: Networ
2828

2929
return (
3030
<Form {...form}>
31-
<form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
31+
<form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
3232
<FormField
3333
control={form.control}
3434
name="type"

0 commit comments

Comments
 (0)