Merge remote-tracking branch 'origin/main'

client/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,7 +14,9 @@
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
@@ -21,6 +26,7 @@
     "dev": "webpack -w --config webpack.config.js"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/chrome": "^0.0.245",
     "@types/react": "^18.2.21",
     "copy-webpack-plugin": "^11.0.0",

client/src/App.css

@@ -1,11 +1,170 @@
+@import url("https://fonts.googleapis.com/css2?family=Passion+One&family=Roboto:wght@400;500;900&display=swap");
+
 .App {
-    color: white;
-    text-align: center;
+  color: white;
+  text-align: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  min-width: 250px;
+  min-height: 650px;
 }
 
 .container {
-    width: 15rem;
-    height: 15rem;
-    background-color: green;
+  width: 100%;
+  height: 100%;
+  background-color: #358410;
+}
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
-}
+p {
+  font-family: "Roboto", sans-serif;
+  letter-spacing: 0.2px;
+  line-height: 25px;
+  color: white;
+}
+
+.secondary {
+  font-family: "Passion One", cursive;
+}

client/src/App.tsx

@@ -1,7 +1,32 @@
+import React from "react";
+import Logo from "./assets/flatini-logo.png";
 import "./App.css";
+import { Routes, Route, useNavigate } from "react-router-dom";
+import { Landing } from "./Landing";
+import styled from "styled-components";
+import CreateGroup from "./CreateGroup";
+import { Flats } from "./Flats";
+
+const Header = styled.div``;
 
 function App() {
-  return <div className="App">Hello World5</div>;
+  const navigate = useNavigate();
+  function gotoLanding(): void {
+    navigate("/");
+  }
+
+  return (
+    <>
+      <Header style={{ cursor: "pointer" }} onClick={gotoLanding}>
+        <img style={{ width: 110 }} src={Logo} />
+      </Header>
+      <Routes>
+        <Route path="/" element={<Landing />} />
+        <Route path="/Flats" element={<Flats />} />
+        <Route path="/CreateGroup" element={<CreateGroup />} />
+      </Routes>
+    </>
+  );
 }
 
 export default App;

client/src/Button.tsx

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

client/src/CreateGroup.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Button from "./Button";
+
+const Wrapper = styled.div`
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 50px 20px;
+`;
+
+const Hashtag = styled.span`
+  font-size: 11px;
+  color: white;
+`;
+
+const CopyCodeWrapper = styled.div`
+  flex: 8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const GroupCode = styled.span`
+  font-size: 45px;
+  color: white;
+`;
+
+const LinkCopiedText = styled.div`
+  background-color: #4b2798;
+  color: white;
+  padding: 10px 30px;
+  border-radius: 5px;
+  font-size: 20px;
+`;
+
+const CreateGroup = () => {
+  const [id, setId] = useState(generateRandomId());
+  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 (
+    <Wrapper>
+      <p style={{ flex: 1 }}>
+        You are creating a new group. Share this code with your flatmates so
+        they can join the group.
+      </p>
+
+      <CopyCodeWrapper>
+        <div>
+          <Hashtag>#</Hashtag>
+          <GroupCode className="secondary">{id}</GroupCode>
+        </div>
+        {copiedToClipboard ? (
+          <LinkCopiedText style={{ margin: "20px 0" }}>
+            <span className="secondary">Code copied to clipboard!</span>
+          </LinkCopiedText>
+        ) : null}
+        <Button
+          onClick={() => setCopiedToClipboard(true)}
+          style={{ padding: 15, marginTop: 10 }}
+        >
+          {!copiedToClipboard ? (
+            <img
+              style={{ width: 30 }}
+              src="https://cdns.iconmonstr.com/wp-content/releases/preview/7.8.0/240/iconmonstr-cut-lined.png"
+            />
+          ) : (
+            <img
+              style={{ width: 30 }}
+              src="https://cdns.iconmonstr.com/wp-content/releases/preview/2012/240/iconmonstr-check-mark-4.png"
+            />
+          )}
+        </Button>
+      </CopyCodeWrapper>
+      <div style={{ flex: 1 }}>
+        <Button>Create new group</Button>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default CreateGroup;