dashboard-shell-shell 0.0.1000000000001128 → 0.0.1000000000001133

package/assets/styles/base/_mixins.scss

@@ -159,5 +159,5 @@
 @mixin focus-outline {
   // Focus for form like elements (not to be confused with basic :focus style)
   // we need to use !important because it needs to superseed other classes that might impact outlines
-  // outline: 2px solid var(--primary-keyboard-focus);
+  outline: 2px solid var(--primary-keyboard-focus);
 }

package/assets/styles/global/_button.scss

@@ -1,4 +1,4 @@
-$btn-padding: 0 10px;
+$btn-padding: 0 10px 0 10px;
 $btn-sm-padding: 0 7px 0 7px;
 $btn-height: 32px;
 $btn-sm-height: 32px;
@@ -20,14 +20,13 @@ button,
   -ms-user-select: none;
   user-select: none;
   border: 0;
-  padding: $btn-padding;
+  // padding: $btn-padding;
   border-radius: var(--border-radius);
-  // color: var(--lightest);
+  color: var(--lightest);
   line-height: $btn-height !important;
   height: $btn-height !important;
   min-width: 100px;
   justify-content: center;
-  
 
   > .icon:not(:only-child) {
     margin-right: 6px;
@@ -35,7 +34,7 @@ button,
 
   &:hover {
     text-decoration: none;
-    // color: var(--lightest);
+    color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -43,10 +42,6 @@ button,
   }
 }
 
-.bg-primary {
-  color: var(--lightest);
-}
-
 //icon button
 .icon-btn {
   padding: 0;
@@ -68,7 +63,7 @@ button,
   padding: $btn-sm-padding;
   min-height: $btn-sm-height;
   line-height: 32px;
-  min-width: 100px;
+  width: 100px;
 }
 
 //btn roles
@@ -99,11 +94,10 @@ button,
   // border: solid 1px var(--primary);
   border: solid 1px #d9d9d9;
   line-height: $btn-height - 2px;
-  min-width: 100px;
+  width: 100px;
 
   &:hover, &._hover {
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
+    color: var(--lightest) !important;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
   }
 
@@ -111,8 +105,7 @@ button,
     background: transparent;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
     // background-color: var(--primary-hover-bg);
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
+    color: var(--lightest) !important;
     // color: var(--primary-text) !important;
   }
 
@@ -169,8 +162,8 @@ button,
 }
 
 .role-multi-action {
-  //  background: var(--accent-btn);
-  //  border: solid thin var(--primary);
+   // background: var(--accent-btn);
+   border: solid thin var(--primary);
    color: var(--primary) !important;
    border-radius: 2px;
    min-width: 32px;

package/assets/styles/global/_form.scss

@@ -20,11 +20,11 @@ TEXTAREA,
   box-sizing: border-box;
   width: 100%;
   // padding: 4px 11px;
+  // background-color: var(--input-bg);
   // border-radius: var(--border-radius);
+  // border: solid var(--border-width) var(--input-border);
   
   color: var(--input-text);
-  background-color: var(--input-bg);
-  border: solid var(--border-width) var(--input-border);
 
 
   @include input-status-color;

package/assets/styles/global/_labeled-input.scss

@@ -10,7 +10,7 @@
 
   &.compact-input {
     min-height: $unlabeled-input-height;
-    // padding: 0 10px;
+    padding: 0 10px;
 
     INPUT.no-label {
       line-height: $input-line-height;
@@ -74,7 +74,7 @@
     padding: 0 0 0 0;
     // line-height: calc(#{$input-line-height} + 1px);
     line-height: calc(29px + 1px);
-    // border: solid var(--border-width) var(--input-border);
+    border: solid var(--border-width) var(--input-border);
     padding: 0px 11px;
     box-sizing: border-box;
     border-radius: 2px;
@@ -123,10 +123,7 @@
       font-weight: normal;
       line-height: 1;
       text-align: center;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      // background-color: #fff;
+      background-color: #fff;
     }
   }
 

package/assets/styles/global/_select.scss

@@ -2,7 +2,9 @@
   cursor: text;
   padding: 0;
   width: 100%;
-
+ &:hover{
+  box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+ }
   .selected {
     padding-top: $input-padding-lg;
   }
@@ -21,7 +23,7 @@
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
-  min-height: 32px;
+  height: 32px;
   width: $input-width;
 
   .required {
@@ -104,8 +106,7 @@
       width: unset !important;
 
       &:not(:only-child) {
-        margin-bottom: 2px;
-        margin-top: 2px;
+        margin-bottom: 3px;
       }
     }
   }
@@ -196,6 +197,6 @@
   }
 
   .labeled-tooltip .status-icon {
-    // top: $input-padding-sm;
+    top: $input-padding-sm;
   }
 }

package/assets/styles/global/_tooltip.scss

@@ -126,7 +126,6 @@
   border-radius: var(--border-radius-lg);
 
   .v-popper__inner {
-    border-radius: 4px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
@@ -147,9 +146,7 @@
 }
 
 .v-popper__popper.v-popper--theme-dropdown {
-  border-radius: 4px;
   z-index: z-index('tooltip');
-  border: 1px solid #d9d9d9 !important;
 
   &.containerLogsDropdown, &.fleet-summary-tooltip{
     .v-popper__arrow-container {
@@ -206,8 +203,4 @@
   .v-popper__inner {
     padding: 0px;
   }
-}
-
-// .v-popper__arrow-container {
-//   display: none; 
-// }
+}

package/assets/styles/themes/_dark.scss

@@ -38,8 +38,6 @@
 
   --slate: #{$slate};
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};

package/assets/styles/themes/_light.scss

@@ -6,7 +6,7 @@ $darkest   : #333;
 $darker    : #333;
 
 //light disabled
-$dark      : #ffffff;
+$dark      : #B6B6C2;
 
 //light border and buttons
 $medium    : #d7d7d7;
@@ -30,7 +30,7 @@ $secondary       : $darker;
 $link            : #1890FF;
 
 // Status colors
-$success         : #1890FF;
+$success         : #5D995D;
 $warning         : #DAC342;
 $error           : #F64747;
 // $error           : #A30014;
@@ -112,8 +112,6 @@ BODY, .theme-light {
       }
   }
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -339,7 +337,6 @@ BODY, .theme-light {
   --nav-hover                  : #{$medium};
   --nav-hover-color            :#1890FF;
   --nav-expander-hover         : #{darken($medium, 10%)};
-  --nav-icon-badge-bg          : #{$dark};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
 

package/assets/styles/vendor/vue-select.scss

@@ -321,7 +321,6 @@ $transition-duration: 150ms;
     }
     .vs__selected {
       color: var(--input-text);
-      background-color: rgba(0, 0, 0, 0);
     }
   }
 
@@ -331,7 +330,7 @@ $transition-duration: 150ms;
   }
   .vs__dropdown-toggle {
     background-color: var(--input-bg);
-    border: none !important;
+    border: none;
     padding: none;
     border-radius: var(--border-radius);
     border: 1px solid var(--dropdown-border);

package/components/ActionDropdown.vue

@@ -212,7 +212,6 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
-      border-radius: 4px;
 
       LI {
         padding: 10px;

package/components/ActionMenuShell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 
@@ -83,7 +83,6 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
 const options = computed(() => store.getters['action-menu/optionsArray']);
 
 const menuOptions = () => {
-
   if (props.customActions && props.customActions.length > 0) {
     return props.customActions;
   }
@@ -91,9 +90,6 @@ const menuOptions = () => {
   return options.value;
 };
 
-onMounted(() => {
-})
-
 </script>
 
 <template>
@@ -106,6 +102,5 @@ onMounted(() => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
-    :showIcon="false"
   />
 </template>

package/components/BrandImage.vue

@@ -79,56 +79,37 @@ export default {
     },
 
     pathToBrandedImage() {
-
-      console.log(this.fileName, ' this.fileName;')
-
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
         if (this.theme === 'dark' && this.uiLogoDark) {
-
-          console.log(this.uiLogoDark, ' this.uiLogoDark;')
-          
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
-          console.log(this.uiLogoLight, ' this.uiLogoLight;')
-
           return this.uiLogoLight;
         }
       }
 
       if (this.fileName === 'banner.svg') {
         if (this.theme === 'dark' && this.uiBannerDark) {
-          console.log(this.uiBannerDark, ' this.uiBannerDark;')
-
           return this.uiBannerDark;
         }
 
         if (this.uiBannerLight) {
-          console.log(this.uiBannerLight, ' this.uiBannerLight;')
-
           return this.uiBannerLight;
         }
       }
 
       if (this.fileName === 'login-landscape.svg') {
         if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
-          console.log(this.uiLoginBackgroundDark, ' this.uiLoginBackgroundDark;')
-
           return this.uiLoginBackgroundDark;
         }
 
         if (this.uiLoginBackgroundLight) {
-          console.log(this.uiLoginBackgroundLight, ' this.uiLoginBackgroundLight;')
-
           return this.uiLoginBackgroundLight;
         }
       }
 
       if (!this.brand) {
-
-        console.log(this.defaultPathToBrandedImage, ' this.defaultPathToBrandedImage;')
-
         return this.defaultPathToBrandedImage;
       } else {
         if (this.theme === 'dark' || this.dark) {
@@ -140,8 +121,6 @@ export default {
           return require(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
         } catch {}
 
-        console.log(this.defaultPathToBrandedImage, ' this.defaultPathToBrandedImage;')
-
         return this.defaultPathToBrandedImage;
       }
     },

package/components/ClusterIconMenu.vue

@@ -159,7 +159,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
+    color: var(--default-active-text);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

package/components/CodeMirror.vue

@@ -369,7 +369,6 @@ export default {
       }
 
       .CodeMirror-lines {
-        background-color: var(--input-bg);
         color: var(--input-text);
         padding: 0;
 

package/components/CruResource.vue

@@ -887,7 +887,6 @@ form.create-resource-container .cru {
   }
 }
 .cru {
-  height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;

package/components/CruResourceFooter.vue

@@ -120,7 +120,7 @@ export default {
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 10px;
+    margin-right: 10px;
   }
 }
 

package/components/IndentedPanel.vue

@@ -4,17 +4,23 @@ export default {};
 
 <template>
   <div
-    class="indented-panels"
+    class="indented-panel"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panels {
+  .indented-panel {
     height: 100%;
-    width: 100%;
-    padding: 0 20px;
+    width: 90%;
+    margin-left: 5%;
   }
 
+  @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+    .indented-panel {
+      margin: 0 20px;
+      width: initial;
+    }
+  }
 </style>

package/components/PromptRemove.vue

@@ -460,8 +460,8 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 100%;
-      // margin-left: 3px;
+      width: 90%;
+      margin-left: 3px;
     }
 
     .actions {