Skip to content

Commit c70c1ac

Browse files
kastovkastov
committed
feat: enhance build info modal and main layout UI
- Updated the MainLayout component to improve version indicator - Refactored BuildInfoModal to enhance layout, including new components for displaying build information. - Improved visual elements with updated colors, sizes, and spacing
1 parent 1f86b59 commit c70c1ac

File tree

2 files changed

+164
-80
lines changed

2 files changed

+164
-80
lines changed

‎src/app/layouts/dashboard/main-layout/main.layout.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
AppShell,
33
Badge,
44
Burger,
5-
Code,
65
Container,
76
Group,
87
Indicator,
@@ -162,15 +161,16 @@ export function MainLayout() {
162161
</Group>
163162
{buildInfo.branch === 'dev' && (
164163
<Indicator
165-
color="cyan"
164+
color="cyan.6"
166165
disabled={!isNewVersionAvailable}
166+
offset={3}
167167
processing
168168
size={11}
169169
>
170170
<Badge
171171
color="red"
172172
onClick={() => setBuildInfoModalOpened(true)}
173-
radius="sm"
173+
radius="xl"
174174
size="lg"
175175
style={{ cursor: 'help', marginLeft: 'auto' }}
176176
variant="light"
@@ -182,19 +182,22 @@ export function MainLayout() {
182182

183183
{buildInfo.branch !== 'dev' && (
184184
<Indicator
185-
color="cyan"
185+
color="cyan.6"
186186
disabled={!isNewVersionAvailable}
187+
offset={3}
187188
processing
188189
size={11}
189190
>
190-
<Code
191-
c="cyan"
192-
fw={700}
191+
<Badge
192+
color="cyan"
193193
onClick={() => setBuildInfoModalOpened(true)}
194+
radius="xl"
195+
size="lg"
194196
style={{ cursor: 'pointer', marginLeft: 'auto' }}
197+
variant="light"
195198
>
196-
{`v${packageJson.version}`}
197-
</Code>
199+
{`${packageJson.version}`}
200+
</Badge>
198201
</Indicator>
199202
)}
200203

‎src/shared/ui/build-info-modal/build-info-modal.tsx

Lines changed: 152 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,34 @@ import {
44
TbCalendar as IconCalendar,
55
TbCheck as IconCheck,
66
TbCopy as IconCopy,
7-
TbGitBranch as IconGitBranch,
8-
TbHash as IconHash,
9-
TbRipple
7+
TbGitBranch,
8+
TbHash
109
} from 'react-icons/tb'
1110
import {
12-
Alert,
1311
Badge,
1412
Box,
1513
Button,
14+
Card,
1615
Code,
16+
Divider,
17+
Flex,
1718
Group,
1819
Modal,
20+
Paper,
1921
Stack,
2022
Text,
23+
ThemeIcon,
2124
Title,
22-
Tooltip
25+
Tooltip,
26+
useMantineTheme
2327
} from '@mantine/core'
2428
import { useClipboard } from '@mantine/hooks'
29+
import dayjs from 'dayjs'
2530

2631
import { IBuildInfo } from '@shared/utils/get-build-info/interfaces/build-info.interface'
2732

33+
import { Logo } from '../logo'
34+
2835
interface BuildInfoModalProps {
2936
buildInfo: IBuildInfo
3037
isNewVersionAvailable: boolean
@@ -40,6 +47,7 @@ export function BuildInfoModal({
4047
}: BuildInfoModalProps) {
4148
const buildDate = new Date(buildInfo.buildTime).toLocaleString()
4249
const clipboard = useClipboard({ timeout: 1000 })
50+
const theme = useMantineTheme()
4351

4452
const copyBuildInfo = () => {
4553
clipboard.copy(JSON.stringify(buildInfo, null, 2))
@@ -51,19 +59,22 @@ export function BuildInfoModal({
5159
onClose={onClose}
5260
opened={opened}
5361
padding="xl"
54-
size="md"
62+
radius="lg"
5563
title={
5664
<Group justify="space-between" w="100%">
57-
<Title order={3}>Build Info</Title>
65+
<Title c={theme.primaryColor} fw={700} order={3}>
66+
Build Info
67+
</Title>
5868
<Tooltip label={clipboard.copied ? 'Copied!' : 'Copy build info'}>
5969
<Button
6070
color={clipboard.copied ? 'green' : 'gray'}
6171
leftSection={
6272
clipboard.copied ? <IconCheck size={16} /> : <IconCopy size={16} />
6373
}
6474
onClick={copyBuildInfo}
75+
radius="xl"
6576
size="compact-sm"
66-
variant="subtle"
77+
variant="light"
6778
>
6879
Copy
6980
</Button>
@@ -72,89 +83,159 @@ export function BuildInfoModal({
7283
}
7384
withCloseButton
7485
>
75-
<Stack gap="md">
86+
<Stack gap="xl">
7687
{isNewVersionAvailable && (
77-
<Alert
78-
color="teal"
79-
icon={<TbRipple size={22} />}
80-
title="Update available"
81-
variant="outline"
88+
<Paper
89+
bg="rgba(0, 180, 160, 0.05)"
90+
p="lg"
91+
radius="lg"
92+
style={{ border: `1px solid ${theme.colors.teal[3]}` }}
93+
withBorder
8294
>
83-
<Text size="sm">A new version of Remnawave is available.</Text>
84-
<Button
85-
color="cyan"
86-
component="a"
87-
href={'https://github.com/remnawave/panel/releases/latest'}
88-
mt="xs"
89-
size="xs"
90-
target="_blank"
91-
variant="outline"
92-
>
93-
Check out
94-
</Button>
95-
</Alert>
95+
<Group align="flex-start" gap="md">
96+
<ThemeIcon color="cyan" radius="xl" size={48} variant="outline">
97+
<Logo size={24} />
98+
</ThemeIcon>
99+
<Stack gap="xs" style={{ flex: 1 }}>
100+
<Text c="teal.5" fw={700} size="md">
101+
Update available
102+
</Text>
103+
<Text c="dimmed" size="md">
104+
A new version is available.
105+
</Text>
106+
<Button
107+
color="teal"
108+
component="a"
109+
fullWidth={false}
110+
href={'https://github.com/remnawave/panel/releases/latest'}
111+
leftSection={<IconBrandGithub size={16} />}
112+
mt="sm"
113+
radius="md"
114+
size="sm"
115+
style={{ alignSelf: 'flex-start' }}
116+
target="_blank"
117+
variant="light"
118+
>
119+
Check out
120+
</Button>
121+
</Stack>
122+
</Group>
123+
</Paper>
96124
)}
97125

98-
<Group align="flex-start">
99-
<IconCalendar size={20} />
100-
<Box>
101-
<Text fw={500}>Build Time</Text>
102-
<Text c="dimmed" size="sm">
103-
{buildDate}
104-
</Text>
105-
</Box>
106-
</Group>
126+
<Card padding="lg" radius="lg" shadow="sm" withBorder>
127+
<Stack gap="lg">
128+
<Group align="center" gap="lg">
129+
<ThemeIcon
130+
color={theme.primaryColor}
131+
radius="xl"
132+
size={48}
133+
style={{
134+
border: `1px solid ${theme.colors[theme.primaryColor][5]}`
135+
}}
136+
variant="light"
137+
>
138+
<IconCalendar size={24} />
139+
</ThemeIcon>
140+
<Box style={{ flex: 1 }}>
141+
<Text fw={700} size="md">
142+
Build Time
143+
</Text>
144+
<Text c="dimmed" mt={4} size="sm">
145+
{dayjs(buildDate).format('DD/MM/YYYY HH:mm:ss')}
146+
</Text>
147+
</Box>
148+
</Group>
107149

108-
<Group align="flex-start">
109-
<IconGitBranch size={20} />
110-
<Box>
111-
<Text fw={500}>Branch</Text>
112-
<Badge color="blue" variant="light">
113-
{buildInfo.branch}
114-
</Badge>
115-
{buildInfo.tag && (
116-
<Badge color="green" ml="xs" variant="light">
117-
{buildInfo.tag}
118-
</Badge>
119-
)}
120-
</Box>
121-
</Group>
150+
<Divider variant="dashed" />
122151

123-
<Group align="flex-start">
124-
<IconHash size={20} />
125-
<Box>
126-
<Text fw={500}>Commit</Text>
127-
<Code>{buildInfo.commit}</Code>
128-
</Box>
129-
</Group>
152+
<Group align="center" gap="lg">
153+
<ThemeIcon
154+
color={theme.primaryColor}
155+
radius="xl"
156+
size={48}
157+
style={{
158+
border: `1px solid ${theme.colors[theme.primaryColor][5]}`
159+
}}
160+
variant="light"
161+
>
162+
<TbGitBranch size={24} />
163+
</ThemeIcon>
164+
<Box style={{ flex: 1 }}>
165+
<Text fw={700} size="md">
166+
Branch
167+
</Text>
168+
<Flex gap="xs" mt={6}>
169+
<Badge
170+
color="blue"
171+
px="md"
172+
radius="xl"
173+
size="lg"
174+
variant="light"
175+
>
176+
{buildInfo.branch}
177+
</Badge>
178+
{buildInfo.tag && (
179+
<Badge
180+
color="green"
181+
px="md"
182+
radius="xl"
183+
size="lg"
184+
variant="light"
185+
>
186+
{buildInfo.tag}
187+
</Badge>
188+
)}
189+
</Flex>
190+
</Box>
191+
</Group>
192+
193+
<Divider variant="dashed" />
130194

131-
<Group
132-
gap="md"
133-
grow
134-
justify="center"
135-
mt="lg"
136-
preventGrowOverflow={false}
137-
wrap="wrap"
138-
>
195+
<Group align="center" gap="lg">
196+
<ThemeIcon
197+
color={theme.primaryColor}
198+
radius="xl"
199+
size={48}
200+
style={{
201+
border: `1px solid ${theme.colors[theme.primaryColor][5]}`
202+
}}
203+
variant="light"
204+
>
205+
<TbHash size={24} />
206+
</ThemeIcon>
207+
<Box style={{ flex: 1 }}>
208+
<Text fw={700} size="md">
209+
Commit
210+
</Text>
211+
<Code fz={'sm'}>{buildInfo.commit}</Code>
212+
</Box>
213+
</Group>
214+
</Stack>
215+
</Card>
216+
217+
<Group gap="md" grow preventGrowOverflow={false} wrap="wrap">
139218
<Button
140219
component="a"
141220
href={buildInfo.commitUrl}
142-
leftSection={<IconBrandGithub size={16} />}
143-
size="sm"
221+
leftSection={<IconBrandGithub size={18} />}
222+
radius="md"
223+
size="md"
144224
target="_blank"
145225
variant="outline"
146226
>
147227
View on GitHub
148228
</Button>
149229

150230
<Button
151-
c="cyan"
231+
color="cyan"
152232
component="a"
153233
href={'https://t.me/remnawave'}
154-
leftSection={<IconBrandTelegram size={16} />}
155-
size="sm"
234+
leftSection={<IconBrandTelegram size={18} />}
235+
radius="md"
236+
size="md"
156237
target="_blank"
157-
variant="outline"
238+
variant="light"
158239
>
159240
Ask Community
160241
</Button>

0 commit comments

Comments
 (0)