Team sidebar fix

11 months ago · 3774f3c5ec
parent b11da48f41
commit 3774f3c5ec
3 changed files with 70 additions and 28 deletions
--- a/src/components/ReactIcons/CogIcon.tsx
+++ b/src/components/ReactIcons/CogIcon.tsx
@ -0,0 +1,28 @@
+type CogIconProps = {
+  className?: string;
+};
+export function CogIcon(props: CogIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
--- a/src/components/ReactIcons/TeamProgressIcon.tsx
+++ b/src/components/ReactIcons/TeamProgressIcon.tsx
@ -0,0 +1,24 @@
+type TeamProgressIconProps = {
+  className?: string;
+};
+export function TeamProgressIcon(props: TeamProgressIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M3 3v18h18" />
+      <path d="m19 9-5 5-4-4-3 3" />
+    </svg>
+  );
+}
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@ -1,16 +1,16 @@
 import { TeamDropdown } from './TeamDropdown/TeamDropdown';
-import ChevronDown from '../icons/dropdown.svg';
 import { useTeamId } from '../hooks/use-team-id';
-import TeamProgress from '../icons/team-progress.svg';
-import SettingsIcon from '../icons/cog.svg';
 import ChatIcon from '../icons/chat.svg';
-import MapIcon from '../icons/map.svg';
-import GroupIcon from '../icons/group.svg';
-import { useState } from 'react';
 import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../stores/team';
 import { SubmitFeedbackPopup } from './Feedback/SubmitFeedbackPopup';
+import { ChevronDownIcon } from './ReactIcons/ChevronDownIcon.tsx';
+import { GroupIcon } from './ReactIcons/GroupIcon.tsx';
+import { TeamProgressIcon } from './ReactIcons/TeamProgressIcon.tsx';
+import { MapIcon, MessageCircle } from 'lucide-react';
+import { CogIcon } from './ReactIcons/CogIcon.tsx';

 type TeamSidebarProps = {
  activePageId: string;
@ -29,26 +29,26 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
      title: 'Progress',
      href: `/team/progress?t=${teamId}`,
      id: 'progress',
-      icon: TeamProgress.src,
+      icon: TeamProgressIcon,
    },
    {
      title: 'Roadmaps',
      href: `/team/roadmaps?t=${teamId}`,
      id: 'roadmaps',
-      icon: MapIcon.src,
+      icon: MapIcon,
      hasWarning: currentTeam?.roadmaps?.length === 0,
    },
    {
      title: 'Members',
      href: `/team/members?t=${teamId}`,
      id: 'members',
-      icon: GroupIcon.src,
+      icon: GroupIcon,
    },
    {
      title: 'Settings',
      href: `/team/settings?t=${teamId}`,
      id: 'settings',
-      icon: SettingsIcon.src,
+      icon: CogIcon,
    },
  ];

@ -66,7 +66,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
            sidebarLinks.find((sidebarLink) => sidebarLink.id === activePageId)
              ?.title
          }
-          <img alt="menu" src={ChevronDown.src} className="h-4 w-4" />
+          <ChevronDownIcon className="h-4 w-4" />
        </button>
        {menuShown && (
          <ul
@ -80,7 +80,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                  activePageId === 'team' ? 'bg-slate-100' : ''
                }`}
              >
-                <img alt={'teams'} src={GroupIcon.src} className={`mr-2 h-4 w-4`} />
+                <GroupIcon className="mr-2 h-4 w-4" />
                Personal Account / Teams
              </a>
            </li>
@ -95,11 +95,8 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                      isActive ? 'bg-slate-100' : ''
                    }`}
                  >
-                    <img
-                      alt={'menu icon'}
-                      src={sidebarLink.icon}
-                      className="mr-2 h-4 w-4"
-                    />
+                    {<sidebarLink.icon className="mr-2 h-4 w-4" />}
+
                    {sidebarLink.title}
                  </a>
                </li>
@ -111,11 +108,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
                onClick={() => setShowFeedbackPopup(true)}
              >
-                <img
-                  alt={'menu icon'}
-                  src={ChatIcon.src}
-                  className="mr-2 h-4 w-4"
-                />
+                <MessageCircle className="mr-2 h-4 w-4" />
                Send Feedback
              </button>
            </li>
@ -150,11 +143,8 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                    >
                      <span className="flex flex-grow items-center justify-between">
                        <span className="flex">
-                          <img
-                            alt="menu icon"
-                            src={sidebarLink.icon}
-                            className="relative top-[2px] mr-2 h-4 w-4"
-                          />
+                          {<sidebarLink.icon className="mr-2 h-4 w-4" />}
+
                          {sidebarLink.title}
                        </span>
                        {sidebarLink.hasWarning && (
@ -174,7 +164,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
              className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-sm text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-black"
              onClick={() => setShowFeedbackPopup(true)}
            >
-              <img alt={'feedback'} src={ChatIcon.src} className="mr-2 h-4 w-4" />
+              <MessageCircle className="mr-2 h-4 w-4" />
              Send Feedback
            </button>
          </nav>