Skip to content

Commit 8ceb902

Browse files
nicosammitonicosammito
committed
feat: enhance UI components with new icons and improved styling for better user experience
1 parent 4392747 commit 8ceb902

File tree

5 files changed

+99
-51
lines changed

5 files changed

+99
-51
lines changed

‎src/components/d-member/DNamespaceMemberContent.tsx‎

Lines changed: 78 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,16 @@ import {DNamespaceRoleReactiveService, DNamespaceRoleView} from "../d-role"
88
import {Avatar} from "../avatar/Avatar"
99
import {Text} from "../text/Text"
1010
import {Badge} from "../badge/Badge"
11-
import {IconDots, IconMailCheck, IconTrash, IconUserCog, IconUserOff} from "@tabler/icons-react"
11+
import {
12+
IconArrowDown,
13+
IconArrowUp,
14+
IconCornerDownLeft,
15+
IconDots,
16+
IconMailCheck,
17+
IconTrash,
18+
IconUserCog,
19+
IconUserOff
20+
} from "@tabler/icons-react"
1221
import {Button} from "../button/Button"
1322
import {Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipTrigger} from "../tooltip/Tooltip"
1423
import {DNamespaceRolePermissions} from "../d-role/DNamespaceRolePermissions"
@@ -17,6 +26,7 @@ import {DNamespaceMemberView} from "./DNamespaceMember.view"
1726
import {Dialog, DialogClose, DialogContent, DialogPortal} from "../dialog/Dialog"
1827
import {Card} from "../card/Card"
1928
import CardSection from "../card/CardSection"
29+
import {Spacing} from "../spacing/Spacing";
2030

2131
export interface DNamespaceMemberContentProps {
2232
memberId: NamespaceMember['id']
@@ -80,7 +90,7 @@ export const DNamespaceMemberContent: React.FC<DNamespaceMemberContentProps> = (
8090
<Text hierarchy={"primary"}>{role?.name}</Text>
8191
<DNamespaceRolePermissions abilities={role?.abilities!!}/>
8292
</Flex>
83-
<Button color={"error"} paddingSize={"xxs"} onClick={() => {
93+
<Button color={"error"} variant={"filled"} paddingSize={"xxs"} onClick={() => {
8494
setLocalAssignedRoles(prevState => prevState.filter(aRole => aRole?.id != role?.id))
8595
}}>
8696
<IconTrash size={16}/>
@@ -96,21 +106,40 @@ export const DNamespaceMemberContent: React.FC<DNamespaceMemberContentProps> = (
96106
</CardSection>
97107
</MenuTrigger>
98108
<MenuPortal>
99-
<MenuContent side={"bottom"} sideOffset={8} align={"center"}>
100-
<MenuLabel>Roles to add</MenuLabel>
101-
{rolesToAssign.map((role, index) => {
102-
return <>
103-
<MenuItem onSelect={() => {
104-
setLocalAssignedRoles(prevState => [...prevState, role])
105-
}}>
106-
<Flex align={"center"} style={{gap: "1.3rem"}}>
107-
<Text hierarchy={"primary"}>{role?.name}</Text>
108-
<DNamespaceRolePermissions abilities={role?.abilities!!}/>
109+
<MenuContent side={"bottom"} sideOffset={8} align={"center"} color={"secondary"}
110+
maw={"300px"}>
111+
<Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
112+
<MenuLabel>Roles to add</MenuLabel>
113+
{rolesToAssign.map((role, index) => {
114+
return <>
115+
<MenuItem onSelect={() => {
116+
setLocalAssignedRoles(prevState => [...prevState, role])
117+
}}>
118+
<Flex align={"center"} style={{gap: "1.3rem"}}>
119+
<Text hierarchy={"primary"}>{role?.name}</Text>
120+
<DNamespaceRolePermissions abilities={role?.abilities!!}/>
121+
</Flex>
122+
</MenuItem>
123+
{index < rolesToAssign.length - 1 && <MenuSeparator/>}
124+
</>
125+
})}
126+
</Card>
127+
<MenuLabel>
128+
<Flex style={{gap: ".35rem"}}>
129+
<Flex align={"center"} style={{gap: "0.35rem"}}>
130+
<Flex>
131+
<Badge border><IconArrowUp size={12}/></Badge>
132+
<Badge border><IconArrowDown size={12}/></Badge>
109133
</Flex>
110-
</MenuItem>
111-
{index < rolesToAssign.length - 1 && <MenuSeparator/>}
112-
</>
113-
})}
134+
move
135+
</Flex>
136+
<Spacing spacing={"xxs"}/>
137+
<Flex align={"center"} style={{gap: ".35rem"}}>
138+
<Badge border><IconCornerDownLeft size={12}/></Badge>
139+
insert
140+
</Flex>
141+
</Flex>
142+
</MenuLabel>
114143
</MenuContent>
115144
</MenuPortal>
116145
</Menu>
@@ -179,25 +208,43 @@ export const DNamespaceMemberContent: React.FC<DNamespaceMemberContentProps> = (
179208
{member?.userAbilities?.deleteMember || member?.userAbilities?.assignMemberRoles ? (
180209
<Menu>
181210
<MenuTrigger asChild>
182-
<Button color="secondary">
211+
<Button variant={"filled"} color="secondary">
183212
<IconDots size={16}/>
184213
</Button>
185214
</MenuTrigger>
186215
<MenuPortal>
187-
<MenuContent align={"end"} side={"bottom"} sideOffset={8}>
188-
<MenuLabel>Actions</MenuLabel>
189-
{member?.userAbilities?.deleteMember && (
190-
<MenuItem onSelect={() => setOpenRemovedMemberDialog(true)}>
191-
<IconUserOff size={16}/>
192-
<Text>Remove member</Text>
193-
</MenuItem>
194-
)}
195-
{member?.userAbilities?.assignMemberRoles && (
196-
<MenuItem onSelect={() => setOpenAssignRolesDialog(true)}>
197-
<IconUserCog size={16}/>
198-
<Text>Assign role</Text>
199-
</MenuItem>
200-
)}
216+
<MenuContent align={"end"} side={"bottom"} sideOffset={8} color={"secondary"}>
217+
<Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
218+
<MenuLabel>Actions</MenuLabel>
219+
{member?.userAbilities?.deleteMember && (
220+
<MenuItem onSelect={() => setOpenRemovedMemberDialog(true)}>
221+
<IconUserOff size={16}/>
222+
<Text>Remove member</Text>
223+
</MenuItem>
224+
)}
225+
{member?.userAbilities?.assignMemberRoles && (
226+
<MenuItem onSelect={() => setOpenAssignRolesDialog(true)}>
227+
<IconUserCog size={16}/>
228+
<Text>Assign role</Text>
229+
</MenuItem>
230+
)}
231+
</Card>
232+
<MenuLabel>
233+
<Flex style={{gap: ".35rem"}}>
234+
<Flex align={"center"} style={{gap: "0.35rem"}}>
235+
<Flex>
236+
<Badge border><IconArrowUp size={12}/></Badge>
237+
<Badge border><IconArrowDown size={12}/></Badge>
238+
</Flex>
239+
move
240+
</Flex>
241+
<Spacing spacing={"xxs"}/>
242+
<Flex align={"center"} style={{gap: ".35rem"}}>
243+
<Badge border><IconCornerDownLeft size={12}/></Badge>
244+
perform
245+
</Flex>
246+
</Flex>
247+
</MenuLabel>
201248
</MenuContent>
202249
</MenuPortal>
203250
</Menu>

‎src/components/d-organization/DOrganizatonContent.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
import React from "react"
44
import {Code0Component, useService, useStore} from "../../utils"
5-
import {Organization, Scalars} from "@code0-tech/sagittarius-graphql-types"
5+
import {Organization} from "@code0-tech/sagittarius-graphql-types"
66
import {Text} from "../text/Text"
77
import {DOrganizationReactiveService} from "./DOrganization.service"
8-
import {IconFolder, IconLogout, IconServer, IconSettings, IconUser} from "@tabler/icons-react"
8+
import {IconEdit, IconFolders, IconLogout, IconServer, IconSettings, IconUsers} from "@tabler/icons-react"
99
import {Flex} from "../flex/Flex";
1010
import {Button} from "../button/Button";
1111
import {Spacing} from "../spacing/Spacing";
@@ -60,21 +60,21 @@ export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
6060
</Text>
6161
<Spacing spacing={"xxs"}/>
6262
<Flex align={"center"} style={{gap: "0.35rem", flexWrap: "wrap"}}>
63-
<Badge color={"secondary"}>
63+
<Badge border>
6464
<Flex align={"center"} style={{gap: "0.35rem"}}>
65-
<IconFolder size={16}/>
65+
<IconFolders size={16}/>
6666
<Text size={"xs"}
6767
hierarchy={"tertiary"}>{`${projectCount ?? 0} project${(projectCount ?? 0) !== 1 ? "s" : ""}`}</Text>
6868
</Flex>
6969
</Badge>
70-
<Badge color={"secondary"}>
70+
<Badge border>
7171
<Flex align={"center"} style={{gap: "0.35rem"}}>
72-
<IconUser size={16}/>
72+
<IconUsers size={16}/>
7373
<Text size={"xs"}
7474
hierarchy={"tertiary"}> {`${memberCount ?? 0} member${(memberCount ?? 0) !== 1 ? "s" : ""}`}</Text>
7575
</Flex>
7676
</Badge>
77-
<Badge color={"secondary"}>
77+
<Badge border>
7878
<Flex align={"center"} style={{gap: "0.35rem"}}>
7979
<IconServer size={16}/>
8080
<Text size={"xs"}
@@ -84,17 +84,17 @@ export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
8484
</Flex>
8585
</Flex>
8686
</Flex>
87-
<Flex align={"center"} style={{gap: "0.35rem"}}>
87+
<Flex align={"center"} style={{gap: "0.7rem"}}>
8888
{(organization?.userAbilities?.deleteOrganization || organization?.userAbilities?.updateOrganization) ? (
89-
<Button color={"secondary"} onClick={(event) => {
89+
<Button variant={"filled"} color={"secondary"} onClick={(event) => {
9090
event.stopPropagation()
9191
onSetting(organization)
9292
}}>
93-
<IconSettings size={16}/>
93+
<IconEdit size={16}/>
9494
</Button>
9595
) : null}
9696
{namespaceMember && namespaceMember.userAbilities?.deleteMember ? (
97-
<Button color={"error"} onClick={(event) => {
97+
<Button variant={"filled"} color={"error"} onClick={(event) => {
9898
event.stopPropagation()
9999
if (organization) onLeave(organization)
100100
}}>

‎src/components/d-role/DNamespaceRoleContent.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {useService, useStore} from "../../utils";
88
import {DNamespaceRoleReactiveService} from "./DNamespaceRole.service";
99
import {Text} from "../text/Text";
1010
import {Button} from "../button/Button";
11-
import {IconFolders, IconSettings, IconUsers} from "@tabler/icons-react";
11+
import {IconEdit, IconFolders, IconSettings, IconUsers} from "@tabler/icons-react";
1212
import {DNamespaceRolePermissions} from "./DNamespaceRolePermissions";
1313
import {DNamespaceMemberReactiveService} from "../d-member";
1414
import {Badge} from "../badge/Badge";
@@ -186,12 +186,13 @@ export const DNamespaceRoleContent: React.FC<DNamespaceRoleContentProps> = (prop
186186
{canEditRole && (
187187
<Button
188188
color="secondary"
189+
variant={"filled"}
189190
onClick={event => {
190191
event.stopPropagation()
191192
onSetting(role as DNamespaceRoleView)
192193
}}
193194
>
194-
<IconSettings size={16}/>
195+
<IconEdit size={16}/>
195196
</Button>
196197
)}
197198
</Flex>

‎src/components/d-runtime/DRuntimeContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Runtime} from "@code0-tech/sagittarius-graphql-types";
22
import React from "react";
33
import {Text} from "../text/Text";
44
import {Flex} from "../flex/Flex";
5-
import {IconServer, IconSettings} from "@tabler/icons-react";
5+
import {IconEdit, IconServer, IconSettings} from "@tabler/icons-react";
66
import {Button} from "../button/Button";
77
import {useService, useStore} from "../../utils";
88
import {DRuntimeReactiveService} from "./DRuntime.service";
@@ -55,11 +55,11 @@ export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
5555
)}
5656
</Flex>
5757
{!minimized && (runtime?.userAbilities?.deleteRuntime || runtime?.userAbilities?.updateRuntime || runtime?.userAbilities?.rotateRuntimeToken) ? (
58-
<Button color={"secondary"} onClick={(event) => {
58+
<Button color={"secondary"} variant={"filled"} onClick={(event) => {
5959
event.stopPropagation()
6060
onSetting(runtime)
6161
}}>
62-
<IconSettings size={16}/>
62+
<IconEdit size={16}/>
6363
</Button>
6464
) : null}
6565
</Flex>

‎src/components/d-user/DUserContent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const DUserContent: React.FC<DUserContentProps> = (props) => {
4343
</Flex>
4444
<Flex style={{gap: "1.3rem"}} align={"center"}>
4545
{user?.emailVerifiedAt ? (
46-
<Badge color={"primary"}>
46+
<Badge border>
4747
<IconMailCheck size={16}/>
4848
<Text size={"xs"} hierarchy={"tertiary"}>Email verified</Text>
4949
</Badge>
@@ -54,21 +54,21 @@ export const DUserContent: React.FC<DUserContentProps> = (props) => {
5454
{
5555
remove ? (
5656
<Flex align={"center"} style={{gap: "0.35rem"}}>
57-
<Button color={"error"} onClick={(event) => {
57+
<Button variant={"filled"} color={"error"} onClick={(event) => {
5858
event.stopPropagation()
5959
onRemove(user)
6060
}}>
6161
Confirm remove
6262
</Button>
63-
<Button onClick={(event) => {
63+
<Button variant={"filled"} onClick={(event) => {
6464
event.stopPropagation()
6565
setRemove(false)
6666
}} color={"success"}>
6767
Cancel
6868
</Button>
6969
</Flex>
7070
) : (
71-
<Button onClick={() => setRemove(true)}>
71+
<Button variant={"filled"} onClick={() => setRemove(true)}>
7272
Remove
7373
</Button>)
7474
}

0 commit comments

Comments
 (0)