L1Playpoint · surajgaire14 · Jul 22, 2022 · Jul 22, 2022 · Jul 22, 2022 · Jul 25, 2022
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,23 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Playpoint is an online P2E prediction pool platform based on real time sporting events/ Avalanche network."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- This is the create react app url. change this to not have the variable... -->
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+
+    <!-- ... to be like this. This is the correct url for Vite -->
+    <link rel="icon" href="/favicon.ico" />
+
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <title>Playpoint | Decentralized P2E Prediction Platform</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <!-- Like below. This is the script tag for bootstrapping your Vite application -->
+    <script type="module" src="/src/index.jsx"></script>
   </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "ico-ui",
-  "homepage": ".",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -26,28 +26,14 @@
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "deploy": "yarn build --profile && git push origin main && firebase deploy"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.0",
+    "vite": "^3.0.0"
   }
-}
+}
diff --git a/prepros.config b/prepros.config
@@ -414,6 +414,18 @@
         "sortAttrs": true,
         "removeDimensions": true
       },
+      "tailwindcss": {
+        "rootDir": "",
+        "content": [
+          "**/*.html",
+          "**/*.php",
+          "**/*.js",
+          "!wp-admin",
+          "!wp-includes",
+          "!node_modules",
+          "!Prepros Export"
+        ]
+      },
       "turf": {
         "rootDir": ""
       },
@@ -575,6 +587,10 @@
             "task": "copy",
             "enable": true
           },
+          {
+            "task": "tailwindcss",
+            "enable": false
+          },
           {
             "task": "postcss-import",
             "enable": false
@@ -913,6 +929,16 @@
       }
     },
     "files": [
+      {
+        "file": "src/Components/Footer/styles/style.scss",
+        "config": {
+          "tasks": {
+            "minify-css": {
+              "enable": true
+            }
+          }
+        }
+      },
       {
         "file": "src/Components/Navbar/styles/style.scss",
         "config": {

diff --git a/src/App.jsx b/src/App.jsx
@@ -2,13 +2,35 @@
  * @components Custom main components
  */
 import Home from "./Pages/Home";
+import React from "react";
 
-import 'reactjs-popup/dist/index.css';
+import "reactjs-popup/dist/index.css";
 
 function App() {
+  const [lightMode, setLightMode] = React.useState(false);
+
+  const handleLightMode = () => {
+    setLightMode((prev) => !prev);
+  };
+  console.log(lightMode)
+
+  React.useEffect(() => {
+    lightMode
+      ? (document.body.style.background === "white" &&
+        document.body.style.color === "black")
+      : (document.body.style.background === "black" &&
+        document.body.style.color === "white")
+
+  }, [lightMode]);
+  console.log(document.body.style);
+
   return (
-    <div className="app__container">
-      <Home />
+    <div className={`app__container ${lightMode ? "lightMode" : "darkMode"}`}>
+      <Home
+        lightMode={lightMode}
+        setLightMode={setLightMode}
+        handleLightMode={handleLightMode}
+      />
     </div>
   );
 }

diff --git a/src/Assets/About1 (1).png b/src/Assets/About1 (1).png
diff --git a/src/Assets/aaa.jpg b/src/Assets/aaa.jpg
diff --git a/src/Assets/aakala.jpg b/src/Assets/aakala.jpg
diff --git a/src/Assets/gaire.jpg b/src/Assets/gaire.jpg
diff --git a/src/Assets/jake.jpg b/src/Assets/jake.jpg
diff --git a/src/Assets/lex.jpg b/src/Assets/lex.jpg
diff --git a/src/Assets/neil.jpg b/src/Assets/neil.jpg
diff --git a/src/Components/Footer/index.jsx b/src/Components/Footer/index.jsx
@@ -1,57 +1,67 @@
 import React from "react";
 import "remixicon/fonts/remixicon.css";
+import "./styles/style.css";
 
-export default function Footer() {
+export default function Footer({ lightMode }) {
   return (
-    <div className="footer__container">
-      <div className="update">Website Last Updated: May 17, 2022</div>
-      <ul className="social__links">
-        <li>
+    <div
+      className={`footer__container ${lightMode ? "lightMode" : "darkMode"}`}
+    >
+      <div className={`update ${lightMode ? "lightMode" : "darkMode"}`}>
+        Website Last Updated: May 17, 2022
+      </div>
+      <ul className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
+        <li className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
           <a
             aria-label="GitHub"
             href="https://github.com/L1Playpoint"
             target="_blank"
             rel="noreferrer"
+            className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}
           >
             <i className="ri-github-fill" />
           </a>
         </li>
-        <li>
+        <li className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
           <a
             aria-label="Discord"
             href="https://discord.com/invite/6Uu7pEvGhE"
             target="_blank"
             rel="noreferrer"
+            className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}
           >
             <i className="ri-discord-line" />
           </a>
         </li>
-        <li>
+        <li className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
           <a
             aria-label="Twitter"
             href="https://twitter.com/PlaypointP2E"
             target="_blank"
             rel="noreferrer"
+            className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}
           >
             <i className="ri-twitter-line" />
           </a>
         </li>
-        <li>
+        <li className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
           <a
             aria-label="Medium"
             href="https://blog.playpoint.ai"
             target="_blank"
             rel="noreferrer"
+            className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}
           >
             <i className="ri-medium-line" />
           </a>
         </li>
-        <li>
+        <li className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}>
           <a
             aria-label="Telegram"
             href="https://t.me/+jam5SrIv4OpiOThl"
             target="_blank"
             rel="noreferrer"
+            className={`social__links ${lightMode ? "lightMode" : "darkMode"}`}
           >
             <i className="ri-telegram-line" />
           </a>

diff --git a/src/Components/Footer/styles/style.css b/src/Components/Footer/styles/style.css
diff --git a/src/Components/Footer/styles/style.scss b/src/Components/Footer/styles/style.scss
@@ -0,0 +1,31 @@
+.footer__container {
+    &.lightMode {
+        background: #fff ;
+        color: #000 ;
+    }
+    &.darkMode {
+        // background: #000 ;
+        color: #fff ;
+    }
+    .update {
+        &.lightMode {
+            background: #fff ;
+            color: #000 ;
+        }
+        &.darkMode {
+            background: #000 ;
+            color: #fff ;
+        }
+
+    }
+    .social__links{
+        &.lightMode {
+            background: #fff;
+            color: #000;
+        }
+        &.darkMode {
+            background: #000 ;
+            color: #fff;
+        }
+    }
+}