style sakura

ApeWorX · Jan 29, 2024 · 69f9dfe · 69f9dfe
1 parent ddbeda6
commit 69f9dfe
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 38 deletions.
diff --git a/ui/app/src/StreamPage.tsx b/ui/app/src/StreamPage.tsx
@@ -116,7 +116,7 @@ const StreamPage = () => {
 
   // UI; to pass as props to the component
   const themeColors = {
-    sakura: { background: "#ff4499", color: "#00ffd2" },
+    sakura: { background: "#ffafcc", color: "#bde0fe" },
     tokyoNight: { background: "#ff4499", color: "#00ffd2" },
   };
 

diff --git a/ui/app/src/sakura.css b/ui/app/src/sakura.css
@@ -1,31 +1,197 @@
+:root {
+  --dark-blue: #a2d2ff;
+  --light-blue: #bde0fe;
+  --dark-pink: #ffafcc;
+  --standard-pink: #ffc8dd;
+  --light-pink: #fff6f9;
+}
+
+.app.sakura a:hover {
+  color: var(--light-blue);
+}
+
 body.sakura {
-  background-color: #a2d2ff;
+  background-color: var(--dark-blue);
   font-family: "Kdam Thmor Pro", sans-serif;
 }
 
 .app.sakura {
-  color: #333;
-  background-color: #a2d2ff;
+  color: var(--dark-pink);
+  background-color: var(--dark-blue);
 }
 
 .app.sakura .theme-toggle-button {
-  background-color: #ffafcc;
-  color: #333;
+  font-family: "Kdam Thmor Pro", sans-serif;
+
+  background-color: var(--light-pink);
+  color: var(--dark-blue);
+  border: none;
+}
+.app.sakura .theme-toggle-button:hover {
+  background-color: var(--dark-blue);
+  color: var(--dark-pink);
+  font-family: "Kdam Thmor Pro", sans-serif;
+  border: none;
+}
+
+.app.sakura .theme-stream-button {
+  background-color: var(--light-pink);
+  color: var(--dark-blue);
+  font-family: "Kdam Thmor Pro", sans-serif;
+  animation: sakuraPulsate 1.5s infinite ease-in-out;
+}
+.app.sakura .theme-stream-button:hover {
+  background-color: var(--dark-blue);
+  color: var(--dark-pink);
+  font-family: "Kdam Thmor Pro", sans-serif;
+  border: none;
 }
 
 .app.sakura .theme-header-button {
-  background-color: #bde0fe;
+  font-family: "Kdam Thmor Pro", sans-serif;
+  background-color: var(--dark-pink);
+  color: var(--dark-blue);
+  border: none;
+  transition: all 0.3s ease;
 }
 
 .app.sakura .theme-header-button:hover {
-  background-color: #ffc8dd;
+  background-color: var(--light-pink);
+  color: var(--dark-blue);
+  border: none;
 }
 
-.app.sakura .theme-stream-button {
-  background-color: #ffafcc;
-  color: #333;
+.app.sakura .list-creator-streams {
+  border: 1px solid var(--dark-pink);
 }
 
-.app.sakura .theme-stream-button:hover {
-  background-color: #ffc8dd;
+.app.sakura .stream-status-bar-label {
+  color: var(--dark-blue);
+}
+
+.app.sakura .stream-status-box,
+.app.sakura .stream-data-box,
+.app.sakura .cancel-stream-box,
+.app.sakura .update-stream-box {
+  border: 1px solid var(--light-pink);
+  padding: 10px;
+}
+
+.app.sakura .stream-data-subtitle {
+  color: var(--light-pink);
+}
+
+.app.sakura .stream-data-subtitle:hover {
+  color: var(--standard-pink);
+}
+
+.app.sakura .ub-pst_relative {
+  background-color: var(--light-pink);
+}
+
+.app.sakura .stream-status-bar-label {
+  color: #004687;
+}
+
+.app.sakura .stream-status-pie text {
+  fill: var(--light-pink);
+}
+
+.app.sakura .stream-status-component {
+  min-width: 120px;
+}
+
+.app.sakura .cancel-stream-button,
+.app.sakura .update-stream-button {
+  font-family: "Kdam Thmor Pro", sans-serif;
+  background-color: var(--light-pink);
+  color: var(--dark-blue);
+  border: none;
+}
+
+.app.sakura .theme-header-button:hover,
+.app.sakura .cancel-stream-button:hover,
+.app.sakura .update-stream-button:hover {
+  background-color: var(--dark-pink);
+  border: none;
+}
+
+.app.sakura .cancel-stream-button:disabled,
+.app.sakura .update-stream-button:disabled,
+.app.sakura .button-create-stream:disabled,
+.app.sakura .button-validate-transaction:disabled {
+  opacity: 0.4;
+}
+
+.app.sakura .rc-slider-dot {
+  background-color: var(--dark-pink);
+  border: 2px solid var(--light-pink);
+}
+
+.app.sakura .rc-slider-step {
+  background: var(--dark-pink) !important;
+}
+
+.app.sakura .rc-slider-disabled {
+  background: var(--black) !important;
+}
+
+.app.sakura .rc-slider-mark-text {
+  color: var(--light-pink);
+}
+
+.app.sakura .rc-slider-handle {
+  background-color: var(--light-pink);
+}
+
+.app.sakura .custom-popover:hover,
+.app.sakura .custom-popover:active,
+.app.sakura .custom-popover:focus {
+  background-color: var(--dark-pink) !important;
+}
+
+.app.sakura .cart,
+.app.sakura .create-stream-component {
+  border-color: var(--light-pink);
+}
+
+.app.sakura .button-redirect-uniswap,
+.app.sakura .button-validate-transaction,
+.app.sakura .button-create-stream,
+.app.sakura .button-validate-select-token,
+.app.sakura .button-redirect-hop {
+  font-family: "Kdam Thmor Pro", sans-serif;
+  background-color: var(--light-pink) !important;
+  color: var(--dark-blue);
+  border: none;
+}
+
+.app.sakura .button-redirect-uniswap:hover,
+.app.sakura .button-validate-transaction:hover,
+.app.sakura .button-create-stream:hover,
+.app.sakura .button-validate-select-token:hover,
+.app.sakura .button-redirect-hop:hover {
+  background-color: var(--dark-pink) !important;
+  border: none;
+}
+
+@keyframes sakuraPulsate {
+  0% {
+    box-shadow:
+      0 0 5px var(--standard-pink),
+      0 0 10px var(--standard-pink),
+      0 0 15px var(--standard-pink);
+  }
+  50% {
+    box-shadow:
+      0 0 15px var(--standard-pink),
+      0 0 20px var(--standard-pink),
+      0 0 25px var(--standard-pink);
+  }
+  100% {
+    box-shadow:
+      0 0 5px var(--standard-pink),
+      0 0 10px var(--standard-pink),
+      0 0 15px var(--standard-pink);
+  }
 }
diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -42,7 +42,6 @@ a:visited {
 
 a:hover {
   transition: all 0.3s ease;
-  color: #6200ea;
 }
 
 .header {
@@ -58,7 +57,6 @@ a:hover {
 .button-validate-select-token,
 .button-validate-transaction,
 .button-create-stream {
-  color: white;
   border: none;
   padding: 10px 20px;
   margin: 5px;
@@ -70,10 +68,6 @@ a:hover {
   cursor: pointer;
 }
 
-.button:active {
-  background-color: #6200ea;
-}
-
 button:hover {
   transition: all 0.3s ease;
 }
@@ -129,7 +123,6 @@ li {
   text-align: center;
   width: 100%;
   list-style-type: none;
-  border: 2px solid black;
   margin-top: 15px;
   border-radius: 5px;
 }
@@ -151,10 +144,10 @@ li {
 .cancel-stream-box,
 .update-stream-box {
   margin-top: 10px;
-  border: 1px solid black;
   padding: 10px;
   width: 50%;
   text-align: center;
+  overflow: hidden;
 }
 
 .loading-stream-text {
@@ -179,7 +172,6 @@ li {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px solid black;
   text-align: center;
   width: 50%;
   padding: 20px;
@@ -189,7 +181,6 @@ li {
 }
 
 .cart {
-  border: 1px solid black;
   text-align: center;
   margin: 1em;
   padding: 1em;
@@ -244,7 +235,6 @@ li {
 
 .stream-status-bar-progress {
   height: 100%;
-  background-color: #111;
 }
 
 .stream-status-pie {
@@ -261,13 +251,6 @@ li {
   text-align: center;
 }
 
-.dropdown-select {
-  margin-bottom: 10px;
-  border: 1px solid #6200ea;
-  padding: 10px 30px 10px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
 
 /* CANCEL STREAM */
 
@@ -288,8 +271,6 @@ 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
@@ -6,6 +6,10 @@
   --aquamarine: #00ffd2;
 }
 
+a:hover {
+  color: var(--polynesian-blue);
+}
+
 body.tokyoNight {
   background-color: var(--federal-blue);
   font-family: "Tomorrow", sans-serif;
@@ -33,7 +37,7 @@ body.tokyoNight {
   background-color: var(--aquamarine);
   color: var(--federal-blue);
   font-family: "Tomorrow", sans-serif;
-  animation: pulsate 1.5s infinite ease-in-out;
+  animation: tokyoPulsate 1.5s infinite ease-in-out;
 }
 .app.tokyoNight .theme-stream-button:hover {
   background-color: var(--polynesian-blue);
@@ -80,16 +84,20 @@ body.tokyoNight {
   color: var(--aquamarine);
 }
 
+.app.tokyoNight .stream-data-subtitle:hover {
+  color: var(--polynesian-blue);
+}
+
 .app.tokyoNight .ub-pst_relative {
-  background-color: #00ffd2;
+  background-color: var(--aquamarine);
 }
 
 .app.tokyoNight .stream-status-bar-label {
-  color: #004687;
+  color: var(--polynesian-blue);
 }
 
 .app.tokyoNight .stream-status-pie text {
-  fill: #00ffd2;
+  fill: var(--aquamarine);
 }
 
 .app.tokyoNight .stream-status-component {
@@ -104,6 +112,7 @@ body.tokyoNight {
   border: none;
 }
 
+.app.tokyoNight .theme-header-button:hover,
 .app.tokyoNight .cancel-stream-button:hover,
 .app.tokyoNight .update-stream-button:hover {
   background-color: var(--rose-bonbon);
@@ -169,7 +178,7 @@ body.tokyoNight {
   border: none;
 }
 
-@keyframes pulsate {
+@keyframes tokyoPulsate {
   0% {
     box-shadow:
       0 0 5px var(--aquamarine),