72 change all fonts on landing page and sign in page to poppins font

immichat-frontend/package.json

@@ -15,7 +15,9 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "bootstrap": "^5.1.3",
+    "express": "^4.18.1",
     "luxon": "^2.4.0",
+    "node": "^17.7.2",
     "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",

immichat-frontend/src/components/App.css

@@ -55,3 +55,38 @@ li {
   padding: 0;
   font-size: 12px;
 }
+.theme-dark {
+  --dark-text: #292929;
+  --light-text: #F9F8F8;  
+  --dark-background: #2F4550;
+  --light-background: #586F7C;
+  --accent: #B8DBD9;
+  --button-border: #B8DBD9;
+}
+.theme-light {
+  --dark-text: #5E4B56;
+  --light-text: #5E4B56;
+  --dark-background: #DBE7E4;
+  --light-background: #EDDCD2;
+  --accent: #DBE7E4;
+  --button-border: #5E4B56;
+}
+html, #root {
+  background-color: var(--dark-background);
+  color: var(--dark-text);
+}
+
+nav {
+  background-color: var(--dark-background);
+  color: var(--light-text);
+}
+
+.main-container {
+  background-color: var(--light-background);
+}
+.dark {
+  background: black;
+}
+.dark h1 {
+  color: white;
+}

immichat-frontend/src/components/App.js

@@ -13,6 +13,7 @@ import CardProfile from "./CardProfile";
 import Notifications from "./Notifications";
 
 function App() {
+
   return (
     <Routes>
       <Route path="/" element={<Mission />} />

immichat-frontend/src/components/Button.js

@@ -0,0 +1,38 @@
+import { useEffect } from "react"
+import { useState } from "react";
+import React from "react"
+import "./App.css";
+
+function Button2 () {
+
+const [darkMode, setDarkMode] = useState(false);
+
+useEffect(() => {
+  const json = localStorage.getItem("site-dark-mode");
+  const currentMode = JSON.parse(json);
+  if (currentMode) {
+    setDarkMode(true);
+  } else {
+    setDarkMode(false);
+  }
+}, []);
+
+useEffect(() => {
+  if (darkMode) {
+    document.body.classList.add("dark");
+  } else {
+    document.body.classList.remove("dark");
+  }
+  const json = JSON.stringify(darkMode);
+  localStorage.setItem("site-dark-mode", json);
+}, [darkMode]);
+
+    return (
+        <div>
+            <h1> Header
+            </h1>
+        <button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</button>
+      </div>
+    )
+}
+export default Button2;

immichat-frontend/src/components/LandingPage.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Luckiest+Guy&family=Montserrat:wght@700&family=Nosifer&family=Oswald:wght@400;600&family=Roboto:wght@100;300&family=Rubik+Glitch&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
 .body {
   margin: 0;
@@ -102,7 +102,7 @@
   width: 100%;
   overflow-wrap: break-word;
   font-size: 50px;
-  font-family: "Nosifer", cursive;
+  font-family: "Poppins";
   padding: 0;
   color: white;
   justify-content: center;
@@ -113,7 +113,7 @@
 .lefttext .textwrap p {
   margin: 0px 20px 0px 20px;
   font-size: 20px;
-  font-family: "Oswald", cursive;
+  font-family: "Poppins";
   padding: 0;
   color: black;
   justify-content: center;
@@ -126,8 +126,8 @@
 }
 
 .message {
-  font-family: "Brush Script MT", cursive;
-  font-size: 45px;
+  font-family: "Poppins";
+  font-size: 35px;
   font-weight: bold;
 }
 
@@ -142,7 +142,7 @@
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid;
-  font-family: "Bradley Hand", cursive;
+  font-family: "Poppins";
   font-weight: bold;
   font-size: 40px;
 }

immichat-frontend/src/components/LandingPage.js

@@ -2,6 +2,7 @@ import "./LandingPage.css";
 import { Navigate, Link } from "react-router-dom";
 import AuthenticationContext from "../context/AuthenticationContext";
 import React from "react";
+import Button2 from "./Button";
 
 export default function Mission() {
   const { user } = React.useContext(AuthenticationContext);
@@ -63,6 +64,7 @@ export default function Mission() {
               </div>
             </div>
           </nav>
+
           <div className="lefttext">
             <div className="textwrap">
               <h1>Welcome to Immichat!</h1>
@@ -78,7 +80,7 @@ export default function Mission() {
                 </label>
               </div>
               <span className="message">
-                Click on heart to show your support!
+                Click on the heart to show your support!
               </span>
             </div>
           </div>

immichat-frontend/src/components/Nav.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Luckiest+Guy&family=Montserrat:wght@700&family=Nosifer&family=Oswald:wght@400;600&family=Roboto:wght@100;300&family=Rubik+Glitch&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
 .body1
 {
@@ -36,7 +36,7 @@
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid;
-  font-family: 'Bradley Hand', cursive;
+  font-family: "Poppins";
   font-weight: bold;
   font-size: 40px;
 }

immichat-frontend/src/components/formStuff.js

@@ -3,7 +3,6 @@ import styled, { keyframes } from "styled-components";
 import AuthenticationContext from "../context/AuthenticationContext";
 import { useNavigate, Navigate, Link } from "react-router-dom";
 import "./Nav.css";
-
 import { setToken } from "../utils/http";
 import LanguageChange from "./translate";
 
@@ -82,7 +81,7 @@ const Form = styled.form`
   justify-content: center;
   height: 100%;
   padding: 0 4rem;
-  font-family: "Courier New", monospace;
+  font-family: "Poppins"
   /* z-index: 100; */
 `;
 
@@ -165,7 +164,7 @@ const Text = styled.div`
   flex-direction: column;
   letter-spacing: 0.2rem;
   color: #000;
-  font-family: "Brush Script MT", cursive;
+  font-family: "Poppins";
   .attention {
     font-size: 2.5rem;
     position: relative;

immichat-frontend/src/index.js

@@ -7,6 +7,8 @@ import { BrowserRouter } from "react-router-dom";
 import FeedContextProvider from "./context/FeedContextProvider";
 import UsersContextProvider from "./context/UsersContextProvider";
 
+
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>