Feat/updated btn layout

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";
@@ -40,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;
@@ -170,18 +175,21 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <ActionButton type="button" onClick={() => append({ name: "" })}>
-        Add Line
-      </ActionButton>
-
-      <ActionButton
-        type="submit"
-        className={loading ? "with-loader" : ""}
-        onClick={handleSubmit(onSubmit)}
-      >
-        Create Production
-        {loading && <Spinner className="create-production" />}
-      </ActionButton>
+      <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()}

src/components/landing-page/form-elements.tsx

@@ -39,51 +39,167 @@ export const DecorativeLabel = styled.span`
   padding: 0 1rem 1rem 0;
 `;
 
-export const ActionButton = styled.button`
-  background: rgba(255, 255, 255, 0.78);
-  border: 0.1rem solid rgba(255, 255, 255, 0.68);
-  border-right: 0.1rem solid #000;
-  border-bottom: 0.1rem solid #000;
-  color: #1a1a1a;
-  font-weight: bold;
-  border-radius: 0.5rem;
+export const StyledWarningMessage = styled.div`
+  padding: 0.5rem;
   font-size: 1.6rem;
-  padding: 1rem;
-  display: block;
-  margin: 0 0 2rem 0;
+  background: #ebca6a;
+  border-radius: 0.5rem;
+  color: #1a1a1a;
+  margin: 0 0 1rem;
+  border: 1px solid #ebca6a;
+  display: flex;
+  align-items: center;
 
-  &:hover {
-    cursor: pointer;
+  &.with-loader {
+    min-width: 27rem;
   }
+`;
 
-  &:active {
-    background: rgba(255, 255, 255, 0.62);
-    box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.2);
+const ActionButton = styled.button`
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #fff, #f8eedb);
+  border: 0 solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  color: #482307;
+  column-gap: 1rem;
+  cursor: pointer;
+  display: flex;
+  font-size: 100%;
+  font-weight: 700;
+  line-height: 2.4rem;
+  margin: 0;
+  outline: 0.2rem solid transparent;
+  padding: 1rem 1.5rem;
+  text-align: center;
+  text-transform: none;
+  transform: translateZ(0) scale(1);
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  box-shadow:
+    -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+    0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+
+  &:disabled {
+    background: #c9c6c0;
+    cursor: not-allowed;
   }
 
   &.with-loader {
     position: relative;
     color: rgba(255, 255, 255, 0);
   }
+`;
 
-  &:disabled {
-    background: rgba(255, 255, 255, 0.5);
-    cursor: not-allowed;
+export const PrimaryButton = styled(ActionButton)`
+  &:active:enabled {
+    background-color: #f3f4f6;
+    box-shadow:
+      -0.1rem 0.2rem 0.5rem rgba(81, 41, 10, 0.15),
+      0 0.1rem 0.1rem rgba(81, 41, 10, 0.15);
+    transform: translateY(0.125rem);
+  }
+
+  &:focus {
+    box-shadow:
+      rgba(72, 35, 7, 0.46) 0 0 0 0.4rem,
+      -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+      0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+  }
+
+  &:not(:disabled):hover {
+    transform: scale(1.05);
+  }
+
+  &:not(:disabled):hover:active {
+    transform: scale(1.05) translateY(0.125rem);
+  }
+
+  &:focus {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:before {
+    content: "";
+    left: calc(-1 * 0.375rem);
+    pointer-events: none;
+    position: absolute;
+    top: calc(-1 * 0.375rem);
+    transition: border-radius;
+    user-select: none;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:not(:focus-visible):before {
+    border-width: 0;
+  }
+
+  &:not(:disabled):active {
+    transform: translateY(0.125rem);
   }
 `;
 
-export const StyledWarningMessage = styled.div`
-  padding: 0.5rem;
-  font-size: 1.6rem;
-  background: #ebca6a;
-  border-radius: 0.5rem;
-  color: #1a1a1a;
-  margin: 0 0 1rem;
-  border: 1px solid #ebca6a;
-  display: flex;
-  align-items: center;
+export const SecondaryButton = styled(ActionButton)`
+  &:before,
+  &:after {
+    border-radius: 0.5rem;
+  }
 
-  &.with-loader {
-    min-width: 27rem;
+  &:before {
+    background-color: rgba(72, 54, 42, 0.32);
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -2;
+  }
+
+  &:after {
+    background-color: initial;
+    background-image: linear-gradient(to bottom, #fff, #f5ead6);
+    content: "";
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    right: 0.4rem;
+    top: 0.4rem;
+    left: 0.4rem;
+    bottom: 0.4rem;
+    transition: all 100ms ease-out;
+    z-index: -1;
+  }
+
+  &:hover:not(:disabled):after {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    transition-timing-function: ease-in;
+  }
+
+  &:active:not(:disabled) {
+    color: #ccc;
+  }
+
+  &:active:not(:disabled):after {
+    background-image: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0.2)
+      ),
+      linear-gradient(92.83deg, #fff, #f8eedb, 100%);
+    bottom: 0.4rem;
+    left: 0.4rem;
+    right: 0.4rem;
+    top: 0.4rem;
   }
 `;

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";
@@ -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>
           )}
-
-          <ActionButton
-            type="submit"
-            disabled={!isValid}
-            onClick={handleSubmit(onSubmit)}
-          >
-            Join
-          </ActionButton>
+          <ButtonWrapper>
+            <PrimaryButton
+              type="submit"
+              disabled={!isValid}
+              onClick={handleSubmit(onSubmit)}
+            >
+              Join
+            </PrimaryButton>
+          </ButtonWrapper>
         </>
       )}
     </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/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 {