refactor: new UI

src/App.tsx

@@ -2,13 +2,12 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import styled from "@emotion/styled";
 import { useState } from "react";
 import { ErrorPage } from "./components/router-error.tsx";
-import { useDevicePermissions } from "./use-device-permission.ts";
+import { useDevicePermissions } from "./hooks/use-device-permission.ts";
 import { LandingPage } from "./components/landing-page/landing-page.tsx";
 import { useInitializeGlobalStateReducer } from "./global-state/global-state-reducer.ts";
 import { GlobalStateContext } from "./global-state/context-provider.tsx";
-import { Header } from "./components/header.tsx";
 import { ErrorBanner } from "./components/error";
-import { useFetchDevices } from "./use-fetch-devices.ts";
+import { useFetchDevices } from "./hooks/use-fetch-devices.ts";
 import {
   DisplayContainer,
   FlexContainer,
@@ -19,6 +18,9 @@ import { isValidBrowser } from "./bowser.ts";
 import { DisplayContainerHeader } from "./components/landing-page/display-container-header.tsx";
 import { NavigateToRootButton } from "./components/navigate-to-root-button/navigate-to-root-button.tsx";
 import { CallsPage } from "./components/calls-page/calls-page.tsx";
+import { CreateProductionPage } from "./components/create-production/create-production-page.tsx";
+import { Header } from "./components/header.tsx";
+import { useLocalUserSettings } from "./hooks/use-local-user-settings.ts";
 
 const DisplayBoxPositioningContainer = styled(FlexContainer)`
   justify-content: center;
@@ -57,6 +59,8 @@ const App = () => {
     permission,
   });
 
+  useLocalUserSettings({ dispatch });
+
   return (
     <GlobalStateContext.Provider value={initializedGlobalState}>
       <BrowserRouter>
@@ -120,6 +124,15 @@ const App = () => {
                     }
                     errorElement={<ErrorPage />}
                   />
+                  <Route
+                    path="/create-production"
+                    element={
+                      <CreateProductionPage
+                        setApiError={() => setApiError(true)}
+                      />
+                    }
+                    errorElement={<ErrorPage />}
+                  />
                   <Route
                     path="/manage-productions"
                     element={<ManageProductions />}

src/api/api.ts

@@ -28,6 +28,7 @@ type TLine = {
 export type TBasicProductionResponse = {
   name: string;
   productionId: string;
+  lines?: TLine[];
 };
 
 type TFetchProductionResponse = TBasicProductionResponse & {

src/assets/icons/icon.tsx

@@ -9,9 +9,14 @@ 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 Headset from "./headset.svg?react";
+import UserSettings from "./user_settings.svg?react";
 import ChevronDown from "./chevron_down.svg?react";
 import ChevronUp from "./chevron_up.svg?react";
-import Headset from "./headset.svg?react";
+import Person from "./person.svg?react";
+import Users from "./users.svg?react";
+import Add from "./add.svg?react";
+import Edit from "./edit.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -35,8 +40,18 @@ export const StepRightIcon = () => <StepRightSvg />;
 
 export const SettingsIcon = () => <Settings />;
 
+export const UserSettingsIcon = () => <UserSettings />;
+
 export const ChevronDownIcon = () => <ChevronDown />;
 
 export const ChevronUpIcon = () => <ChevronUp />;
 
 export const HeadsetIcon = () => <Headset />;
+
+export const PersonIcon = () => <Person />;
+
+export const UsersIcon = () => <Users />;
+
+export const AddIcon = () => <Add />;
+
+export const EditIcon = () => <Edit />;

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

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useGlobalState } from "../../global-state/context-provider";
+import { CreateProduction } from "./create-production";
+
+export const CreateProductionPage = ({
+  setApiError,
+}: {
+  setApiError: () => void;
+}) => {
+  const [{ apiError }] = useGlobalState();
+
+  useEffect(() => {
+    if (apiError) {
+      setApiError();
+    }
+  }, [apiError, setApiError]);
+
+  return <CreateProduction />;
+};

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

@@ -2,30 +2,42 @@ import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
 import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { ErrorMessage } from "@hookform/error-message";
-import { DisplayContainerHeader } from "./display-container-header.tsx";
+import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
 import {
   DecorativeLabel,
-  FormContainer,
   FormInput,
   FormLabel,
   StyledWarningMessage,
   PrimaryButton,
   SecondaryButton,
-} from "./form-elements.tsx";
+} from "../landing-page/form-elements.tsx";
 import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { Spinner } from "../loader/loader.tsx";
 import { FlexContainer } from "../generic-components.ts";
 import { RemoveLineButton } from "../remove-line-button/remove-line-button.tsx";
-import { useFetchProduction } from "./use-fetch-production.ts";
+import { useFetchProduction } from "../landing-page/use-fetch-production.ts";
 import { darkText, errorColour } from "../../css-helpers/defaults.ts";
+import { NavigateToRootButton } from "../navigate-to-root-button/navigate-to-root-button.tsx";
+import { ResponsiveFormContainer } from "../user-settings/user-settings.tsx";
+import { isMobile } from "../../bowser.ts";
 
 type FormValues = {
   productionName: string;
   defaultLine: string;
   lines: { name: string }[];
 };
 
+const HeaderWrapper = styled.div`
+  display: flex;
+  margin-bottom: 2rem;
+  align-items: center;
+  h2 {
+    margin: 0;
+    margin-left: 1rem;
+  }
+`;
+
 const ListItemWrapper = styled.div`
   position: relative;
 `;
@@ -151,8 +163,11 @@ export const CreateProduction = () => {
   };
 
   return (
-    <FormContainer>
-      <DisplayContainerHeader>Create Production</DisplayContainerHeader>
+    <ResponsiveFormContainer className={isMobile ? "" : "desktop"}>
+      <HeaderWrapper>
+        <NavigateToRootButton />
+        <DisplayContainerHeader>Create Production</DisplayContainerHeader>
+      </HeaderWrapper>
       <FormLabel>
         <DecorativeLabel>Production Name</DecorativeLabel>
         <FormInput
@@ -265,6 +280,6 @@ export const CreateProduction = () => {
           )}
         </>
       )}
-    </FormContainer>
+    </ResponsiveFormContainer>
   );
 };

src/components/header.tsx

@@ -26,7 +26,7 @@ const Logo = styled.svg`
   width: 2.4rem;
   height: 2.4rem;
   margin-right: 1rem;
-  margin-left: 2rem;
+  margin-left: 1rem;
 `;
 
 export const Header: FC = () => {
@@ -51,7 +51,7 @@ export const Header: FC = () => {
   };
 
   const returnToRoot = () => {
-    if (location.pathname.includes("/production")) {
+    if (location.pathname.includes("/line")) {
       setConfirmExitModalOpen(true);
     } else {
       navigate("/");

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

@@ -117,8 +117,8 @@ export const ActionButton = styled.button`
 `;
 
 export const PrimaryButton = styled(ActionButton)`
+  background: rgba(89, 203, 232, 1);
   &:active:enabled {
-    background: #1db954;
     transform: translateY(0.125rem);
   }
 
@@ -157,13 +157,14 @@ export const PrimaryButton = styled(ActionButton)`
 `;
 
 export const SecondaryButton = styled(ActionButton)`
+  // background: #1db954;
+  background: white;
   &:before,
   &:after {
     border-radius: 0.5rem;
   }
 
   &:before {
-    background: rgba(89, 203, 232, 1);
     content: "";
     display: block;
     height: 100%;
@@ -176,7 +177,6 @@ export const SecondaryButton = styled(ActionButton)`
   }
 
   &:after {
-    background: rgba(89, 203, 232, 1)
     content: "";
     display: block;
     overflow: hidden;

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

@@ -1,13 +1,12 @@
-import { useEffect } from "react";
-import { JoinProduction } from "./join-production.tsx";
-import { CreateProduction } from "./create-production.tsx";
+import { useEffect, useState } from "react";
 import { ProductionsListContainer } from "./productions-list-container.tsx";
-import { DisplayContainer, FlexContainer } from "../generic-components.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
-import { isMobile } from "../../bowser.ts";
+import { UserSettings } from "../user-settings/user-settings.tsx";
+import { UserSettingsButton } from "./user-settings-button.tsx";
 
 export const LandingPage = ({ setApiError }: { setApiError: () => void }) => {
   const [{ apiError }] = useGlobalState();
+  const [showSettings, setShowSettings] = useState<boolean>(false);
 
   useEffect(() => {
     if (apiError) {
@@ -16,18 +15,18 @@ export const LandingPage = ({ setApiError }: { setApiError: () => void }) => {
   }, [apiError, setApiError]);
 
   return (
-    <>
-      <FlexContainer>
-        <DisplayContainer>
-          <JoinProduction />
-        </DisplayContainer>
-        {!isMobile && (
-          <DisplayContainer>
-            <CreateProduction />
-          </DisplayContainer>
-        )}
-      </FlexContainer>
-      <ProductionsListContainer />
-    </>
+    <div>
+      {((showSettings || !window.localStorage?.getItem("username")) && (
+        <UserSettings
+          buttonText={showSettings ? "Save" : "Next"}
+          onSave={() => setShowSettings(false)}
+        />
+      )) || (
+        <>
+          <UserSettingsButton onClick={() => setShowSettings(!showSettings)} />
+          <ProductionsListContainer />
+        </>
+      )}
+    </div>
   );
 };