pursue tokyonight theming

ApeWorX · Jan 25, 2024 · 461ddba · 461ddba
1 parent 39e9530
commit 461ddba
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/ui/app/src/StreamPage.tsx b/ui/app/src/StreamPage.tsx
@@ -116,8 +116,8 @@ const StreamPage = () => {
 
   // UI; to pass as props to the component
   const themeColors = {
-    sakura: { background: "#ff4499", color: "#ff4499" },
-    tokyoNight: { background: "#ff4499", color: "#ff4499" },
+    sakura: { background: "#ff4499", color: "#00ffd2" },
+    tokyoNight: { background: "#ff4499", color: "#00ffd2" },
   };
 
   type ThemeName = "sakura" | "tokyoNight";

diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -55,8 +55,6 @@ a:hover {
   justify-content: flex-end;
 }
 
-.cancel-stream-button,
-.update-stream-button,
 .button-validate-select-token,
 .button-validate-transaction,
 .button-create-stream {
@@ -294,6 +292,8 @@ li {
   overflow: auto;
 }
 
+
+
 .cancel-stream-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;

diff --git a/ui/app/src/tokyoNight.css b/ui/app/src/tokyoNight.css
@@ -72,7 +72,7 @@ body.tokyoNight {
 .app.tokyoNight .stream-data-box,
 .app.tokyoNight .cancel-stream-box,
 .app.tokyoNight .update-stream-box {
-  border: 1px solid white;
+  border: 1px solid var(--aquamarine);
   padding: 10px;
 }
 
@@ -86,7 +86,7 @@ body.tokyoNight {
 }
 
 .app.tokyoNight .stream-status-bar-label {
-  color: #00ffd2;
+  color: #004687;
 }
 
 .app.tokyoNight .stream-status-pie text {
@@ -97,6 +97,37 @@ body.tokyoNight {
   min-width: 120px;
 }
 
+.app.tokyoNight .cancel-stream-button,
+.app.tokyoNight .update-stream-button {
+  font-family: "Tomorrow", sans-serif;
+  background-color: var(--aquamarine);
+  color: var(--federal-blue);
+  border: none;
+}
+
+.app.tokyoNight .cancel-stream-button:hover,
+.app.tokyoNight .update-stream-button:hover {
+  background-color: var(--rose-bonbon);
+  border: none;
+}
+
+.app.tokyoNight .rc-slider-dot {
+  background-color: var(--rose-bonbon);
+  border: 2px solid var(--aquamarine);
+}
+
+.app.tokyoNight .rc-slider-step {
+  background: var(--rose-bonbon) !important;
+}
+
+.app.tokyoNight .rc-slider-mark-text {
+  color: var(--aquamarine);
+}
+
+.app.tokyoNight .rc-slider-handle {
+  background-color: var(--aquamarine);
+}
+
 @keyframes pulsate {
   0% {
     box-shadow:

diff --git a/ui/lib/CancelStream.tsx b/ui/lib/CancelStream.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Stream } from "@apeworx/apepay";
 import { formatTime } from "./utils";
 import { useCurrentTime } from "./utils";
+import { Button } from "evergreen-ui";
 
 interface CancelStreamProps {
   stream: Stream;
@@ -80,13 +81,13 @@ const CancelStream: React.FC<CancelStreamProps> = (props) => {
           </div>
         )
       )}
-      <button
+      <Button
         className="cancel-stream-button"
         onClick={handleCancel}
         disabled={!isButtonEnabled}
       >
         Cancel {props.productName || "Stream"}
-      </button>
+      </Button>
       <div className="cancel-stream-error"> {error && error}</div>
     </div>
   );

diff --git a/ui/lib/UpdateStream.tsx b/ui/lib/UpdateStream.tsx
@@ -7,6 +7,7 @@ import {
   useBalance,
 } from "wagmi";
 import Slider from "rc-slider";
+import { Button } from "evergreen-ui";
 
 interface UpdateStreamProps {
   stream: Stream;
@@ -102,11 +103,11 @@ const UpdateStream: React.FC<UpdateStreamProps> = (props) => {
                   typeof value === "number" && setSelectedTime(value)
                 }
               />
-              <button onClick={approveStream} className="update-stream-button">
+              <Button onClick={approveStream} className="update-stream-button">
                 {`Validate adding funds for ${selectedTime} additional day${
                   selectedTime !== 1 ? "s" : ""
                 }`}
-              </button>
+              </Button>
             </>
           ) : (
             <>
@@ -155,13 +156,13 @@ const UpdateStream: React.FC<UpdateStreamProps> = (props) => {
               selectedTime !== 1 ? "s:" : ":"
             }`}
           </div>
-          <button
+          <Button
             onClick={handleUpdate}
             disabled={isButtonDisabled}
             className="update-stream-button"
           >
             Add Time
-          </button>
+          </Button>
           <div className="update-stream-error"> {Error && Error}</div>
         </div>
       </>