feat: added icon to confirm-remove-line-button and fixed timeout bug,…

… removed unnecessary reset
Eyevinn · Jun 28, 2024 · 34b75db · 34b75db
1 parent c40ce30
commit 34b75db
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/assets/icons/done.svg b/src/assets/icons/done.svg
diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx
@@ -5,6 +5,7 @@ import RemoveSvg from "./clear.svg?react";
 import VolumeOn from "./volume_on.svg?react";
 import VolumeOff from "./volume_off.svg?react";
 import UserSvg from "./user.svg?react";
+import ConfirmSvg from "./done.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -19,3 +20,5 @@ export const SpeakerOff = () => <VolumeOff />;
 export const SpeakerOn = () => <VolumeOn />;
 
 export const UserIcon = () => <UserSvg />;
+
+export const ConfirmIcon = () => <ConfirmSvg />;
diff --git a/src/components/manage-productions/manage-lines.tsx b/src/components/manage-productions/manage-lines.tsx
@@ -18,6 +18,7 @@ import { useRemoveProductionLine } from "./use-remove-production-line";
 import { useAddProductionLine } from "./use-add-production-line";
 import { RemoveLineButton } from "../remove-line-button/remove-line-button";
 import { darkText, errorColour } from "../../css-helpers/defaults";
+import { ConfirmIcon } from "../../assets/icons/icon";
 
 type TManageLines = {
   production: TProduction;
@@ -64,15 +65,26 @@ const LineItem = styled(DecorativeLabel)`
 const ConfirmButton = styled.button`
   cursor: pointer;
   position: absolute;
+  font-size: 2rem;
+  padding: 0.7rem;
+  box-shadow: 0.5rem 0.5rem 1rem #212121;
   top: 1.5rem;
   right: 2.5rem;
   z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-  &:hover:active {
+  &:hover {
     transform: scale(1.1);
   }
 `;
 
+const ConfirmIconWrapper = styled.div`
+  width: 3rem;
+  margin-left: 1rem;
+`;
+
 const ButtonWrapper = styled.div`
   margin: 0 1rem 1rem 0;
   :last-of-type {
@@ -182,6 +194,9 @@ export const ManageLines = ({
               }}
             >
               remove {singleLine.name}
+              <ConfirmIconWrapper>
+                <ConfirmIcon />
+              </ConfirmIconWrapper>
             </ConfirmButton>
           )}
         </ListItemWrapper>

diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx
@@ -102,7 +102,6 @@ export const ManageProductions = () => {
     if (successfullDelete) {
       setVerifyRemove(false);
       setShowDeleteDoneMessage(true);
-      setProductionIdToFetch(null);
     }
   }, [successfullDelete]);
 
@@ -118,7 +117,7 @@ export const ManageProductions = () => {
   useEffect(() => {
     let timeout: number | null = null;
 
-    if (!productionIdToFetch) {
+    if (!cachedProduction) {
       timeout = window.setTimeout(() => {
         setDelayOnGuideText(true);
       }, 500);
@@ -131,7 +130,7 @@ export const ManageProductions = () => {
         window.clearTimeout(timeout);
       }
     };
-  }, [productionIdToFetch]);
+  }, [cachedProduction]);
 
   // Custom submit to stop keypress 'Enter' being active
   const handleCustomSubmit = async () => {