@appscode/design-system 1.1.0-beta.72 → 1.1.0-beta.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.72",
+  "version": "1.1.0-beta.74",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/button/Button.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 interface Props {
   title?: string;
   tooltip?: string;
@@ -18,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   iconClass: "",
   iconImage: "",
+
   iconImageWidth: undefined,
   modifierClasses: "is-primary",
   titleModifierClass: "",
@@ -28,6 +31,11 @@ const emit = defineEmits(["click"]);
 const handleClick = (e: Event) => {
   if (!props.disabled) emit("click", e);
 };
+
+const showUnpluginIcon = computed(() => {
+  if (props.iconClass.includes("unplugin")) return true;
+  else return false;
+});
 </script>
 
 <template>
@@ -38,15 +46,23 @@ const handleClick = (e: Event) => {
     @click="handleClick"
     :title="tooltip"
   >
-    <span v-if="iconClass || iconImage" class="icon is-small">
+    <span
+      v-if="iconClass || iconImage"
+      class="icon is-small"
+      :class="showUnpluginIcon ? iconClass : ''"
+    >
       <img
         v-if="iconImage"
         :src="iconImage"
         alt="icon"
         :width="iconImageWidth"
       />
+
+      <slot name="icon" v-else-if="showUnpluginIcon" />
+
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
+
     <span v-if="title" :class="titleModifierClass">{{ title }}</span>
     <slot />
   </button>
@@ -58,6 +74,7 @@ const handleClick = (e: Event) => {
     padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
+
     &.is-primary {
       &.is-light {
         color: $primary;
@@ -81,14 +98,9 @@ const handleClick = (e: Event) => {
         }
       }
     }
-    &.is-ghost {
-      border-color: transparent !important;
-    }
-    &.is-square {
-      border: 1px solid $primary-95;
-    }
+
     &.is-small {
-      padding: 4px 9px;
+      padding: 4px 12px;
     }
     &.is-medium {
       font-size: 1rem;
@@ -99,783 +111,4 @@ const handleClick = (e: Event) => {
 button.is-primary {
   background-color: $primary;
 }
-// .button {
-//   transition: 86ms ease-in-out;
-
-//   // ac-button
-//   &.ac-button {
-//     border-color: $primary;
-//     border-radius: 4px;
-//     font-size: 14px;
-//     font-family: $font-paragraph;
-//     letter-spacing: 0.2px;
-//     color: $primary;
-//     font-weight: 500;
-//     height: 36px;
-//     padding-left: 25px;
-//     padding-right: 25px;
-//     line-height: 1;
-//     &:focus-visible {
-//       outline: none;
-//     }
-
-//     &:hover {
-//       border-color: hsla(
-//         var(--hsl-hue),
-//         var(--hsl-saturation),
-//         calc(var(--hsl-lightness) - 9%),
-//         1
-//       );
-//       color: hsla(
-//         var(--hsl-hue),
-//         var(--hsl-saturation),
-//         calc(var(--hsl-lightness) - 9%),
-//         1
-//       );
-//     }
-
-//     &.underline-button {
-//       text-decoration-line: underline;
-//       border: none;
-//       padding: 0;
-//       height: unset;
-//       letter-spacing: 1px;
-
-//       &.is-primary {
-//         color: $primary;
-//         background-color: transparent;
-
-//         &:hover {
-//           background-color: unset;
-//         }
-//       }
-//     }
-
-//     &.is-disabled {
-//       opacity: 0.5 !important;
-//     }
-
-//     &.is-rounded {
-//       border-radius: 9999px;
-//     }
-
-//     .ac-icon {
-//       margin-left: 25px;
-//       background-color: $white-100;
-//       color: $primary;
-//       padding: 2px 6px;
-//       border-radius: 4px;
-//       width: 20px;
-//       height: 20px;
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//       font-size: 12px;
-//     }
-
-//     &.is-small {
-//       height: 36px;
-//       font-size: 13px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 25px;
-//       padding-right: 25px;
-//     }
-
-//     &.is-extra-small {
-//       height: 32px;
-//       font-size: 12px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 20px;
-//       padding-right: 20px;
-//     }
-
-//     &.is-tiny {
-//       height: 28px;
-//       font-size: 11px;
-//       letter-spacing: 0px;
-//       font-weight: 400;
-//       padding-left: 15px;
-//       padding-right: 15px;
-//       line-height: 1;
-//     }
-//     &.is-extra-tiny {
-//       height: 22px;
-//       font-size: 11px;
-//       letter-spacing: 0px;
-//       font-weight: 400;
-//       padding-left: 10px;
-//       padding-right: 10px;
-//       line-height: 1;
-//     }
-//     &.is-normal {
-//       height: 45px;
-//       font-size: 15px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 25px;
-//       padding-right: 25px;
-//     }
-
-//     &.is-medium {
-//       height: 58px;
-//       font-size: 18px;
-//       padding-left: 45px;
-//       padding-right: 45px;
-//     }
-
-//     &.is-large {
-//       height: 48px;
-//       font-size: 16px;
-//       padding-left: 45px;
-//       padding-right: 45px;
-//     }
-
-//     &.is-square {
-//       width: 52px;
-//       height: 52px;
-//       padding: 0;
-//       &:hover {
-//         svg {
-//           color: $white-100;
-//         }
-//       }
-//       &.is-gray {
-//         background-color: $primary-90;
-//         color: $black-80;
-//         border-color: transparent;
-
-//         img {
-//           width: 16px;
-//         }
-
-//         i.fa {
-//           font-size: 18px;
-//           color: $black-80;
-//         }
-
-//         &:hover {
-//           background-color: $black-80;
-//         }
-//       }
-
-//       &.is-outlined-gray {
-//         border: 1px solid $primary-90;
-//         font-size: 15px;
-//       }
-
-//       &.is-transparent {
-//         background-color: transparent;
-//         color: $black-40;
-
-//         &:hover {
-//           background-color: $primary-90;
-//           color: $black-5;
-//         }
-
-//         &:focus {
-//           background-color: $primary-90;
-//           color: $black-5;
-//         }
-//       }
-
-//       &.transparent-bg {
-//         background-color: transparent;
-//         border: 1px solid $primary-10;
-
-//         img {
-//           &:hover {
-//             filter: brightness(1) !important;
-//           }
-//         }
-//       }
-
-//       &.is-normal {
-//         height: 45px;
-//         width: 45px;
-//       }
-
-//       &.is-small {
-//         width: 36px;
-//         height: 36px;
-//         font-size: 15px;
-//       }
-//       &.is-extra-small {
-//         width: 32px;
-//         height: 32px;
-//         font-size: 14px;
-//       }
-//       &.is-tinny {
-//         width: 25px;
-//         height: 25px;
-//         font-size: 12px;
-
-//         i.fa {
-//           font-size: 13px;
-//         }
-//       }
-//     }
-
-//     &.is-transparent {
-//       padding: 0;
-//       height: auto;
-//       border: none;
-//       font-size: 14px;
-//       font-weight: 500;
-//       background-color: transparent;
-//       color: $primary-10;
-
-//       &.is-primary {
-//         background-color: transparent;
-//         color: $primary;
-
-//         &:hover {
-//           background-color: transparent;
-//           color: $primary;
-//         }
-//       }
-
-//       &.is-danger {
-//         background-color: transparent;
-//         color: $danger;
-
-//         &:hover {
-//           background-color: transparent;
-//           color: $danger;
-//         }
-//       }
-
-//       &.is-small {
-//         letter-spacing: 0px;
-//         font-size: 13px;
-//       }
-
-//       &:focus {
-//         box-shadow: none;
-//         outline: none;
-//       }
-//     }
-
-//     &.is-white {
-//       background-color: $white-100;
-//       border: none;
-//     }
-
-//     &.is-light {
-//       background-color: $primary-90;
-//       border: none;
-
-//       &:hover {
-//         background-color: darken(#e7e7e7, 9);
-//       }
-//     }
-
-//     &.is-dark {
-//       background-color: $black-30;
-//       border: none;
-//       color: $white-100;
-
-//       &:hover {
-//         background-color: $primary-20;
-//       }
-//     }
-
-//     &.is-black {
-//       background-color: $primary-10;
-//       border: none;
-//       color: $white-100;
-
-//       &:hover {
-//         background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
-//       }
-//     }
-
-//     &.is-text {
-//       background-color: $white-100;
-//       border: none;
-
-//       &:hover {
-//         box-shadow: none;
-//         box-shadow: none;
-//         color: hsla(
-//           var(--hsl-hue),
-//           var(--hsl-saturation),
-//           calc(var(--hsl-lightness) - 10%),
-//           1
-//         );
-//       }
-
-//       &:focus {
-//         box-shadow: none;
-//         box-shadow: none;
-//         color: hsla(
-//           var(--hsl-hue),
-//           var(--hsl-saturation),
-//           calc(var(--hsl-lightness) - 10%),
-//           1
-//         );
-//       }
-//     }
-
-//     &.is-static {
-//       border: none;
-//       background-color: $primary-90;
-//       color: $white-100;
-//     }
-
-//     // ac-button from mixin
-//     &.is-primary {
-//       @include ac-button($primary);
-//     }
-
-//     &.is-link {
-//       @include ac-button($info);
-//     }
-
-//     &.is-info {
-//       @include ac-button($info);
-//     }
-
-//     &.is-success {
-//       @include ac-button($success);
-//     }
-
-//     &.is-warning {
-//       @include ac-button($warning);
-//     }
-
-//     &.is-danger {
-//       @include ac-button($danger);
-//     }
-
-//     &.is-green {
-//       @include ac-button($success);
-//     }
-//   }
-
-//   // play button
-//   &.ac-play-button {
-//     width: 60px;
-//     height: 60px;
-//     background-color: transparent;
-//     transition: 0.3s ease-in-out;
-//     border: 2px solid $black-30;
-//     color: $black-30;
-
-//     i.fa {
-//       padding-left: 5px;
-//     }
-
-//     // ac-button from mixin
-//     &.is-primary {
-//       @include ac-play-button($primary);
-//     }
-
-//     &.is-link {
-//       @include ac-play-button($info);
-//     }
-
-//     &.is-info {
-//       @include ac-play-button($info);
-//     }
-
-//     &.is-success {
-//       @include ac-play-button($success);
-//     }
-
-//     &.is-warning {
-//       @include ac-play-button($warning);
-//     }
-
-//     &.is-danger {
-//       @include ac-play-button($danger);
-//     }
-
-//     &.is-large {
-//       width: auto;
-//       display: inline-block;
-//       padding: 0 25px 0 4px;
-//       height: 53px;
-//       border: 1px solid $primary;
-
-//       .ac-play {
-//         width: 44px;
-//         height: 44px;
-//         font-size: 16px;
-//         line-height: 44px;
-//         display: inline-block;
-//         border: 1px solid $primary;
-//         border-radius: 50%;
-//         margin-right: 10px;
-//       }
-
-//       span {
-//         font-size: 16px;
-//         font-weight: 600;
-//         color: $primary;
-//       }
-//     }
-//   }
-// }
-
-// .ac-play-button-wrapper {
-//   display: flex;
-//   align-items: center;
-
-//   .ac-play-button {
-//     height: 52px;
-//     width: 52px;
-//     margin-bottom: 0;
-//     margin-right: 10px;
-//     background-color: $primary;
-
-//     i.fa {
-//       color: $white-100;
-//     }
-//   }
-
-//   p {
-//     font-size: 16px;
-//     font-weight: 600;
-//     display: block;
-//     color: $primary-10;
-
-//     span {
-//       font-size: 12px;
-//       display: block;
-//       font-weight: 400;
-//     }
-//   }
-
-//   &:hover {
-//     p {
-//       color: $primary;
-//     }
-//   }
-// }
-
-// // counter button start
-// .ac-counter-button {
-//   background-color: transparent;
-//   border: 1px solid $primary-10;
-//   border-radius: 4px;
-//   height: 46px;
-//   overflow: hidden;
-//   display: inline-flex;
-//   align-items: center;
-
-//   .ac-counter {
-//     min-width: 50px;
-//     text-align: left;
-//     padding: 0;
-//     height: 100%;
-//     overflow: hidden;
-
-//     input[type="number"] {
-//       border: none;
-//       height: 100%;
-//       padding: 10px;
-//       font-size: 15px;
-//       font-weight: 500;
-//       color: $primary-20;
-//       background-color: transparent;
-//       width: 100%;
-//       -moz-appearance: textfield;
-
-//       /* Chrome, Safari, Edge, Opera */
-//       &::-webkit-outer-spin-button,
-//       &::-webkit-inner-spin-button {
-//         -webkit-appearance: none;
-//         margin: 0;
-//       }
-
-//       &:focus {
-//         outline: none;
-//         background-color: $white-100;
-//       }
-//     }
-//   }
-
-//   // .ac-counter-button .ac-counter {
-//   //   padding: 0;
-//   //   height: 100%;
-//   // }
-
-//   .ac-counter-arrow-wrapper {
-//     height: 100%;
-//     color: $primary-10;
-//     border-left: 1px solid $primary-10;
-
-//     .ac-counter-arrow {
-//       background-color: transparent;
-//       border: none;
-//       cursor: pointer;
-//       color: $primary-10;
-//       height: 23px;
-
-//       &:hover {
-//         color: $primary-10;
-//       }
-
-//       &:first-child {
-//         border-bottom: 1px solid $primary-10;
-//       }
-//     }
-//   }
-// }
-
-// // counter button end
-
-// // up down button start
-// .up-down-buttons {
-//   border-radius: 4px;
-//   overflow: hidden;
-//   margin-right: 10px;
-//   position: relative;
-//   z-index: 1;
-//   max-width: 44px;
-
-//   &.is-small {
-//     max-width: 36px;
-
-//     .up-down-button {
-//       width: 36px;
-//       height: 18px;
-//     }
-//   }
-
-//   .up-down-button {
-//     background-color: $primary-90;
-//     border: none;
-//     display: block;
-//     cursor: pointer;
-//     width: 44px;
-//     height: 22.5px;
-//     color: #a4a4a4;
-
-//     &.is-info {
-//       background-color: $primary;
-//       color: $white-100;
-//       transition: 0.3s;
-//     }
-
-//     &:disabled {
-//       cursor: not-allowed;
-//       opacity: 0.8;
-//     }
-//   }
-// }
-
-// // up down button end
-
-// .ac-options:not(.list-button) {
-//   button {
-//     display: flex;
-//     flex-direction: column;
-
-//     span {
-//       width: 5px;
-//       height: 5px;
-//       border-radius: 50%;
-//       background-color: $primary-20;
-//       margin-bottom: 3px;
-
-//       &:last-child {
-//         margin-bottom: 0;
-//       }
-//     }
-//   }
-// }
-
-// // dark theme start
-// .is-dark-theme {
-//   .button.ac-button.is-primary.is-light {
-//     background-color: $primary;
-//     color: $white-100;
-//     &:hover {
-//       opacity: 0.8;
-//     }
-//   }
-//   .button.ac-button.is-danger.is-light {
-//     background-color: $danger;
-//     color: $white-100;
-//     &:hover {
-//       opacity: 0.8;
-//     }
-//   }
-//   .button.ac-button {
-//     --ac-white: #ffffff;
-//     &.is-white {
-//       --ac-white: #2e323c;
-//     }
-//   }
-//   .button.ac-button.is-text {
-//     background-color: transparent;
-//   }
-// }
-// // dark theme end
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 30px;
-//       padding-left: 20px;
-//       padding-right: 20px;
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Small devices (landscape phones, 576px and up)
-// @media (min-width: 576px) and (max-width: 767.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 36px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Medium devices (tablets, 768px and up)
-// @media (min-width: 768px) and (max-width: 991.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 36px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-small {
-//         letter-spacing: 0px;
-//         line-height: 1;
-//       }
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Large devices (desktops, 992px and up)
-// @media (min-width: 992px) and (max-width: 1199.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 15px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 38px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-medium {
-//         height: 40px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 44px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Extra large devices (large desktops, 1200px and up)
-// @media (min-width: 1200px) {
-// }
 </style>

package/vue-components/v3/cards/FeatureCard.vue

@@ -21,11 +21,11 @@ withDefaults(
         Required
       </div>
 
-      <div class="c-title is-flex is-align-items-center">
-        <div class="icon mr-8">
+      <div class="c-title is-flex gap-8 is-align-items-center">
+        <div class="icon">
           <slot name="card-logo" />
         </div>
-        <h4><slot name="card-title" /></h4>
+        <h5><slot name="card-title" /></h5>
       </div>
       <!-- <span class="tag has-background-dark-light has-text-dark is-rounded"
         >Dark</span
@@ -53,15 +53,11 @@ withDefaults(
     left: 20px;
     top: -9px;
   }
-  .c-header {
-    .c-title {
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
     }
   }
-
   .c-body {
     p {
       color: #0c365a;

package/vue-components/v3/cards/Monitoring.vue

@@ -18,8 +18,8 @@ withDefaults(defineProps<Props>(), {
       >
         REQUIRED
       </div>
-      <div class="c-title is-flex is-align-items-center">
-        <div class="icon mr-8">
+      <div class="c-title is-flex gap-8 is-align-items-center">
+        <div class="icon">
           <svg
             width="24"
             height="24"
@@ -50,7 +50,7 @@ withDefaults(defineProps<Props>(), {
             ></path>
           </svg>
         </div>
-        <h4>{{ title }}</h4>
+        <h5>{{ title }}</h5>
       </div>
       <div class="tag has-background-success-light has-text-success is-rounded">
         ENABLED
@@ -76,15 +76,11 @@ withDefaults(defineProps<Props>(), {
     left: 20px;
     top: -9px;
   }
-  .c-header {
-    .c-title {
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
     }
   }
-
   .c-body {
     p {
       color: #0c365a;

package/vue-components/v3/editor/Editor.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   showMinimap: false,
   editorHeight: 40,
   editorTheme: "",
-  wordWrap: "off",
+  wordWrap: "on",
 });
 
 const emit = defineEmits(["update:modelValue"]);

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -10,6 +10,7 @@ interface Props {
   previewYamls?: Array<PreviewYamlType>;
   showMinimap?: boolean;
   editorHeight?: number;
+  wordWrap?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewYamls: () => [],
   showMinimap: false,
   editorHeight: 60,
+  wordWrap: "on",
 });
 
 const emit = defineEmits(["setActiveKey"]);
@@ -174,6 +176,7 @@ watch(
               :read-only="isEditorReadOnly"
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
+              :word-wrap="wordWrap"
             />
           </div>
         </template>

package/vue-components/v3/editor/ResourceKeyValueEditor.vue

@@ -14,6 +14,7 @@ interface Props {
   deleteModalStatus?: string;
   editorHeight?: number;
   hideHeader?: boolean;
+  editorWordWrap?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   deleteModalStatus: "closed",
   editorHeight: 60,
   hideHeader: false,
+  editorWordWrap: "on",
 });
 
 const emit = defineEmits(["activeKey"]);
@@ -95,6 +97,7 @@ watch(
         :show-minimap="showMinimap"
         :editor-height="editorHeight"
         @setActiveKey="setActiveKey"
+        :word-wrap="editorWordWrap"
       />
     </template>
   </content-table>

package/vue-components/v3/modals/JsonShowModal.vue

@@ -85,6 +85,7 @@ const closeModal = () => {
       :read-only="true"
       language="json"
       :show-minimap="false"
+      word-wrap="on"
     />
   </modal>
 </template>

package/vue-components/v3/navbar/User.vue

@@ -222,24 +222,6 @@ watch(dropDownStatus, (n) => {
                 </li>
               </transition-group>
             </li>
-            <li key="dashboard">
-              <router-link
-                v-if="isPlatformDomain"
-                to="/dashboard"
-                data-testid="user-dashboard-link"
-              >
-                <span class="icon"><HeroiconsChartPie /></span>
-                <span> Dashboard</span>
-              </router-link>
-              <a
-                v-else
-                :href="`${serverDomain}/dashboard`"
-                data-testid="user-dashboard-link"
-              >
-                <span class="icon"><HeroiconsChartPie /></span>
-                <span> Dashboard</span>
-              </a>
-            </li>
             <li key="signout" @click="$emit('on-logout')">
               <a
                 data-testid="user-logout-link"
@@ -355,9 +337,14 @@ watch(dropDownStatus, (n) => {
 
     &.is-open {
       ul {
+        padding: 8px;
         max-height: 200px;
         visibility: visible;
         transition: max-height 0.25s ease-out;
+        li {
+          padding: 0;
+          border: 1px solid $primary-95;
+        }
       }
     }
     a {