dashboard-shell-shell 0.0.3 → 0.0.1000000000001124

package/assets/images/action.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1960 -15 )">
+    <path d="M 4.8287499999999 2.354999999999997  L 6.447499999999991 3.571249999999999  C 6.944234952397892 3.296336798844159  7.471337243122889 3.0802940772178857  8.018125000000055 2.927500000000002  L 8.398124999999936 0.9375  L 11.7493750000001 0.9375  L 12.035000000000082 2.941875000000003  C 12.581875000000082 3.099375000000002  13.106250000000045 3.319375000000001  13.599999999999909 3.5974999999999966  L 15.275624999999991 2.458750000000002  L 17.64562500000011 4.828749999999999  L 16.429374999999936 6.447499999999998  C 16.704375000000027 6.943750000000001  16.920624999999973 7.469999999999999  17.07312499999989 8.018124999999998  L 19.0631249999999 8.3975  L 19.0631249999999 11.748750000000001  L 17.058749999999918 12.034374999999997  C 16.901757589331055 12.579743540043523  16.681731272105935 13.104954119959451  16.403125000000045 13.599375000000002  L 17.54187499999989 15.274999999999999  L 15.171875 17.645  L 13.553124999999909 16.428749999999997  C 13.056874999999991 16.70375  12.5306250000001 16.919999999999998  11.982500000000073 17.072499999999998  L 11.603125000000091 19.0625  L 8.251874999999927 19.0625  L 7.966249999999945 17.058124999999997  C 7.42088145995649 16.9011325893311  6.895670880040598 16.681106272105932  6.401249999999891 16.4025  L 4.724999999999909 17.541249999999998  L 2.355000000000018 15.17125  L 3.5712499999999636 13.552500000000002  C 3.2963316621476224 13.055767511417464  3.0802886889528054 12.52866460691385  2.927500000000009 11.981875000000002  L 0.9375 11.6025  L 0.9375 8.251249999999999  L 2.941874999999982 7.965625000000003  C 3.099375000000009 7.419375000000002  3.3193750000000364 6.894374999999997  3.597500000000082 6.400624999999998  L 2.458750000000009 4.725000000000001  L 4.8287499999999 2.354999999999997  Z M 10.916249999999991 3.958750000000002  L 10.664375000000064 2.1868750000000006  L 9.431250000000091 2.1868750000000006  L 9.09375 3.958750000000002  L 8.690624999999955 4.046875  C 7.99908602983669 4.198277484319469  7.339492954772595 4.469899520362475  6.741874999999936 4.849375000000002  L 6.376874999999927 5.080624999999998  L 4.945625000000064 4.005625000000002  L 4.073750000000018 4.877499999999998  L 5.087500000000091 6.369999999999997  L 4.865000000000009 6.716875000000002  C 4.482751297972072 7.31276074731386  4.207964337869953 7.971064842647195  4.053124999999909 8.661875000000002  L 3.959374999999909 9.083750000000002  L 2.1875 9.335625  L 2.1875 10.568125000000002  L 3.958750000000009 10.90625  L 4.046875 11.309375000000003  C 4.198388963584193 12.000879103122479  4.47000322511758 12.660453298964391  4.849375000000009 13.258125  L 5.080625000000055 13.623125000000002  L 4.005625000000009 15.054375  L 4.877500000000055 15.92625  L 6.369999999999891 14.912500000000001  L 6.716875000000073 15.135000000000002  C 7.31276074731386 15.517248702027885  7.971064842647138 15.792035662130075  8.661875000000009 15.946874999999999  L 9.083750000000009 16.040625  L 9.335624999999936 17.8125  L 10.568125000000009 17.8125  L 10.90625 16.04125  L 11.309375000000045 15.953125  C 12.000879103122543 15.801611036415771  12.660453298964285 15.529996774882413  13.258125000000064 15.150625000000002  L 13.623125000000073 14.919375000000002  L 15.054374999999936 15.994375000000002  L 15.926249999999982 15.122500000000002  L 14.912499999999909 13.629999999999995  L 15.134999999999991 13.283124999999998  C 15.517248702027928 12.68723925268614  15.792035662130047 12.028935157352805  15.946875000000091 11.338124999999998  L 16.04062500000009 10.916249999999998  L 17.8125 10.664375  L 17.8125 9.431249999999999  L 16.04124999999999 9.093125  L 15.953125 8.689999999999998  C 15.801611036415807 7.998495896877522  15.52999677488242 7.338921701035609  15.150624999999991 6.741250000000001  L 14.919374999999945 6.376249999999999  L 15.994374999999991 4.945  L 15.122499999999945 4.073124999999997  L 13.63000000000011 5.086874999999999  L 13.283124999999927 4.8643749999999955  C 12.687215183188528 4.482172208106064  12.028919443671839 4.207388735859226  11.338124999999991 4.052500000000002  L 10.916249999999991 3.958750000000002  Z M 10 6.25  C 12.071067811865532 6.25  13.75 7.9289321881345245  13.75 10  C 13.75 12.071067811865476  12.071067811865532 13.75  10 13.75  C 7.928932188134468 13.75  6.25 12.071067811865476  6.25 10  C 6.25 7.9289321881345245  7.928932188134468 6.25  10 6.25  Z M 10 7.5  C 8.619288125423054 7.5  7.5 8.619288125423019  7.5 10  C 7.5 11.380711874576981  8.619288125423054 12.5  10 12.5  C 11.380711874576946 12.5  12.5 11.380711874576981  12.5 10  C 12.5 8.619288125423019  11.380711874576946 7.5  10 7.5  Z " fill-rule="nonzero" fill="#555555" stroke="none" transform="matrix(1 0 0 1 1960 15 )" />
+  </g>
+</svg>

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 0 10px;
+$btn-padding: 0 10px;
 $btn-sm-padding: 0 7px 0 7px;
 $btn-height: 32px;
 $btn-sm-height: 32px;
@@ -20,13 +20,14 @@ 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;
@@ -34,7 +35,7 @@ button,
 
   &:hover {
     text-decoration: none;
-    color: var(--lightest);
+    // color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -42,6 +43,10 @@ button,
   }
 }
 
+.bg-primary {
+  color: var(--lightest);
+}
+
 //icon button
 .icon-btn {
   padding: 0;
@@ -63,7 +68,7 @@ button,
   padding: $btn-sm-padding;
   min-height: $btn-sm-height;
   line-height: 32px;
-  width: 100px;
+  min-width: 100px;
 }
 
 //btn roles
@@ -94,10 +99,11 @@ button,
   // border: solid 1px var(--primary);
   border: solid 1px #d9d9d9;
   line-height: $btn-height - 2px;
-  width: 100px;
+  min-width: 100px;
 
   &:hover, &._hover {
-    color: var(--lightest) !important;
+    // color: var(--lightest) !important;
+    color: var(--input-label) !important;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
   }
 
@@ -105,7 +111,8 @@ 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(--lightest) !important;
+    color: var(--input-label) !important;
     // color: var(--primary-text) !important;
   }
 
@@ -162,8 +169,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,7 +123,10 @@
       font-weight: normal;
       line-height: 1;
       text-align: center;
-      background-color: #fff;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      // background-color: #fff;
     }
   }
 

package/assets/styles/global/_select.scss

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

package/assets/styles/global/_tooltip.scss

@@ -126,6 +126,7 @@
   border-radius: var(--border-radius-lg);
 
   .v-popper__inner {
+    border-radius: 4px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
@@ -146,7 +147,9 @@
 }
 
 .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 {
@@ -203,4 +206,8 @@
   .v-popper__inner {
     padding: 0px;
   }
-}
+}
+
+// .v-popper__arrow-container {
+//   display: none; 
+// }

package/assets/styles/themes/_dark.scss

@@ -38,6 +38,8 @@
 
   --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      : #B6B6C2;
+$dark      : #ffffff;
 
 //light border and buttons
 $medium    : #d7d7d7;
@@ -30,7 +30,7 @@ $secondary       : $darker;
 $link            : #1890FF;
 
 // Status colors
-$success         : #5D995D;
+$success         : #1890FF;
 $warning         : #DAC342;
 $error           : #F64747;
 // $error           : #A30014;
@@ -112,6 +112,8 @@ BODY, .theme-light {
       }
   }
 
+  --lightest                   : #{rgba($lightest, 1)};
+
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -337,6 +339,7 @@ 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,6 +321,7 @@ $transition-duration: 150ms;
     }
     .vs__selected {
       color: var(--input-text);
+      background-color: rgba(0, 0, 0, 0);
     }
   }
 
@@ -330,7 +331,7 @@ $transition-duration: 150ms;
   }
   .vs__dropdown-toggle {
     background-color: var(--input-bg);
-    border: none;
+    border: none !important;
     padding: none;
     border-radius: var(--border-radius);
     border: 1px solid var(--dropdown-border);

package/components/ActionDropdown.vue

@@ -212,6 +212,7 @@ 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 } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 
@@ -83,6 +83,7 @@ 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;
   }
@@ -90,6 +91,9 @@ const menuOptions = () => {
   return options.value;
 };
 
+onMounted(() => {
+})
+
 </script>
 
 <template>
@@ -102,5 +106,6 @@ const menuOptions = () => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
+    :showIcon="false"
   />
 </template>

package/components/BrandImage.vue

@@ -79,37 +79,56 @@ 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) {
@@ -121,6 +140,8 @@ 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(--default-active-text);
+    color: var(--primary);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

package/components/CodeMirror.vue

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

package/components/CruResource.vue

@@ -887,6 +887,7 @@ 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-right: 10px;
+    margin-left: 10px;
   }
 }
 

package/components/IndentedPanel.vue

@@ -4,23 +4,17 @@ export default {};
 
 <template>
   <div
-    class="indented-panel"
+    class="indented-panels"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panel {
+  .indented-panels {
     height: 100%;
-    width: 90%;
-    margin-left: 5%;
+    width: 100%;
+    padding: 0 20px;
   }
 
-  @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: 90%;
-      margin-left: 3px;
+      width: 100%;
+      // margin-left: 3px;
     }
 
     .actions {