@appscode/design-system 2.0.0 → 2.0.2-alpha.1

package/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 // customize bulma css
-@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
+@import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
@@ -11,13 +11,13 @@
 @import "vue-multiselect/dist/vue-multiselect.css";
 
 // BASE
-@import "./base/utilities/all";
+@import "@/components/vue-components/styles/base/utilities/all";
 
 // LAYOUTS
-@import "./layouts/all";
+@import "@/components/vue-components/styles/layouts/all";
 
 // COMPONENTS
-@import "./components/all";
+@import "@/components/vue-components/styles/components/all";
 
 // //BASE - Base styles, variables, mixins
 // @import "base/video-player";

package/package.json

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

package/{base → vue-components/styles/base}/utilities/_grid.scss

@@ -22,7 +22,7 @@
   grid-column: auto;
 }
 
-@for $i from 0 through 30 {
+@for $i from 0 through 32 {
   .gap-#{$i} {
     gap: #{$i}px;
   }

package/{components → vue-components/styles/components}/_all.scss

@@ -26,8 +26,10 @@
 // @import "bbum/all";
 // @import "wizard";
 
+// @import "button";
+
 @import "terminal";
-@import "input";
+// @import "input";
 @import "multi-select";
 @import "report";
 @import "getkeeper";

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

@@ -0,0 +1,59 @@
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent $primary-5 $primary-5 !important;
+        }
+      }
+      &.is-outlined {
+        &:hover {
+          border-color: inherit;
+        }
+      }
+    }
+
+    &.is-small {
+      padding: 4px 12px;
+      &:not(.is-rounded) {
+        border-radius: 4px;
+      }
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}

package/{components → vue-components/styles/components}/ui-builder/_ui-builder.scss

@@ -403,24 +403,24 @@
   }
 }
 // buttons
-.button {
-  &.ac-button {
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-    &.is-tinny {
-      height: 24px;
-      padding: 0 8px;
-    }
-  }
-}
+// .button {
+//   &.ac-button {
+//     &.is-medium {
+//       font-size: 1rem;
+//       height: 36px;
+//     }
+//     &.is-tinny {
+//       height: 24px;
+//       padding: 0 8px;
+//     }
+//   }
+// }
 
-.button[disabled] {
-  &.is-ghost {
-    border-color: transparent !important;
-  }
-}
+// .button[disabled] {
+//   &.is-ghost {
+//     border-color: transparent !important;
+//   }
+// }
 
 p.is-error,
 span.is-error {

package/{components → vue-components/styles/components}/ui-builder/_vue-open-api.scss

@@ -619,41 +619,41 @@
 }
 
 // button scss
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent #1c1c1c #1c1c1c !important;
-        }
-      }
-    }
-    &.is-ghost {
-      border-color: transparent !important;
-    }
-    &.is-square {
-      border: 1px solid $primary-95;
-    }
-    &.is-small {
-      padding: 4px 9px;
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}
+// .button {
+//   &.ac-button {
+//     padding: 8px 16px;
+//     font-weight: 500;
+//     line-height: 1;
+
+//     &.is-light {
+//       &.is-loading {
+//         &::after {
+//           border-color: transparent transparent #1c1c1c #1c1c1c !important;
+//         }
+//       }
+//     }
+//     &.is-ghost {
+//       border-color: transparent !important;
+//     }
+//     &.is-square {
+//       border: 1px solid $primary-95;
+//     }
+//     &.is-small {
+//       padding: 4px 9px;
+//     }
+//     &.is-medium {
+//       font-size: 1rem;
+//       height: 36px;
+//     }
+//   }
+//   &:focus {
+//     outline: none;
+//     box-shadow: none;
+//   }
+// }
+// button.is-primary {
+//   background-color: $primary;
+// }
 
 .is-refresh {
   i.fa {

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

@@ -69,63 +69,5 @@ const showUnpluginIcon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-primary {
-      &.is-light {
-        color: $primary;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-warning {
-      &.is-light {
-        color: $yellow-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-
-    &.is-success {
-      &.is-light {
-        color: $green-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent #1c1c1c #1c1c1c !important;
-        }
-      }
-      &.is-outlined {
-        &:hover {
-          border-color: inherit;
-        }
-      }
-    }
-
-    &.is-small {
-      padding: 4px 12px;
-      &:not(.is-rounded) {
-        border-radius: 4px;
-      }
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}
+@import "../../../vue-components/styles/components/button";
 </style>

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

@@ -18,4 +18,6 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+@import "../../../vue-components/styles/components/input";
+</style>

package/vue-components/v3/modal/Modal.vue

@@ -101,10 +101,10 @@ watch(
             <header-item>
               <ac-button
                 v-if="!isCloseOptionDisabled"
-                modifier-classes="is-square is-transparent"
+                modifier-classes="is-white"
                 :icon-image="crossIcon"
-                @click.stop="destroyModal"
                 data-testid="modal-generic-close-icon"
+                @click.stop="destroyModal"
               />
             </header-item>
           </header-items>
@@ -152,6 +152,11 @@ watch(
   left: 0;
   top: 0;
   z-index: 9999;
+  .ac-button {
+    &.is-white {
+      margin-right: -10px;
+    }
+  }
 
   &:after {
     position: absolute;

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

@@ -170,7 +170,7 @@ function notificationTime(time: number) {
     }
 
     .notification-content {
-      width: calc(100% - 100px);
+      width: calc(100% - 60px);
       h6 {
         font-size: 14px;
         font-weight: 500;

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

@@ -14,13 +14,14 @@ interface FormatedOrgs extends User {
 }
 
 interface Props {
-  user: User;
+  user: FormatedOrgs;
   serverDomain?: string;
   accountsDomain?: string;
   showAccountSwitcher?: boolean;
   organizations?: Array<FormatedOrgs>;
   showThemeMode?: boolean;
   isPlatformDomain?: boolean;
+  isLoggedinUserAdmin?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   organizations: () => [],
   showThemeMode: false,
   isPlatformDomain: false,
+  isLoggedinUserAdmin: false,
 });
 
 const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
@@ -83,6 +85,8 @@ const setTheme = (val: string) => {
   emit("set:theme", val);
 };
 
+const pathName = window.location.origin;
+
 watch(dropDownStatus, (n) => {
   if (n === "open") {
     nextTick(() => {
@@ -116,45 +120,71 @@ watch(dropDownStatus, (n) => {
           class="user-profile-wrapper"
           @mouseleave="onMouseLeave()"
         >
-          <div class="profile-area">
-            <div class="profile-photo">
-              <img
-                :src="user.avatar_url"
-                alt="User Photo"
-                class="width-32 height-32"
-              />
-              <button class="camera-icon"></button>
+          <a
+            :href="`${serverDomain}/${user.username}`"
+            :title="user.username.toUpperCase()"
+            data-testid="user-profile-link"
+            class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
+          >
+            <div class="profile-area">
+              <div class="profile-photo">
+                <img
+                  :src="user.avatar_url"
+                  alt="User Photo"
+                  class="width-32 height-32"
+                />
+                <button class="camera-icon"></button>
+              </div>
+              <div class="profile-info" style="width: calc(100% - 60px)">
+                <strong> {{ user.username }} </strong>
+                <p>
+                  {{
+                    user.isPersonalAccount || user.is_admin
+                      ? "Personal Account"
+                      : "Organization"
+                  }}
+                </p>
+              </div>
             </div>
-            <div class="profile-info" style="width: calc(100% - 60px)">
+          </a>
+          <transition-group name="list" tag="ul" class="list-items py-2">
+            <li key="settings" v-if="serverDomain !== pathName">
               <a
-                :href="`${serverDomain}/${user.username}`"
-                :title="user.username.toUpperCase()"
-                data-testid="user-profile-link"
-                class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
-                >{{ user.username }}</a
+                v-if="user.isPersonalAccount"
+                data-testid="user-settings-link"
+                :href="`${serverDomain}/user/settings/`"
               >
-              <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
-            </div>
-          </div>
-          <transition-group
-            name="list"
-            tag="ul"
-            class="list-items py-2 ac-scrollbar px-0"
-          >
-            <li key="settings">
+                <span class="icon"><HeroiconsCog6Tooth /></span>
+                <span>Settings</span>
+              </a>
               <a
+                v-else
                 data-testid="user-settings-link"
-                :href="`${serverDomain}/user/settings/`"
-                ><span class="icon"><HeroiconsCog6Tooth /></span
-                ><span>Settings</span></a
+                :href="`${serverDomain}/${user.username}/settings`"
               >
+                <span class="icon"><HeroiconsCog6Tooth /></span
+                ><span>Settings</span>
+              </a>
             </li>
-            <li v-if="user.is_admin" key="site-admin">
-              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
-                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
-                ><span>Site Administration</span></a
+            <li key="settings-platform" v-else>
+              <NuxtLink
+                v-if="user.isPersonalAccount"
+                data-testid="user-settings-link"
+                :to="`/user/settings/`"
               >
+                <span class="icon"><HeroiconsCog6Tooth /></span>
+                <span>Settings</span>
+              </NuxtLink>
+              <NuxtLink
+                v-else
+                data-testid="user-settings-link"
+                :to="`/${user.username}/settings`"
+              >
+                <span class="icon"><HeroiconsCog6Tooth /></span
+                ><span>Settings</span>
+              </NuxtLink>
             </li>
+
             <li
               v-if="showAccountSwitcher"
               :class="`is-${dropDownStatus}`"
@@ -226,6 +256,12 @@ watch(dropDownStatus, (n) => {
                 </li>
               </transition-group>
             </li>
+            <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
+              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
+                ><span>Site Administration</span></a
+              >
+            </li>
             <li key="signout" @click="$emit('on-logout')">
               <a
                 data-testid="user-logout-link"