feat: update button styling

Eyevinn · Apr 26, 2024 · 375e27f · 375e27f
1 parent fde8cdc
commit 375e27f
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 53 deletions.
diff --git a/src/components/landing-page/create-production.tsx b/src/components/landing-page/create-production.tsx
@@ -16,6 +16,7 @@ import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { Spinner } from "../loader/loader.tsx";
 import { RemoveIcon } from "../../assets/icons/icon.tsx";
+import { FlexContainer } from "../generic-components.ts";
 
 type FormValues = {
   productionName: string;
@@ -42,7 +43,10 @@ const ListItemWrapper = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  margin: 2rem 0 2rem 0;
+  margin: 0 1rem 1rem 0;
+  :last-of-type {
+    margin: 0 0 1rem;
+  }
 `;
 
 const ProductionConfirmation = styled.div`
@@ -175,21 +179,23 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <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>
+      <FlexContainer>
+        <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>
+      </FlexContainer>
       {createdProductionId !== null && (
         <ProductionConfirmation>
           The production ID is: {createdProductionId.toString()}

diff --git a/src/components/landing-page/form-elements.tsx b/src/components/landing-page/form-elements.tsx
@@ -2,14 +2,18 @@ import styled from "@emotion/styled";
 
 export const FormContainer = styled.form``;
 
+const sharedMargin = `margin: 0 0 2rem`;
+
 export const FormInput = styled.input`
   width: 100%;
   font-size: 1.6rem;
   padding: 0.5rem;
-  margin: 0 0 1rem;
-  border: 1px solid #6f6e6e;
+  margin: 0 0 2rem;
+  border: 0.1rem solid #6f6e6e;
   border-radius: 0.5rem;
 
+  ${sharedMargin};
+
   &.additional-line {
     padding-right: 3.5rem;
   }
@@ -37,7 +41,8 @@ export const FormSelect = styled.select`
   width: 100%;
   font-size: 1.6rem;
   padding: 0.5rem;
-  margin: 0 0 1rem;
+  ${sharedMargin};
+
   border: 1px solid #6f6e6e;
   border-radius: 0.5rem;
 `;
@@ -63,7 +68,7 @@ export const StyledWarningMessage = styled.div`
   background: #ebca6a;
   border-radius: 0.5rem;
   color: #1a1a1a;
-  margin: 0 0 1rem;
+  ${sharedMargin};
   border: 1px solid #ebca6a;
   display: flex;
   align-items: center;
@@ -124,11 +129,10 @@ export const PrimaryButton = styled(ActionButton)`
   }
 
   &:not(:disabled):hover {
-    transform: scale(1.05);
   }
 
   &:not(:disabled):hover:active {
-    transform: scale(1.05) translateY(0.125rem);
+    transform: translateY(0.125rem);
   }
 
   &:focus {

diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -25,7 +25,8 @@ const FetchErrorMessage = styled.div`
   background: ${errorColour};
   color: ${darkText};
   padding: 0.5rem;
-  margin: 1rem 0;
+  margin: 0 0 2rem;
+  border-radius: 0.5rem;
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/components/production-line/long-press-to-talk-button.tsx b/src/components/production-line/long-press-to-talk-button.tsx
@@ -9,6 +9,7 @@ type TLongPressToTalkButton = {
 
 const Button = styled(PrimaryButton)`
   position: relative;
+  width: 100%;
 
   &.active-btn {
     color: rgba(255, 255, 255, 0);

diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -5,7 +5,7 @@ import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
 import { useRtcConnection } from "./use-rtc-connection.ts";
 import { useEstablishSession } from "./use-establish-session.ts";
-import { PrimaryButton } from "../landing-page/form-elements.tsx";
+import { SecondaryButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
 import {
   MicMuted,
@@ -43,20 +43,27 @@ const SmallText = styled.span`
 `;
 
 const ButtonIcon = styled.div`
-  width: 2.5rem;
+  width: 3rem;
   display: inline-block;
   vertical-align: middle;
-  margin: 0 0.5rem 0 0;
+  margin: 0 auto;
 `;
 
-const UserControlBtn = styled(PrimaryButton)`
-  line-height: 2;
-  min-width: 12rem;
-  text-align: left;
+const FlexButtonWrapper = styled.div`
+  width: 50%;
+  padding: 0 2rem 2rem 0;
+
+  :last-of-type {
+    padding: 0 0 2rem 0;
+  }
+`;
+
+const UserControlBtn = styled(SecondaryButton)`
+  width: 100%;
 `;
 
 const LongPressWrapper = styled.div`
-  margin: 2rem 0 2rem 0;
+  margin: 0 0 2rem 0;
 `;
 
 const ButtonWrapper = styled.span`
@@ -200,32 +207,36 @@ export const ProductionLine: FC = () => {
           <DisplayContainer>
             <div>
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
-              <TempDiv>
-                <UserControlBtn type="button" onClick={() => muteOutput()}>
-                  <ButtonIcon>
-                    {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
-                  </ButtonIcon>
-                  {isOutputMuted ? "Muted" : "Unmuted"}
-                </UserControlBtn>
-              </TempDiv>
 
-              {inputAudioStream && inputAudioStream !== "no-device" && (
-                <TempDiv>
-                  <UserControlBtn
-                    type="button"
-                    onClick={() => muteInput(!isInputMuted)}
-                  >
+              <FlexContainer>
+                <FlexButtonWrapper>
+                  <UserControlBtn type="button" onClick={() => muteOutput()}>
                     <ButtonIcon>
-                      {isInputMuted ? <MicMuted /> : <MicUnmuted />}
+                      {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
                     </ButtonIcon>
-                    {isInputMuted ? "Muted" : "Unmuted"}
                   </UserControlBtn>
-                  <LongPressWrapper>
-                    <LongPressToTalkButton
-                      setMicMute={(input: boolean) => setIsInputMuted(input)}
-                    />
-                  </LongPressWrapper>
-                </TempDiv>
+                </FlexButtonWrapper>
+
+                {inputAudioStream && inputAudioStream !== "no-device" && (
+                  <FlexButtonWrapper>
+                    <UserControlBtn
+                      type="button"
+                      onClick={() => muteInput(!isInputMuted)}
+                    >
+                      <ButtonIcon>
+                        {isInputMuted ? <MicMuted /> : <MicUnmuted />}
+                      </ButtonIcon>
+                    </UserControlBtn>
+                  </FlexButtonWrapper>
+                )}
+              </FlexContainer>
+
+              {inputAudioStream && inputAudioStream !== "no-device" && (
+                <LongPressWrapper>
+                  <LongPressToTalkButton
+                    setMicMute={(input: boolean) => setIsInputMuted(input)}
+                  />
+                </LongPressWrapper>
               )}
 
               {deviceLabels?.inputLabel && (