Add join existing group section

client/src/App.tsx

@@ -1,23 +1,21 @@
-import React from "react";
 import Logo from "./assets/flatini-logo.png";
 import "./App.css";
 import { Routes, Route } from "react-router-dom";
 import { Landing } from "./Landing";
-import styled from "styled-components";
 import CreateGroup from "./CreateGroup";
 
-const Header = styled.div``;
-
 function App() {
   return (
     <>
-      <Header>
-        <img style={{ width: 110 }} src={Logo} />
-      </Header>
-      <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route path="/CreateGroup" element={<CreateGroup />} />
-      </Routes>
+      <header>
+        <img style={{ width: 110 }} src={Logo} alt="flatini app" />
+      </header>
+      <main>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/CreateGroup" element={<CreateGroup />} />
+        </Routes>
+      </main>
     </>
   );
 }

client/src/Button.tsx

@@ -1,15 +1,15 @@
 import React, { MouseEventHandler } from "react";
 import styled from "styled-components";
 
-const Wrapper = styled.a`
+const Wrapper = styled.a<{ $disabled?: boolean }>`
   background-color: white;
-  color: #322848;
+  color: ${(props) => (props.$disabled ? "grey" : "#322848")};
   padding: 20px;
   border-radius: 10px;
-  font-size: 25px;
+  font-size: 20px;
+  width: 200px;
   border: 0;
-  cursor: pointer;
-
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
   &::-moz-focus-inner,
   &::-moz-focus-inner {
     border: 0;
@@ -21,11 +21,17 @@ type Props = {
   onClick?: MouseEventHandler<HTMLAnchorElement> | undefined;
   children?: React.ReactNode;
   style?: React.CSSProperties | undefined;
+  $disabled?: boolean;
 };
 
 const Button = (props: Props) => {
   return (
-    <Wrapper onClick={props.onClick} style={props.style} className="secondary">
+    <Wrapper
+      $disabled={props.$disabled}
+      onClick={props.onClick}
+      style={props.style}
+      className="secondary"
+    >
       {props.children}
     </Wrapper>
   );

client/src/CreateGroup.tsx

@@ -47,11 +47,7 @@ const CreateGroup = () => {
   const [copiedToClipboard, setCopiedToClipboard] = useState(false);
 
   function generateRandomId(): string {
-    let randomId = "";
-    for (let i = 0; i < 12; i++) {
-      randomId += Math.floor(Math.random() * 10).toString();
-    }
-    return randomId;
+    return Math.random().toString().substring(7); // still high collision chance, but good enough for now
   }
 
   return (

client/src/Landing.tsx

@@ -1,19 +1,18 @@
-import React, { useState } from "react";
+import { SetStateAction, useState } from "react";
 import styled from "styled-components";
 import Button from "./Button";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const Wrapper = styled.div`
   position: fixed;
   height: 100%;
   width: 100%;
-  top: 0;
-  left: 0;
   display: flex;
   flex-direction: column;
+  gap: 10px;
 `;
 
-const Block = styled.div`
+const Block = styled.div<{ $bgColor?: string; $gap?: string }>`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -24,6 +23,21 @@ const Block = styled.div`
   p {
     max-width: 245px;
   }
+  background-color: ${(props) => props.$bgColor || "transparent"};
+  gap: ${(props) => props.$gap || "10px"};
+`;
+
+const Input = styled.input<{ $topMargin?: string }>`
+  background-color: transparent;
+  border: 2px solid #ccc;
+  padding: 20px;
+  width: 200px;
+  border-radius: 10px;
+  margin-top: ${(props) => props.$topMargin || "0"};
+  &::placeholder {
+    text-align: center;
+  }
+  color: #ccc;
 `;
 
 enum ScreenTypes {
@@ -37,19 +51,36 @@ export const Landing = () => {
   const [state, setState] = useState({
     activeView: ScreenTypes.landing,
   });
+  const navigate = useNavigate();
+  const handleOnClick = () => navigate("/CreateGroup");
+
+  const [inputValue, setInputValue] = useState("");
+
+  const handleInputChange = (e: {
+    target: { value: SetStateAction<string> };
+  }) => {
+    setInputValue(e.target.value);
+  };
+
   return (
     <Wrapper>
-      <Block>
+      <Block $gap="20px">
         <p>
           Create a group with your flatmates and start sharing links to find
           your next flat.
         </p>
-        <Link to="CreateGroup">
-          <Button style={{ marginTop: 30 }}>Create a new group</Button>
-        </Link>
+        <Button onClick={handleOnClick}>Create a new group</Button>
       </Block>
-      <Block style={{ backgroundColor: "#322848" }}>
+      <Block $bgColor="#322848">
         <p>Join an existing group one of your flatmates has already created</p>
+        <Input
+          $topMargin="10px"
+          type="text"
+          placeholder="Enter the group ID"
+          value={inputValue}
+          onChange={handleInputChange}
+        />
+        <Button $disabled={inputValue === ""}>Join existing group</Button>
       </Block>
     </Wrapper>
   );