Integrate styling feedback from @TheBrokenRail

src/components/gui/gui.css

@@ -33,18 +33,41 @@
 
 .tab-list {
     height: $stage-menu-height;
+    width: 250px; /* Match width of the toolbox */
     display: flex;
     align-items: flex-end;
     flex-shrink: 0;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 0.85rem;
+    font-weight: 500;
+    font-size: 0.80rem;
 
     /* Overrides for react-tabs styling */
-    margin: 0 0 0 1rem !important;
+    margin: 0 !important;
     border-bottom: 0 !important;
 }
 
+.tab-list .tab {
+    flex-grow: 1;
+    height: 80%;
+    margin-left: 1px;
+
+    border-radius: $space $space 0 0;
+    border: none;
+
+    background-color: #F6F8FA;
+    color: #9AA1B5;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.tab-list .tab[aria-selected="true"] {
+    color: #40B9F5;
+}
+
 .tabs {
     position: relative;
     flex-grow: 1;
@@ -90,7 +113,7 @@
     padding-right: $space;
 
     /* Hides negative space between edge of rounded corners + container, when selected */
-    user-select: none; 
+    user-select: none;
 }
 
 .target-wrapper {

src/components/gui/gui.jsx

@@ -50,9 +50,9 @@ const GUIComponent = props => {
                             onSelect={handleTabSelect}
                         >
                             <TabList className={styles.tabList}>
-                                <Tab>Scripts</Tab>
-                                <Tab>Costumes</Tab>
-                                <Tab>Sounds</Tab>
+                                <Tab className={styles.tab}>Scripts</Tab>
+                                <Tab className={styles.tab}>Costumes</Tab>
+                                <Tab className={styles.tab}>Sounds</Tab>
                             </TabList>
                             <TabPanel className={styles.tabPanel}>
                                 <Box className={styles.blocksWrapper}>