Implemented fix for widget functionality, added initial version route…

… in frontend API, and adjusted color scheme

frontend/.gitignore

@@ -25,4 +25,4 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

frontend/src/App.jsx

@@ -22,6 +22,7 @@ import {
 import { ThemeProvider } from './context/exports'
 import { getConfig, isLoggedIn } from "./utility/exports";
 import Layout from "./Layout";
+import FixWidget from "./components/Widget/FixWidget/FixWidget"
 
 export const Config = getConfig();
 
@@ -70,6 +71,7 @@ const App = () => {
             />
             <Route path="*" element={<NotFound />} />
           </Routes>
+          <FixWidget />
         </Layout>
       </ThemeProvider>
     </Router>

frontend/src/components/Buttons/ResumeUpload/ResumeUpload.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   padding: 20px;
-  border: 0.01px solid var(--color-gray);
+  border: 1px solid var(--input-border-color);
   border-radius: 8px;
   background-color: var(--secondary-color);
   color: var(--text-color);
@@ -40,6 +40,10 @@
   margin-right: 20px;
 }
 
+.fileInput {
+  display: none;
+}
+
 .buttonContainer {
   display: flex;
   align-items: center;
@@ -52,23 +56,15 @@
   font-size: 20px;
 }
 
-.fileInput {
-  display: none;
-}
-
 .browseButton {
   padding: 10px 20px;
-  border: 0.1px solid var(--color-gray);
+  border: 1px solid var(--input-border-color);
   border-radius: 4px;
   background-color: var(--button-bg-color);
   cursor: pointer;
   color: var(--text-color);
 }
 
-.deleteButton:hover {
-  background-color: var(--button-bg-color-hover);
-}
-
 .deleteButton svg {
   margin-right: 5px;
 }

frontend/src/components/Buttons/ThemeSwitcher/ThemeSwitcher.module.css

@@ -38,7 +38,7 @@
 }
 
 input:checked + .slider {
-  background-color: #4caf50;
+  background-color: #4b9f3a;
 }
 
 input:checked + .slider:before {
@@ -63,7 +63,7 @@ input:checked + .slider:before {
   background: none;
   cursor: pointer;
   color: var(--icon-color);
-  transition: background-color 0.5s ease; 
+  transition: background-color 0.5s ease;
 }
 
 .themeSwitcherSwitch[data-active="true"] {
@@ -76,4 +76,4 @@ input:checked + .slider:before {
     width: 32px;
     height: 28px;
   }
-}
+}

frontend/src/components/Navbar/Navbar.module.css

@@ -2,8 +2,8 @@
   width: 100vw;
   /* position: sticky;
   top: 0;
-  left: 0;
-  z-index: 1000; */
+  left: 0; */
+  z-index: 1;
   background-color: var(--navbar-bg-color);
   padding: 10px 20px;
   display: flex;

frontend/src/components/Widget/FixWidget/FixWidget.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { FaRocket } from "react-icons/fa";
+import { PiRocketLaunch } from "react-icons/pi";
+import styles from "./FixWidget.module.css";
+
+const FixWidget = () => {
+  const handleClick = () => {
+    window.open("https://referral-network-hub.vercel.app/", "_blank");
+  };
+
+  return (
+    <>
+      <div className={styles.widgetContainer} onClick={handleClick}>
+        <div className={styles.widget}>
+          <FaRocket className={styles.icon} />
+        </div>
+      </div>
+      <div className={styles.widgetContainer}>
+        <div className={styles.desktopWidget}>
+          <p>
+            Be the first to experience our latest updates!{" "}
+            <span onClick={handleClick}>
+              Sign up now for early access{" "}
+              <PiRocketLaunch className={styles.blueIcon} />
+            </span>
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FixWidget;

frontend/src/components/Widget/FixWidget/FixWidget.module.css

@@ -0,0 +1,67 @@
+.widgetContainer {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.widget {
+  width: 50px;
+  height: 50px;
+  background-color: #ffd700;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.widget:hover {
+  transform: scale(1.1);
+}
+
+.icon {
+  color: #000;
+}
+
+.blueIcon {
+  color: #0062ff;
+  vertical-align: middle;
+  font-size: 24px;
+}
+
+.desktopWidget {
+  display: none;
+  background-color: var(--bg-component-yellow);
+  color: #000;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  font-family: poppins;
+  letter-spacing: 0.5px;
+  text-align: center;
+}
+
+.desktopWidget span {
+  color: #0062ff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .widget {
+    display: none;
+  }
+  .desktopWidget {
+    display: block;
+  }
+}
+
+@media (max-width: 767px) {
+  .tooltip {
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

frontend/src/components/Widget/User/User.jsx

@@ -55,7 +55,7 @@ const Widget = React.forwardRef((props, ref) => {
           <p className={styles.profileLocation}>Pune, Maharashtra</p>
         </div>
       </div>
-      <div className={styles.divider}></div>
+      <div className={styles.fullDivider}></div>
       <div className={styles.menuItem} onClick={handleMyAccount}>
         <BiUser className={styles.icon} />
         <span>My Account</span>

frontend/src/components/Widget/User/User.module.css

@@ -49,9 +49,15 @@
   color: gray;
 }
 
+.fullDivider {
+  border-top: 1px solid var(--input-border-color);
+  margin: 10px 0;
+}
+
 .divider {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--input-border-color);
   margin: 10px 0;
+  width: 50%;
 }
 
 .menuItem {

frontend/src/utility/envHelper/envHelper.js

@@ -25,9 +25,9 @@ export const getConfig = () => {
   return {
     endpoint:
       REACT_ENV === "development"
-        ? "http://localhost:8082/api/"
+        ? "http://localhost:8082/api/v1"
         : REACT_ENV === "deployment"
-        ? "https://referralnetworkhub.onrender.com/api/"
+        ? "https://referralnetworkhub.onrender.com/api/v1"
         : "",
   };
 };