feat: added nav-button as a separate component, added styling

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

@@ -1,16 +1,14 @@
-import { useNavigate } from "react-router-dom";
 import { JoinProduction } from "./join-production.tsx";
 import { CreateProduction } from "./create-production.tsx";
 import { ProductionsList } from "./productions-list.tsx";
 import { useNavigateToProduction } from "./use-navigate-to-production.ts";
 import { DisplayContainer, FlexContainer } from "../generic-components.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
-import { ActionButton } from "./form-elements.tsx";
 import { isMobile } from "../../bowser.ts";
+import { ManageProductionButton } from "../manage-productions/manage-production-button.tsx";
 
 export const LandingPage = () => {
   const [{ joinProductionOptions }] = useGlobalState();
-  const navigate = useNavigate();
 
   useNavigateToProduction(joinProductionOptions);
 
@@ -27,12 +25,7 @@ export const LandingPage = () => {
         )}
       </FlexContainer>
       <ProductionsList />
-      <ActionButton
-        type="button"
-        onClick={() => navigate("/manage-productions")}
-      >
-        Manage Productions
-      </ActionButton>
+      <ManageProductionButton />
     </>
   );
 };

src/components/manage-productions/manage-production-button.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import styled from "@emotion/styled";
+import { ActionButton } from "../landing-page/form-elements";
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: end;
+  padding: 2rem;
+`;
+
+export const ManageProductionButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ButtonWrapper>
+      <ActionButton
+        type="button"
+        onClick={() => navigate("/manage-productions")}
+      >
+        Manage Productions
+      </ActionButton>
+    </ButtonWrapper>
+  );
+};