fix: updated btn-names to primary or secondary

src/components/landing-page/create-production.tsx

@@ -9,7 +9,8 @@ import {
   FormInput,
   FormLabel,
   StyledWarningMessage,
-  ActionButton,
+  PrimaryButton,
+  SecondaryButton,
 } from "./form-elements.tsx";
 import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
@@ -170,18 +171,18 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <ActionButton type="button" onClick={() => append({ name: "" })}>
+      <SecondaryButton type="button" onClick={() => append({ name: "" })}>
         Add Line
-      </ActionButton>
+      </SecondaryButton>
 
-      <ActionButton
+      <PrimaryButton
         type="submit"
         className={loading ? "with-loader" : ""}
         onClick={handleSubmit(onSubmit)}
       >
         Create Production
         {loading && <Spinner className="create-production" />}
-      </ActionButton>
+      </PrimaryButton>
       {createdProductionId !== null && (
         <ProductionConfirmation>
           The production ID is: {createdProductionId.toString()}

src/components/landing-page/join-production.tsx

@@ -9,7 +9,7 @@ import {
   FormContainer,
   FormInput,
   FormSelect,
-  ActionButton,
+  PrimaryButton,
   StyledWarningMessage,
 } from "./form-elements.tsx";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
@@ -242,13 +242,13 @@ export const JoinProduction = ({ preSelected }: TProps) => {
             </FormLabel>
           )}
 
-          <ActionButton
+          <PrimaryButton
             type="submit"
             disabled={!isValid}
             onClick={handleSubmit(onSubmit)}
           >
             Join
-          </ActionButton>
+          </PrimaryButton>
         </>
       )}
     </FormContainer>

src/components/landing-page/manage-production-button.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ActionButton } from "./form-elements";
+import { PrimaryButton } from "./form-elements";
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -13,12 +13,12 @@ export const ManageProductionButton = () => {
 
   return (
     <ButtonWrapper>
-      <ActionButton
+      <PrimaryButton
         type="button"
         onClick={() => navigate("/manage-productions")}
       >
         Manage Productions
-      </ActionButton>
+      </PrimaryButton>
     </ButtonWrapper>
   );
 };

src/components/navigate-to-root-button/navigate-to-root-button.tsx

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { useNavigate } from "react-router-dom";
 import { BackArrow } from "../../assets/icons/icon";
-import { ActionButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../landing-page/form-elements";
 
-const StyledBackBtn = styled(ActionButton)`
+const StyledBackBtn = styled(PrimaryButton)`
   padding: 0;
   margin: 0;
   width: 4rem;

src/components/production-line/long-press-to-talk-button.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
-import { ActionButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../landing-page/form-elements";
 import { isMobile } from "../../bowser";
 
 type TLongPressToTalkButton = {
   setMicMute: (input: boolean) => void;
 };
 
-const Button = styled(ActionButton)`
+const Button = styled(PrimaryButton)`
   position: relative;
 
   &.active-btn {

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 { ActionButton } from "../landing-page/form-elements.tsx";
+import { PrimaryButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
 import {
   MicMuted,
@@ -49,7 +49,7 @@ const ButtonIcon = styled.div`
   margin: 0 0.5rem 0 0;
 `;
 
-const UserControlBtn = styled(ActionButton)`
+const UserControlBtn = styled(PrimaryButton)`
   line-height: 2;
   min-width: 12rem;
   text-align: left;