@appscode/design-system 2.6.22-alpha-0.0.18 → 2.6.22-alpha-0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.6.22-alpha-0.0.18",
+  "version": "2.6.22-alpha-0.0.20",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/_modal.scss

@@ -67,6 +67,12 @@
     }
   }
 
+  &.is-extra-large {
+    .ac-modal-inner {
+      width: calc(100vw - 200px);
+    }
+  }
+
   .ac-modal-inner {
     margin: 0 auto;
     background-color: $white-100;

package/vue-components/styles/components/inbox/all.scss

@@ -40,13 +40,19 @@
   margin-left: -20px;
   border-bottom: 1px solid $color-border;
 
-  &.is-unread {
-    background-color: $secondary-light-gray;
+  &.is-read {
+    h6 {
+      font-weight: 400 !important;
+    }
+    h6,
+    p,
+    button,
+    span {
+      color: $slate-40;
+    }
   }
   &.is-active {
     background-color: $primary-light-gray;
-    border-top: 1px solid $ac-primary;
-    border-bottom: 1px solid $ac-primary;
 
     h6 {
       color: $ac-primary;
@@ -61,6 +67,7 @@
   }
   .time {
     font-size: 11px;
+    text-transform: capitalize;
   }
   .ac-checkbox {
     margin-top: 4px;
@@ -70,6 +77,9 @@
 .message-details {
   max-width: 768px;
   margin: 0;
+  .table.ac-table {
+    background-color: #fff;
+  }
   @include until-widescreen {
     margin: 0;
   }
@@ -135,7 +145,7 @@ body:has(.message-details) {
   &.is-open {
     // background-color: $primary-light-gray;
     padding: 16px;
-    border: 2px solid $ac-primary;
+    background-color: #f1f1f1;
     border-radius: 8px;
     margin: 8px;
   }
@@ -143,6 +153,8 @@ body:has(.message-details) {
     max-width: 100%;
     font-size: 1rem;
     max-height: 300px;
+    padding: 4px;
+    border-radius: 4px;
   }
 }
 

package/vue-components/v3/form-fields/Input.vue

@@ -16,11 +16,5 @@ const handleInput = (e: Event) => {
 </script>
 
 <template>
-  <input
-    class="ac-input"
-    data-testid="ac-input"
-    :class="{ 'width-200': modelValue }"
-    :value="modelValue"
-    @input="handleInput"
-  />
+  <input class="ac-input" data-testid="ac-input" :value="modelValue" @input="handleInput" />
 </template>

package/vue-components/v3/sidebar/basic-sidebar/DropDownItems.vue

@@ -5,10 +5,12 @@ import HeroiconsChevronDown20Solid from "~icons/heroicons/chevron-down-20-solid"
 interface Props {
   title: string;
   isOpen?: boolean;
+  hasIcon?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isOpen: false,
+  hasIcon: false
 });
 
 const dropDownStatus = ref<"close" | "open">("close");
@@ -31,15 +33,15 @@ watch(
 
 <template>
   <div
-    class="label p-16 b-b-1 is-flex is-align-items-center is-justify-content-space-between is-fullwidth is-clickable"
-    @click="toggleDropDownStatus"
-  >
+    class="label pt-10 pb-10 pl-16 pr-16 b-b-1 is-flex is-align-items-center is-justify-content-space-between is-fullwidth is-clickable"
+    @click="toggleDropDownStatus">
     <div class="is-flex gap-8">
-      <span class="icon"><slot name="drop-down-icon" /></span>{{ title }}
+      <span v-if="hasIcon" class="icon">
+        <slot name="drop-down-icon" />
+      </span>{{ title }}
     </div>
     <HeroiconsChevronDown20Solid
-      :style="{ transform: dropDownStatus === 'open' ? 'rotate(180deg)' : 'none', transition: '0.2s' }"
-    />
+      :style="{ transform: dropDownStatus === 'open' ? 'rotate(180deg)' : 'none', transition: '0.2s' }" />
   </div>
   <slot v-if="dropDownStatus === 'open'" name="drop-down-items" />
 </template>

package/vue-components/v3/sidebar/basic-sidebar/Items.vue

@@ -13,10 +13,10 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <router-link :to="url" class="sidebar-item" :class="{ 'is-active': isActive }">
+  <div class="sidebar-item is-clickable" :class="{ 'is-active': isActive }">
     <span class="icon">
       <slot name="item-icon" />
     </span>
     <span>{{ title }}</span>
-  </router-link>
+  </div>
 </template>