Merge pull request #4 from FetchCV/dev

New Theming and Better Light mode
FetchCV · Jul 26, 2024 · 739039e · 739039e
2 parents 2a714e7 + 89cc4f4
commit 739039e
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 120 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
       "express-session": "^1.18.0",
       "mongoose": "^8.5.1",
       "node": "^21.6.2",
+      "nvm": "^0.0.4",
       "tailwind": "^4.0.0"
    },
    "devDependencies": {

diff --git a/public/home.ejs b/public/home.ejs
@@ -16,12 +16,12 @@
 <%- include("partials/navbar.ejs") %>
 
    <body
-      class="flex justify-center items-center h-[100vh] bg-zinc-50 dark:bg-zinc-900 dark:text-white lg:px-[20vw] sm:px-0">
+      class="flex justify-center items-center h-[100vh] bg-far-light dark:bg-far-dark dark:text-white lg:px-[20vw] sm:px-0">
       <!-- Page Card -->
       <div>
          <!-- Centered card -->
          <div class="grid gap-16 px-4 py-10" style="grid-template-columns: 312px auto">
-            <img class="m-6 w-[300px] shadow-2xl border-[1px] border-zinc-700 border-t-zinc-600 rounded-full"
+            <img class="m-6 w-[300px] border-[1px] border-far-b-dark rounded-full"
                src="images/logo.svg" alt="logo" />
             <div class="my-auto">
                <h1 class="text-4xl">FetchCV</h1>
@@ -44,7 +44,7 @@
             <!-- Profile Link -->
             <a href="/profile">
                <div
-                  class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-200 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md dark:text-white">
+                  class="inline-flex justify-center transition-all p-2 mx-1 border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md">
                   <span class="material-symbols-rounded text-public mr-2">account_circle</span>
                   <p>My Profile</p>
                </div>

diff --git a/public/pages/login.ejs b/public/pages/login.ejs
@@ -7,12 +7,12 @@
    <link rel="icon" type="images/svg" href="images/logo.svg">
 </head>
 <%- include("../partials/navbar.ejs") %>
-<body>
-   <div class="h-[100vh] w-full flex justify-center items-center bg-zinc-50 dark:bg-zinc-900 text-center font-mono">
-      <div>
-         <h1 class="my-2 text-6xl font-extrabold">🔑</h1>
-         <h2 class="m-4 text-3xl text-gray-700">Login options</h2>
-         <a href="https://github.com/login/oauth/authorize?client_id=<%= client_id %>" class="m-4 py-3 px-4 rounded-lg text-2xl font-light bg-gray-600 text-white"><span class="fa fa-github"></span> Sign in with GitHub</a>
+<body class="px-8 flex h-[80dvh] justify-center items-center bg-far-light dark:bg-far-dark dark:text-white">
+   <div class="w-96 flex flex-col h-fit m-2 p-2 bg-close-light dark:bg-close-dark border-[1px] border-close-b-light dark:border-close-b-dark rounded-md text-center">
+      <h2 class="m-2 text-xl font-semibold dark:text-white">Login Options</h2>
+      <div class="flex justify-center w-full flex-col">
+         <a href="https://github.com/login/oauth/authorize?client_id=<%= client_id %>" class="transition-all py-4 px-4 my-2 w-full border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md"><span class="fa fa-github"></span> Sign in with GitHub</a>
+         <a href="" class="transition-all py-4 px-4 w-full text-zinc-500 border-[1px] bg-far-light dark:bg-far-dark hover:bg-far-h-light hover:dark:bg-far-h-dark border-far-b-light dark:border-far-b-dark rounded-md pointer-events-none"><span class="fa fa-gitlab"></span> Sign in with GitLab (Coming Soon)</a>
       </div>
    </div>
 </body>

diff --git a/public/pages/profile.ejs b/public/pages/profile.ejs
@@ -12,20 +12,20 @@
    <title>My Profile | FetchCV</title>
 </head>
 <%- include("../partials/navbar.ejs") %>
-<body class="px-8 flex justify-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
+<body class="px-8 flex justify-center bg-far-light dark:bg-far-dark dark:text-white">
          <script>
             let userDataWorking = `<%- JSON.stringify(userData) %>`;
             let githubUserData = JSON.parse(userDataWorking);
          </script>
 
    <div class="mb-20">
       <!-- Edit panel -->
-      <div class="edit-controls shadow-2xl py-4 px-8 my-2 bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md user-info">
+      <div class="edit-controls py-4 px-4 my-2 bg-close-light dark:bg-close-dark border-[1px] border-close-b-light dark:border-close-b-dark rounded-md user-info">
          <div class="changes-saved-banner hidden p-4 my-2 bg-blue-300 border-2 border-blue-500 rounded-md">Changes saved!</div>
          <div>
             <h2 class="text-zinc-500">Edit description</h2>
-            <div class="min-w-[40vw] flex w-full justify-center items-center bg-white dark:bg-zinc-600 rounded-md overflow-hidden">
-               <input id="edit-description" maxlength="500" onKeyDown="if (event.keyCode == 13) editDescription(this.value)" class="p-2 bg-none edit-description w-full border-blue-500 focus:border-b-2 focus:outline-none dark:bg-zinc-600" type="text">
+            <div class="min-w-[40vw] flex w-full justify-center items-center bg-far-light dark:bg-far-dark border-close-b-light dark:border-close-b-dark has-[:focus]:border-public rounded-md overflow-hidden">
+               <input id="edit-description" maxlength="500" onKeyDown="if (event.keyCode == 13) editDescription(this.value)" class="p-2 edit-description w-full outline-none bg-transparent" type="text">
                <span title="Save" tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="editDescription(document.querySelector('#edit-description').value)">save</span>
                <span title="Revert to GitHub bio" tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="revertDescriptionToGitHubBio()">refresh</span>
             </div>

diff --git a/public/pages/user-profile.ejs b/public/pages/user-profile.ejs
@@ -12,15 +12,15 @@
    <title>My Profile | FetchCV</title>
 </head>
 <%- include("../partials/navbar.ejs") %>
-<body class="px-8 flex justify-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
+<body class="px-8 flex justify-center bg-far-light dark:bg-far-dark dark:text-white">
    <div class="mb-20">
          <script>
             let usernameJSON = `<%- JSON.stringify(username) %>`;
             let username = JSON.parse(usernameJSON);
          </script>
       <!-- Error box - hidden by default -->
       <div
-         class="error-box shadow-2xl py-4 px-8 my-2 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden bg-blue-800 bg-red-800 bg-green-800">
+         class="error-box py-4 px-8 my-2 border-[1px] border-close-b-light dark:border-close-b-dark rounded-md hidden bg-blue-800 bg-red-800 bg-green-800">
          <h1 class="error-title text-2xl font-mono">Oh no! Token retrival error</h1>
          <h1 class="error-text font-mono">We could not fetch your data</h1>
       </div>
@@ -29,10 +29,10 @@
 
       <!-- Profile Card -->
       <div
-         class="shadow-2xl py-4 px-8 my-2 bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden user-info">
+         class="py-4 px-8 my-2 bg-close-light dark:bg-close-dark border-[1px] border-close-b-light dark:border-close-b-dark rounded-md hidden user-info">
          <div class="grid gap-6" style="grid-template-columns: 300px auto;">
             <img
-               class="profile-picture w-[300px] shadow-2xl border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-full"
+               class="profile-picture w-[300px] border-[1px] border-close-b-light dark:border-close-b-dark rounded-full"
                alt="Profile Picture">
             <div class="max-w-[45vw]">
                <h1 class="profile-name text-3xl font-bold">Name</h1>
@@ -62,20 +62,18 @@
       </div>
       <!-- Branding -->
       <div
-         class="flex w-full py-4 justify-center items-center shadow-lg dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
+         class="flex w-full py-4 justify-center items-center bg-close-light dark:bg-close-dark border-[1px] border-close-b-light dark:border-close-b-dark rounded-md">
          <p>Created with <code class="text-theme">FetchCV</code></p>
 
       </div>
    </div>
    <!-- future settings panel (for use with customizing profile card and accessing account settings) -->
    <div
-      class="settings-toolbar hidden flex fixed bottom-0 w-screen px-0 py-1 bg-zinc-700 border-[1px] border-zinc-700 border-t-zinc-600">
+      class="settings-toolbar hidden left-0 right-0 fixed bottom-0 w-screen px-0 py-1 bg-closer-dark border-[1px] border-closer-b-dark">
       <div class="absolute bottom-0 -z-10 -left-40 w-[140%] h-full caution-tape"></div>
       <div
-         class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-800 border-[1px] border-zinc-700 border-t-zinc-600 rounded-md text-black">
-         <span class="material-symbols-rounded text-private" onclick="
-   window.location.href = window.location.origin + '/edit-profile';
-">settings</span>
+         class="inline-flex justify-center transition-all p-2 mx-1 border-[1px] bg-close-dark hover:bg-close-h-dark border-close-b-dark rounded-md">
+         <span class="material-symbols-rounded text-private" onclick="window.location.href = window.location.origin + '/edit-profile';">settings</span>
       </div>
    </div>
 </body>

diff --git a/public/partials/navbar.ejs b/public/partials/navbar.ejs
@@ -13,19 +13,19 @@
 
 
 
-<div class="grid fixed top-0 left-0 right-0 p-2 backdrop-blur-lg bg-zinc-100/85 dark:bg-zinc-800/75" style="grid-template-columns: auto auto auto;">
+<div class="grid fixed top-0 left-0 right-0 p-2 border-[1px] bg-close-light dark:bg-close-dark border-close-b-light dark:border-close-b-dark" style="grid-template-columns: auto auto auto;">
    <a href="/">
-      <h2 class="inline-block font-bold text-xl dark:text-white transition-all p-2 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md hover:cursor-pointer"
+      <h2 class="inline-block transition-all font-bold text-xl dark:text-white p-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md hover:cursor-pointer"
          style="font-family: 'Inter Tight';" title="home">FetchCV</h2>
    </a>
-   <div class="relative inline-flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
-      <input class="w-full px-6 py-2 text-base bg-transparent" type="text" id="user-name"
+   <div class="relative inline-flex w-full justify-center items-center border-[1px] bg-close-light dark:bg-close-dark border-close-b-light dark:border-close-b-dark has-[:focus]:border-public rounded-md">
+      <input class="w-full px-6 py-2 text-base bg-transparent outline-none" type="text" id="user-name"
          placeholder="Enter a username">
       <span tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="getUpdatedSearchResults(this.parent.firstChild.value)">person_search</span>
-      <div class="search-results hidden absolute top-[4rem] left-0 right-0 px-4 py-2 backdrop-blur-lg bg-zinc-100 dark:bg-zinc-800 rounded-lg border-2 border-zinc-200 dark:border-zinc-700" style="box-shadow: 0 .5rem 1rem #22222260;"></div>
+      <div class="search-results hidden absolute top-[3.8rem] left-0 right-0 px-2 bg-close-light dark:bg-close-dark rounded-md border-[1px] border-close-b-light dark:border-close-b-dark"></div>
    </div>
    <a href="/profile">
-      <div class="float-right inline-flex justify-center p-2 my-0.5 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md">
+      <div class="float-right inline-flex justify-center transition-all p-2 my-0.5 border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md">
          <span class="material-symbols-rounded text-public mr-2" title="my profile">account_circle</span>
          <p>My Profile</p>
       </div>

diff --git a/public/scripts-src/github/displayData.ts b/public/scripts-src/github/displayData.ts
@@ -36,7 +36,7 @@ function generateLanguageElements(languages: [string, number][]) {
       for (const lang of languages) {
          const langElement = document.createElement("li");
          langElement.textContent = `${lang[0]}: ${lang[1]}%`;
-         langElement.classList.add("inline-block", "bg-zinc-200", "dark:bg-zinc-700", "px-2", "m-1", "py-1", "rounded-lg", "border-[1px]", "border-zinc-400", "dark:border-zinc-700", "border-t-zinc-300", "dark:border-t-zinc-600", "inline-flex", "items-center");
+         langElement.classList.add("inline-block", "bg-closer-light", "dark:bg-closer-dark", "px-2", "m-1", "py-1", "rounded-lg", "border-[1px]", "border-closer-b-light", "dark:border-closer-b-dark", "inline-flex", "items-center");
          langElement.innerHTML = ` <i class="devicon-${getLangIcon(lang[0])}-plain mr-1.5"></i>` + langElement.textContent;
          langList.appendChild(langElement);
       }

diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts
@@ -45,7 +45,7 @@ function showUpdatedSearchResults(users) {
       let userElement = document.createElement("div");
       createSearchResultElement(userElement, user.handle, user.profile.description);
       let divider = document.createElement("hr");
-      divider.classList.add("dark:border-zinc-700");
+      divider.classList.add("dark:border-close-b-dark", "border-close-b-light");
       userElement.append(divider);
       searchResultsElement.append(userElement);
    }
@@ -59,9 +59,9 @@ function showUpdatedSearchResults(users) {
 
 function createSearchResultElement(element, name, description) {
    element.innerHTML = `
-      <div class="bg-white dark:bg-zinc-900 rounded-lg my-2 px-4 py-2">
+      <div class="transition-all border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md my-2 p-2">
          <a href="/user/${name}">
-            <p class="text-lg">${name}</p>
+            <p class="font-semibold">${name}</p>
             <p class="font-light">${description}</p>
          </a>
       </div>

diff --git a/public/scripts/github/displayData.js b/public/scripts/github/displayData.js
@@ -29,7 +29,7 @@ function generateLanguageElements(languages) {
         for (const lang of languages) {
             const langElement = document.createElement("li");
             langElement.textContent = `${lang[0]}: ${lang[1]}%`;
-            langElement.classList.add("inline-block", "bg-zinc-200", "dark:bg-zinc-700", "px-2", "m-1", "py-1", "rounded-lg", "border-[1px]", "border-zinc-400", "dark:border-zinc-700", "border-t-zinc-300", "dark:border-t-zinc-600", "inline-flex", "items-center");
+            langElement.classList.add("inline-block", "bg-closer-light", "dark:bg-closer-dark", "px-2", "m-1", "py-1", "rounded-lg", "border-[1px]", "border-closer-b-light", "dark:border-closer-b-dark", "inline-flex", "items-center");
             langElement.innerHTML = ` <i class="devicon-${getLangIcon(lang[0])}-plain mr-1.5"></i>` + langElement.textContent;
             langList.appendChild(langElement);
         }

diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js
@@ -39,7 +39,7 @@ function showUpdatedSearchResults(users) {
         let userElement = document.createElement("div");
         createSearchResultElement(userElement, user.handle, user.profile.description);
         let divider = document.createElement("hr");
-        divider.classList.add("dark:border-zinc-700");
+        divider.classList.add("dark:border-close-b-dark", "border-close-b-light");
         userElement.append(divider);
         searchResultsElement.append(userElement);
     }
@@ -52,9 +52,9 @@ function showUpdatedSearchResults(users) {
 }
 function createSearchResultElement(element, name, description) {
     element.innerHTML = `
-      <div class="bg-white dark:bg-zinc-900 rounded-lg my-2 px-4 py-2">
+      <div class="transition-all border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md my-2 p-2">
          <a href="/user/${name}">
-            <p class="text-lg">${name}</p>
+            <p class="font-semibold">${name}</p>
             <p class="font-light">${description}</p>
          </a>
       </div>