@appscode/design-system 2.6.8-alpha-1 → 2.6.9

package/package.json

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

package/vue-components/styles/base/utilities/_global.scss

@@ -668,3 +668,46 @@ em {
     z-index: #{$i}00;
   }
 }
+
+.whats-new-rel {
+  min-width: fit-content !important;
+  font-size: 11px !important;
+  color: #ffff !important;
+  margin-left: 4px;
+  margin-right: 0 !important;
+  padding: 0 4px;
+  position: relative;
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background: $ac-primary;
+  }
+  &:before {
+    animation: pulse-border 1500ms ease-out infinite;
+  }
+
+  &:after {
+    transition: all 200ms;
+  }
+
+  @keyframes pulse-border {
+    0% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.4);
+      opacity: 0;
+    }
+  }
+}

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

@@ -41,6 +41,16 @@
   &:hover {
     background-color: hsla(var(--secondary-hue), 12%, 95%);
   }
+  p,
+  span {
+    color: $color-text;
+  }
+  .time {
+    font-size: 11px;
+  }
+  .ac-checkbox {
+    margin-top: 4px;
+  }
 }
 
 .message-details {

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -251,3 +251,15 @@
     }
   }
 }
+
+.router-link-exact-active {
+  .whats-new-rel {
+    background-color: #fff;
+    color: $ac-primary !important;
+    z-index: 9;
+    &::after,
+    &::before {
+      background-color: #fff;
+    }
+  }
+}

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

@@ -40,7 +40,10 @@ withDefaults(defineProps<Props>(), {
     ]"
   >
     <div class="left-content" :class="{ 'is-align-items-center': noDataAvailable || noClusterAvailable }">
-      <figure class="image is-clipped" :class="[noClusterAvailable ? 'is-96x96' : 'width-64']">
+      <figure
+        class="image is-clipped"
+        :class="[noClusterAvailable ? 'is-96x96' : 'width-64', !noDataAvailable ? 'is-rounded' : '']"
+      >
         <img :src="thumbnail" />
       </figure>
 

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { nextTick, watch, ref } from "vue";
+import Tag from "../badge-tags/Tag.vue";
 
 interface Props {
   id?: string;
@@ -49,6 +50,7 @@ watch(
         <img :src="icon" alt="icon" />
       </span>
       <strong>{{ title }}</strong>
+      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel">NEW</span>
     </router-link>
   </li>
 </template>