Merge #39: Color update

b3b456a buttons made smaller (Daniel Petersen) a2cd1c8 new favicon added for new branding (Daniel Petersen) 8268b4d colors updated to new branding colors (Daniel Petersen) Pull request description: Colors updated to new branding ACKs for top commit: uncomputable: ACK b3b456a The new colors look good. We should change the logo once we have a design for it. Tree-SHA512: 00cf67598f8171713a42ed42e38370dd9c47e205e6d31b049c2893c1dc4199610c37338ef4b89877b75a0109f0d741b56cd4e3a98fd9907d1f3c53609faa0c81
uncomputable · Oct 21, 2024 · 4048f4b · 4048f4b
2 parents 4695b99 + b3b456a
commit 4048f4b
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 20 deletions.
diff --git a/favicon.png b/favicon.png
diff --git a/src/assets/style/components/merkle_graph.scss b/src/assets/style/components/merkle_graph.scss
@@ -50,7 +50,7 @@
     .graph-button {
         width: 30px;
         height: 30px;
-        border: 1px solid #5134E0;
+        border: 1px solid #b26e0f;
         padding: 5px;
         border-radius: 4px;
         background: #191C21;
@@ -60,7 +60,7 @@
         fill: #B5BDC2;
 
         &:hover {
-            background: #5134E0;
+            background: #b26e0f;
         }
     }
     .graph-button-holder {

diff --git a/src/assets/style/components/navbar.scss b/src/assets/style/components/navbar.scss
@@ -30,7 +30,7 @@
     }
 
     .run-button{
-        background: #5134E0;
+        background: #b26e0f;
         margin-right: 2px;
     }
 
@@ -85,6 +85,7 @@
     }
 
     .beta-tag{
+        color: #ea9606;
         position: absolute;
         right:40px;
         top: 20px;

diff --git a/src/assets/style/components/program_input.scss b/src/assets/style/components/program_input.scss
@@ -85,7 +85,7 @@
             align-items: center;
             gap: 8px;
             color: #fff;
-            background: #5134E0;
+            background: #b26e0f;
             border: none;
             font-family: 'rigid-square';
             font-size: 16px;
@@ -95,7 +95,7 @@
             max-width: 100%;
             cursor: pointer;
             &:hover {
-                // background: #7973f4;
+                // background: #ea9606;
             }
         }
     }
@@ -151,7 +151,7 @@
         background-color: $background-dark;
         border-radius: 7.5px;
         border: 1px solid rgba(255, 255, 255, 0.10);
-        color: #c2c2ff;
+        color: #fdc667;
         font-family: 'Roboto Mono';
         font-size: 12px;
         resize: none;
@@ -192,7 +192,7 @@
             gap: 4px;
 
             .copy-button{
-                border: 1px solid #5134E0;
+                border: 1px solid #b26e0f;
                 padding: 4px;
                 border-radius: 4px;
                 height: 34px;
@@ -203,7 +203,7 @@
                 background: #191C21;
 
                 &:hover {
-                    background: #5134e0;
+                    background: #b26e0f;
                 }
             }
             #copy-button-success{
@@ -212,7 +212,7 @@
                 background: #191C21;
 
                 padding: 6px 10px;
-                border: 1px solid #5134e0;
+                border: 1px solid #b26e0f;
                 border-radius: 4px;
             }
             .copy-show{

diff --git a/src/assets/style/components/tab_content.scss b/src/assets/style/components/tab_content.scss
@@ -59,7 +59,7 @@
     }
 
     .signed-data-content{
-        border: 1px solid #5134e0;
+        border: 1px solid #b26e0f;
         border-radius: 8px;
         padding-top: 20px;
     }
@@ -88,6 +88,6 @@
     margin-bottom: 20px;
 
     a {
-        color: #7973f4;
+        color: #ea9606;
     }
 }
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
@@ -30,7 +30,7 @@ h1, h2, h3, h4, h5, h6{
 }
 
 a {
-    color: #7973F4;
+    color: #ea9606;
 
     &:hover {
         color: white;
@@ -102,6 +102,12 @@ p {
 
 .button-row {
     display: flex;
+
+    &.is-small{
+        button{
+            padding: 8px 12px;
+        }
+    }
 }
 
 .button-col {
@@ -114,8 +120,8 @@ p {
     padding: 14px 16px;
     cursor: pointer;
     border: none;
-    background: #5134E0;
-    border: 1px solid #5134E0;
+    background: #b26e0f;
+    border: 1px solid #b26e0f;
     border-radius: 4px;
     margin-right: 4px;
 
@@ -126,10 +132,14 @@ p {
     &.bordered{
         background: #191c21;
     }
+
+    &.is-small{
+        padding: 8px 12px;
+    }
 }
 
 .submit-button, .push-button, .pop-button, .copy-button {
-    border: 1px solid #5134E0;
+    border: 1px solid #b26e0f;
     padding: 4px;
     border-radius: 4px;
     display: flex;
@@ -139,14 +149,22 @@ p {
     background: #191C21;
 
     &:hover {
-        background: #5134e0;
+        background: #b26e0f;
+    }
+
+    &.is-small{
+        padding: 8px 12px;
     }
 }
 
 input:invalid {
     background-color: lightpink;
 }
 
+input[type="radio"]{
+    accent-color: #ea9606;
+}
+
 .input{
     background: #191c21;
     border: 1px solid rgba(255, 255, 255, 0.10);

diff --git a/src/components/run_window/hash_store_tab.rs b/src/components/run_window/hash_store_tab.rs
@@ -92,7 +92,7 @@ fn CopyHashesToClipboard() -> impl IntoView {
             <h3 class="tab-title">
                 Hashes
             </h3>
-            <div class="button-row">
+            <div class="button-row is-small">
                 <For
                     each=move || hashed_data.hashes().get().into_iter().enumerate()
                     key=|(_index, hash)| *hash
@@ -139,7 +139,7 @@ fn CopyPreimagesToClipboard() -> impl IntoView {
             <h3 class="tab-title">
                 Preimages
             </h3>
-            <div class="button-row">
+            <div class="button-row is-small">
                 <For
                     each=move || hashed_data.preimages.get().into_iter().enumerate()
                     key=|(_index, preimage)| *preimage

diff --git a/src/components/run_window/key_store_tab.rs b/src/components/run_window/key_store_tab.rs
@@ -174,7 +174,7 @@ fn CopyPublicKeysToClipboard() -> impl IntoView {
             <h3 class="tab-title">
                 Public Keys
             </h3>
-            <div class="button-row">
+            <div class="button-row is-small">
                 <For
                     each=move || signing_keys.public_keys().get().into_iter().enumerate()
                     key=|(_index, key)| *key
@@ -224,7 +224,7 @@ fn CopySignaturesToClipboard() -> impl IntoView {
             <h3 class="tab-title">
                 Signatures
             </h3>
-            <div class="button-row">
+            <div class="button-row is-small">
                 <For
                     each=move || signing_keys.signatures(signed_data.message()).get().into_iter().enumerate()
                     key=|(_index, signature)| *signature