style header

ApeWorX · Jan 18, 2024 · 99e1c70 · 99e1c70
1 parent 168a9a8
commit 99e1c70
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="./public/favicon.ico" />
     <title>ApePay</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&family=Tomorrow:wght@300&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/ui/app/src/Header.tsx b/ui/app/src/Header.tsx
@@ -1,13 +1,24 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { Button, ArrowLeftIcon } from "evergreen-ui";
+import { useTheme } from "./ThemeContext";
 
 const Header = () => {
+  const { theme } = useTheme();
   const navigate = useNavigate();
 
   return (
-    <div className="header-button">
-      <button onClick={() => navigate(-1)}> &#8592; Previous</button>
-      <button onClick={() => navigate("/")}>Homepage</button>
+    <div className={`app ${theme}`}>
+      <Button
+        className="theme-header-button"
+        iconBefore={ArrowLeftIcon}
+        onClick={() => navigate(-1)}
+      >
+        Previous
+      </Button>
+      <Button className="theme-header-button" onClick={() => navigate("/")}>
+        Homepage
+      </Button>
     </div>
   );
 };

diff --git a/ui/app/src/StreamManagerPage.tsx b/ui/app/src/StreamManagerPage.tsx
@@ -101,7 +101,12 @@ const StreamManagerPage = () => {
 
         <div className="create-stream-sm-text">
           <Link to={`/${sm}/create`}>
-            <Button appearance="primary" intent="success" height={40}>
+            <Button
+              className="theme-stream-button"
+              appearance="primary"
+              intent="success"
+              height={40}
+            >
               Create a Stream
             </Button>
           </Link>

diff --git a/ui/app/src/sakura.css b/ui/app/src/sakura.css
@@ -1,14 +1,33 @@
 body.sakura {
   background-color: #a2d2ff;
+  font-family: "Kdam Thmor Pro", sans-serif;
 }
 
 .app.sakura {
   color: #333;
   background-color: #a2d2ff;
 }
 
-
 .app.sakura .theme-toggle-button {
   background-color: #ffafcc;
   color: #333;
 }
+
+.app.sakura .theme-header-button {
+  margin: 5px;
+  margin-right: 5px;
+  background-color: #bde0fe;
+}
+
+.app.sakura .theme-header-button:hover {
+  background-color: #ffc8dd;
+}
+
+.app.sakura .theme-stream-button {
+  background-color: #ffafcc;
+  color: #333;
+}
+
+.app.sakura .theme-stream-button:hover {
+  background-color: #ffc8dd;
+}
diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -7,6 +7,10 @@ body {
   width: 100%;
 }
 
+.theme-toggle-button {
+
+}
+
 h1,
 h2 {
   text-align: center;
@@ -64,20 +68,6 @@ a:hover {
   cursor: pointer;
 }
 
-.header-button button {
-  background-color: grey;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  border-radius: 4px;
-  font-weight: bold;
-  transition:
-    background-color 0.3s,
-    box-shadow 0.3s;
-  cursor: pointer;
-}
-
 .button:active {
   background-color: #6200ea;
 }

diff --git a/ui/app/src/tokyoNight.css b/ui/app/src/tokyoNight.css
@@ -1,5 +1,6 @@
 body.tokyoNight {
   background-color: #004687;
+  font-family: "Tomorrow", sans-serif;
 }
 
 .app.tokyoNight {