Changing API PATH/FIX error fetching/switch fetch to eaxious/change t…

…heme color
nuuxcode · Dec 13, 2023 · a796a42 · a796a42
1 parent bf63432
commit a796a42
Show file tree

Hide file tree

Showing 39 changed files with 182 additions and 129 deletions.
diff --git a/admin/.env.example b/admin/.env.example
@@ -1,5 +1,5 @@
 # DEV
-REACT_APP_API_URL=http://localhost:3300/api
+REACT_APP_API_URL=http://dev.bikehub.me/api/v1/
 
 # PROD
-# REACT_APP_API_URL=http://dev.bikehub.me/api
+# REACT_APP_API_URL=http://dev.bikehub.me/api/v1
diff --git a/admin/package.json b/admin/package.json
@@ -37,7 +37,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

diff --git a/admin/public/index.html b/admin/public/index.html
@@ -1,10 +1,10 @@
 <!--
-  _   _  ___  ____  ___ ________  _   _     _   _ ___   
- | | | |/ _ \|  _ \|_ _|__  / _ \| \ | |   | | | |_ _| 
- | |_| | | | | |_) || |  / / | | |  \| |   | | | || | 
+  _   _  ___  ____  ___ ________  _   _     _   _ ___
+ | | | |/ _ \|  _ \|_ _|__  / _ \| \ | |   | | | |_ _|
+ | |_| | | | | |_) || |  / / | | |  \| |   | | | || |
  |  _  | |_| |  _ < | | / /| |_| | |\  |   | |_| || |
  |_| |_|\___/|_| \_\___/____\___/|_| \_|    \___/|___|
-                                                                                                                                                                                                                                                                                                                                       
+
 =========================================================
 * Horizon UI Tailwind React - v1.0.0
 =========================================================
@@ -24,25 +24,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <link rel="icon" href="%PUBLIC_URL%/logoIcon.png"/>
     <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="manifest" href="%PUBLIC_URL%/manifest.json"/> 
-    <title>Horizon UI - Tailwind React</title>
+  />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
+    <title>BikeHub Admin</title>
   </head>
   <body class="font-dm bg-lightPrimary" >
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div> 
+    <div id="root"></div>
   </body>
 </html>
 
  <!--
               ___
-          .__(  .)< 
+          .__(  .)<
            \_____)
-       ~~~~~~~~~~~~~~~~    
+       ~~~~~~~~~~~~~~~~
 -->
diff --git a/admin/public/logoIcon.png b/admin/public/logoIcon.png
diff --git a/admin/public/manifest.json b/admin/public/manifest.json
@@ -1,9 +1,9 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "BikeHub",
+  "name": "BikeHub",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "logoIcon.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

diff --git a/admin/src/assets/css/MiniCalendar.css b/admin/src/assets/css/MiniCalendar.css
@@ -24,14 +24,14 @@ abbr[title] {
 	text-decoration: unset !important;
 }
 .react-calendar__navigation__prev-button {
-	background-color: #4318ff !important;
+	background-color: #38b2ac !important;
 	border-radius: 10px;
 	min-width: 34px !important;
 	height: 34px !important;
 	color: white;
 }
 .react-calendar__navigation__next-button {
-	background-color: #4318ff !important;
+	background-color: #38b2ac !important;
 	border-radius: 10px;
 	min-width: 34px !important;
 	width: 34px !important;
@@ -73,29 +73,29 @@ abbr[title] {
 .react-calendar__tile--active,
 .react-calendar__tile--active:enabled:hover,
 .react-calendar__tile--active:enabled:focus {
-	background: #4318ff;
+	background: #38b2ac;
 	border-radius: 10px;
 	color: white;
 }
 .react-calendar__tile--range,
 .react-calendar__tile--range:enabled:hover,
 .react-calendar__tile--range:enabled:focus {
 	background: #f4f7fe;
-	color: #4318ff;
+	color: #38b2ac;
 	border-radius: 0px;
 }
 .react-calendar__tile--rangeStart,
 .react-calendar__tile--rangeStart:enabled:hover,
 .react-calendar__tile--rangeStart:enabled:focus {
-	background: #4318ff;
+	background: #38b2ac;
 	border-top-left-radius: 10px;
 	border-bottom-left-radius: 10px;
 	color: white;
 }
 .react-calendar__tile--rangeEnd,
 .react-calendar__tile--rangeEnd:enabled:hover,
 .react-calendar__tile--rangeEnd:enabled:focus {
-	background: #4318ff;
+	background: #38b2ac;
 	border-top-right-radius: 10px;
 	border-bottom-right-radius: 10px;
 	color: white;
@@ -107,10 +107,10 @@ body.dark .react-calendar {
 	border-radius: 30px;
 }
 body.dark .react-calendar__navigation__prev-button {
-	background-color: #7551ff !important;
+	background-color: #86e7e2 !important;
 }
 body.dark .react-calendar__navigation__next-button {
-	background-color: #7551ff !important;
+	background-color: #86e7e2 !important;
 	color: white;
 }
 body.dark .react-calendar__tile {
@@ -134,24 +134,24 @@ body.dark .react-calendar__month-view__days__day--neighboringMonth {
 body.dark .react-calendar__tile--active,
 body.dark .react-calendar__tile--active:enabled:hover,
 body.dark .react-calendar__tile--active:enabled:focus {
-	background: #7551ff;
+	background: #86e7e2;
 	color: white;
 }
 body.dark .react-calendar__tile--range,
 body.dark .react-calendar__tile--range:enabled:hover,
 body.dark .react-calendar__tile--range:enabled:focus {
 	background: rgba(255, 255, 255, 0.1);
-	color: #7551ff;
+	color: #86e7e2;
 }
 body.dark .react-calendar__tile--rangeStart,
 body.dark .react-calendar__tile--rangeStart:enabled:hover,
 body.dark .react-calendar__tile--rangeStart:enabled:focus {
-	background: #7551ff;
+	background: #86e7e2;
 	color: white;
 }
 body.dark .react-calendar__tile--rangeEnd,
 body.dark .react-calendar__tile--rangeEnd:enabled:hover,
 body.dark .react-calendar__tile--rangeEnd:enabled:focus {
-	background: #7551ff;
+	background: #86e7e2;
 	color: white;
-}
+}
diff --git a/admin/src/components/card/CardMenu.tsx b/admin/src/components/card/CardMenu.tsx
@@ -17,7 +17,7 @@ function CardMenu(props: { transparent?: boolean }) {
           className={`flex items-center text-xl hover:cursor-pointer ${
             transparent
               ? "bg-none text-white hover:bg-none active:bg-none"
-              : "bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10"
+              : "bg-lightPrimary p-2 text-teal-600 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10"
           } linear justify-center rounded-lg font-bold transition duration-200`}
         >
           <BsThreeDots className="h-6 w-6" />

diff --git a/admin/src/components/card/NftCard.tsx b/admin/src/components/card/NftCard.tsx
@@ -26,13 +26,13 @@ const NftCard = (props: {
           />
           <button
             onClick={() => setHeart(!heart)}
-            className="absolute right-3 top-3 flex items-center justify-center rounded-md bg-white p-2 text-brand-500 hover:cursor-pointer"
+            className="absolute right-3 top-3 flex items-center justify-center rounded-md bg-white p-2 text-teal-600 hover:cursor-pointer"
           >
             <div className="flex h-full w-full items-center justify-center rounded-md text-xl hover:bg-gray-50 dark:text-navy-900">
               {heart ? (
                 <IoHeartOutline />
               ) : (
-                <IoHeart className="text-brand-500" />
+                <IoHeart className="text-teal-600" />
               )}
             </div>
           </button>
@@ -70,11 +70,11 @@ const NftCard = (props: {
 
         <div className="flex items-center justify-between md:flex-col md:items-start lg:flex-row lg:justify-between xl:flex-col 2xl:items-start 3xl:flex-row 3xl:items-center 3xl:justify-between">
           <div className="flex">
-            <p className="mb-2 text-sm font-bold text-brand-500 dark:text-white">
+            <p className="mb-2 text-sm font-bold text-teal-600 dark:text-white">
               Current Bid: {price} <span>ETH</span>
             </p>
           </div>
-          <button className="linear rounded-md bg-brand-900 px-4 py-2 text-base font-medium text-white transition duration-200 hover:bg-brand-800 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:opacity-90">
+          <button className="linear rounded-md bg-teal-900 px-4 py-2 text-base font-medium text-white transition duration-200 hover:bg-teal-800 active:bg-teal-700 dark:bg-teal-400 dark:hover:bg-teal-300 dark:active:opacity-90">
             Place Bid
           </button>
         </div>

diff --git a/admin/src/components/checkbox/index.tsx b/admin/src/components/checkbox/index.tsx
@@ -21,7 +21,7 @@ const Checkbox = (props: {
   return (
     <input
       type="checkbox"
-      className={`defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
+      className={`defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
       justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
       checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 ${
         color === "red"
@@ -39,7 +39,7 @@ const Checkbox = (props: {
           : color === "navy"
           ? "checked:border-none checked:bg-navy-500 dark:checked:bg-navy-400"
           : color === "lime"
-          ? "checked:border-none checked:bg-lime-500 dark:checked:bg-lime-400"
+          ? "checked:border-none checked:bg-teal-600 dark:checked:bg-teal-400"
           : color === "cyan"
           ? "checked:border-none checked:bg-cyan-500 dark:checked:bg-cyan-400"
           : color === "pink"
@@ -52,7 +52,7 @@ const Checkbox = (props: {
           ? "checked:border-none checked:bg-indigo-500 dark:checked:bg-indigo-400"
           : color === "gray"
           ? "checked:border-none checked:bg-gray-500 dark:checked:bg-gray-400"
-          : "checked:bg-brand-500 dark:checked:bg-brand-400"
+          : "checked:bg-teal-600 dark:checked:bg-teal-400"
       } ${extra}`}
       name="weekly"
       {...rest}

diff --git a/admin/src/components/navbar/RTL.tsx b/admin/src/components/navbar/RTL.tsx
@@ -88,7 +88,7 @@ const Navbar = (props: {
               </div>
 
               <button className="flex w-full items-center">
-                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-brand-500 py-4 text-2xl text-white">
+                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-teal-600 py-4 text-2xl text-white">
                   <BsArrowBarUp />
                 </div>
                 <div className="flex h-full w-full flex-col justify-center rounded-lg px-1 text-sm ms-2">
@@ -102,7 +102,7 @@ const Navbar = (props: {
               </button>
 
               <button className="flex w-full items-center">
-                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-brand-500 py-4 text-2xl text-white">
+                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-teal-600 py-4 text-2xl text-white">
                   <BsArrowBarUp />
                 </div>
                 <div className="flex h-full w-full flex-col justify-center rounded-lg px-1 text-sm ms-2">
@@ -138,7 +138,7 @@ const Navbar = (props: {
               <a
                 target="blank"
                 href="https://horizon-ui.com/pro?ref=live-free-tailwind-react"
-                className="px-full linear flex cursor-pointer items-center justify-center rounded-xl bg-brand-500 py-[11px] font-bold text-white transition duration-200 hover:bg-brand-600 hover:text-white active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200"
+                className="px-full linear flex cursor-pointer items-center justify-center rounded-xl bg-teal-600 py-[11px] font-bold text-white transition duration-200 hover:bg-teal-600 hover:text-white active:bg-teal-700 dark:bg-teal-400 dark:hover:bg-teal-300 dark:active:bg-teal-200"
               >
                 Buy Horizon UI PRO
               </a>

diff --git a/admin/src/components/navbar/index.tsx b/admin/src/components/navbar/index.tsx
@@ -94,7 +94,7 @@ const Navbar = (props: {
               </div>
 
               {/* <button className="flex w-full items-center">
-                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-brand-500 py-4 text-2xl text-white">
+                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-teal-600 py-4 text-2xl text-white">
                   <BsArrowBarUp />
                 </div>
                 <div className="ml-2 flex h-full w-full flex-col justify-center rounded-lg px-1 text-sm">
@@ -108,7 +108,7 @@ const Navbar = (props: {
               </button>
 
               <button className="flex w-full items-center">
-                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-brand-500 py-4 text-2xl text-white">
+                <div className="flex h-full w-[85px] items-center justify-center rounded-xl bg-gradient-to-b from-brandLinear to-teal-600 py-4 text-2xl text-white">
                   <BsArrowBarUp />
                 </div>
                 <div className="ml-2 flex h-full w-full flex-col justify-center rounded-lg px-1 text-sm">
@@ -144,7 +144,7 @@ const Navbar = (props: {
           //     <a
           //       target="blank"
           //       href="https://horizon-ui.com/pro?ref=live-free-tailwind-react"
-          //       className="px-full linear flex cursor-pointer items-center justify-center rounded-xl bg-brand-500 py-[11px] font-bold text-white transition duration-200 hover:bg-brand-600 hover:text-white active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200"
+          //       className="px-full linear flex cursor-pointer items-center justify-center rounded-xl bg-teal-600 py-[11px] font-bold text-white transition duration-200 hover:bg-teal-600 hover:text-white active:bg-teal-700 dark:bg-teal-400 dark:hover:bg-teal-300 dark:active:bg-teal-200"
           //     >
           //       Buy Horizon UI PRO
           //     </a>

diff --git a/admin/src/components/progress/index.tsx b/admin/src/components/progress/index.tsx
@@ -41,7 +41,7 @@ const Progress = (props: {
             : color === "navy"
             ? "bg-navy-500 dark:bg-navy-400"
             : color === "lime"
-            ? "bg-lime-500 dark:bg-lime-400"
+            ? "bg-teal-600 dark:bg-teal-400"
             : color === "cyan"
             ? "bg-cyan-500 dark:bg-cyan-400"
             : color === "pink"
@@ -54,7 +54,7 @@ const Progress = (props: {
             ? "bg-indigo-500 dark:bg-indigo-400"
             : color === "gray"
             ? "bg-gray-500 dark:bg-gray-400"
-            : "bg-brand-500 dark:bg-brand-400"
+            : "bg-teal-600 dark:bg-teal-400"
         }`}
         style={{ width: `${value}%` }}
       />

diff --git a/admin/src/components/radio/index.tsx b/admin/src/components/radio/index.tsx
@@ -43,7 +43,7 @@ const Radio = (props: {
            : color === "navy"
            ? "checked:!border-navy-500 checked:before:!bg-navy-500 dark:checked:!border-navy-400 dark:checked:before:!bg-navy-400"
            : color === "lime"
-           ? "checked:!border-lime-500 checked:before:!bg-lime-500 dark:checked:!border-lime-400 dark:checked:before:!bg-lime-400"
+           ? "checked:!border-teal-600 checked:before:!bg-teal-600 dark:checked:!border-teal-400 dark:checked:before:!bg-teal-400"
            : color === "cyan"
            ? "checked:!border-cyan-500 checked:before:!bg-cyan-500 dark:checked:!border-cyan-400 dark:checked:before:!bg-cyan-400"
            : color === "pink"
@@ -56,7 +56,7 @@ const Radio = (props: {
            ? "checked:!border-indigo-500 checked:before:!bg-indigo-500 dark:checked:!border-indigo-400 dark:checked:before:!bg-indigo-400"
            : color === "gray"
            ? "checked:!border-gray-500 checked:before:!bg-gray-500 dark:checked:!border-gray-400 dark:checked:before:!bg-gray-400"
-           : "checked:!border-brand-500 checked:before:!bg-brand-500 dark:checked:!border-brand-400 dark:checked:before:!bg-brand-400"
+           : "checked:!border-teal-600 checked:before:!bg-teal-600 dark:checked:!border-teal-400 dark:checked:before:!bg-teal-400"
        } `}
       {...rest}
     />

diff --git a/admin/src/components/sidebar/components/Links.tsx b/admin/src/components/sidebar/components/Links.tsx
@@ -32,7 +32,7 @@ export const SidebarLinks = (props: { routes: RoutesType[] }): JSX.Element => {
                 <span
                   className={`${
                     activeRoute(route.path) === true
-                      ? "font-bold text-brand-500 dark:text-white"
+                      ? "font-bold text-teal-600 dark:text-white"
                       : "font-medium text-gray-600"
                   }`}
                 >
@@ -49,7 +49,7 @@ export const SidebarLinks = (props: { routes: RoutesType[] }): JSX.Element => {
                 </p>
               </li>
               {activeRoute(route.path) ? (
-                <div className="absolute right-0 top-px h-9 w-1 rounded-lg bg-brand-500 dark:bg-brand-400" />
+                <div className="absolute right-0 top-px h-9 w-1 rounded-lg bg-teal-600 dark:bg-teal-400" />
               ) : null}
             </div>
           </Link>

diff --git a/admin/src/components/sidebar/components/SidebarCard.tsx b/admin/src/components/sidebar/components/SidebarCard.tsx
@@ -1,7 +1,7 @@
 const FreeCard = () => {
   return (
-    <div className="relative mt-14 flex w-[256px] justify-center rounded-[20px] bg-gradient-to-br from-[#868CFF] via-[#432CF3] to-brand-500 pb-4">
-      <div className="absolute -top-12 flex h-24 w-24 items-center justify-center rounded-full border-[4px] border-white bg-gradient-to-b from-[#868CFF] to-brand-500 dark:!border-navy-800">
+    <div className="relative mt-14 flex w-[256px] justify-center rounded-[20px] bg-gradient-to-br from-[#868CFF] via-[#432CF3] to-teal-600 pb-4">
+      <div className="absolute -top-12 flex h-24 w-24 items-center justify-center rounded-full border-[4px] border-white bg-gradient-to-b from-[#868CFF] to-teal-600 dark:!border-navy-800">
         <svg
           width="41"
           height="41"

diff --git a/admin/src/components/sidebar/componentsrtl/Links.tsx b/admin/src/components/sidebar/componentsrtl/Links.tsx
@@ -32,7 +32,7 @@ export function SidebarLinks(props: { routes: RoutesType[] }) {
                 <span
                   className={`${
                     activeRoute(route.path) === true
-                      ? "font-bold text-brand-500 dark:text-white"
+                      ? "font-bold text-teal-600 dark:text-white"
                       : "font-medium text-gray-600"
                   }`}
                 >
@@ -49,7 +49,7 @@ export function SidebarLinks(props: { routes: RoutesType[] }) {
                 </p>
               </li>
               {activeRoute(route.path) ? (
-                <div className="absolute top-px h-9 w-1 rounded-lg bg-brand-500 end-0 dark:bg-brand-400" />
+                <div className="absolute top-px h-9 w-1 rounded-lg bg-teal-600 end-0 dark:bg-teal-400" />
               ) : null}
             </div>
           </Link>

diff --git a/admin/src/components/sidebar/componentsrtl/SidebarCard.tsx b/admin/src/components/sidebar/componentsrtl/SidebarCard.tsx
@@ -1,7 +1,7 @@
 const FreeCard = () => {
   return (
-    <div className="relative mt-14 flex w-[256px] justify-center rounded-[20px] bg-gradient-to-br from-[#868CFF] via-[#432CF3] to-brand-500 pb-4">
-      <div className="absolute -top-12 flex h-24 w-24 items-center justify-center rounded-full border-[4px] border-white bg-gradient-to-b from-[#868CFF] to-brand-500 dark:!border-navy-800">
+    <div className="relative mt-14 flex w-[256px] justify-center rounded-[20px] bg-gradient-to-br from-[#868CFF] via-[#432CF3] to-teal-600 pb-4">
+      <div className="absolute -top-12 flex h-24 w-24 items-center justify-center rounded-full border-[4px] border-white bg-gradient-to-b from-[#868CFF] to-teal-600 dark:!border-navy-800">
         <svg
           width="41"
           height="41"