Feat new UI manage prod page (#233)

src/api/api.ts

@@ -25,7 +25,7 @@ type TLine = {
   participants: TParticipant[];
 };
 
-type TBasicProductionResponse = {
+export type TBasicProductionResponse = {
   name: string;
   productionId: string;
 };

src/assets/icons/icon.tsx

@@ -9,6 +9,9 @@ import ConfirmSvg from "./done.svg?react";
 import StepLeftSvg from "./chevron_left.svg?react";
 import StepRightSvg from "./navigate_next.svg?react";
 import Settings from "./settings.svg?react";
+import ChevronDown from "./chevron_down.svg?react";
+import ChevronUp from "./chevron_up.svg?react";
+import Headset from "./headset.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -31,3 +34,9 @@ export const StepLeftIcon = () => <StepLeftSvg />;
 export const StepRightIcon = () => <StepRightSvg />;
 
 export const SettingsIcon = () => <Settings />;
+
+export const ChevronDownIcon = () => <ChevronDown />;
+
+export const ChevronUpIcon = () => <ChevronUp />;
+
+export const HeadsetIcon = () => <Headset />;

src/components/header.tsx

@@ -3,17 +3,27 @@ import { FC } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { backgroundColour } from "../css-helpers/defaults.ts";
 import { useGlobalState } from "../global-state/context-provider.tsx";
+import { HeadsetIcon } from "../assets/icons/icon.tsx";
 
 const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
   width: 100%;
   background: ${backgroundColour};
   padding: 1rem;
-  font-size: 2rem;
-  font-weight: bold;
+  font-size: 3rem;
+  font-weight: semi-bold;
   margin: 0 0 1rem 0;
   cursor: pointer;
 `;
 
+const Logo = styled.svg`
+  width: 2.4rem;
+  height: 2.4rem;
+  margin-right: 1rem;
+  margin-left: 2rem;
+`;
+
 export const Header: FC = () => {
   const [, dispatch] = useGlobalState();
   const navigate = useNavigate();
@@ -34,5 +44,13 @@ export const Header: FC = () => {
       navigate("/");
     }
   };
-  return <HeaderWrapper onClick={returnToRoot}>Intercom</HeaderWrapper>;
+
+  return (
+    <HeaderWrapper onClick={returnToRoot}>
+      <Logo>
+        <HeadsetIcon />
+      </Logo>
+      Intercom
+    </HeaderWrapper>
+  );
 };

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

@@ -203,7 +203,10 @@ export const CreateProduction = () => {
                 placeholder="Line Name"
               />
               {index === fields.length - 1 && (
-                <RemoveLineButton removeLine={() => remove(index)} />
+                <RemoveLineButton
+                  isCreatingLine
+                  removeLine={() => remove(index)}
+                />
               )}
             </ListItemWrapper>
           </FormLabel>

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

@@ -7,10 +7,12 @@ const sharedMargin = `margin: 0 0 2rem`;
 export const FormInput = styled.input`
   width: 100%;
   font-size: 1.6rem;
-  padding: 0.5rem;
+  padding: 0.75rem;
   margin: 0 0 2rem;
-  border: 0.1rem solid #6f6e6e;
+  border: 0.1rem solid #6d6d6d;
   border-radius: 0.5rem;
+  background: #32383b;
+  color: white;
 
   ${sharedMargin};
 
@@ -43,8 +45,10 @@ export const FormSelect = styled.select`
   padding: 0.5rem;
   ${sharedMargin};
 
-  border: 1px solid #6f6e6e;
+  border: 1px solid #6d6d6d;
   border-radius: 0.5rem;
+  background: #32383b;
+  color: white;
 `;
 
 export const FormLabel = styled.label`
@@ -74,9 +78,8 @@ export const StyledWarningMessage = styled.div`
   align-items: center;
 `;
 
-const ActionButton = styled.button`
-  background-color: transparent;
-  background-image: linear-gradient(to bottom, #fff, #f8eedb);
+export const ActionButton = styled.button`
+  background: #1db954;
   border: 0 solid #e5e7eb;
   border-radius: 0.5rem;
   box-sizing: border-box;
@@ -102,7 +105,8 @@ const ActionButton = styled.button`
     0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
 
   &:disabled {
-    background: #c9c6c0;
+    background: #1db954;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -114,20 +118,10 @@ const ActionButton = styled.button`
 
 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);
+    background: #1db954;
     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 {
   }
 
@@ -169,7 +163,7 @@ export const SecondaryButton = styled(ActionButton)`
   }
 
   &:before {
-    background-color: rgba(72, 54, 42, 0.32);
+    background: rgba(89, 203, 232, 1);
     content: "";
     display: block;
     height: 100%;
@@ -182,8 +176,7 @@ export const SecondaryButton = styled(ActionButton)`
   }
 
   &:after {
-    background-color: initial;
-    background-image: linear-gradient(to bottom, #fff, #f5ead6);
+    background: rgba(89, 203, 232, 1)
     content: "";
     display: block;
     overflow: hidden;

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

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