Skip to content

Commit a80dd96

Browse files
samejrsamejr
committed
More side menu organization and icon improvements
1 parent d21497f commit a80dd96

8 files changed

Lines changed: 170 additions & 25 deletions

File tree

‎apps/webapp/app/assets/icons/HomeIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export function HomeIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M4 8.23607C4 7.47852 4.428 6.786 5.10557 6.44721L11.1056 3.44721C11.6686 3.16569 12.3314 3.16569 12.8944 3.44721L18.8944 6.44721C19.572 6.786 20 7.47852 20 8.23607V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V8.23607Z"
13+
stroke="currentColor"
14+
strokeWidth="2"
15+
/>
16+
<path
17+
d="M15 21V15C15 13.8954 14.1046 13 13 13H11C9.89543 13 9 13.8954 9 15V21"
18+
stroke="currentColor"
19+
strokeWidth="2"
20+
/>
21+
</svg>
22+
);
23+
}

‎apps/webapp/app/assets/icons/PrivateIcon.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export function PrivateIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M7.68555 4H16.3145C17.3336 4 18.1902 4.76643 18.3027 5.7793L18.8828 11H5.11719L5.69727 5.7793C5.80981 4.76643 6.66645 4 7.68555 4Z"
13+
stroke="currentColor"
14+
strokeWidth="2"
15+
/>
16+
<rect x="5" y="14" width="5" height="5" rx="2.5" stroke="currentColor" strokeWidth="2" />
17+
<rect x="14" y="14" width="5" height="5" rx="2.5" stroke="currentColor" strokeWidth="2" />
18+
<rect x="2" y="10" width="20" height="2" rx="1" fill="currentColor" />
19+
<path
20+
d="M15 15L13.5811 14.527C12.5548 14.1849 11.4452 14.1849 10.4189 14.527L9 15"
21+
stroke="currentColor"
22+
strokeWidth="2"
23+
/>
24+
</svg>
25+
);
26+
}

‎apps/webapp/app/assets/icons/RolesIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export function RolesIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<circle cx="7" cy="5.5" r="2.5" stroke="currentColor" strokeWidth="2" />
12+
<path
13+
d="M7 11C4.28772 11 3.29961 13.0954 3.06142 15.0026C2.99297 15.5507 3.44772 16 4 16H5"
14+
stroke="currentColor"
15+
strokeWidth="2"
16+
strokeLinecap="round"
17+
/>
18+
<circle cx="17" cy="11.5" r="2.5" stroke="currentColor" strokeWidth="2" />
19+
<path
20+
d="M17 17C14.4034 17 13.387 18.5363 13.0961 20.0062C12.9888 20.548 13.4477 21 14 21H20C20.5523 21 21.0112 20.548 20.9039 20.0062C20.613 18.5363 19.5966 17 17 17Z"
21+
stroke="currentColor"
22+
strokeWidth="2"
23+
/>
24+
<line
25+
x1="14.5016"
26+
y1="3.32229"
27+
x2="6.32229"
28+
y2="21.4984"
29+
stroke="currentColor"
30+
strokeWidth="2"
31+
strokeLinecap="round"
32+
/>
33+
</svg>
34+
);
35+
}

‎apps/webapp/app/assets/icons/ShieldLockIcon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export function ShieldLockIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M6 3H18C19.1046 3 20 3.89543 20 5V12.0029C20 14.0232 19.1268 15.9452 17.6055 17.2744L14.6318 19.8721C13.1244 21.1891 10.8756 21.1891 9.36816 19.8721L6.39453 17.2744C4.8732 15.9452 4.00005 14.0232 4 12.0029V5L4.01074 4.7959C4.11301 3.78722 4.96435 3 6 3Z"
13+
stroke="currentColor"
14+
strokeWidth="2"
15+
/>
16+
<rect x="11" y="9" width="2" height="5" rx="1" fill="currentColor" />
17+
<rect x="9.75" y="7" width="4.5" height="4.5" rx="2.25" fill="currentColor" />
18+
</svg>
19+
);
20+
}

‎apps/webapp/app/assets/icons/UserCrossIcon.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export function UserCrossIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<circle cx="10" cy="6" r="3" stroke="currentColor" strokeWidth="2" />
12+
<path
13+
d="M10 12C4.94135 12 3.30992 15.808 3.04178 19.0013C2.99557 19.5517 3.44772 20 4 20H16C16.5523 20 17.0044 19.5517 16.9582 19.0013C16.6901 15.808 15.0587 12 10 12Z"
14+
stroke="currentColor"
15+
strokeWidth="2"
16+
/>
17+
<line
18+
x1="17"
19+
y1="12.4156"
20+
x2="21.2426"
21+
y2="8.17298"
22+
stroke="currentColor"
23+
strokeWidth="2"
24+
strokeLinecap="round"
25+
/>
26+
<line
27+
x1="16.9142"
28+
y1="8.17297"
29+
x2="21.1569"
30+
y2="12.4156"
31+
stroke="currentColor"
32+
strokeWidth="2"
33+
strokeLinecap="round"
34+
/>
35+
</svg>
36+
);
37+
}

‎apps/webapp/app/components/ImpersonationBanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { UserMinusIcon } from "@heroicons/react/20/solid";
21
import { Form } from "@remix-run/react";
2+
import { UserCrossIcon } from "~/assets/icons/UserCrossIcon";
33
import { Button } from "./primitives/Buttons";
44
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip";
55

@@ -13,7 +13,7 @@ export function ImpersonationBanner() {
1313
<Button
1414
type="submit"
1515
variant="small-menu-item"
16-
LeadingIcon={UserMinusIcon}
16+
LeadingIcon={UserCrossIcon}
1717
fullWidth
1818
textAlignLeft
1919
className="text-amber-400"

‎apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import {
22
BellAlertIcon,
33
ChartBarIcon,
44
CreditCardIcon,
5-
LockClosedIcon,
6-
ShieldCheckIcon,
75
} from "@heroicons/react/20/solid";
86
import { ArrowLeftIcon } from "@heroicons/react/24/solid";
7+
import { PadlockIcon } from "~/assets/icons/PadlockIcon";
8+
import { RolesIcon } from "~/assets/icons/RolesIcon";
9+
import { ShieldLockIcon } from "~/assets/icons/ShieldLockIcon";
910
import { SlackIcon } from "~/assets/icons/SlackIcon";
1011
import { SlidersIcon } from "~/assets/icons/SlidersIcon";
1112
import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
@@ -114,16 +115,6 @@ export function OrganizationSettingsSideMenu({
114115
/>
115116
</>
116117
)}
117-
{featureFlags.hasPrivateConnections && (
118-
<SideMenuItem
119-
name="Private Connections"
120-
icon={LockClosedIcon}
121-
activeIconColor="text-text-bright"
122-
inactiveIconColor="text-text-dimmed"
123-
to={v3PrivateConnectionsPath(organization)}
124-
data-action="private-connections"
125-
/>
126-
)}
127118
<SideMenuItem
128119
name="Team"
129120
icon={UserGroupIcon}
@@ -132,16 +123,26 @@ export function OrganizationSettingsSideMenu({
132123
to={organizationTeamPath(organization)}
133124
data-action="team"
134125
/>
135-
{isUsingPlugin && (
136-
<SideMenuItem
137-
name="Roles"
138-
icon={ShieldCheckIcon}
139-
activeIconColor="text-text-bright"
140-
inactiveIconColor="text-text-dimmed"
141-
to={organizationRolesPath(organization)}
142-
data-action="roles"
143-
/>
144-
)}
126+
{/* {isUsingPlugin && ( */}
127+
{/* {featureFlags.hasPrivateConnections && ( */}
128+
<SideMenuItem
129+
name="Private Connections"
130+
icon={PadlockIcon}
131+
activeIconColor="text-text-bright"
132+
inactiveIconColor="text-text-dimmed"
133+
to={v3PrivateConnectionsPath(organization)}
134+
data-action="private-connections"
135+
/>
136+
{/* )} */}
137+
<SideMenuItem
138+
name="Roles"
139+
icon={RolesIcon}
140+
activeIconColor="text-text-bright"
141+
inactiveIconColor="text-text-dimmed"
142+
to={organizationRolesPath(organization)}
143+
data-action="roles"
144+
/>
145+
{/* )} */}
145146
<SideMenuItem
146147
name="Settings"
147148
icon={SlidersIcon}

‎apps/webapp/app/components/navigation/SideMenu.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { AIPenIcon } from "~/assets/icons/AIPenIcon";
1616
import { ArrowLeftRightIcon } from "~/assets/icons/ArrowLeftRightIcon";
1717
import { ArrowRightSquareIcon } from "~/assets/icons/ArrowRightSquareIcon";
1818
import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
19+
import { HomeIcon } from "~/assets/icons/HomeIcon";
1920
import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
2021
import { BatchesIcon } from "~/assets/icons/BatchesIcon";
2122
import { Box3DIcon } from "~/assets/icons/Box3DIcon";
@@ -316,7 +317,9 @@ export function SideMenu({
316317
<LinkButton
317318
variant="minimal/medium"
318319
to={adminPath()}
319-
TrailingIcon={AvatarCircleIcon}
320+
TrailingIcon={HomeIcon}
321+
trailingIconClassName="h-4.5 w-4.5"
322+
className="h-8 w-8"
320323
/>
321324
</TooltipTrigger>
322325
<TooltipContent side="bottom" className={"text-xs"}>

0 commit comments

Comments
 (0)