Update components layout, DoneStatesPopup (#906)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/_layouts.scss

@@ -451,6 +451,7 @@ a.no-line {
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
 .background-menu-divider { background-color: var(--theme-menu-divider); }
+.background-card-divider { background-color: var(--theme-card-divider); }
 .background-primary-color { background-color: var(--primary-button-enabled); }
 .background-bg-accent { background-color: var(--theme-bg-accent-color); }
 

packages/theme/styles/common.scss

@@ -0,0 +1,80 @@
+//
+// Copyright © 2021 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Panels */
+.antiPanel-application {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 5rem;
+  width: 5rem;
+  height: 100%;
+  border-radius: 1.25rem;
+}
+.antiPanel-navigator,
+.antiPanel-component {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: 1.25rem;
+  overflow: hidden;
+
+  &.indent { margin-right: 1rem; }
+  &.filled { background-color: var(--theme-bg-color); }
+}
+.antiPanel-navigator {
+  min-width: 18rem;
+  max-width: 18rem;
+  width: 18rem;
+}
+.antiPanel-component { flex-grow: 1; }
+
+/* Navigation */
+.antiNav-divider {
+  flex-shrink: 0;
+  margin: 1.5rem 0;
+  height: 1px;
+  background-color: var(--theme-menu-divider);
+}
+.antiNav-scroll {
+  flex-grow: 1;
+  min-height: 0;
+  max-height: 10rem;
+  height: max-content;
+  overflow-x: hidden;
+  overflow-y: auto;
+  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem);
+
+  &::-webkit-scrollbar-track { margin: 0; }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--theme-bg-accent-color);
+    &:hover { background-color: var(--theme-menu-divider); }
+  }
+}
+.antiNav-box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.antiNav-space {
+  flex-shrink: 0;
+  height: 1rem;
+}
+.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
+.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
+.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
+.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }

packages/theme/styles/components.scss

@@ -90,174 +90,3 @@
   }
 }
 .ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }    
-
-/* Popups */
-.antiPopup {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background-color: var(--theme-button-bg-focused);
-  border: 1px solid var(--theme-button-border-enabled);
-  border-radius: .75rem;
-  box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
-  user-select: none;
-
-  .ap-space {
-    flex-shrink: 0;
-    height: .5rem;
-  }
-  .ap-scroll {
-    flex-grow: 1;
-    margin: 0 .25rem;
-    min-height: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    &::-webkit-scrollbar-track { margin: 0; }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-color);
-      &:hover { background-color: var(--theme-menu-divider); }
-    }
-  }
-  .ap-box {
-    display: flex;
-    flex-direction: column;
-    padding: 0 .25rem;
-    height: 100%;
-  }
-  .ap-menuItem {
-    justify-content: start;
-    padding: .5rem;
-    color: var(--theme-content-color);
-    border-radius: .5rem;
-    text-align: left;
-    cursor: pointer;
-
-    &.ap-woScroll { margin: 0 .5rem; }
-    &.selected { background-color: var(--theme-button-bg-hovered); }
-    &.empty {
-      display: flex;
-      justify-content: center;
-      font-style: italic;
-      color: var(--theme-content-trans-color);
-      cursor: default;
-
-      &:hover {
-        color: var(--theme-content-trans-color);
-        background-color: transparent;
-      }
-    }
-
-    &:hover {
-      color: var(--theme-caption-color);
-      background-color: var(--theme-button-bg-hovered);
-    }
-    &:focus {
-      color: var(--theme-content-accent-color);
-      background-color: var(--theme-button-bg-pressed);
-      z-index: 1;
-    }
-  }
-  .ap-check {
-    margin-left: 1rem;
-    width: 1rem;
-    height: 1rem;
-  }   
-
-  &-withHeader {
-    .ap-header {
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      margin: 0 .5rem;
-      text-align: left;
-  
-      .ap-caption {
-        margin: .5rem 0 0 .75rem;
-        font-size: .75rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        color: var(--theme-content-dark-color);
-      }    
-    }
-  }
-
-  &-withTitle {
-    .ap-title {
-      flex-shrink: 0;
-      margin: 1rem 1rem .25rem;
-      font-weight: 500;
-      color: var(--theme-caption-color);
-    }
-    .ap-header {
-      margin: .25rem 1rem 0;
-      .ap-caption {
-        margin: .5rem 0 0 0;
-      }
-    }
-  }  
-
-  &-withCategory {
-    .ap-category {
-      flex-shrink: 0;
-      overflow-x: auto;
-      display: flex;
-      margin: 1rem 1rem .25rem;
-
-      .ap-categoryItem {
-        margin: .25rem;
-        color: var(--theme-content-trans-color);
-        cursor: pointer;
-
-        &.selected { color: var(--theme-caption-color); }
-        &:hover { color: var(--theme-content-accent-color); }
-      }
-
-      &::-webkit-scrollbar:horizontal { height: .125rem; }
-      &::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
-    }
-    .ap-header {
-      margin: .25rem 1rem 0;
-      .ap-caption {
-        margin: .5rem 0 0 0;
-      }
-    }
-  }  
-}
-
-// .popup .tr-body:hover { background-color: transparent !important; } // Remove highlights table rows in popups
-
-/* Navigation */
-.antiNav-divider {
-  flex-shrink: 0;
-  margin: 1.5rem 0;
-  height: 1px;
-  background-color: var(--theme-menu-divider);
-}
-.antiNav-scroll {
-  flex-grow: 1;
-  min-height: 0;
-  max-height: 10rem;
-  height: max-content;
-  overflow-x: hidden;
-  overflow-y: auto;
-  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem);
-
-  &::-webkit-scrollbar-track { margin: 0; }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--theme-bg-accent-color);
-    &:hover { background-color: var(--theme-menu-divider); }
-  }
-}
-.antiNav-box {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.antiNav-space {
-  flex-shrink: 0;
-  height: 1rem;
-}
-.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
-.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
-.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
-.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }

packages/theme/styles/global.scss

@@ -15,7 +15,9 @@
 
 @import "./_colors.scss";
 @import "./_layouts.scss";
+@import "./common.scss";
 @import "./components.scss";
+@import "./popups.scss";
 @import "./mixins.scss";
 
 @font-face {

packages/theme/styles/popups.scss

@@ -0,0 +1,151 @@
+//
+// Copyright © 2021 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Popups */
+.antiPopup {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background-color: var(--theme-button-bg-focused);
+  border: 1px solid var(--theme-button-border-enabled);
+  border-radius: .75rem;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+  user-select: none;
+
+  .ap-space {
+    flex-shrink: 0;
+    height: .5rem;
+  }
+  .ap-scroll {
+    flex-grow: 1;
+    margin: 0 .25rem;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    &::-webkit-scrollbar-track { margin: 0; }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--theme-bg-accent-color);
+      &:hover { background-color: var(--theme-menu-divider); }
+    }
+  }
+  .ap-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0 .25rem;
+    height: 100%;
+  }
+  .ap-menuItem {
+    justify-content: start;
+    padding: .5rem;
+    color: var(--theme-content-color);
+    border-radius: .5rem;
+    text-align: left;
+    cursor: pointer;
+
+    &.ap-woScroll { margin: 0 .5rem; }
+    &.selected { background-color: var(--theme-button-bg-hovered); }
+    &.empty {
+      display: flex;
+      justify-content: center;
+      font-style: italic;
+      color: var(--theme-content-trans-color);
+      cursor: default;
+
+      &:hover {
+        color: var(--theme-content-trans-color);
+        background-color: transparent;
+      }
+    }
+
+    &:hover {
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-bg-hovered);
+    }
+    &:focus {
+      color: var(--theme-content-accent-color);
+      background-color: var(--theme-button-bg-pressed);
+      z-index: 1;
+    }
+  }
+  .ap-check {
+    margin-left: 1rem;
+    width: 1rem;
+    height: 1rem;
+  }   
+
+  &-withHeader {
+    .ap-header {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      margin: 0 .5rem;
+      text-align: left;
+  
+      .ap-caption {
+        margin: .5rem 0 0 .75rem;
+        font-size: .75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: var(--theme-content-dark-color);
+      }    
+    }
+  }
+
+  &-withTitle {
+    .ap-title {
+      flex-shrink: 0;
+      margin: 1rem 1rem .25rem;
+      font-weight: 500;
+      color: var(--theme-caption-color);
+    }
+    .ap-header {
+      margin: .25rem 1rem 0;
+      .ap-caption {
+        margin: .5rem 0 0 0;
+      }
+    }
+  }  
+
+  &-withCategory {
+    .ap-category {
+      flex-shrink: 0;
+      overflow-x: auto;
+      display: flex;
+      margin: 1rem 1rem .25rem;
+
+      .ap-categoryItem {
+        margin: .25rem;
+        color: var(--theme-content-trans-color);
+        cursor: pointer;
+
+        &.selected { color: var(--theme-caption-color); }
+        &:hover { color: var(--theme-content-accent-color); }
+      }
+
+      &::-webkit-scrollbar:horizontal { height: .125rem; }
+      &::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
+    }
+    .ap-header {
+      margin: .25rem 1rem 0;
+      .ap-caption {
+        margin: .5rem 0 0 0;
+      }
+    }
+  }  
+}
+
+// Remove highlights table rows and hide dots in popups
+.popup .tr-body:hover, .popup-tooltip .tr-body:hover { background-color: transparent !important; }
+.popup-tooltip .tr-body .menuRow { visibility: hidden !important; }

packages/ui/src/components/TooltipInstance.svelte

@@ -145,8 +145,8 @@
   <clipPath id="nub-border"><path d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z" /></clipPath>
 </svg>
 {#if $tooltip.component}
-  <div class="popup" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
+  <div class="popup-tooltip" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
-    {#if $tooltip.label}<div class="header"><Label label={$tooltip.label} /></div>{/if}
+    {#if $tooltip.label}<div class="fs-title mb-4"><Label label={$tooltip.label} /></div>{/if}
     <svelte:component this={$tooltip.component} {...$tooltip.props} />
   </div>
   <div bind:this={nubHTML} class="nub {nubDirection ?? ''}" />
@@ -157,14 +157,7 @@
 {/if}
 
 <style lang="scss">
-  .header {
+  .popup-tooltip {
-    margin-bottom: 1.5rem;
-    font-weight: 500;
-    font-size: 1rem;
-    color: var(--theme-caption-color);
-  }
-
-  .popup {
     overflow: hidden;
     position: fixed;
     display: flex;

plugins/contact-resources/src/components/Contacts.svelte

@@ -54,7 +54,7 @@
 </div>
 
 <div class="container">
-  <div class="panel-component">
+  <div class="antiPanel-component">
     <ScrollBox vertical stretch noShift>
       {#await tableDescriptor then descr}
         {#if descr}
@@ -77,17 +77,6 @@
     height: 100%;
     padding-bottom: 1.25rem;
     margin-top: 2rem;
-
-    .panel-component {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      margin-right: 1rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }
   }
   .contacts-header-container {
     display: grid;

plugins/inventory-resources/src/components/Categories.svelte

@@ -53,7 +53,7 @@
 </div>
 
 <div class="container">
-  <div class="panel-component">
+  <div class="antiPanel-component">
     <ScrollBox vertical stretch noShift>
       <HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} />
     </ScrollBox>
@@ -65,17 +65,6 @@
     display: flex;
     height: 100%;
     padding-bottom: 1.25rem;
-
-    .panel-component {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      margin-right: 1rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }
   }
   .categories-header-container {
     display: grid;

plugins/inventory-resources/src/components/Products.svelte

@@ -60,7 +60,7 @@
 </div>
 
 <div class="container">
-  <div class="panel-component">
+  <div class="antiPanel-component">
     <ScrollBox vertical stretch noShift>
       {#await tableDescriptor then descr}
         {#if descr}
@@ -83,11 +83,10 @@
     height: 100%;
     padding-bottom: 1.25rem;
 
-    .panel-component {
+    .antiPanel-component {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-right: 1rem;
       height: 100%;
       border-radius: 1.25rem;
       background-color: var(--theme-bg-color);

plugins/lead-resources/src/components/Customers.svelte

@@ -47,7 +47,7 @@
 </div>
 
 <div class="container">
-  <div class="panel-component">
+  <div class="antiPanel-component">
     <ScrollBox vertical stretch noShift>
       {#await tableDescriptor then descr}
         {#if descr}
@@ -68,17 +68,6 @@
     display: flex;
     height: 100%;
     padding-bottom: 1.25rem;
-
-    .panel-component {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      margin-right: 1rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }
   }
   .customers-header-container {
     display: grid;

plugins/recruit-resources/src/components/Candidates.svelte

@@ -55,7 +55,7 @@
 </div>
 
 <div class="container">
-  <div class="panel-component">
+  <div class="antiPanel-component">
     <ScrollBox vertical stretch noShift>
       {#await tableDescriptor then descr}
         {#if descr}
@@ -76,17 +76,6 @@
     display: flex;
     height: 100%;
     padding-bottom: 1.25rem;
-
-    .panel-component {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      // margin-right: 1rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }
   }
   .candidates-header-container {
     display: grid;

plugins/setting-resources/src/components/Settings.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <div class="container">
-<div class="panel-navigator">
+<div class="antiPanel-navigator filled indent">
   <div class="flex-between navheader-container">
     <span class="fs-title overflow-label">
       <Label label={setting.string.Settings}/>
@@ -56,7 +56,7 @@
   </div>
 </div>    
 
-<div class="panel-component">
+<div class="antiPanel-component filled">
   {#if category}
     <Component is={category.component} />
   {/if}
@@ -69,32 +69,12 @@
     height: 100%;
     background: var(--theme-menu-color); 
    
-    .panel-navigator {
+    .signout {
-      display: flex;
+      display: flex;        
-      flex-direction: column;
+      flex-direction: column-reverse;
-      margin-right: 1rem;
-      min-width: 18rem;
-      width: 18rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-
-      .signout {
-        display: flex;        
-        flex-direction: column-reverse;
-        flex-grow: 1;
-        margin-bottom: 2rem;
-      }
-    }
-    .panel-component {
       flex-grow: 1;
-      display: flex;
+      margin-bottom: 2rem;
-      flex-direction: column;
+    }
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }   
   }
   .navheader-container {
     padding: 0 1.75rem;

plugins/task-resources/src/components/state/DoneStateEditor.svelte

@@ -65,14 +65,13 @@
   {#if state}
     <DoneStatePresenter value={state} showTitle />
   {:else}
-    <div class="color"/>
+    <div class="color background-card-divider"/>
     <Label label={task.string.NoDoneState} />
   {/if}
 </div>
 <style lang="scss">
   .color {
-    border: 0.5px #ffffff55 solid;
+    margin-right: .75rem;
-    margin-right: 0.75rem;
     width: .5rem;
     height: .5rem;
     border-radius: .5rem;

plugins/task-resources/src/components/state/DoneStatesPopup.svelte

@@ -42,58 +42,36 @@
   }
 </script>
 
-<div class="flex-col statuses-container">
+<div class="antiPopup">
+  <div class="ap-space" />
   {#each states as state}
-    <div
+    <button
-      class="flex-row-center state"
+      class="ap-menuItem ap-woScroll flex-row-center"
       on:click={() => {
         dispatch('close', state)
       }}
     >
       <div class="color" style="background-color: {getColor(state._class)}" />
       {state.title}
-    </div>
+    </button>
   {/each}
-  <div
+  <button
-      class="flex-row-center state"
+    class="ap-menuItem ap-woScroll flex-row-center"
-      on:click={() => {
+    on:click={() => {
-        dispatch('close', null)
+      dispatch('close', null)
-      }}
+    }}
-    >
+  >
-      <div class="color" style="border: 0.5px #ffffff55 solid"/>
+    <div class="color background-card-divider" />
-      <Label label={task.string.NoDoneState}/>
+    <Label label={task.string.NoDoneState}/>
-    </div>
+  </button>
+  <div class="ap-space" />
 </div>
 
 <style lang="scss">
-  .statuses-container {
+  .color {
-    padding: 0.5rem;
+    margin-right: .75rem;
-    max-height: 100%;
+    width: .5rem;
-    min-width: 10rem;
+    height: .5rem;
-    color: var(--theme-caption-color);
+    border-radius: .5rem;
-    background-color: var(--theme-button-bg-focused);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.75rem;
-    user-select: none;
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
-
-    .state {
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--theme-button-bg-hovered);
-      }
-      .color {
-        margin-right: 0.75rem;
-        width: .5rem;
-        height: .5rem;
-        border-radius: .5rem;
-      }
-    }
-  }
-  .not-done {
-    margin-left: 1.25rem;
   }
 </style>

plugins/view-resources/src/components/Table.svelte

@@ -234,12 +234,11 @@
     align-items: center;
     .menuRow {
       visibility: hidden;
-      margin-left: 0.5rem;
+      margin-left: .5rem;
-      opacity: 0.6;
+      opacity: .6;
       cursor: pointer;
-      &:hover {
+      
-        opacity: 1;
+      &:hover { opacity: 1; }
-      }
     }
   }
   .checkCell {

plugins/workbench-resources/src/components/Workbench.svelte

@@ -136,8 +136,8 @@
       <path d="M0,0v45h45V0H0z M29.5,20c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S32.3,20,29.5,20z" />
     </clipPath>
   </svg>
-  <div class="container">
+  <div class="workbench-container">
-    <div class="panel-app" on:click={toggleNav}>
+    <div class="antiPanel-application" on:click={toggleNav}>
       <div class="flex-col">
         <ActivityStatus status="active" />
         <AppItem
@@ -162,14 +162,14 @@
       </div>
     </div>
     {#if currentApplication && navigatorModel && navigator && visibileNav}
-      <div class="panel-navigator antiNav">
+      <div class="antiPanel-navigator filled indent">
         {#if currentApplication}
           <NavHeader label={currentApplication.label} />
         {/if}
         <Navigator model={navigatorModel} />
       </div>    
     {/if}
-    <div class="panel-component">
+    <div class="antiPanel-component filled indent">
       {#if currentApplication && currentApplication.component}
         <Component is={currentApplication.component} />
       {:else}
@@ -191,41 +191,9 @@
 {/if}
 
 <style lang="scss">
-  .container {
+  .workbench-container {
     display: flex;
     height: 100%;
     padding-bottom: 1.25rem;
-
-    .panel-app {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      min-width: 5rem;
-      width: 5rem;
-      height: 100%;
-      border-radius: 1.25rem;
-    }
-    .panel-navigator {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      margin-right: 1rem;
-      min-width: 18rem;
-      width: 18rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-    }
-    .panel-component {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      margin-right: 1rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-bg-color);
-      overflow: hidden;
-    }
   }
 </style>