Merge uncomputable#11: New styling changes applied

7f59ad0 New styling changes applied (Daniel Petersen)

Pull request description:

  Rounded corners, colors etc
  https://www.figma.com/file/39B6l8anfOrMspFdv1qst3/Simplicity-Web-IDE?type=design&node-id=0-1&mode=design&t=rWZQU5RF8c3QD5Eb-0#790710681

ACKs for top commit:
  uncomputable:
    ACK 7f59ad0

Tree-SHA512: 25df96aa41669f543c0bbc9c5399d3a65b59742dd22d86200702e5950bbe0b2cf3c31c2c3f8a7466253ab55aa8e6ecaf6034fedf709e340eedd8131dee59d8f5

Author: uncomputable

src/assets/style/components/analysis.scss

@@ -3,6 +3,7 @@
     margin-top: 40px;
     padding: 30px;
     background-color: $background-light;
+    border-radius: 7.5px;
 
     .analysis-header {
         .analysis-title {
@@ -18,9 +19,9 @@
         }
 
         .program-status{
-            border: 1px dotted #00ff00;
-            color: #00ff00;
-            padding: 8px 20px;
+            border: 1px dotted #7eff18;
+            color: #7eff18;
+            padding: 12px 20px;
             font-size: 13px;
             margin-bottom: 8px;
             display: flex;

src/assets/style/components/program_input.scss

@@ -2,6 +2,7 @@
 .program-input{
     background-color: $background-light;
     padding: 30px;
+    border-radius: 7.5px;
 
     &-header{
         margin-bottom: 10px;
@@ -110,6 +111,7 @@
             line-height: 24px;
             &:hover {
                 cursor: pointer;
+                background: #7973f4;
             }
         }
     }
@@ -121,6 +123,9 @@
         max-width: 100%;
         display: inline-block;
         width: fit-content;
+        border-radius: 7.5px;
+        border: 1px solid #363636;
+        overflow: hidden;
 
         .example-program-select {
             max-width: 100%;
@@ -129,7 +134,7 @@
             color: $text-grey;
             background-color: $background-dark;
             width: 200px;
-            border: 1px solid #363636;
+            border: none;
 
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -146,6 +151,13 @@
             font-weight: 100;
             font-size: 26px;
             color: $text-white;
+            pointer-events: none;
+
+            &.loading {
+                font-size: 20px;
+                top: 10px;
+                right: 14px;
+            }
         }
     }
 
@@ -154,7 +166,7 @@
         background-color: $background-dark;
         border-radius: 7.5px;
         border: 1px solid rgba(255, 255, 255, 0.10);
-        color: #88ddff;
+        color: #c2c2ff;
         font-family: 'Roboto Mono';
         font-size: 12px;
         resize: none;
@@ -163,8 +175,16 @@
             outline: none;
         }
 
-        // overflow-x: auto;
         scrollbar-color: $background-dark #424242;
         scrollbar-width: thin;
     }
+
+    .rotate {
+        animation: rotate 1s infinite linear;
+    }
+
+    @keyframes rotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg) }
+    }
 }

src/assets/style/helpers.scss

@@ -9,6 +9,7 @@
 
 $text-grey: #B5BDC2;
 $text-white: #FFF;
+$body-background: #0d0f11;
 $background-light: #1D2127;
 $background-dark: #191C21;
 

src/assets/style/style.scss

@@ -8,8 +8,13 @@
     box-sizing: border-box;
 }
 
+html {
+    scrollbar-color: $background-dark #424242;
+    scrollbar-width: thin;
+}
+
 body {
-    background-color: $background-dark;
+    background-color: $body-background;
     color: $text-white;
     font-family: 'inter', sans-serif;
     padding-bottom: 400px;

src/components/app.rs

@@ -95,7 +95,6 @@ pub fn App() -> impl IntoView {
                                 "Run program"
                             </button>
                         </div>
-
                     </div>
                 </div>