feat: Refactor icon components and update button elements for improved accessibility and consistency

2025-04-24 14:05:55 +05:30
parent e43bfb6e98
commit d7f1c5224d
18 changed files with 125 additions and 172 deletions
--- a/app/src/components/icons/ContextMenuIcons.tsx
+++ b/app/src/components/icons/ContextMenuIcons.tsx
@@ -42,44 +42,46 @@ export function FlipXAxisIcon() {
 }

 export function FlipYAxisIcon() {
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
-      fill="var(--text-color)"
-    />
-    <path
-      d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
-      stroke="var(--text-color)"
-      strokeWidth="0.75"
-    />
-    <path
-      opacity="0.5"
-      d="M7 6H5"
-      stroke="var(--text-color)"
-      strokeWidth="0.75"
-      strokeLinecap="round"
-    />
-    <path
-      opacity="0.5"
-      d="M3 6H1"
-      stroke="var(--text-color)"
-      strokeWidth="0.75"
-      strokeLinecap="round"
-    />
-    <path
-      opacity="0.5"
-      d="M11 6H9"
-      stroke="var(--text-color)"
-      strokeWidth="0.75"
-      strokeLinecap="round"
-    />
-  </svg>;
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+      />
+      <path
+        opacity="0.5"
+        d="M7 6H5"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M3 6H1"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M11 6H9"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
 }
 export function FlipZAxisIcon() {
  return (
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -168,20 +168,6 @@ export function AddIcon() {
  );
 }

-export function RmoveIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
-    </svg>
-  );
-}
-
 export function CloseIcon() {
  return (
    <svg
--- a/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
+++ b/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
@@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
          <path
            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
          <path
            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
        </svg>
      </div>
--- a/app/src/components/layout/Dashboard/SidePannel.tsx
+++ b/app/src/components/layout/Dashboard/SidePannel.tsx
@@ -11,7 +11,7 @@ import {
 import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";

 const SidePannel: React.FC = () => {
-  const userName = localStorage.getItem("userName") || "Anonymous";
+  const userName = localStorage.getItem("userName") ?? "Anonymous";
  return (
    <div className="side-pannel-container">
      <div className="side-pannel-header">
--- a/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
+++ b/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
@@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
      <div className="confirmation-modal">
        <p className="message">{message}</p>
        <div className="buttton-wrapper">
-          <div className="confirmation-button" onClick={onConfirm}>
+          <button className="confirmation-button" onClick={onConfirm}>
            OK
-          </div>
-          <div className="confirmation-button" onClick={onCancel}>
+          </button>
+          <button className="confirmation-button" onClick={onCancel}>
            Cancel
-          </div>
+          </button>
        </div>
      </div>
    </div>
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../../store/useThemeStore";

 // Define Props Interface
 interface ChartComponentProps {
@@ -29,7 +28,6 @@ const ChartComponent = ({
  data: propsData,
 }: ChartComponentProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
-  // const { themeColor } = useThemeStore();

  // Memoize Theme Colors to Prevent Unnecessary Recalculations
  // const buttonActionColor = useMemo(
@@ -66,7 +64,7 @@ const ChartComponent = ({
  // Memoize Chart Font Style
  const chartFontStyle = useMemo(
    () => ({
-      family: fontFamily || "Arial",
+      family: fontFamily ?? "Arial",
      size: fontSizeValue,
      weight: fontWeightValue,
      color: "#2B3344",
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
 import Widgets2D from "./Widgets2D";
 import Widgets3D from "./Widgets3D";
@@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
 import { useWidgetSubOption } from "../../../../../store/store";

 const Widgets = () => {
-  const [activeOption, setActiveOption] = useState("2D");
  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();

  const handleToggleClick = (option: string) => {
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@@ -8,42 +8,11 @@ import {
 import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";

 import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
-import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
 import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";

-interface Widget {
-  id: string;
-  name: string;
-}
-
 const WidgetsFloating = () => {
-  // const [widgets, setWidgets] = useState<Widget[]>([
-  //   { id: "1", name: "Working State Widget" },
-  //   { id: "2", name: "Floating Widget 2" },
-  //   { id: "3", name: "Floating Widget 3" },
-  //   { id: "4", name: "Floating Widget 4" },
-  // ]);
-
-  // Function to handle drag start
-  const handleDragStart = (
-    e: React.DragEvent<HTMLDivElement>,
-    widget: Widget
-  ) => {
-    e.dataTransfer.setData("application/json", JSON.stringify(widget));
-  };
-
  return (
    <div className="floatingWidgets-wrapper widgets-wrapper">
-      {/* {widgets.map((widget) => (
-        <div
-          key={widget.id}
-          className="floating"
-          draggable
-          onDragStart={(e) => handleDragStart(e, widget)}
-        >
-          {widget.name}
-        </div>
-      ))} */}
      {/* Floating 1 */}
      <SimpleCard
        header={"Today’s Earnings"}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  const [activeOption, setActiveOption] = useState("default");
-  const [dummyactiveOption, setTypeOption] = useState("default");

  const getAvailableActions = () => {
    if (assetType === "conveyor") {
@@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
        <div className="actions">
          <div className="header">
            <div className="header-value">Actions</div>
-            <div className="add-button" onClick={() => {}}>
+            <button className="add-button" onClick={() => {}}>
              <AddIcon /> Add
-            </div>
+            </button>
          </div>
          <div
            className="lists-main-container"
@@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
          {activeOption === "swap" && <SwapAction />} {/* done */}
          {activeOption === "despawn" && <DespawnAction />} {/* done */}
          {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
+          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
+          {/* done */}
          {activeOption === "process" && <ProcessAction />} {/* done */}
          {activeOption === "store" && <StorageAction />} {/* done */}
        </div>
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
@@ -3,19 +3,17 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";

 const DespawnAction: React.FC = () => {
  return (
-    <>
-      <InputWithDropDown
-        label="Delay"
-        value=""
-        min={0}
-        step={0.1}
-        max={10}
-        defaultValue="0"
-        activeOption="s"
-        onClick={() => {}}
-        onChange={(value) => console.log(value)}
-      />
-    </>
+    <InputWithDropDown
+      label="Delay"
+      value=""
+      min={0}
+      step={0.1}
+      max={10}
+      defaultValue="0"
+      activeOption="s"
+      onClick={() => {}}
+      onChange={(value) => console.log(value)}
+    />
  );
 };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
@@ -2,11 +2,7 @@ import React from "react";
 import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";

 const SwapAction: React.FC = () => {
-  return (
-    <>
-      <PreviewSelectionWithUpload />
-    </>
-  );
+  return <PreviewSelectionWithUpload />;
 };

 export default SwapAction;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
    <div className="trigger-wrapper">
      <div className="header">
        <div className="title">Trigger</div>
-        <div
+        <button
          className="add-button"
          onClick={addTrigger}
          style={{ cursor: "pointer" }}
        >
          <AddIcon /> Add
-        </div>
+        </button>
      </div>
      <div className="trigger-list">
        {/* Map over triggers and render them */}
        {triggers.map((trigger, index) => (
-          <div key={index} className="trigger-item">
+          <div key={index.toFixed()} className="trigger-item">
            <div className="trigger-name">
              {trigger}
-              <div
+              <button
                className="remove-button"
                onClick={() => removeTrigger(index)}
                style={{ cursor: "pointer" }}
              >
                <RemoveIcon />
-              </div>
+              </button>
            </div>
            <LabledDropdown
              defaultOption={activeOption}
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -10,7 +10,7 @@ import {
  ArrowIcon,
  EyeIcon,
  LockIcon,
-  RmoveIcon,
+  RemoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
 import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                    </div>
                    {remove && (
                      <div className="remove option">
-                        <RmoveIcon />
+                        <RemoveIcon />
                      </div>
                    )}
                    {item.assets && item.assets.length > 0 && (
@@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                            </div>
                            {remove && (
                              <div className="remove option">
-                                <RmoveIcon />
+                                <RemoveIcon />
                              </div>
                            )}
                          </div>