first pass at restyling, partially complete

README.md

@@ -25,4 +25,6 @@ todo:
 
 - contracts with stake addresses
 
+- setting for traces
+
 - an unimaginably long list of other stuff

src/App.css

@@ -1,56 +1,69 @@
 #root {
   margin: 0 auto;
   text-align: center;
+  height: 100vh;
+  max-height: 100vh;
+  color: #fafafa;
 }
 
 body {
   overflow-y: hidden;
+  padding: 0;
+  margin: 0;
+  background-color: #5a173c;
+  background-image: linear-gradient(225deg, #5a173c 0%, #331e43 45%, #154160 100%);
 }
 
 .main-layout-container {
   display: flex;
   flex-direction: column; 
-  border: solid 1px black;
-  overflow: hidden;
+  max-height: 100%;
+  height: 100%;
 }
 
 .editor-and-management-view-container {
   display: flex;
   flex-direction: row;
-  background-color: rgb(22, 22, 22);
   width: 100%;
   max-width: 100%;
+  max-height: 100%;
+  height: 100%;
+  margin-top: 6px;
 }
 
 .editor-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 60vw;
+  height: 100%;
+  max-height: 100%;
   flex: 1;
 }
 
 .editor-content-container {
   display: flex;
   flex-direction: row;
+  max-height: 100%;
 }
 
 .editor-and-tabs-container {
   max-width: 100%;
   min-width: 50vw;
-  max-height: 94vh;
+  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .management-panel-container {
   display: flex;
   flex-direction: column;
-  width: 100%;
   max-width: 40vw;
+  max-height: 100%;
+  height: 100%;
   flex: 1;
   word-wrap: break-word;
-  border-left: 1px solid black;
 }
 
 .tooltip {
@@ -135,4 +148,29 @@ body {
 .button:active {
   background-color: rgb(103, 148, 193);
   cursor: pointer;
+}
+
+@supports ( -moz-appearance:none ){
+  .file-manager-file-list {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(213, 213, 213, 0.163) #00000000;
+      scrollbar-gutter: stable;
+  }
+}
+
+::-webkit-scrollbar-track {
+  background-color: #00000000 !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ffffff22 !important;
+}
+
+::-webkit-scrollbar-corner  {
+
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }

src/panels/TopBar.css

@@ -2,40 +2,96 @@
     display: flex;
     align-items: center;
     justify-content: left;
-    border-bottom: solid 1px black;
     font-size: 20px;
     height: 4vh;
     max-height: 4vh;
+    min-height: 45px;
     overflow: hidden;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border: 1px solid black;
+    gap: 20px;
+    background-color: #00000022;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-shadow: inset 15px 0px 25px 1px rgb(0, 0, 0, 0.18);
 }
 
 .editor-top-bar {
-    background-color: rgb(104, 17, 75);
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+
+    margin-right: 8px;
 }
 
 .management-top-bar {
-    background-color: rgb(18, 92, 195, 0.3);
 }
 
 .top-bar-item {
     padding: 5px;
     margin-top: none;
-    margin-right: 20px;
 }
 
 .editor-top-bar-item {
-    padding: 5px;
     margin-top: none;
-    margin-right: 20px;
-    transition: background-color 0.25s linear;
 }
 
 .editor-top-bar-item:hover {
     cursor: pointer;
-    background-color: rgb(160, 95, 126);
-    transition: background-color 0.25s linear;
 }
 
 .no-last-build-notice {
     margin-left: 10px;
 }
+
+.editor-top-bar-right-side {
+    display: flex;
+    gap: 20px;
+    font-size: 16px;
+}
+
+.editor-top-bar-left-side {
+    display: flex;
+    gap: 20px;
+}
+
+.editor-top-bar-item .editor-top-bar-play-icon {
+    transition: color 0.4s ease;
+    display: inline;
+    color: white;
+}
+
+.editor-top-bar-item:hover .editor-top-bar-play-icon {
+    color: rgb(73, 203, 73);
+}
+
+.editor-top-bar-item .editor-top-bar-build-icon {
+    transition: color 0.25s ease;
+    display: inline;
+    color: white;
+}
+
+.editor-top-bar-item:hover .editor-top-bar-build-icon {
+    color: rgb(105, 183, 182);
+}
+
+.editor-top-bar-item .editor-top-bar-format-icon {
+    transition: color 0.25s ease;
+    display: inline;
+    color: white;
+}
+
+.editor-top-bar-item:hover .editor-top-bar-format-icon {
+    color: rgb(245, 211, 78);
+}
+
+.editor-top-bar-item .editor-top-bar-share-icon {
+    transition: color 0.25s ease;
+    display: inline;
+    color: white;
+}
+
+.editor-top-bar-item:hover .editor-top-bar-share-icon {
+    color: rgb(255, 130, 199);
+}