Skip to content

Commit b41bec5

Browse files
kastovkastov
committed
refactor: styling in subpage config editor components
1 parent eafbbd7 commit b41bec5

File tree

6 files changed

+75
-70
lines changed

6 files changed

+75
-70
lines changed

‎src/pages/dashboard/subpage-config/ui/components/subpage-config-editor-page.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
linear-gradient(to right, rgba(128, 128, 128, 0.05) 1px, transparent 1px),
66
linear-gradient(to bottom, rgba(128, 128, 128, 0.05) 1px, transparent 1px);
77
background-size: 60px 60px;
8-
padding: var(--mantine-spacing-xs);
98
position: relative;
109
border-radius: var(--mantine-radius-lg);
1110
overflow: hidden;

‎src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-base/base-translations-block.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function BaseTranslationsBlockComponent({ form }: IProps) {
4545
return (
4646
<>
4747
<Card className={styles.sectionCard} p="md" radius="lg">
48-
<Group justify="space-between" wrap="nowrap">
48+
<Group justify="space-between">
4949
<Group gap="sm" wrap="nowrap">
5050
<BaseOverlayHeader
5151
IconComponent={IconLanguage}

‎src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-base/svg-library-block.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function SvgLibraryBlockComponent(props: IProps) {
2727
return (
2828
<>
2929
<Card className={styles.sectionCard} p="md" radius="lg">
30-
<Group justify="space-between" wrap="nowrap">
30+
<Group justify="space-between">
3131
<Group gap="sm" wrap="nowrap">
3232
<BaseOverlayHeader
3333
IconComponent={IconPhoto}

‎src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/app-card.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function AppCard(props: IProps) {
4040
<Card className={styles.interactiveCard} onClick={onEdit} p="sm" radius="md">
4141
<Group justify="space-between" wrap="nowrap">
4242
<Group gap="sm" wrap="nowrap">
43-
<Box className={styles.appIconPreview}>
43+
<Box className={styles.appIconPreview} visibleFrom="sm">
4444
{hasValidIcon ? (
4545
<Box
4646
className={styles.appIconSvg}
@@ -58,11 +58,11 @@ export function AppCard(props: IProps) {
5858
<IconStar size={16} />
5959
</ActionIcon>
6060
)}
61+
</Group>
62+
<Group gap={4} wrap="nowrap">
6163
<Badge color="violet" size="xs" variant="light">
6264
{app.blocks.length} blocks
6365
</Badge>
64-
</Group>
65-
<Group gap={4}>
6666
<ActionIcon
6767
color="gray"
6868
disabled={!canMoveUp}

‎src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/block-card.component.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ export function BlockCard(props: IProps) {
2020

2121
return (
2222
<Card className={styles.interactiveCard} onClick={onEdit} p="sm" radius="md">
23-
<Group justify="space-between">
24-
<Group gap="sm">
25-
<Text c="white" fw={500} size="sm">
26-
{block.title.en || `Block ${index + 1}`}
27-
</Text>
28-
<Badge color="teal" size="xs" variant="light">
23+
<Group justify="space-between" wrap="nowrap">
24+
<Text c="white" fw={500} size="sm" style={{ flex: 1 }} truncate="end">
25+
{block.title.en || `Block ${index + 1}`}
26+
</Text>
27+
28+
<Group gap={4} wrap="nowrap">
29+
<Badge color="teal" size="xs" variant="light" visibleFrom="sm">
2930
{block.buttons.length} buttons
3031
</Badge>
31-
</Group>
32-
<Group gap={4}>
32+
3333
<ActionIcon
3434
color="gray"
3535
disabled={!canMoveUp}

‎src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/button-editor.component.tsx‎

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
} from '@mantine/core'
2121
import { IconArrowDown, IconArrowUp, IconChevronRight, IconTrash } from '@tabler/icons-react'
2222
import { PiCheck, PiCopy } from 'react-icons/pi'
23+
import { TbExternalLink } from 'react-icons/tb'
2324
import { useDisclosure } from '@mantine/hooks'
2425
import { useTranslation } from 'react-i18next'
2526

@@ -63,24 +64,29 @@ export function ButtonEditor(props: IProps) {
6364
return (
6465
<Card className={styles.buttonCard} p="sm" radius="md">
6566
<Stack gap="sm">
66-
<Group className={styles.collapseHeader} justify="space-between" onClick={toggle}>
67+
<Group
68+
className={styles.collapseHeader}
69+
justify="space-between"
70+
onClick={toggle}
71+
wrap="nowrap"
72+
>
6773
<Group gap="xs">
6874
<IconChevronRight
6975
className={`${styles.chevron} ${opened ? styles.chevronOpen : ''}`}
7076
size={16}
7177
/>
72-
<Text c="white" fw={500} size="sm">
78+
<Text c="white" fw={500} size="sm" style={{ flex: 1 }} truncate="start">
7379
Button {index + 1}: {buttonTitle}
7480
</Text>
81+
</Group>
82+
<Group gap={4} wrap="nowrap">
7583
<Badge
7684
color={button.type === 'external' ? 'blue' : 'cyan'}
7785
size="xs"
7886
variant="light"
7987
>
8088
{button.type}
8189
</Badge>
82-
</Group>
83-
<Group gap={4}>
8490
<ActionIcon
8591
color="gray"
8692
disabled={!canMoveUp}
@@ -122,59 +128,59 @@ export function ButtonEditor(props: IProps) {
122128

123129
<Collapse in={opened}>
124130
<Stack gap="sm" pt="sm">
125-
<Group grow>
126-
<TextInput
127-
classNames={{ input: styles.inputDark }}
128-
label={t('button-editor.component.link')}
129-
leftSection={
130-
<SubpageTooltips>
131-
<Group gap="xs" key="subpage-template-keys">
132-
<Text size="sm">
133-
{t('remark-info.widget.supports-templates')}
134-
</Text>
131+
<Select
132+
allowDeselect={false}
133+
classNames={{ input: styles.selectDark }}
134+
data={BUTTON_TYPES_VALUES}
135+
label={t('button-editor.component.type')}
136+
leftSection={<TbExternalLink size={16} />}
137+
onChange={(v) =>
138+
onChange({
139+
...button,
140+
type: v as TButtonType
141+
})
142+
}
143+
value={button.type}
144+
/>
135145

136-
{SUBSCRIPTION_PAGE_TEMPLATE_KEYS.map((key) => (
137-
<CopyButton key={key} value={`{{${key}}}`}>
138-
{({ copied, copy }) => (
139-
<Badge
140-
color={copied ? 'teal' : 'blue'}
141-
key={key}
142-
leftSection={
143-
copied ? (
144-
<PiCheck size="16px" />
145-
) : (
146-
<PiCopy size="16px" />
147-
)
148-
}
149-
onClick={copy}
150-
size="md"
151-
>
152-
{`{{${key}}}`}
153-
</Badge>
154-
)}
155-
</CopyButton>
156-
))}
157-
</Group>
158-
</SubpageTooltips>
159-
}
160-
onChange={(e) => onChange({ ...button, link: e.target.value })}
161-
placeholder="https:// or app://"
162-
value={button.link}
163-
/>
164-
<Select
165-
allowDeselect={false}
166-
classNames={{ input: styles.selectDark }}
167-
data={BUTTON_TYPES_VALUES}
168-
label={t('button-editor.component.type')}
169-
onChange={(v) =>
170-
onChange({
171-
...button,
172-
type: v as TButtonType
173-
})
174-
}
175-
value={button.type}
176-
/>
177-
</Group>
146+
<TextInput
147+
classNames={{ input: styles.inputDark }}
148+
label={t('button-editor.component.link')}
149+
leftSection={
150+
<SubpageTooltips>
151+
<Group gap="xs" key="subpage-template-keys">
152+
<Text size="sm">
153+
{t('remark-info.widget.supports-templates')}
154+
</Text>
155+
156+
{SUBSCRIPTION_PAGE_TEMPLATE_KEYS.map((key) => (
157+
<CopyButton key={key} value={`{{${key}}}`}>
158+
{({ copied, copy }) => (
159+
<Badge
160+
color={copied ? 'teal' : 'blue'}
161+
key={key}
162+
leftSection={
163+
copied ? (
164+
<PiCheck size="16px" />
165+
) : (
166+
<PiCopy size="16px" />
167+
)
168+
}
169+
onClick={copy}
170+
size="md"
171+
>
172+
{`{{${key}}}`}
173+
</Badge>
174+
)}
175+
</CopyButton>
176+
))}
177+
</Group>
178+
</SubpageTooltips>
179+
}
180+
onChange={(e) => onChange({ ...button, link: e.target.value })}
181+
placeholder="https:// or app://"
182+
value={button.link}
183+
/>
178184

179185
<SvgIconSelect
180186
label={t('button-editor.component.svg-icon')}

0 commit comments

Comments
 (0)