fix: small ui improvements and removal of unused icons (#98)

* fix: small ui improvements * fix: pointer on drag and droped when activ prod
Eyevinn · Nov 14, 2024 · a7b55e4 · a7b55e4
1 parent 07dba8a
commit a7b55e4
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 24 deletions.
diff --git a/src/components/addInput/AddInput.tsx b/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

diff --git a/src/components/icons/Icons.tsx b/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} />
   ),

diff --git a/src/components/image/ImageComponent.tsx b/src/components/image/ImageComponent.tsx
@@ -17,10 +17,11 @@ interface ImageComponentProps extends PropsWithChildren {
   src?: string;
   alt?: string;
   type?: Type;
+  className?: string;
 }
 
 const ImageComponent: React.FC<ImageComponentProps> = (props) => {
-  const { src, alt = 'Image', children, type } = props;
+  const { src, alt = 'Image', children, type, className } = props;
   const { imageRefetchKey } = useContext(GlobalContext);
   const [imgSrc, setImgSrc] = useState<string>();
   const [loaded, setLoaded] = useState<boolean>(false);
@@ -52,7 +53,9 @@ const ImageComponent: React.FC<ImageComponentProps> = (props) => {
   return (
     <>
       {(!type || type === 'ingest_source') && src && (
-        <div className="relative z-10 aspect-video min-w-full overflow-hidden border rounded-lg bg-zinc-700">
+        <div
+          className={`${className} relative z-10 aspect-video min-w-full overflow-hidden border rounded-lg bg-zinc-700`}
+        >
           {((!imgSrc || error) && (
             <IconExclamationCircle className="text-error fill-white w-full h-full" />
           )) || (

diff --git a/src/components/sideNav/SideNavTeardown.tsx b/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>

diff --git a/src/components/sourceCard/SourceCard.tsx b/src/components/sourceCard/SourceCard.tsx
@@ -100,7 +100,9 @@ export default function SourceCard({
     <div
       ref={forwardedRef}
       style={style}
-      className="relative bg-zinc-700 aspect-video m-2 overflow-hidden cursor-pointer"
+      className={`relative bg-zinc-700 aspect-video m-2 overflow-hidden ${
+        productionSetup?.isActive ? 'cursor-auto' : 'cursor-pointer'
+      }`}
     >
       <div className="relative">
         <input
@@ -115,8 +117,26 @@ export default function SourceCard({
           disabled={locked}
         />
       </div>
-      {source && <ImageComponent src={getSourceThumbnail(source)} />}
-      {!source && sourceRef && <ImageComponent type={sourceRef.type} />}
+      {source && (
+        <ImageComponent
+          className={`${
+            productionSetup?.isActive
+              ? 'pointer-events-none'
+              : 'pointer-events-auto'
+          }`}
+          src={getSourceThumbnail(source)}
+        />
+      )}
+      {!source && sourceRef && (
+        <ImageComponent
+          className={`${
+            productionSetup?.isActive
+              ? 'pointer-events-none'
+              : 'pointer-events-auto'
+          }`}
+          type={sourceRef.type}
+        />
+      )}
       {(source || sourceRef) && (
         <h2
           className={`${