Hide main prompt slot when secondary views are active and update UI component styles

- because the first slot is shown unconditionally, it should have 'visibility: hidden' set whenever there is other slot on top

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Prompt.module.scss

@@ -8,6 +8,10 @@
   > * {
     pointer-events: all;
   }
+
+  &--hidden {
+    visibility: hidden;
+  }
 }
 
 .content {

apps/editor/src/views/prompt/frontend/Prompt.tsx

@@ -252,10 +252,20 @@ export const Prompt = () => {
     !!items_in_preview ||
     active_view != 'main'
 
+  const is_main_slot_hidden =
+    !!updating_web_configuration ||
+    !!updating_api_configuration ||
+    viewing_donations ||
+    !!items_in_preview
+
   return (
     <LayoutContext.Provider value={layout_context_value}>
       <div data-modern-ui={is_modern_ui}>
-        <div className={styles.slot}>
+        <div
+          className={cn(styles.slot, {
+            [styles['slot--hidden']]: is_main_slot_hidden
+          })}
+        >
           <Layout on_history_click={handle_history_click}>
             <div
               className={cn(styles.content, {

packages/ui/src/components/editor/prompt/Page/Page.module.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--vscode-sideBar-background);
   position: relative;
 }
 

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.module.scss

@@ -38,8 +38,8 @@
   color: var(--cwc-yellow-foreground);
   background: linear-gradient(
     45deg,
-    var(--cwc-yellow-background) 10px,
-    var(--cwc-bg-tertiary) 40px
+    var(--cwc-yellow-background) 40px,
+    var(--cwc-bg-tertiary) 140px
   );
   --theme-description-color: var(--cwc-yellow-foreground-dimmed);
 }
@@ -48,8 +48,8 @@
   color: var(--cwc-green-foreground);
   background: linear-gradient(
     45deg,
-    var(--cwc-green-background) 10px,
-    var(--cwc-bg-tertiary) 40px
+    var(--cwc-green-background) 40px,
+    var(--cwc-bg-tertiary) 140px
   );
   --theme-description-color: var(--cwc-green-foreground-dimmed);
 }
@@ -58,8 +58,8 @@
   color: var(--cwc-red-foreground);
   background: linear-gradient(
     45deg,
-    var(--cwc-red-background) 10px,
-    var(--cwc-bg-tertiary) 40px
+    var(--cwc-red-background) 40px,
+    var(--cwc-bg-tertiary) 140px
   );
   --theme-description-color: var(--cwc-red-foreground-dimmed);
 }
@@ -68,8 +68,8 @@
   color: var(--cwc-blue-foreground);
   background: linear-gradient(
     45deg,
-    var(--cwc-blue-background) 10px,
-    var(--cwc-bg-tertiary) 40px
+    var(--cwc-blue-background) 40px,
+    var(--cwc-bg-tertiary) 140px
   );
   --theme-description-color: var(--cwc-blue-foreground-dimmed);
 }
@@ -78,8 +78,8 @@
   color: var(--cwc-purple-foreground);
   background: linear-gradient(
     45deg,
-    var(--cwc-purple-background) 10px,
-    var(--cwc-bg-tertiary) 40px
+    var(--cwc-purple-background) 40px,
+    var(--cwc-bg-tertiary) 140px
   );
   --theme-description-color: var(--cwc-purple-foreground-dimmed);
 }
@@ -134,9 +134,10 @@
   cursor: pointer;
   white-space: nowrap;
   padding: 0 7px 0 4px;
-  color: var(--vscode-textLink-foreground);
+  color: var(--cwc-text-color-dimmed);
 
   &:hover {
+    color: var(--cwc-text-color);
     background-color: var(--cwc-bg-tertiary);
   }
 }