Merge branch 'images-fix' of https://github.com/kamranahmedse/developer-roadmap into images-fix

1 year ago · 581f4a76a4
parent ef1a3031c4 3774f3c5ec
commit 581f4a76a4
7 changed files with 146 additions and 50 deletions
--- a/src/components/CreateTeam/SelectRoadmapModal.tsx
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@ -3,8 +3,8 @@ import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
 import type { TeamResourceConfig } from './RoadmapSelector';
-import CloseIcon from '../../icons/close.svg';
 import { SelectRoadmapModalItem } from './SelectRoadmapModalItem';
+import { XIcon } from 'lucide-react';

 export type SelectRoadmapModalProps = {
  teamId: string;
@ -60,11 +60,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
    setSearchResults(searchResults);
  }, [searchText, allRoadmaps]);

-  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
-    roadmap?.metadata?.tags?.includes('role-roadmap')
+  const roleBasedRoadmaps = searchResults.filter(
+    (roadmap) => roadmap?.metadata?.tags?.includes('role-roadmap'),
  );
-  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
-    roadmap?.metadata?.tags?.includes('skill-roadmap')
+  const skillBasedRoadmaps = searchResults.filter(
+    (roadmap) => roadmap?.metadata?.tags?.includes('skill-roadmap'),
  );

  return (
@ -79,7 +79,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
            className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900"
            onClick={onClose}
          >
-            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
            <span className="sr-only">Close modal</span>
          </button>
          <input
@ -101,7 +101,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
              <div className="mb-5 flex flex-wrap items-center gap-2">
                {roleBasedRoadmaps.map((roadmap) => {
                  const isSelected = !!teamResourceConfig?.find(
-                    (r) => r.resourceId === roadmap.id
+                    (r) => r.resourceId === roadmap.id,
                  );

                  return (
@ -127,7 +127,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
            <div className="flex flex-wrap items-center gap-2">
              {skillBasedRoadmaps.map((roadmap) => {
                const isSelected = !!teamResourceConfig.find(
-                  (r) => r.resourceId === roadmap.id
+                  (r) => r.resourceId === roadmap.id,
                );

                return (
--- a/src/components/CreateTeam/Step0.tsx
+++ b/src/components/CreateTeam/Step0.tsx
@ -1,22 +1,22 @@
-import BuildingIcon from '../../icons/building.svg';
-import UsersIcon from '../../icons/users.svg';
 import type { TeamDocument } from './CreateTeamForm';
 import { httpPut } from '../../lib/http';
 import { useState } from 'react';
 import { NextButton } from './NextButton';
+import { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';
+import { UsersIcon } from '../ReactIcons/UsersIcon.tsx';

 export const validTeamTypes = [
  {
    value: 'company',
    label: 'Company',
-    icon: BuildingIcon.src,
+    icon: BuildingIcon,
    description:
      'Track the skills and learning progress of the tech team at your company',
  },
  {
    value: 'study_group',
    label: 'Study Group',
-    icon: UsersIcon.src,
+    icon: UsersIcon,
    description:
      'Invite your friends or course-mates and track your learning progress together',
  },
@ -56,7 +56,7 @@ export function Step0(props: Step0Props) {
          teamSize: team.teamSize,
          linkedInUrl: team?.links?.linkedIn || undefined,
        }),
-      }
+      },
    );

    if (error || !response) {
@ -76,21 +76,20 @@ export function Step0(props: Step0Props) {
        {validTeamTypes.map((validTeamType) => (
          <button
            key={validTeamType.value}
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pt-12 pb-10 ${
+            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
              validTeamType.value == selectedTeamType
                ? 'border-gray-400 bg-gray-100'
                : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
            }`}
            onClick={() => setSelectedTeamType(validTeamType.value)}
          >
-            <img
-              key={validTeamType.value}
-              alt={validTeamType.label}
-              src={validTeamType.icon}
-              className={`mb-3 h-12 w-12 opacity-10 ${
-                validTeamType.value === selectedTeamType ? 'opacity-100' : ''
-              }`}
-            />
+            {
+              <validTeamType.icon
+                className={`mb-3 h-12 w-12 opacity-10 ${
+                  validTeamType.value === selectedTeamType ? 'opacity-100' : ''
+                }`}
+              />
+            }
            <span className="mb-2 block text-2xl font-bold">
              {validTeamType.label}
            </span>
--- a/src/components/ReactIcons/BuildingIcon.tsx
+++ b/src/components/ReactIcons/BuildingIcon.tsx
@ -0,0 +1,29 @@
+type BuildingIconProps = {
+  className?: string;
+};
+export function BuildingIcon(props: BuildingIconProps) {
+  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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
+      <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path>
+      <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path>
+      <path d="M10 6h4"></path>
+      <path d="M10 10h4"></path>
+      <path d="M10 14h4"></path>
+      <path d="M10 18h4"></path>
+    </svg>
+  );
+}
--- 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/ReactIcons/UsersIcon.tsx
+++ b/src/components/ReactIcons/UsersIcon.tsx
@ -0,0 +1,26 @@
+type UsersIconProps = {
+  className?: string;
+};
+export function UsersIcon(props: UsersIconProps) {
+  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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
+      <circle cx="9" cy="7" r="4"></circle>
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+    </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>