fix: added new class to spinner and updated action

-btn to primary
Eyevinn · Apr 23, 2024 · 49f7a50 · 49f7a50
1 parent 236a9cb
commit 49f7a50
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
@@ -13,7 +13,13 @@ const Loading = styled.div`
   &.create-production {
     position: absolute;
     top: 0.5rem;
-    left: 6rem;
+    left: 40%;
+  }
+
+  &.manage-production {
+    position: absolute;
+    top: 0.5rem;
+    left: 30%;
   }
 
   &.join-production {

diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { DisplayContainerHeader } from "../landing-page/display-container-header";
 import {
-  ActionButton,
+  PrimaryButton,
   DecorativeLabel,
   FormInput,
   FormLabel,
@@ -49,7 +49,7 @@ const VerifyButtons = styled.div`
   padding: 1rem 0 0 0;
 `;
 
-const Button = styled(ActionButton)`
+const Button = styled(PrimaryButton)`
   margin: 0 1rem 0 0;
 `;
 const StyledBackBtnIcon = styled.div`
@@ -152,14 +152,14 @@ export const ManageProductions = () => {
         <>
           <DecorativeLabel>Production name: {production.name}</DecorativeLabel>
           {!verifyRemove && (
-            <ActionButton
+            <PrimaryButton
               type="submit"
               className={loading ? "submit" : ""}
               onClick={() => setVerifyRemove(true)}
             >
               Remove
-              {loading && <Spinner className="create-production" />}
-            </ActionButton>
+              {loading && <Spinner className="manage-production" />}
+            </PrimaryButton>
           )}
           {verifyRemove && (
             <VerifyBtnWrapper>
@@ -172,7 +172,7 @@ export const ManageProductions = () => {
                   onClick={handleSubmit(onSubmit)}
                 >
                   Yes
-                  {loading && <Spinner className="create-production" />}
+                  {loading && <Spinner className="manage-production" />}
                 </Button>
                 <Button
                   type="submit"
@@ -185,7 +185,7 @@ export const ManageProductions = () => {
                   }}
                 >
                   Go back
-                  {loading && <Spinner className="create-production" />}
+                  {loading && <Spinner className="manage-production" />}
                 </Button>
               </VerifyButtons>
             </VerifyBtnWrapper>