Merge pull request #176 from kossiitkgp/chirag/ui-changes

Chirag: UI changes
kossiitkgp · Nov 14, 2023 · 9dea2da · 9dea2da
2 parents 533282d + 8cec3a6
commit 9dea2da
Show file tree

Hide file tree

Showing 19 changed files with 373 additions and 267 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,31 +11,37 @@ import { AuthProvider } from "./util/auth";
 import { ROUTER_PATHS } from "./util/constants";
 import MentorDashboard from "./pages/MentorDashboard";
 import ProjectForm from "./pages/ProjectForm";
+import ScrollToTop from "./util/scrollToTop";
 
 function App() {
   return (
     <div className="App">
       <BrowserRouter>
-        <AuthProvider>
-          <Navbar />
-          <Routes>
-            <Route index element={<Home />} />
-            <Route path={ROUTER_PATHS.MENTOR_FORM} element={<MentorForm />} />
-            {/* <Route path={ROUTER_PATHS.STUDENT_FORM} element={<StudentForm />} /> */}
-            {/* <Route path={ROUTER_PATHS.PROJECTS_LIST} element={<Projects />} /> */}
-            <Route path={ROUTER_PATHS.PROJECT_FORM} element={<ProjectForm />} />
-            <Route path={ROUTER_PATHS.FAQ} element={<FAQ />} />
-            {/* <Route
+        <ScrollToTop>
+          <AuthProvider>
+            <Navbar />
+            <Routes>
+              <Route index element={<Home />} />
+              <Route path={ROUTER_PATHS.MENTOR_FORM} element={<MentorForm />} />
+              {/* <Route path={ROUTER_PATHS.STUDENT_FORM} element={<StudentForm />} /> */}
+              {/* <Route path={ROUTER_PATHS.PROJECTS_LIST} element={<Projects />} /> */}
+              <Route
+                path={ROUTER_PATHS.PROJECT_FORM}
+                element={<ProjectForm />}
+              />
+              <Route path={ROUTER_PATHS.FAQ} element={<FAQ />} />
+              {/* <Route
               path={ROUTER_PATHS.TESTIMONIALS}
               element={<Testimonials />}
             /> */}
-            <Route path={ROUTER_PATHS.OAUTH} element={<OAuth />} />
-            <Route
-              path={ROUTER_PATHS.MENTOR_DASHBOARD}
-              element={<MentorDashboard />}
-            />
-          </Routes>
-        </AuthProvider>
+              <Route path={ROUTER_PATHS.OAUTH} element={<OAuth />} />
+              <Route
+                path={ROUTER_PATHS.MENTOR_DASHBOARD}
+                element={<MentorDashboard />}
+              />
+            </Routes>
+          </AuthProvider>
+        </ScrollToTop>
       </BrowserRouter>
     </div>
   );

diff --git a/src/components/FooterSection.tsx b/src/components/FooterSection.tsx
@@ -13,7 +13,6 @@ export default function FooterSection() {
     <div className="py-16 mx-1 sm:mx-10 rounded-md">
       <nav className="w-full justify-items-center py-16 md:flex-row md:items-stretch flex flex-col justify-center items-center">
         <div className="w-1/2 sm:w-1/5 text-center text-zinc-300 mb-4 text-base font-extrabold">
-          {/* TODO: add all the links here, more if needed */}
           <h3 className="text-2xl mb-3">Social Groups</h3>
           <ul>
             <li className="hover:text-white/50">

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -68,7 +68,7 @@ function Form<S extends InputSettings>(props: IFormProps<S>) {
         >
           <h1 className="text-center text-3xl mb-10">{props.title}</h1>
           {props.error && <p className="text-red-500">{props.error}</p>}
-          {props.info && <p className="text-blue-500">{props.info}</p>}
+          {props.info && <p className="text-primary">{props.info}</p>}
 
           {Object.values(inputs)}
           <div className="flex justify-around">

diff --git a/src/components/MentorProjectCard.tsx b/src/components/MentorProjectCard.tsx
@@ -1,81 +1,109 @@
 import { BiGitCommit, BiGitPullRequest } from "react-icons/bi";
+import { useMemo } from "react";
 import { IProjectDashboardInfo } from "../util/types";
 
 function MentorProjectCard({
   name,
-  description,
-  commit_count,
-  pull_count,
-  lines_added,
-  lines_removed,
   project_status,
+  lines_added = 0,
+  lines_removed = 0,
+  commit_count = 0,
+  pull_count = 0,
   repo_link,
 }: IProjectDashboardInfo) {
+  const totalLinesChanged = useMemo(
+    () => lines_added + lines_removed,
+    [lines_added, lines_removed],
+  );
+  const addedPercentage = useMemo(
+    () =>
+      totalLinesChanged === 0 ? 0 : (lines_added / totalLinesChanged) * 100,
+    [lines_added, totalLinesChanged],
+  );
+  const removedPercentage = useMemo(
+    () =>
+      totalLinesChanged === 0 ? 0 : (lines_removed / totalLinesChanged) * 100,
+    [lines_removed, totalLinesChanged],
+  );
+
   return (
     <>
-      <div className="px-4 py-4 h-[100%] w-80 rounded-md bg-[#0f0f27]">
-        <div className="flex gap-2 items-center mb-4">
-          <h3 className="font-semibold text-xl">
-            {name} ({project_status ? "Approved" : "Awaiting Approval"})
-          </h3>
-        </div>
-        <p>{description}</p>
+      <div className="px-4 py-4 w-80 rounded-md bg-[#2a2a2aa3]">
+        <div className="flex flex-col mb-4">
+          <h3 className="font-semibold text-2xl">{name}</h3>
 
-        <div>
-          <div className="mt-3 mb-3 space-y-1">
-            {commit_count > 0 && project_status && (
-              <div className="flex gap-2 items-center">
-                <div className="flex gap-2 items-center text-sm font-semibold">
-                  <BiGitCommit />
-                  Commit Count:
-                </div>
-                <p className="font-bold text-base">{commit_count}</p>
-              </div>
-            )}
-            {pull_count > 0 && project_status && (
-              <div className="flex gap-2 items-center">
-                <div className="flex gap-2 items-center text-sm font-semibold">
-                  <BiGitPullRequest /> Pull Count:
-                </div>
-                <p className="font-bold text-base">{pull_count}</p>
-              </div>
-            )}
+          {project_status ? (
+            <p className="text-[0.7rem] text-green-700">Approved</p>
+          ) : (
+            <p className="text-[0.7rem] text-yellow-600">Waiting Approval</p>
+          )}
+        </div>
+        <div className="mb-5 space-y-1">
+          <div className="flex gap-2 items-center">
+            <div className="flex gap-2 items-center text-sm font-semibold">
+              <BiGitCommit />
+              Commit Count:
+            </div>
+            <p className="font-bold text-base">{commit_count}</p>
           </div>
-          {project_status && (lines_added > 0 || lines_removed > 0) && (
-            <div className="mb-3">
-              <p className="text-sm font-semibold">Lines Added / Removed</p>
-              <div className="w-full flex items-center">
-                <span className="flex-none text-green-700 text-sm font-bold">
-                  + {lines_added}
-                </span>
-                <div className="w-full mx-2 flex">
-                  <div
-                    style={{
-                      flex: lines_added / (lines_added + lines_removed) + "%",
-                    }}
-                    className="border-2 border-green-700"
-                  ></div>
-                  <div
-                    style={{
-                      flex: lines_removed / (lines_added + lines_removed) + "%",
-                    }}
-                    className="border-2 border-red-700"
-                  ></div>
-                </div>
-                <span className="flex-none text-red-700 text-sm font-bold">
-                  - {lines_removed}
-                </span>
-              </div>
+          <div className="flex gap-2 items-center">
+            <div className="flex gap-2 items-center text-sm font-semibold">
+              <BiGitPullRequest /> Pull Count:
             </div>
-          )}
+            <p className="font-bold text-base">{pull_count}</p>
+          </div>
+        </div>
+        <div className="mb-5">
+          <p className="text-sm font-semibold mb-1">Lines Added / Removed</p>
+          <div className="w-full flex items-center">
+            <span className="flex-none text-green-700 text-sm font-bold">
+              + {lines_added}
+            </span>
+            <div className="w-full mx-2 flex">
+              <div
+                style={{ flex: addedPercentage + "%" }}
+                className="border-2 border-green-700"
+              ></div>
+              <div
+                style={{ flex: removedPercentage + "%" }}
+                className="border-2 border-red-700"
+              ></div>
+            </div>
+            <span className="flex-none text-red-700 text-sm font-bold">
+              - {lines_removed}
+            </span>
+          </div>
+        </div>
+        <div className="mb-3 flex justify-around font-semibold">
+          {/* <a
+            onClick={() => {
+              // TODO: complete edit project
+            }}
+            className="text-base text-primary-500 cursor-pointer hover:text-primary-600"
+          >
+            Edit
+          </a> */}
+          <a
+            href={`${repo_link}/issues`}
+            target="_blank"
+            className="text-base text-primary-500 cursor-pointer hover:text-primary-600"
+          >
+            Issues
+          </a>
+          <a
+            href={`${repo_link}/pulls`}
+            target="_blank"
+            className="text-base text-primary-500 cursor-pointer hover:text-primary-600"
+          >
+            PRs
+          </a>
         </div>
-        <a
-          className="mt-auto align-bottom text-center font-semibold text-lg w-full p-2 bg-blue-950 rounded-md hover:bg-blue-900"
-          href={repo_link}
-          target="_blank"
+        <button
+          onClick={() => window.open(repo_link, "_blank")}
+          className="text-center font-semibold text-lg w-full p-2 bg-primary-700 rounded-md hover:bg-primary-800"
         >
           View Project
-        </a>
+        </button>
       </div>
     </>
   );

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { CiMenuBurger } from "react-icons/ci";
 import { RiCloseLine } from "react-icons/ri";
-import { CgProfile } from "react-icons/cg";
 import { IconContext } from "react-icons";
 import kwoc_logo from "../assets/kwoc_logo.png";
 import { ROUTER_PATHS, GH_OAUTH_URL } from "../util/constants";
@@ -29,16 +28,14 @@ function BrandLogo() {
 
 function LinksList(isLinkActive: (link: string) => boolean, isMobile: boolean) {
   return LINKS.map((link) => (
-    <li key={link.name} className={isMobile ? "mb-1" : "md:ml-4 md:mr-4"}>
+    <li key={link.name} className={isMobile ? "mb-1" : "md:ml-4"}>
       <Link
         to={link.link}
         className={
-          (isMobile
-            ? "block p-2 text-sm font-semibold "
-            : "px-2 py-1 font-semibold ") +
+          (isMobile ? "block p-2 text-sm font-semibold " : "font-semibold ") +
           (isLinkActive(link.link)
-            ? "text-blue-500 hover:drop-shadow-glow duration-500"
-            : "text-white opacity-80 hover:drop-shadow-glow duration-500 active:text-blue-700")
+            ? "text-primary hover:drop-shadow-glow duration-500"
+            : "text-white opacity-80 hover:drop-shadow-glow duration-500 active:text-primary-700")
         }
       >
         {link.name}
@@ -67,7 +64,10 @@ function LoginButton({ isMobile }: { isMobile: boolean }) {
         }
       >
         {authContext.isAuthenticated ? (
-          <CgProfile color="#dc2626" />
+          <img
+            className="w-10 h-full rounded-full block"
+            src={`https://github.com/${authContext.userData.username}.png`}
+          />
         ) : (
           "MENTOR REGISTRATION"
         )}
@@ -112,7 +112,7 @@ function Navbar() {
         <BrandLogo />
         <div className="lg:hidden ml-auto -mr-5">
           <button
-            className="flex items-center text-blue-600 p-3"
+            className="flex items-center text-primary-600 p-3"
             onClick={toggleMobileMenu}
           >
             <CiMenuBurger size="2em" color="#3b82f6" />

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -1,14 +1,35 @@
-import { IProject } from "../util/types";
+import { IProject, IProjectTags } from "../util/types";
+import projectTags from "../data/projectTags.json";
 
-function ProjectCard({ name, description, tags, mentor }: IProject) {
+function ProjectCard({
+  name,
+  description,
+  tags,
+  mentor,
+  comm_channel,
+  repo_link,
+}: IProject) {
+  function getColor(tag: string) {
+    if (tag in projectTags) {
+      return (projectTags as IProjectTags)[tag];
+    } else {
+      const randomColorIndex = Math.floor(
+        Math.random() * Object.keys(projectTags as IProjectTags).length,
+      );
+      const randomKey = Object.keys(projectTags as IProjectTags)[
+        randomColorIndex
+      ];
+      return (projectTags as IProjectTags)[randomKey];
+    }
+  }
   return (
     <>
       <div className="p-4 rounded-md w-full h-full bg-[#0f0f27]">
         <h2 className="text-3xl font-bold text-center mb-1">{name}</h2>
         <h3 className="text-lg text-center mb-3">
           <span className="font-bold">Mentor</span>:{" "}
           <a
-            className="text-blue-500 font-semibold hover:text-blue-600 hover:underline"
+            className="text-primary font-semibold hover:text-primary-600 hover:underline"
             href={`https://github.com/${mentor.username}`}
           >
             {mentor.name}
@@ -24,17 +45,26 @@ function ProjectCard({ name, description, tags, mentor }: IProject) {
             .map((tag, i) => (
               <span
                 key={i}
-                className="px-3 py-1 cursor-pointer text-s font-bold rounded-md bg-slate-700"
+                style={{ backgroundColor: getColor(tag) }}
+                className="px-3 py-1 cursor-pointer text-xs font-bold rounded-md"
               >
                 {tag}
               </span>
             ))}
         </div>
         <div className="flex justify-center gap-2 align-bottom">
-          <button className="px-4 py-2 rounded-md bg-blue-950 hover:bg-blue-900 text-lg font-bold flex justify-center items-center">
+          <button
+            onClick={() => window.open(repo_link, "_blank")}
+            className="px-4 py-2 rounded-md bg-primary-950 hover:bg-primary-900 text-lg font-bold flex justify-center items-center"
+          >
             View Project
           </button>
-          <button className="px-4 py-2 rounded-md bg-blue-950 hover:bg-blue-900 text-lg font-bold flex justify-center items-center">
+          <button
+            onClick={() => {
+              window.open(comm_channel, "_blank");
+            }}
+            className="px-4 py-2 rounded-md bg-primary-950 hover:bg-primary-900 text-lg font-bold flex justify-center items-center"
+          >
             Join Channel
           </button>
         </div>

diff --git a/src/components/SpinnerLoader.tsx b/src/components/SpinnerLoader.tsx
@@ -4,7 +4,7 @@ function SpinnerLoader() {
       <div role="status">
         <svg
           aria-hidden="true"
-          className="inline w-10 h-10text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+          className="inline w-10 h-10text-gray-200 animate-spin dark:text-gray-600 fill-primary-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/TestimonialPageCard.tsx b/src/components/TestimonialPageCard.tsx
@@ -32,7 +32,7 @@ export default function TestimonialCard(props: TestimonialCardProps) {
         </p>
       </div>
       <a href={blogLink} target="_blank" rel="noopener noreferrer">
-        <div className="w-fit m-auto px-6 py-2 bg-blue-950 hover:bg-blue-900 rounded-lg  hover:text-black hover:shadow-md transition-all duration-300 ease-in-out">
+        <div className="w-fit m-auto px-6 py-2 bg-primary-950 hover:bg-primary-900 rounded-lg  hover:text-black hover:shadow-md transition-all duration-300 ease-in-out">
           <p className="text-white text-center font-bold">Read Full Blog</p>
         </div>
       </a>

diff --git a/src/components/WhyKWoC.tsx b/src/components/WhyKWoC.tsx
@@ -46,7 +46,7 @@ export default function WhyKWoC() {
               Top performers in KWoC also have the opportunity to win fantastic
               prizes and rewards from{" "}
               <a
-                className="text-blue-500 font-semibold hover:text-blue-600"
+                className="text-primary font-semibold hover:text-primary-600"
                 href={FOSSU_WEBSITE_URL}
                 target="_blank"
               >