UI updates

packages/theme/styles/_colors.scss

@@ -124,7 +124,7 @@
   --theme-refinput-border: rgba(255, 255, 255, .1);
 
   // Be aware to update defineAlpha() function in colors.ts
-  --theme-bg-color: #1A1A28;
+  --theme-bg-color: #14141f;
   --theme-bg-accent-color: rgba(0, 0, 0, .08);
   --theme-bg-dark-color: rgba(0, 0, 0, .2);
   --theme-back-color: #0f0f18;
@@ -188,6 +188,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #FFFFFF99;
   --theme-panel-color: #1A1A28;
+  --theme-workbench-color: #1A1A28;
   --theme-calendar-today-color: #fff;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
@@ -447,6 +448,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #205DC2;
   --theme-panel-color: #FFFFFF;
+  --theme-workbench-color: #FFFFFF;
   --theme-calendar-today-color: #000;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);

packages/theme/styles/common.scss

@@ -113,8 +113,9 @@
     flex-direction: column;
     min-width: var(--app-panel-width);
     width: var(--app-panel-width);
-    height: 100%;
-    border-right: 1px solid var(--theme-navpanel-divider);
+    margin: var(--spacing-1);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--medium-BorderRadius) !important;
   }
   &.horizonatl {
     min-height: var(--app-panel-width);
@@ -130,7 +131,6 @@
 .antiPanel-navigator,
 .antiPanel-component {
   display: flex;
-  height: 100%;
   min-height: 0;
 
   &.header { background-color: var(--theme-comp-header-color); }
@@ -142,7 +142,12 @@
 .antiPanel-navigator {
   position: relative;
 
-  &:not(.second) { background-color: var(--theme-navpanel-color); }
+  &:not(.second) { 
+    background-color: var(--theme-workbench-color); 
+    margin-right: var(--spacing-2);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--small-focus-BorderRadius);
+  }
   &:not(.right) {
     min-width: 12.5rem;
     max-width: 22.5rem;

packages/theme/styles/components.scss

@@ -18,18 +18,19 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  height: 100%;
   min-height: 0;
   min-width: 0;
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
+  padding: var(--spacing-2);
 
   &:not(.modal) {
     background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
   }
   &.modal {
     overflow: hidden;
     background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
+    margin-left: var(--spacing-2);
   }
   &.beforeAside {
     border-right: none;

packages/theme/styles/global.scss

@@ -77,7 +77,7 @@
   scrollbar-color: var(--theme-navpanel-divider) transparent;
   scrollbar-width: none;
   --body-font-size: .875rem;
-  --status-bar-height: 36px;
+  --status-bar-height: 42px;
   --status-bar-normal-height: 36px;
   --panel-aside-width: 25rem; // 20rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;

packages/theme/styles/panel.scss

@@ -20,7 +20,6 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  background-color: var(--theme-navpanel-color); // var(--global-surface-01-BackgroundColor);
   border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;
 
   // .antiPanel-navigator {

packages/ui/src/components/internal/Root.svelte

@@ -280,6 +280,8 @@
       font-size: 0.75rem;
       line-height: 150%;
       background-color: var(--theme-statusbar-color);
+      margin: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
+      border-radius: var(--medium-focus-BorderRadius);
       // border-bottom: 1px solid var(--theme-navpanel-divider);
 
       .history-box {

plugins/time-resources/src/components/PlanView.svelte

@@ -86,10 +86,10 @@
 
 {#if $deviceInfo.navigator.visible}
   <ToDosNavigator bind:mode bind:tag bind:currentDate />
-  <Separator name={'time'} float={$deviceInfo.navigator.float} index={0} color={'var(--theme-divider-color)'} />
+  <Separator name={'time'} float={$deviceInfo.navigator.float} index={0} separatorSize={0} />
 {/if}
 <div
-  class="flex-col w-full clear-mins mobile-wrapper"
+  class="antiPanel-PlanView flex-col clear-mins"
   class:left-divider={!$deviceInfo.navigator.visible}
   bind:this={mainPanel}
 >
@@ -105,3 +105,15 @@
     on:dragDrop={drop}
   />
 {/if}
+
+<style lang="scss">
+  .antiPanel-PlanView {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background-color: var(--theme-workbench-color);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--small-focus-BorderRadius);
+    min-width: 320px;
+  }
+</style>

plugins/time-resources/src/components/PlanningCalendar.svelte

@@ -175,7 +175,7 @@
 </script>
 
 <div
-  class="hulyComponent modal"
+  class="hulyComponent modal margin-left-2"
   bind:this={element}
   use:resizeObserver={(element) => {
     showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400

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

@@ -941,6 +941,14 @@
         <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
       {/if}
       {#if mainNavigator}
+        <Separator
+          name={'workbench'}
+          float={$deviceInfo.navigator.float}
+          index={0}
+          color={'transparent'}
+          separatorSize={0}
+          short
+        />
         <div
           class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
             ? 'portrait'
@@ -1088,23 +1096,18 @@
     min-width: 0;
     min-height: 0;
     width: 100%;
-    height: 100%;
-    background-color: var(--theme-panel-color);
     touch-action: none;
+    margin: var(--spacing-1);
 
     &.inner {
-      background-color: var(--theme-navpanel-color);
-
       &.rounded {
-        border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+        border-radius: var(--medium-BorderRadius);
       }
     }
     &:not(.inner)::after {
       position: absolute;
       content: '';
       inset: 0;
-      border: 1px solid var(--theme-divider-color);
-      border-radius: var(--medium-BorderRadius);
       pointer-events: none;
     }
     .antiPanel-application.horizontal {
@@ -1114,6 +1117,7 @@
     .antiPanel-application:not(.horizontal) {
       border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
       border-right: none;
+      background-color: var(--theme-panel-color);
     }
   }
 

plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte

@@ -158,7 +158,6 @@
     min-width: 0;
     min-height: 0;
     background-color: var(--theme-panel-color);
-
     border-left: none;
   }
 

plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte

@@ -98,10 +98,10 @@
     flex-direction: column;
     padding-block: var(--spacing-2);
     height: 100%;
-    width: 3.5rem;
+    width: var(--app-panel-width);
     min-width: 3.5rem;
     max-width: 3.5rem;
-    background-color: var(--theme-navpanel-color);
+    background-color: var(--theme-workbench-color);
     border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
     overflow-y: auto;
   }