Payne680 · Payne680 · May 6, 2023 · Apr 28, 2023 · Apr 28, 2023 · Apr 29, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -1,27 +1,28 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "airbnb",
-    "plugin:prettier/recommended"
-  ],
-  "overrides": [],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react"],
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "plugin:react/recommended",
+      "airbnb",
+      "plugin:prettier/recommended"
     ],
-    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+    "overrides": [],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "plugins": ["react"],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-filename-extension": [
+        1,
+        {
+          "extensions": [".js", ".jsx"]
+        }
+      ],
+      "prettier/prettier": ["error", { "endOfLine": "auto" }]
+    }
   }
-}
+  
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/styled": "^11.10.8",
+    "@mui/base": "^5.0.0-alpha.128",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.3",
+    "@mui/x-data-grid": "^6.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "material-ui-popup-state": "^5.0.8",
     "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
+    "react-trello": "^2.2.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -46,5 +55,17 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.2"
-  }
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Payne680/QUESTIFY-FRONTEND.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Payne680/QUESTIFY-FRONTEND/issues"
+  },
+  "homepage": "https://github.com/Payne680/QUESTIFY-FRONTEND#readme"
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,57 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Lora&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
-    />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Play&display=swap" rel="stylesheet">
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
@@ -2,11 +2,17 @@ body {
   background: #E5E5E5;
 }
 
-
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+:root {
+  --transparent-black: rgba(0, 0, 0, 0.294);
+  --black: #111111;
+  --grey: rgba(255, 255, 255, 0.597);
+  --orange: #a7caca;
+  --green: rgb(54, 234, 54);
+  --orange-gradient: linear-gradient(
+    268.35deg,
+    rgba(255, 70, 70, 0.99) 3.47%,
+    rgba(255, 114, 70, 0.99) 60.18%
+  );
 }
 
 .App-header {
@@ -18,19 +24,64 @@ body {
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  font-family: 'Public Sans', sans-serif;
+  overflow: hidden;
 }
 
-.App-link {
-  color: #61dafb;
+.theme-container {
+  background: rgba(0, 0, 0, 0.59);
+  border-radius: 20px;
+  padding: 2rem;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.gradient-red {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: #8cd1ef;
+  filter: blur(90px);
+}
+.gradient-orange {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: var(--orange);
+  filter: blur(90px);
+}
+.gradient-blue {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: #5dc9ff;
+  filter: blur(90px);
 }
 
+.grey-container {
+  border-top: 0.3px solid rgba(255, 255, 255, 0.185);
+  border-bottom: 0.3px solid rgba(255, 255, 255, 0.185);
+  background: linear-gradient(
+    90deg,
+    rgba(53, 53, 53, 0) 1.21%,
+    rgba(53, 53, 53, 0.46) 49.45%,
+    rgba(53, 53, 53, 0) 103.83%
+  );
+  padding: 1.5rem 1rem;
+}
 
+/* scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  width: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: darkgrey;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,8 @@ import Signup from './Pages/Templates/Signup';
 import Signin from './Pages/Templates/Signin';
 import CreateFirstTeam from './Pages/Templates/CreateFirstTeam';
 import Landing from './Pages/Landing/Homepage';
+import Dashboard from './Pages/Dashboard/Dashboard';
+import BoardPage from './Pages/BoardPage/BoardPage';
 
 export default function App() {
   return (
@@ -13,6 +15,9 @@ export default function App() {
           <Route path="/" element={<Landing />} />
           <Route path="signup" element={<Signup />} />
           <Route path="create-first-team" element={<CreateFirstTeam />} />
+          <Route path="dashboard" element={<Dashboard />}>
+            <Route path="board" element={<BoardPage />} />
+          </Route>
           <Route path="login" element={<Signin />} />
         </Routes>
       </div>

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Components/Atoms/Atoms.css b/src/Components/Atoms/Atoms.css
@@ -1,28 +1,29 @@
 input {
-    width: 300px;
-    height: 45px;
-    border-radius: 10px;
-    background: #224957;
-    color: #fff;
-    margin: 11px;
-    padding: 10px;
-    border: 1px solid #224957;
-    font-family: "lexand Deca";
-    letter-spacing: 1.2px;
+  width: 300px;
+  height: 35px;
+  border-radius: 10px;
+  background: #224957;
+  color: #fff;
+  margin: 11px;
+  padding: 10px;
+  border: 1px solid #224957;
+  font-family: 'lexand Deca';
+  letter-spacing: 1.2px;
 }
 ::placeholder {
-    color: #fff;
-    opacity: 0.6;
+  color: #fff;
+  opacity: 0.6;
 }
+
 button {
-    width: 300px;
-    height: 45px;
-    margin: 15px;
-    border-radius: 10px;
-    color: #224957;
-    font-weight: bold;
-    background-color: #76B1A6;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-    border: none;
+  width: 300px;
+  height: 40px;
+  margin: 15px;
+  border-radius: 10px;
+  color: #224957;
+  font-weight: bold;
+  background-color: #76b1a6;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  border: none;
 }
diff --git a/src/Components/Atoms/Buttons/Button.jsx b/src/Components/Atoms/Buttons/Button.jsx
@@ -1,10 +1,14 @@
 import React from 'react';
 
 // eslint-disable-next-line
-export default function Button({ height, title, width }) {
+export default function Button({ height, title, width, className }) {
   return (
     <div>
-      <button className="btn" style={{ padding: height, width }} type="submit">
+      <button
+        className={className}
+        style={{ padding: height, width }}
+        type="submit"
+      >
         {title}
       </button>
     </div>

diff --git a/src/Components/Atoms/Inputs/Input.jsx b/src/Components/Atoms/Inputs/Input.jsx
@@ -2,12 +2,15 @@
 import React from 'react';
 import '../Atoms.css';
 
-function Input({ type, value, placeholder }) {
+export default function Input({ type, value, placeholder, className }) {
   return (
     <div>
-      <input type={type} value={value} placeholder={placeholder} required />
+      <input
+        className={className}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+      />
     </div>
   );
 }
-
-export default Input;