TS Refactor Style Adjustments

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sc-frontend",
+  "name": "sproul-club/client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -14,11 +14,13 @@
     "node-sass": "^7.0.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "react-hook-form": "^7.39.4",
+    "react-router-dom": "^6.4.3",
     "sass": "^1.54.0"
   },
   "devDependencies": {
-    "@types/node": "17.0.31",
-    "@types/react": "18.0.9",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.24",
     "@types/react-dom": "18.0.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
@@ -30,6 +32,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.30.1",
     "prettier": "^2.7.1",
-    "typescript": "^4.6.4"
+    "typescript": "4.8.4"
   }
 }

src/components/ClubCard/Card.module.scss

@@ -0,0 +1,74 @@
+.card {
+  position: absolute;
+
+  .text {
+    font-family: "Inter";
+    font-style: normal;
+  }
+
+  .background {
+    position: absolute;
+    padding: 17px;
+    width: 260px;
+    height: 130px;
+
+    background: #ffffff;
+    border: 1px solid #c4c4c4;
+    border-radius: 6px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .bear {
+      width: 58px;
+      height: 58px;
+      flex: 0 0 auto;
+    }
+
+    .content {
+      display: flex;
+    }
+
+    .desc {
+      font-weight: 400;
+      font-size: 11px;
+      line-height: 15px;
+    }
+  }
+
+  .default-logo {
+    border-radius: 6px;
+  }
+
+  .club-name {
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 20px;
+    /* or 133% */
+
+    color: #2b2b2b;
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    margin-left: 17px;
+    .app-info {
+      font-weight: 500;
+      font-size: 10px;
+      line-height: 12px;
+      padding-left: 3px;
+    }
+
+    .open {
+      color: #54a0f1;
+    }
+    .req {
+      color: #00992b;
+    }
+    .not-req {
+      color: #e95f5f;
+    }
+  }
+}

src/components/ClubCard/ClubCard.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+
+import defaultLogo from "../assets/default_logo.jpg";
+import checkMark from "../assets/icons/check_mark.png";
+import vector from "../assets/icons/vector.png";
+import redVector from "../assets/icons/red_vector.png";
+import Club from "../../models/Club";
+
+interface ClubCard_Props {
+  data: Club;
+}
+
+const ClubCard = ({ data }: ClubCard_Props) => {
+  const { name, description, appsOpen, appRequired } = data;
+  return (
+    <div className="card">
+      <div className="background">
+        <div className="content">
+          <div className="bear">
+            <Image
+              src={defaultLogo}
+              className="default-logo"
+              alt="default-logo"
+            />
+          </div>
+          <div className="right">
+            <text className="club-name">{name}</text>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              {appsOpen ? (
+                <div>
+                  <Image src={checkMark} className="check-mark-logo" />
+                  <text className="app-info open">OPEN</text>
+                </div>
+              ) : (
+                <></>
+              )}
+              {appRequired ? (
+                <div>
+                  <Image src={vector} alt="vector-logo" />
+                  <text className="app-info req">APPLICATION</text>
+                </div>
+              ) : (
+                <div>
+                  <Image src={redVector} alt="red-vector-logo" />
+                  <text className="app-info not-req">NO APPLICATION</text>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <text className="desc">{description}</text>
+      </div>
+    </div>
+  );
+};
+
+export default ClubCard;

src/components/ClubCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./ClubCard";

src/components/layout/Footer/Footer.tsx

@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <div></div>;
+};
+
+export default Footer;

src/components/layout/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";

src/components/layout/navbar/Navbar.css → src/components/layout/NavBar/Navbar.module.scss

@@ -1,6 +1,6 @@
-.header {
+.container {
   background-color: rgba(255, 255, 255, 0.6);
-  font-family: Qanelas Soft;
+  // font-family: "Qanelas Soft";
   font-weight: 700;
   font-style: normal;
   overflow: visible;
@@ -15,9 +15,14 @@
   width: calc(100% - 90px);
   background: rgba(255, 255, 255, 0.952);
   letter-spacing: 0.03em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 100vw;
 }
 
-.header .nav-link {
+.container .nav-link {
   float: left;
   color: #2b2b2b;
   transition: color 0.12s;
@@ -29,7 +34,11 @@
   border-radius: 6px;
 }
 
-.header .join-us {
+.container a {
+  padding-right: 30px;
+}
+
+.container .join-us {
   background: white;
   font-style: normal;
   color: #54a0f1;
@@ -43,28 +52,51 @@
   margin-right: 4px;
 }
 
-.header .logo-img {
+.container .sign-in {
+  background: #54a0f1;
+  font-style: normal;
+  color: white;
+  text-decoration: none;
+  border-radius: 10px;
+  box-shadow: inset 0px 0px 0px 2px #54a0f1;
+  line-height: 18px;
+  padding: 10px 20px 10px 20px;
+  margin-top: 3px;
+  margin-left: 13px;
+  margin-right: 4px;
+}
+
+.container .logo-img {
   float: left;
   width: 43px;
 }
 
-.header .nav-link.logo {
-  font-family: Qanelas Soft Extra Bold;
+.container .nav-link.logo {
+  // font-family: "Qanelas Soft" Extra Bold;
   font-weight: 800;
   font-size: 19px;
   font-weight: bold;
   color: #2b2b2b;
   padding: 13px 6px;
 }
 
-.header a:hover {
+.container a:hover {
   color: #54a0f1;
   cursor: pointer;
 }
 
+.header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .header-right {
   float: right;
   margin-right: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .hamburger {
@@ -78,6 +110,12 @@
   flex-direction: row;
 }
 
+.loggedOut {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .hidden {
   display: none;
 }
@@ -253,7 +291,7 @@
 /*** MOBILE VIEW STYLING ***/
 
 @media screen and (max-width: 850px) {
-  .header {
+  .container {
     padding-left: 10px;
     padding-right: 10px;
     width: calc(100vw - 20px);
@@ -306,7 +344,7 @@
     border-radius: 20px;
   }
 
-  .header .join-us {
+  .container .join-us {
     margin-bottom: 13px;
   }
 }