fix: small ui improvements

src/components/addInput/AddInput.tsx

@@ -13,7 +13,9 @@ export function AddInput({ onClickSource, disabled }: AddInputProps) {
   return (
     <div
       className={`bg-zinc-700 m-2 p-2 text-p rounded gap-2 justify-center items-center ${
-        disabled ? 'opacity-10' : 'opacity-100'
+        disabled
+          ? 'opacity-10 pointer-events-none'
+          : 'opacity-100 pointer-events-auto'
       }`}
     >
       <button

src/components/icons/Icons.tsx

@@ -23,12 +23,7 @@ import {
   IconPlugConnected,
   IconPlugConnectedX,
   IconRefresh,
-  IconSkull,
-  IconBulldozer,
-  IconBomb,
-  IconBiohazard,
   IconAlertTriangle,
-  IconRouteOff,
   IconAlertOctagon,
   IconPencil,
   IconPlus
@@ -101,20 +96,9 @@ const pickIcon = {
   IconRefresh: ({ className }: IClassName) => (
     <IconRefresh className={className} />
   ),
-  IconSkull: ({ className }: IClassName) => <IconSkull className={className} />,
-  IconBulldozer: ({ className }: IClassName) => (
-    <IconBulldozer className={className} />
-  ),
-  IconBomb: ({ className }: IClassName) => <IconBomb className={className} />,
-  IconBiohazard: ({ className }: IClassName) => (
-    <IconBiohazard className={className} />
-  ),
   IconAlertTriangle: ({ className }: IClassName) => (
     <IconAlertTriangle className={className} />
   ),
-  IconRouteOff: ({ className }: IClassName) => (
-    <IconRouteOff className={className} />
-  ),
   IconAlertOctagon: ({ className }: IClassName) => (
     <IconAlertOctagon className={className} />
   ),

src/components/sideNav/SideNavTeardown.tsx

@@ -9,6 +9,8 @@ import { FlowStep, TeardownStepNames } from '../../interfaces/production';
 import { Loader } from '../loader/Loader';
 import FlowSteps from '../flowSteps/FlowSteps';
 import Icons from '../icons/Icons';
+import { useContext } from 'react';
+import { GlobalContext } from '../../contexts/GlobalContext';
 
 const SideNavTeardown: React.FC<SideNavItemBaseProps> = (props) => {
   const { open } = props;
@@ -22,6 +24,7 @@ const SideNavTeardown: React.FC<SideNavItemBaseProps> = (props) => {
   const [success, setSuccess] = useState<boolean>(false);
 
   const [teardown, loading] = useTeardown();
+  const { locked } = useContext(GlobalContext);
 
   const teardownFunc = () => {
     setSteps([]);
@@ -52,12 +55,16 @@ const SideNavTeardown: React.FC<SideNavItemBaseProps> = (props) => {
   return (
     <div className="relative group">
       <div
-        className="flex items-center pl-4 py-4 overflow-hidden rounded-xl hover:bg-light hover:cursor-pointer"
+        className={`${
+          locked ? 'pointer-events-none' : 'pointer-events-auto'
+        } flex items-center pl-4 py-4 overflow-hidden rounded-xl hover:bg-light hover:cursor-pointer`}
         onClick={() => setDisplayModal(true)}
       >
         <Icons
           name="IconAlertOctagon"
-          className="min-w-8 min-h-8 w-8 h-8 mr-4 stroke-yellow-400"
+          className={`${
+            locked ? 'stroke-yellow-400/50' : 'stroke-yellow-400'
+          } min-w-8 min-h-8 w-8 h-8 mr-4 `}
         />
         <div className="whitespace-nowrap">{t('teardown.name')}</div>
       </div>