tokyonight pages

ApeWorX · Jan 19, 2024 · 52030e7 · 52030e7
1 parent 152bfcc
commit 52030e7
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 24 deletions.
diff --git a/ui/app/src/CreatorPage.tsx b/ui/app/src/CreatorPage.tsx
@@ -110,8 +110,8 @@ const CreatorPage = () => {
                       <StreamStatus
                         stream={stream}
                         chartType={"bar"}
-                        background="#6200ea"
-                        color="black"
+                        background="#00FFD2"
+                        color="#ff4499"
                       />
                     </div>
                   </Link>

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

diff --git a/ui/app/src/StreamPage.tsx b/ui/app/src/StreamPage.tsx
@@ -18,9 +18,11 @@ import {
 } from "wagmi";
 import { useParams } from "react-router-dom";
 import Header from "./Header";
+import { useTheme } from "./ThemeContext";
 
 const StreamPage = () => {
   const { sm, creator, streamId } = useParams();
+  const { theme } = useTheme();
 
   const [chartType, setChartType] = useState<"bar" | "pie">("bar");
 
@@ -112,7 +114,7 @@ const StreamPage = () => {
   }, [stream]);
 
   return (
-    <>
+    <div className={`app ${theme}`}>
       <div className="header">
         <Header />
         <ConnectButton />
@@ -127,31 +129,31 @@ const StreamPage = () => {
             {/* Stream Data */}
             <div className="stream-data-box">
               <p>
-                <strong>Stream Manager: </strong>
+                <strong className="stream-data-subtitle">Stream Manager: </strong>
                 {sm}
               </p>
               <p>
-                <strong>Token: </strong>
+                <strong className="stream-data-subtitle">Token: </strong>
                 {streamInfo.token ? String(streamInfo.token) : "fetching..."}
               </p>
               <p>
-                <strong>Creator: </strong>
+                <strong className="stream-data-subtitle">Creator: </strong>
                 {creator}
               </p>
               <p>
-                <strong>Amount per second: </strong>
+                <strong className="stream-data-subtitle">Amount per second: </strong>
                 {streamInfo.amountPerSecond
                   ? String(streamInfo.amountPerSecond)
                   : "fetching..."}
               </p>
               <p>
-                <strong>Funded amount: </strong>
+                <strong className="stream-data-subtitle">Funded amount: </strong>
                 {streamInfo.fundedAmount
                   ? String(streamInfo.fundedAmount)
                   : "fetching..."}
               </p>
               <p>
-                <strong>Start time: </strong>
+                <strong className="stream-data-subtitle">Start time: </strong>
                 {new Date(Number(stream.startTime) * 1000).toLocaleString()}
               </p>
             </div>
@@ -175,7 +177,7 @@ const StreamPage = () => {
                     stream={stream}
                     chartType={chartType}
                     background="#6200ea"
-                    color="black"
+                    color="#ff4499"
                   />
                 </div>
               </div>
@@ -226,7 +228,7 @@ const StreamPage = () => {
           </div>
         </>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/ui/app/src/sakura.css b/ui/app/src/sakura.css
@@ -14,8 +14,6 @@ body.sakura {
 }
 
 .app.sakura .theme-header-button {
-  margin: 5px;
-  margin-right: 5px;
   background-color: #bde0fe;
 }
 

diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -7,8 +7,13 @@ body {
   width: 100%;
 }
 
-.theme-toggle-button {
-
+.theme-header-button {
+  margin: 5px;
+  margin-right: 5px;
+}
+
+.theme-stream-button {
+  margin: 10px;
 }
 
 h1,
@@ -74,8 +79,6 @@ a:hover {
 
 button:hover {
   transition: all 0.3s ease;
-  background-color: #421f74;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 li {
@@ -99,7 +102,7 @@ li {
 /* STREAM MANAGER PAGE */
 
 .stream-manager-title {
-  margin-top: 10px;
+  margin: 10px;
   font-size: 20px;
   text-align: center;
 }

diff --git a/ui/app/src/tokyoNight.css b/ui/app/src/tokyoNight.css
@@ -1,14 +1,80 @@
+:root {
+  --polynesian-blue: #004687;
+  --federal-blue: #0a0047;
+  --black: #000000;
+  --rose-bonbon: #ff4499;
+  --aquamarine: #00ffd2;
+}
+
 body.tokyoNight {
-  background-color: #004687;
+  background-color: var(--federal-blue);
   font-family: "Tomorrow", sans-serif;
 }
 
 .app.tokyoNight {
-  color: #fff;
-  background-color: #004687;
+  color: var(--rose-bonbon);
+  background-color: var(--federal-blue);
 }
 
 .app.tokyoNight .theme-toggle-button {
-  background-color: #00ffd2;
-  color: #fff;
+  font-family: "Tomorrow", sans-serif;
+  background-color: var(--aquamarine);
+  color: var(--federal-blue);
+  border: none;
+}
+.app.tokyoNight .theme-toggle-button:hover {
+  background-color: var(--federal-blue);
+  color: var(--rose-bonbon);
+  font-family: "Tomorrow", sans-serif;
+  border: none;
+}
+
+.app.tokyoNight .theme-stream-button {
+  background-color: var(--aquamarine);
+  color: var(--federal-blue);
+  font-family: "Tomorrow", sans-serif;
+}
+.app.tokyoNight .theme-stream-button:hover {
+  background-color: var(--polynesian-blue);
+  color: var(--rose-bonbon);
+  font-family: "Tomorrow", sans-serif;
+  border: none;
+}
+
+.app.tokyoNight a:hover {
+  color: var(--polynesian-blue);
+}
+
+.app.tokyoNight .theme-header-button {
+  font-family: "Tomorrow", sans-serif;
+  background-color: var(--rose-bonbon);
+  color: var(--federal-blue);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.app.tokyoNight .theme-header-button:hover {
+  background-color: var(--aquamarine);
+  color: var(--federal-blue);
+  border: none;
+}
+
+.app.tokyoNight .list-creator-streams {
+  border: 1px solid var(--rose-bonbon);
+}
+
+.app.tokyoNight .stream-status-bar-label {
+  color: var(--federal-blue);
+}
+
+.app.tokyoNight .stream-status-box,
+.app.tokyoNight .stream-data-box,
+.app.tokyoNight .cancel-stream-box,
+.app.tokyoNight .update-stream-box {
+  border: 1px solid white;
+  padding: 10px;
+}
+
+.app.tokyoNight .stream-data-subtitle {
+  color: var(--aquamarine);
 }