Update navigation css [SCI-8438]

app/assets/stylesheets/experiment/canvas.scss

@@ -45,9 +45,6 @@
   }
 }
 
-#canvas-container {
-  margin: 0 -28px;
-}
 
 .canvas-preview-img,
 .canvas-preview-rect {

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -9,13 +9,11 @@
 
 .content-pane.my-modules-protocols-index {
   background-color: $color-alto;
-  margin-left: calc(-1rem - 2px) !important;
   padding: 0 1rem 1rem !important;
-  width: calc(100% + 2rem);
 
   .title-row {
-    margin-left: -1rem !important;
-    width: calc(100% + 2rem) !important;
+    margin-left: -1rem;
+    width: calc(100% + 2rem);
   }
 
   .my-module-position-container {

app/assets/stylesheets/navigation/general.scss

@@ -1,8 +1,8 @@
 .sci--layout {
   --breadcrumbs-navigation-height: 56px;
-  --left-navigation-width: 204px;
+  --left-navigation-width: 192px;
   --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
-  --navigator-navigation-width: 216px;
+  --navigator-navigation-width: 240px;
   --top-navigation-height: 52px;
   display: grid;
   grid-template-areas: "top top top"
@@ -81,10 +81,11 @@
 
   .sci--layout-content {
     grid-area: content;
+    padding: 0 1.5rem;
     width: 100%;
 
     .container-fluid {
-      padding: 0 1em; // override bootstrap and old pages support
+      padding: 1em; // override bootstrap and old pages support
     }
   }
 }

app/assets/stylesheets/navigation/left_menu.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 1rem 1.5rem 1rem 0;
+  padding: 1rem 0;
   width: 100%;
 
   .sci--layout--menu-item {
@@ -22,6 +22,10 @@
     text-decoration: none;
     width: 100%;
 
+    &:not([data-active='true']):hover {
+      background-color: var(--sn-super-light-grey);
+    }
+
     .fas {
       display: inline-block;
       font-size: 1.125rem;

app/assets/stylesheets/shared/content_pane.scss

@@ -5,11 +5,9 @@
   --content-header-size: 9.5em;
   background-color: $color-white;
   margin: 20px 0;
-  padding: 25px 20px;
 
   &.flexible {
     margin: 0;
-    padding: 0 1em;
   }
 
   .content-header {
@@ -24,12 +22,9 @@
     .title-row {
       align-items: center;
       background: $color-white;
-      border-bottom: $border-tertiary;
       display: flex;
       height: 4em;
-      margin-left: -2em;
-      padding: 0 2em;
-      width: calc(100% + 4em);
+      padding: 0;
 
       h1 {
         align-items: center;
@@ -180,7 +175,6 @@
 
     .toolbar-row {
       background: $color-white;
-      border-bottom: $border-tertiary;
       margin-left: -2em;
       padding: 1em 0;
       padding-left: 2em;

app/javascript/packs/application.js

@@ -7,10 +7,10 @@ $(document).on('click', '.sci--layout--menu-item[data-submenu=true]', (e) => {
   const submenu = item.next();
   e.preventDefault();
   if (submenu.attr('data-collapsed') === 'true') {
-    caret.removeClass('fa-caret-up').addClass('fa-caret-down');
+    caret.removeClass('fa-caret-right').addClass('fa-caret-down');
     submenu.attr('data-collapsed', false);
   } else {
-    caret.removeClass('fa-caret-down').addClass('fa-caret-up');
+    caret.removeClass('fa-caret-down').addClass('fa-caret-right');
     submenu.attr('data-collapsed', true);
   }
 });

app/javascript/vue/navigation/navigator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-[216px] h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
+  <div class="w-[216px] ml-6 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
     <div class="px-3 py-2 flex items-center relative leading-4">
       <i class="sn-icon sn-icon-navigator"></i>
       <div class="font-bold text-base pl-2">

app/views/layouts/fluid.html.erb

@@ -1,5 +1,5 @@
 <% content_for :content do %>
-  <div class="container-fluid <%= yield :container_class %>" id="fluid-content">
+  <div class="<%= yield :container_class %>" id="fluid-content">
     <%= yield %>
   </div>
 <% end %>

app/views/shared/navigation/_left.html.erb

@@ -3,7 +3,7 @@
     <%= link_to item[:url], title: item[:name], class:"sci--layout--menu-item", data: { active: item[:submenu].blank? && item[:active], disabled: current_user.teams.blank?, submenu: item[:submenu].any? } do %>
       <i class="fas <%= item[:icon] %>"></i>
       <%= item[:name] %>
-      <i class="fas <%= item[:active] ? 'fa-caret-down' : 'fa-caret-up' %> show-submenu"></i>
+      <i class="fas <%= item[:active] ? 'fa-caret-down' : 'fa-caret-right' %> show-submenu"></i>
     <% end %>
     <% if item[:submenu].any? %>
     <div class="sci--layout--menu-submenu" data-id="<%= index %>" data-collapsed="<%= !item[:active] %>" style="--submenu-items:<%= item[:submenu].length %>">