[WEB-5708] regression: remove material icon instances from the Space app (#8353)

apps/space/core/components/issues/navbar/theme.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
 
 export const NavbarTheme = observer(function NavbarTheme() {
   // states
@@ -23,7 +24,7 @@ export const NavbarTheme = observer(function NavbarTheme() {
       onClick={handleTheme}
       className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover text-primary"
     >
-      <span className="material-symbols-rounded text-13">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+      {appTheme === "light" ? <Moon className="shrink-0 size-3.5" /> : <Sun className="shrink-0 size-3.5" />}
     </button>
   );
 });

apps/space/core/components/issues/peek-overview/issue-activity.tsx

@@ -1,13 +1,12 @@
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Lock } from "lucide-react";
 // plane imports
 import { Button } from "@plane/propel/button";
 // components
 import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
 import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
-import { Icon } from "@/components/ui";
 // hooks
 import { usePublish } from "@/hooks/store/publish";
 import { useIssueDetails } from "@/hooks/store/use-issue-details";
@@ -53,8 +52,8 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
             </>
           ) : (
             <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-13 text-secondary">
-                <Icon iconName="lock" />
+              <p className="flex items-center gap-2 overflow-hidden break-words text-13 text-secondary">
+                <Lock className="shrink-0 size-3" />
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${pathname}`}>

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -1,12 +1,17 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { LinkIcon } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StatePropertyIcon, StateGroupIcon, PriorityPropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
+import {
+  StatePropertyIcon,
+  StateGroupIcon,
+  PriorityPropertyIcon,
+  DueDatePropertyIcon,
+  PriorityIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
-// components
-import { Icon } from "@/components/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
@@ -58,7 +63,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="shrink-0 size-3.5" />
             </button>
           </div>
         </div>
@@ -94,11 +99,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                         : "border-priority-none text-priority-none"
               }`}
             >
-              {priority && (
-                <span className="-my-1 grid place-items-center">
-                  <Icon iconName={priority?.icon} />
-                </span>
-              )}
+              {priority && <PriorityIcon priority={priority?.key} size={12} className="flex-shrink-0" />}
               <span>{t(priority?.titleTranslationKey || "common.none")}</span>
             </div>
           </div>

apps/space/core/components/issues/reactions/issue-vote-reactions.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
@@ -108,7 +109,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-14">arrow_upward_alt</span>
+          <ArrowUp className="shrink-0 size-3.5" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
         </button>
       </Tooltip>
@@ -149,7 +150,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-14">arrow_downward_alt</span>
+          <ArrowDown className="shrink-0 size-3.5" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
         </button>
       </Tooltip>

apps/space/core/components/ui/icon.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-
-type Props = {
-  iconName: string;
-  className?: string;
-};
-
-export function Icon({ iconName, className = "" }: Props) {
-  return <span className={`material-symbols-rounded text-13 font-light leading-5 ${className}`}>{iconName}</span>;
-}

apps/space/core/components/ui/index.ts

@@ -1 +0,0 @@
-export * from "./icon";

apps/web/core/components/core/theme/color-picker-input.tsx

@@ -1,128 +0,0 @@
-import type { FC } from "react";
-import { Fragment } from "react";
-// react-form
-import type { ColorResult } from "react-color";
-import { SketchPicker } from "react-color";
-import type {
-  Control,
-  FieldError,
-  FieldErrorsImpl,
-  Merge,
-  UseFormRegister,
-  UseFormSetValue,
-  UseFormWatch,
-} from "react-hook-form";
-import { Controller } from "react-hook-form";
-// react-color
-// component
-import { Palette } from "lucide-react";
-import { Popover, Transition } from "@headlessui/react";
-import type { IUserTheme } from "@plane/types";
-import { Input } from "@plane/ui";
-// icons
-// types
-
-type Props = {
-  name: keyof IUserTheme;
-  position?: "left" | "right";
-  watch: UseFormWatch<any>;
-  setValue: UseFormSetValue<any>;
-  control: Control<IUserTheme, any>;
-  error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
-  register: UseFormRegister<any>;
-};
-
-export function ColorPickerInput(props: Props) {
-  const { name, position = "left", watch, setValue, error, control } = props;
-
-  const handleColorChange = (newColor: ColorResult) => {
-    const { hex } = newColor;
-    setValue(name, hex);
-  };
-
-  const getColorText = (colorName: keyof IUserTheme) => {
-    switch (colorName) {
-      case "background":
-        return "Background";
-      case "text":
-        return "Text";
-      case "primary":
-        return "Primary(Theme)";
-      case "sidebarBackground":
-        return "Sidebar Background";
-      case "sidebarText":
-        return "Sidebar Text";
-      default:
-        return "Color";
-    }
-  };
-
-  return (
-    <div className="relative">
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: `${getColorText(name)} color is required`,
-          pattern: {
-            value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-            message: `${getColorText(name)} color should be hex format`,
-          },
-        }}
-        render={({ field: { onChange, ref } }) => (
-          <Input
-            id={name}
-            name={name}
-            type="text"
-            value={watch("name")}
-            onChange={onChange}
-            ref={ref}
-            hasError={Boolean(error)}
-            placeholder="#FFFFFF"
-          />
-        )}
-      />
-      <div className="absolute right-4 top-2.5">
-        <Popover className="relative grid place-items-center">
-          {({ open }) => (
-            <>
-              <Popover.Button
-                type="button"
-                className={`group inline-flex items-center outline-none ${open ? "text-primary" : "text-secondary"}`}
-              >
-                {watch(name) && watch(name) !== "" ? (
-                  <span
-                    className="h-4 w-4 rounded-sm border border-subtle"
-                    style={{
-                      backgroundColor: `${watch(name)}`,
-                    }}
-                  />
-                ) : (
-                  <Palette className="h-3.5 w-3.5 text-primary" />
-                )}
-              </Popover.Button>
-
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel
-                  className={`absolute bottom-8 z-20 mt-1 max-w-xs px-2 sm:px-0 ${
-                    position === "right" ? "left-0" : "right-0"
-                  }`}
-                >
-                  <SketchPicker color={watch(name)} onChange={handleColorChange} />
-                </Popover.Panel>
-              </Transition>
-            </>
-          )}
-        </Popover>
-      </div>
-    </div>
-  );
-}