maybe it starts!?

ForLoopCodes · May 5, 2024 · 7338be7 · 7338be7
1 parent 10c044d
commit 7338be7
Show file tree

Hide file tree

Showing 7 changed files with 5,070 additions and 16,345 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,22 @@
 # Water
+
 #### 🌊 So that you can flow like water!
+
 #
+
 ---
 
 `- ` **👋 Heya!**
 
-> **We're excited to have you as an early tester in the Water Beta.**
-> **Welcome to the official server for support and access to water's beta version!**
+> **We're excited to have you as an early tester in the Water Beta.\***
 
 ---
 
 `- ` 🤷 **What is water?**
 
 > Water is a note-making application created with react.js and based on markdown, minimal, easy to use, simple, fast, eye-catching UI, which is fully customizable. The next generation of notes, and everything you expect from a notes-taking app!
 
-> Star the repository on GitHub: 
+> Star the repository on GitHub:
 > [ForLoopCodes/Water](https://github.com/ForLoopCodes/Water)
 
 ---
@@ -44,6 +46,7 @@
 > **This app was made with ❤️ by ForLoop.**
 
 ### Used Libraries:
+
 - React.js
 - ReactMarkDown
 - RehypeRAW

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,26 +2,23 @@
   "name": "water",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://forloopcodes.github.io/water/app",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-markdown": "^8.0.3",
+    "axios": "^1.6.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "react-scripts": "5.0.1",
-    "rehype-raw": "^6.1.1",
+    "rehype-raw": "^7.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "GENERATE_SOURCEMAP=false react-scripts start",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "test": "GENERATE_SOURCEMAP=false react-scripts test",
+    "eject": "GENERATE_SOURCEMAP=false react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -40,9 +37,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "gh-pages": "^4.0.0",
-    "react-router-dom": "^6.4.2"
   }
 }
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -45,22 +45,93 @@ export default function Main() {
         rightbar: "",
       },
     ],
-    theme: {
-      "--main-theme-color": "#80b5cf",
-      "--main-theme-color-transparent": "#80b5cf33",
-      "--main-font-color": "#fcfcfe",
-      "--main-font-color-transparent": "#fcfcfe44",
-      "--main-bgcolor-fainted": "#111122",
-      "--main-bgcolor": "#000000",
-      "--main-bgcolor-shade-3": "#000000",
-      "--main-bgcolor-fainted-light": "#383548aa",
-      "--blur-color": "#000000aa",
-      "--main-homepage-background-image": "url('')",
-    },
   };
+
+  const themes = [
+    {
+      name: "Default Light",
+      css: {
+        "--main-theme-color": "#2685e9cc",
+        "--main-theme-color-transparent": "#2685e911",
+        "--main-font-color": "#1c1b28",
+        "--main-font-color-transparent": "#1c1b2844",
+        "--main-bgcolor-fainted": "#f9f9fb",
+        "--main-bgcolor": "#e3e2ec",
+        "--main-bgcolor-shade-3": "#ececf3",
+        "--main-bgcolor-fainted-light": "#a09fab22",
+        "--blur-color": "#ffffff77",
+        "--main-homepage-background-image": "url('')",
+      },
+    },
+    {
+      name: "Default Dark",
+      css: {
+        "--main-theme-color": "#8d80cf",
+        "--main-theme-color-transparent": "#8d80cf33",
+        "--main-font-color": "#fcfcfe",
+        "--main-font-color-transparent": "#fcfcfe44",
+        "--main-bgcolor-fainted": "#383548",
+        "--main-bgcolor": "#181623",
+        "--main-bgcolor-shade-3": "#232031",
+        "--main-bgcolor-fainted-light": "#383548aa",
+        "--blur-color": "#000000aa",
+        "--main-homepage-background-image": "url('')",
+      },
+    },
+    {
+      name: "Light Greyscale",
+      css: {
+        "--main-theme-color": "#00000088",
+        "--main-theme-color-transparent": "#00000000",
+        "--main-font-color": "#000000bb",
+        "--main-font-color-transparent": "#00000044",
+        "--main-bgcolor-fainted": "#00000005",
+        "--main-bgcolor": "#ffffff",
+        "--main-bgcolor-shade-3": "#00000009",
+        "--main-bgcolor-fainted-light": "#ffffffaa",
+        "--blur-color": "#ffffffaa",
+        "--main-homepage-background-image": "url('')",
+      },
+    },
+    {
+      name: "Dark Greyscale",
+      css: {
+        "--main-theme-color": "#d7d7d7",
+        "--main-theme-color-transparent": "#d7d7d711",
+        "--main-font-color": "#ffffff",
+        "--main-font-color-transparent": "#ffffff44",
+        "--main-bgcolor-fainted": "#2c2f33",
+        "--main-bgcolor": "#36393f",
+        "--main-bgcolor-shade-3": "#2f3136",
+        "--main-bgcolor-fainted-light": "#2c2f33aa",
+        "--blur-color": "#000000aa",
+        "--main-homepage-background-image": "url('')",
+      },
+    },
+    {
+      name: "AMOLED Black",
+      css: {
+        "--main-theme-color": "#80b5cf",
+        "--main-theme-color-transparent": "#80b5cf33",
+        "--main-font-color": "#fcfcfe",
+        "--main-font-color-transparent": "#fcfcfe44",
+        "--main-bgcolor-fainted": "#111122",
+        "--main-bgcolor": "#000000",
+        "--main-bgcolor-shade-3": "#000000",
+        "--main-bgcolor-fainted-light": "#383548aa",
+        "--blur-color": "#000000aa",
+        "--main-homepage-background-image": "url('')",
+      },
+    },
+  ];
   const notes = user.notes;
   // also update with backend the css variables
-  const [cssVariables, setCssVariables] = useState(user.theme);
+  if (!localStorage.getItem("cssVariables")) {
+    localStorage.setItem("cssVariables", JSON.stringify(themes[0].css));
+  }
+  const [cssVariables, setCssVariables] = useState(
+    JSON.parse(localStorage.getItem("cssVariables"))
+  );
 
   const setCssVariablesFunction = (cssVar) => {
     for (const [key, value] of Object.entries(cssVar)) {
@@ -93,6 +164,7 @@ export default function Main() {
         setCssVariablesFunction={setCssVariablesFunction}
         setCssVariables={setCssVariables}
         cssVariables={cssVariables}
+        themes={themes}
       />
     </div>
   );

diff --git a/src/components/MainBody.jsx b/src/components/MainBody.jsx
@@ -31,6 +31,7 @@ export default function MainBody(props) {
           cssVariables={props.cssVariables}
           setCssVariables={props.setCssVariables}
           setCssVariablesFunction={props.setCssVariablesFunction}
+          themes={props.themes}
         />
       ) : path === "new" ? (
         <NewNote />

diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
@@ -14,157 +14,20 @@ export default function Settings(props) {
       <hr />
       <h3>Customization.</h3>
       <blockquote>
-        <button
-          onClick={() => {
-            props.setCssVariablesFunction({
-              "--main-theme-color": "#2685e9cc",
-              "--main-theme-color-transparent": "#2685e911",
-              "--main-font-color": "#1c1b28",
-              "--main-font-color-transparent": "#1c1b2844",
-              "--main-bgcolor-fainted": "#f9f9fb",
-              "--main-bgcolor": "#e3e2ec",
-              "--main-bgcolor-shade-3": "#ececf3",
-              "--main-bgcolor-fainted-light": "#a09fab22",
-              "--blur-color": "#ffffff77",
-              "--main-homepage-background-image": "url('')",
-            });
-            props.setCssVariables({
-              "--main-theme-color": "#2685e9cc",
-              "--main-theme-color-transparent": "#2685e911",
-              "--main-font-color": "#1c1b28",
-              "--main-font-color-transparent": "#1c1b2844",
-              "--main-bgcolor-fainted": "#f9f9fb",
-              "--main-bgcolor": "#e3e2ec",
-              "--main-bgcolor-shade-3": "#ececf3",
-              "--main-bgcolor-fainted-light": "#a09fab22",
-              "--blur-color": "#ffffff77",
-              "--main-homepage-background-image": "url('')",
-            });
-          }}
-        >
-          Default Light.
-        </button>
-        <button
-          onClick={() => {
-            props.setCssVariablesFunction({
-              "--main-theme-color": "#8d80cf",
-              "--main-theme-color-transparent": "#8d80cf33",
-              "--main-font-color": "#fcfcfe",
-              "--main-font-color-transparent": "#fcfcfe44",
-              "--main-bgcolor-fainted": "#383548",
-              "--main-bgcolor": "#181623",
-              "--main-bgcolor-shade-3": "#232031",
-              "--main-bgcolor-fainted-light": "#383548aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-            props.setCssVariables({
-              "--main-theme-color": "#8d80cf",
-              "--main-theme-color-transparent": "#8d80cf33",
-              "--main-font-color": "#fcfcfe",
-              "--main-font-color-transparent": "#fcfcfe44",
-              "--main-bgcolor-fainted": "#383548",
-              "--main-bgcolor": "#181623",
-              "--main-bgcolor-shade-3": "#232031",
-              "--main-bgcolor-fainted-light": "#383548aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-          }}
-        >
-          Default Dark.
-        </button>
-        <button
-          onClick={() => {
-            props.setCssVariablesFunction({
-              "--main-theme-color": "#00000088",
-              "--main-theme-color-transparent": "#00000000",
-              "--main-font-color": "#000000bb",
-              "--main-font-color-transparent": "#00000044",
-              "--main-bgcolor-fainted": "#00000005",
-              "--main-bgcolor": "#ffffff",
-              "--main-bgcolor-shade-3": "#00000009",
-              "--main-bgcolor-fainted-light": "#ffffffaa",
-              "--blur-color": "#ffffffaa",
-              "--main-homepage-background-image": "url('')",
-            });
-            props.setCssVariables({
-              "--main-theme-color": "#00000088",
-              "--main-theme-color-transparent": "#00000000",
-              "--main-font-color": "#000000bb",
-              "--main-font-color-transparent": "#00000044",
-              "--main-bgcolor-fainted": "#00000005",
-              "--main-bgcolor": "#ffffff",
-              "--main-bgcolor-shade-3": "#00000009",
-              "--main-bgcolor-fainted-light": "#ffffffaa",
-              "--blur-color": "#ffffffaa",
-              "--main-homepage-background-image": "url('')",
-            });
-          }}
-        >
-          Light Greyscale.
-        </button>
-        <button
-          onClick={() => {
-            props.setCssVariablesFunction({
-              "--main-theme-color": "#d7d7d7",
-              "--main-theme-color-transparent": "#d7d7d711",
-              "--main-font-color": "#ffffff",
-              "--main-font-color-transparent": "#ffffff44",
-              "--main-bgcolor-fainted": "#2c2f33",
-              "--main-bgcolor": "#36393f",
-              "--main-bgcolor-shade-3": "#2f3136",
-              "--main-bgcolor-fainted-light": "#2c2f33aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-            props.setCssVariables({
-              "--main-theme-color": "#d7d7d7",
-              "--main-theme-color-transparent": "#d7d7d711",
-              "--main-font-color": "#ffffff",
-              "--main-font-color-transparent": "#ffffff44",
-              "--main-bgcolor-fainted": "#2c2f33",
-              "--main-bgcolor": "#36393f",
-              "--main-bgcolor-shade-3": "#2f3136",
-              "--main-bgcolor-fainted-light": "#2c2f33aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-          }}
-        >
-          Dark Greyscale.
-        </button>
-
-        <button
-          onClick={() => {
-            props.setCssVariablesFunction({
-              "--main-theme-color": "#80b5cf",
-              "--main-theme-color-transparent": "#80b5cf33",
-              "--main-font-color": "#fcfcfe",
-              "--main-font-color-transparent": "#fcfcfe44",
-              "--main-bgcolor-fainted": "#111122",
-              "--main-bgcolor": "#000000",
-              "--main-bgcolor-shade-3": "#000000",
-              "--main-bgcolor-fainted-light": "#383548aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-            props.setCssVariables({
-              "--main-theme-color": "#80b5cf",
-              "--main-theme-color-transparent": "#80b5cf33",
-              "--main-font-color": "#fcfcfe",
-              "--main-font-color-transparent": "#fcfcfe44",
-              "--main-bgcolor-fainted": "#111122",
-              "--main-bgcolor": "#000000",
-              "--main-bgcolor-shade-3": "#000000",
-              "--main-bgcolor-fainted-light": "#383548aa",
-              "--blur-color": "#000000aa",
-              "--main-homepage-background-image": "url('')",
-            });
-          }}
-        >
-          AMOLED Black.
-        </button>
+        {props.themes.map((theme) => (
+          <button
+            key={theme.name}
+            style={{
+              margin: "5px",
+            }}
+            onClick={() => {
+              props.setCssVariablesFunction(theme.css);
+              localStorage.setItem("cssVariables", JSON.stringify(theme.css));
+            }}
+          >
+            {theme.name}.
+          </button>
+        ))}
       </blockquote>
     </div>
   );

diff --git a/src/components/ViewNote.jsx b/src/components/ViewNote.jsx
@@ -16,7 +16,6 @@ export default function ViewNote(props) {
   const [quote, setQuote] = React.useState("");
   const [joke, setJoke] = React.useState("");
   const [didYouKnow, setDidYouKnow] = React.useState("");
-
   useEffect(() => {
     axios.get("https://api.quotable.io/random?tags=wisdom").then((res) => {
       setQuote(res.data.content);
@@ -73,7 +72,6 @@ export default function ViewNote(props) {
   ) {
     loader();
   }
-
   // return the jsx
   return (
     <div className="write">