fix: added or adjusted button-wrappers

Eyevinn · Apr 23, 2024 · 8fd06d1 · 8fd06d1
1 parent 1893112
commit 8fd06d1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 32 deletions.
diff --git a/src/components/landing-page/create-production.tsx b/src/components/landing-page/create-production.tsx
@@ -41,6 +41,10 @@ const ListItemWrapper = styled.div`
   position: relative;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 const ProductionConfirmation = styled.div`
   background: #91fa8c;
   padding: 1rem;
@@ -171,18 +175,21 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <SecondaryButton type="button" onClick={() => append({ name: "" })}>
-        Add Line
-      </SecondaryButton>
-
-      <PrimaryButton
-        type="submit"
-        className={loading ? "with-loader" : ""}
-        onClick={handleSubmit(onSubmit)}
-      >
-        Create Production
-        {loading && <Spinner className="create-production" />}
-      </PrimaryButton>
+      <ButtonWrapper>
+        <SecondaryButton type="button" onClick={() => append({ name: "" })}>
+          Add Line
+        </SecondaryButton>
+      </ButtonWrapper>
+      <ButtonWrapper>
+        <PrimaryButton
+          type="submit"
+          className={loading ? "with-loader" : ""}
+          onClick={handleSubmit(onSubmit)}
+        >
+          Create Production
+          {loading && <Spinner className="create-production" />}
+        </PrimaryButton>
+      </ButtonWrapper>
       {createdProductionId !== null && (
         <ProductionConfirmation>
           The production ID is: {createdProductionId.toString()}

diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -28,6 +28,10 @@ const FetchErrorMessage = styled.div`
   margin: 1rem 0;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 type TProps = {
   preSelected?: {
     preSelectedProductionId: string;
@@ -241,14 +245,15 @@ export const JoinProduction = ({ preSelected }: TProps) => {
               )}
             </FormLabel>
           )}
-
-          <PrimaryButton
-            type="submit"
-            disabled={!isValid}
-            onClick={handleSubmit(onSubmit)}
-          >
-            Join
-          </PrimaryButton>
+          <ButtonWrapper>
+            <PrimaryButton
+              type="submit"
+              disabled={!isValid}
+              onClick={handleSubmit(onSubmit)}
+            >
+              Join
+            </PrimaryButton>
+          </ButtonWrapper>
         </>
       )}
     </FormContainer>

diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx
@@ -41,7 +41,7 @@ const FetchErrorMessage = styled.div`
 `;
 
 const VerifyBtnWrapper = styled.div`
-  padding: 1rem 0 0 2rem;
+  margin: 3rem 0 2rem 2rem;
 `;
 
 const VerifyButtons = styled.div`
@@ -56,6 +56,10 @@ const StyledBackBtnIcon = styled.div`
   margin: 0 0 3rem 0;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 export const ManageProductions = () => {
   const [showDeleteDoneMessage, setShowDeleteDoneMessage] =
     useState<boolean>(false);
@@ -154,14 +158,16 @@ export const ManageProductions = () => {
         <>
           <DecorativeLabel>Production name: {production.name}</DecorativeLabel>
           {!verifyRemove && (
-            <PrimaryButton
-              type="submit"
-              className={deleteLoader ? "submit" : ""}
-              onClick={() => setVerifyRemove(true)}
-            >
-              Remove
-              {deleteLoader && <Spinner className="manage-production" />}
-            </PrimaryButton>
+            <ButtonWrapper>
+              <PrimaryButton
+                type="submit"
+                className={deleteLoader ? "submit" : ""}
+                onClick={() => setVerifyRemove(true)}
+              >
+                Remove
+                {deleteLoader && <Spinner className="manage-production" />}
+              </PrimaryButton>
+            </ButtonWrapper>
           )}
           {verifyRemove && (
             <VerifyBtnWrapper>

diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -58,6 +58,10 @@ const UserControlBtn = styled(PrimaryButton)`
   text-align: left;
 `;
 
+const LongPressWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 export const ProductionLine: FC = () => {
   const { productionId: paramProductionId, lineId: paramLineId } = useParams();
   const [{ joinProductionOptions }, dispatch] = useGlobalState();
@@ -214,9 +218,11 @@ export const ProductionLine: FC = () => {
                     </ButtonIcon>
                     {isInputMuted ? "Muted" : "Unmuted"}
                   </UserControlBtn>
-                  <LongPressToTalkButton
-                    setMicMute={(input: boolean) => setIsInputMuted(input)}
-                  />
+                  <LongPressWrapper>
+                    <LongPressToTalkButton
+                      setMicMute={(input: boolean) => setIsInputMuted(input)}
+                    />
+                  </LongPressWrapper>
                 </TempDiv>
               )}