Skip to content

Commit e4b2e43

Browse files
kastovkastov
committed
refactor: enhance UI components
- Updated existing translation strings for internal squad management and configuration profiles. - Enhanced UI components with tooltips - Refactored styles in several widgets for a more consistent look and feel across the application.
1 parent 46dcc01 commit e4b2e43

File tree

14 files changed

+973
-743
lines changed

14 files changed

+973
-743
lines changed

‎public/locales/en/remnawave.json

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@
6464
"cancel": "Cancel",
6565
"save-anyway-title": "Confirm action",
6666
"load-from-github": "Load from GitHub",
67-
"tools": "Tools"
67+
"tools": "Tools",
68+
"copy-all-content": "Copy all content",
69+
"select-all": "Select all",
70+
"cut-selection": "Cut selection",
71+
"paste-from-clipboard": "Paste from clipboard"
6872
}
6973
},
7074
"use-bandwidth-table-columns": {
@@ -1072,18 +1076,20 @@
10721076
"this-action-cannot-be-undone": "This action cannot be undone.",
10731077
"delete": "Delete",
10741078
"cancel": "Cancel",
1075-
"remove-users-from-internal-squad": "Remove Users from Internal Squad",
10761079
"remove-users-from-internal-squad-confirmation": "Are you sure you want to remove the users from the internal squad \"{{internalSquadName}}\"?",
10771080
"remove": "Remove",
1078-
"add-users-to-internal-squad": "Add Users to Internal Squad",
10791081
"add-users-to-internal-squad-confirmation": "Are you sure you want to add the users to the internal squad \"{{internalSquadName}}\"?",
10801082
"add": "Add",
10811083
"no-internal-squads": "No Internal Squads",
10821084
"create-your-first-internal-squad-to-get-started": "Create your first internal squad to get started",
10831085
"delete-squad": "Delete squad",
10841086
"inbounds": "Inbounds",
10851087
"users": "Users",
1086-
"edit-inbounds": "Edit inbounds"
1088+
"edit-inbounds": "Edit inbounds",
1089+
"remove-users": "Remove users",
1090+
"add-users": "Add users",
1091+
"edit": "Edit",
1092+
"copy-uuid": "Copy UUID"
10871093
}
10881094
},
10891095
"config-profile-detail-header": {
@@ -1105,7 +1111,9 @@
11051111
"nodes": "Nodes",
11061112
"download": "Download",
11071113
"quick-view": "Quick view",
1108-
"edit-xray-config": "Edit Xray Config"
1114+
"edit-xray-config": "Edit Xray Config",
1115+
"xray-config": "Xray Config",
1116+
"copy-uuid": "Copy UUID"
11091117
}
11101118
},
11111119
"config-profiles-header": {
@@ -1322,7 +1330,9 @@
13221330
"all": "All",
13231331
"selected": "Selected",
13241332
"unselected": "Unselected",
1325-
"edit-internal-squad": "Edit Internal Squad"
1333+
"edit-internal-squad": "Edit Internal Squad",
1334+
"selected-inbounds": "Selected inbounds: {{count}}",
1335+
"save-changes": "Save changes"
13261336
}
13271337
}
13281338
},
@@ -1453,5 +1463,19 @@
14531463
"xray-core-version": "Xray Core Version",
14541464
"remnawave-node-version": "Node version, @remnawave/node"
14551465
}
1466+
},
1467+
"config-profiles": {
1468+
"drawer": {
1469+
"widget": {
1470+
"config-profiles": "Config Profiles",
1471+
"no-profile-selected": "No profile selected",
1472+
"no-inbounds-selected": "No inbounds selected",
1473+
"choose-config-profile-to-apply-to-the-node": "Choose Config Profile to apply to the node.",
1474+
"apply-changes": "Apply changes",
1475+
"search-profiles-or-inbounds": "Search profiles or inbounds...",
1476+
"no-profiles-or-inbounds-found": "No profiles or inbounds found",
1477+
"no-config-profiles-available": "No config profiles available"
1478+
}
1479+
}
14561480
}
14571481
}

‎src/features/dashboard/config-profiles/config-editor-actions/config-editor-actions.feature.tsx

Lines changed: 79 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {
66
TbSelectAll,
77
TbTools
88
} from 'react-icons/tb'
9+
import { ActionIcon, Button, Group, Text, Tooltip } from '@mantine/core'
910
import { PiCheckSquareOffset, PiFloppyDisk } from 'react-icons/pi'
10-
import { ActionIcon, Button, Group, Text } from '@mantine/core'
1111
import { notifications } from '@mantine/notifications'
1212
import { useTranslation } from 'react-i18next'
1313
import { useClipboard } from '@mantine/hooks'
@@ -156,55 +156,56 @@ export function ConfigEditorActionsFeature(props: Props) {
156156
}
157157

158158
return (
159-
<Group>
160-
<Group grow preventGrowOverflow={false} wrap="wrap">
161-
<Button
162-
leftSection={<PiCheckSquareOffset size={16} />}
163-
mb="md"
164-
onClick={formatDocument}
165-
>
166-
{t('config-editor-actions.feature.format')}
167-
</Button>
168-
169-
<Button
170-
disabled={!isConfigValid}
171-
leftSection={<PiFloppyDisk size={16} />}
172-
loading={isUpdating}
173-
mb="md"
174-
onClick={handleSave}
175-
>
176-
{t('config-editor-actions.feature.save')}
177-
</Button>
178-
179-
<Button
180-
color="red"
181-
disabled={isConfigValid || isUpdating}
182-
leftSection={<PiFloppyDisk size={16} />}
183-
loading={isUpdating}
184-
mb="md"
185-
onClick={() => {
186-
modals.openConfirmModal({
187-
title: t('config-editor-actions.feature.save-anyway-title'),
188-
children: (
189-
<Text>
190-
{t('config-editor-actions.feature.save-anyway-description')}
191-
</Text>
192-
),
193-
centered: true,
194-
labels: {
195-
confirm: t('config-editor-actions.feature.save'),
196-
cancel: t('config-editor-actions.feature.cancel')
197-
},
198-
confirmProps: {
199-
color: 'red'
200-
},
201-
onConfirm: handleSave
202-
})
203-
}}
204-
>
205-
{t('config-editor-actions.feature.save-anyway')}
206-
</Button>
159+
<Group grow preventGrowOverflow={false} wrap="wrap">
160+
<Button
161+
leftSection={<PiCheckSquareOffset size={16} />}
162+
mb="md"
163+
onClick={formatDocument}
164+
>
165+
{t('config-editor-actions.feature.format')}
166+
</Button>
167+
168+
<Button
169+
color="teal"
170+
disabled={!isConfigValid}
171+
leftSection={<PiFloppyDisk size={16} />}
172+
loading={isUpdating}
173+
mb="md"
174+
onClick={handleSave}
175+
>
176+
{t('config-editor-actions.feature.save')}
177+
</Button>
178+
179+
<Button
180+
color="red"
181+
disabled={isConfigValid || isUpdating}
182+
leftSection={<PiFloppyDisk size={16} />}
183+
loading={isUpdating}
184+
mb="md"
185+
onClick={() => {
186+
modals.openConfirmModal({
187+
title: t('config-editor-actions.feature.save-anyway-title'),
188+
children: (
189+
<Text>
190+
{t('config-editor-actions.feature.save-anyway-description')}
191+
</Text>
192+
),
193+
centered: true,
194+
labels: {
195+
confirm: t('config-editor-actions.feature.save'),
196+
cancel: t('config-editor-actions.feature.cancel')
197+
},
198+
confirmProps: {
199+
color: 'red'
200+
},
201+
onConfirm: handleSave
202+
})
203+
}}
204+
>
205+
{t('config-editor-actions.feature.save-anyway')}
206+
</Button>
207207

208+
<Group>
208209
<Button
209210
leftSection={<TbTools size={16} />}
210211
mb="md"
@@ -218,33 +219,38 @@ export function ConfigEditorActionsFeature(props: Props) {
218219
>
219220
{t('config-editor-actions.feature.tools')}
220221
</Button>
221-
</Group>
222-
<Group>
222+
223223
<ActionIcon.Group mb="md">
224-
<ActionIcon
225-
color={clipboard.copied ? 'teal' : 'cyan'}
226-
onClick={handleCopyConfig}
227-
size="input-sm"
228-
variant="outline"
229-
>
230-
<TbClipboardCopy size={20} />
231-
</ActionIcon>
232-
233-
<ActionIcon onClick={handleSelectAll} size="input-sm" variant="outline">
234-
<TbSelectAll size={20} />
235-
</ActionIcon>
236-
237-
<ActionIcon onClick={handleCut} size="input-sm" variant="outline">
238-
<TbCut size={20} />
239-
</ActionIcon>
240-
241-
<ActionIcon onClick={handlePaste} size="input-sm" variant="outline">
242-
<TbClipboardText size={20} />
243-
</ActionIcon>
224+
<Tooltip label={t('config-editor-actions.feature.copy-all-content')}>
225+
<ActionIcon
226+
color={clipboard.copied ? 'teal' : 'cyan'}
227+
onClick={handleCopyConfig}
228+
size="input-sm"
229+
variant="outline"
230+
>
231+
<TbClipboardCopy size={20} />
232+
</ActionIcon>
233+
</Tooltip>
234+
235+
<Tooltip label={t('config-editor-actions.feature.select-all')}>
236+
<ActionIcon onClick={handleSelectAll} size="input-sm" variant="outline">
237+
<TbSelectAll size={20} />
238+
</ActionIcon>
239+
</Tooltip>
240+
241+
<Tooltip label={t('config-editor-actions.feature.cut-selection')}>
242+
<ActionIcon onClick={handleCut} size="input-sm" variant="outline">
243+
<TbCut size={20} />
244+
</ActionIcon>
245+
</Tooltip>
246+
247+
<Tooltip label={t('config-editor-actions.feature.paste-from-clipboard')}>
248+
<ActionIcon onClick={handlePaste} size="input-sm" variant="outline">
249+
<TbClipboardText size={20} />
250+
</ActionIcon>
251+
</Tooltip>
244252
</ActionIcon.Group>
245-
</Group>
246253

247-
<Group grow preventGrowOverflow={false} wrap="wrap">
248254
<Button
249255
leftSection={<TbDownload size={16} />}
250256
loading={isUpdating}

‎src/shared/constants/theme/overrides/menu.ts

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,25 @@ import { Menu } from '@mantine/core'
33
export default {
44
Menu: Menu.extend({
55
defaultProps: {
6-
shadow: 'md',
7-
withArrow: true,
8-
transitionProps: { transition: 'scale', duration: 200 }
6+
shadow: 'lg',
7+
withArrow: false,
8+
radius: 'md',
9+
transitionProps: {
10+
transition: 'pop',
11+
duration: 180,
12+
timingFunction: 'ease-out'
13+
},
14+
styles: {
15+
dropdown: {
16+
backgroundColor: 'var(--mantine-color-dark-6)',
17+
border: '1px solid var(--mantine-color-dark-5)',
18+
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)'
19+
},
20+
divider: {
21+
borderColor: 'var(--mantine-color-dark-5)',
22+
margin: '4px 0'
23+
}
24+
}
925
}
1026
})
1127
}

0 commit comments

Comments
 (0)