From a9801a3c7692c2bd3b59a58be51b86b321c5ab7e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 2 Sep 2022 18:07:17 +0530
Subject: [PATCH] design: Fixes to make portal page design close to figma
 mockups (#5383)

---
 .../sidebarComponents/SecondaryNavItem.vue    |  37 ++++--
 .../dashboard/components/ui/Label.vue         |  25 +++-
 .../helpcenter/components/ArticleEditor.vue   |   1 +
 .../helpcenter/components/ArticleItem.vue     |  65 ++++++----
 .../components/Header/ArticleHeader.vue       |   4 +-
 .../helpcenter/components/PortalPopover.vue   |  34 ++++--
 .../helpcenter/components/PortalSwitch.vue    | 114 ++++++++++--------
 .../components/Sidebar/SidebarHeader.vue      |  56 +++------
 .../pages/articles/ListAllArticles.vue        |   2 +-
 9 files changed, 197 insertions(+), 141 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index a15a92ddc..220ab18fa 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,13 +1,19 @@
 <template>
   <li class="sidebar-item">
     <div v-if="hasSubMenu" class="secondary-menu--wrap">
-      <span class="secondary-menu--title fs-small">
+      <span class="secondary-menu--header fs-small">
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="isHelpCenterSidebar" class="submenu-icons">
-        <div class="submenu-icon" @click="onClickOpen">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          class="submenu-icon"
+          @click="onClickOpen"
+        >
           <fluent-icon icon="add" size="16" />
-        </div>
+        </woot-button>
       </div>
     </div>
     <router-link
@@ -214,13 +220,22 @@ export default {
 .secondary-menu--wrap {
   display: flex;
   justify-content: space-between;
+  margin-top: var(--space-small);
 }
 
+.secondary-menu--header {
+  color: var(--s-700);
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--space-normal);
+  margin: var(--space-small) 0;
+  padding: 0 var(--space-small);
+}
 .secondary-menu--title {
   color: var(--s-600);
   display: flex;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--space-two);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--space-normal);
   margin: var(--space-small) 0;
   padding: 0 var(--space-small);
 }
@@ -232,6 +247,7 @@ export default {
   padding: var(--space-small);
   font-weight: var(--font-weight-medium);
   border-radius: var(--border-radius-normal);
+  color: var(--s-700);
 
   &:hover {
     background: var(--s-25);
@@ -323,19 +339,14 @@ export default {
   align-items: center;
 
   .submenu-icon {
+    padding: 0;
     margin-left: var(--space-small);
-    color: var(--s-600);
-
-    &:hover {
-      cursor: pointer;
-      color: var(--w-500);
-    }
   }
 }
 
 .empty-text {
-  color: var(--s-600);
+  color: var(--s-500);
   font-size: var(--font-size-small);
-  margin: var(--space-smaller) 0;
+  margin: var(--space-smaller);
 }
 </style>
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index d4059d21c..6a0c7de4a 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -72,7 +72,9 @@ export default {
       return this.color || getContrastingTextColor(this.bgColor);
     },
     labelClass() {
-      return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
+      return `label ${this.colorScheme} ${this.variant} ${
+        this.small ? 'small' : ''
+      }`;
     },
     labelStyle() {
       if (this.bgColor) {
@@ -146,6 +148,9 @@ export default {
     a {
       color: var(--w-900);
     }
+    .label-color-dot {
+      background: var(--w-600);
+    }
   }
   &.secondary {
     background: var(--s-100);
@@ -154,6 +159,9 @@ export default {
     a {
       color: var(--s-900);
     }
+    .label-color-dot {
+      background: var(--s-600);
+    }
   }
   &.success {
     background: var(--g-100);
@@ -162,6 +170,9 @@ export default {
     a {
       color: var(--g-900);
     }
+    .label-color-dot {
+      background: var(--g-600);
+    }
   }
   &.alert {
     background: var(--r-100);
@@ -170,6 +181,9 @@ export default {
     a {
       color: var(--r-900);
     }
+    .label-color-dot {
+      background: var(--r-600);
+    }
   }
   &.warning {
     background: var(--y-100);
@@ -178,6 +192,15 @@ export default {
     a {
       color: var(--y-900);
     }
+    .label-color-dot {
+      background: var(--y-900);
+    }
+  }
+
+  &.smooth {
+    background: transparent;
+    border: 1px solid var(--s-75);
+    color: var(--s-800);
   }
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index cbb261ce3..c3704d3cf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -93,6 +93,7 @@ export default {
   max-height: var(--space-jumbo);
   border: 0px solid transparent;
   padding: 0;
+  color: var(--s-900);
 }
 
 ::v-deep {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 3c1f9cdf9..cecf1f39e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,13 +1,13 @@
 <template>
-  <tr>
+  <tr class="row--article-block">
     <td>
-      <div class="row--article-block">
+      <div class="article-content-wrap">
         <div class="article-block">
-          <h6 class="sub-block-title text-truncate">
-            <router-link class="article-name" :to="articleUrl(id)">
+          <router-link :to="articleUrl(id)">
+            <h6 class="sub-block-title text-truncate">
               {{ title }}
-            </router-link>
-          </h6>
+            </h6>
+          </router-link>
           <div class="author">
             <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
             <span class="name">{{ articleAuthorName }}</span>
@@ -15,22 +15,35 @@
         </div>
       </div>
     </td>
-    <td>{{ category.name }}</td>
-    <td>{{ readCount }}</td>
     <td>
-      <Label :title="status" :color-scheme="labelColor" />
+      <span class="fs-small">{{ category.name }}</span>
+    </td>
+    <td>
+      <span class="fs-small">
+        {{ readCount }}
+      </span>
+    </td>
+    <td>
+      <div>
+        <woot-label
+          :title="status"
+          size="small"
+          variant="smooth"
+          :color-scheme="labelColor"
+        />
+      </div>
+    </td>
+    <td>
+      <span class="fs-small">
+        {{ lastUpdatedAt }}
+      </span>
     </td>
-    <td>{{ lastUpdatedAt }}</td>
   </tr>
 </template>
 <script>
-import Label from 'dashboard/components/ui/Label';
 import timeMixin from 'dashboard/mixins/time';
 import portalMixin from '../mixins/portalMixin';
 export default {
-  components: {
-    Label,
-  },
   mixins: [timeMixin, portalMixin],
 
   props: {
@@ -95,25 +108,25 @@ td {
   padding-left: 0;
 }
 .row--article-block {
-  align-items: center;
-  display: flex;
-  text-align: left;
-
+  border-bottom-color: transparent;
+  .article-content-wrap {
+    align-items: center;
+    display: flex;
+    text-align: left;
+  }
   .article-block {
     min-width: 0;
   }
 
   .sub-block-title {
     margin-bottom: 0;
+    line-height: var(--space-medium);
+    height: var(--space-medium);
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
-  .article-name {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-default);
-    margin: 0;
-    text-transform: capitalize;
-    color: var(--s-900);
-  }
   .author {
     .by {
       font-weight: var(--font-weight-normal);
@@ -123,7 +136,7 @@ td {
     .name {
       font-weight: var(--font-weight-medium);
       color: var(--s-600);
-      font-size: var(--font-size-mini);
+      font-size: var(--font-size-small);
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index d254ac909..24ec9a42c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -82,6 +82,7 @@
       <woot-button
         class-names="article--buttons"
         size="small"
+        icon="add"
         color-scheme="primary"
         @click="onClickNewArticlePage"
       >
@@ -152,7 +153,8 @@ export default {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: var(--space-larger);
+  height: var(--space-jumbo);
+  padding-top: var(--space-small);
 }
 .header-left--wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 5be63aa31..816eaeb82 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -5,15 +5,24 @@
         <h2 class="block-title">
           {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
         </h2>
-        <woot-button
-          variant="smooth"
-          color-scheme="secondary"
-          icon="settings"
-          size="small"
-          @click="openPortalPage"
-        >
-          {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
-        </woot-button>
+        <div>
+          <woot-button
+            variant="smooth"
+            color-scheme="secondary"
+            icon="settings"
+            size="small"
+            @click="openPortalPage"
+          >
+            {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
+          </woot-button>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            icon="dismiss"
+            size="small"
+            @click="closePortalPopover"
+          />
+        </div>
       </div>
       <p class="subtitle">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
@@ -22,7 +31,7 @@
     <div>
       <portal-switch
         v-for="portal in portals"
-        :key="portal.slug"
+        :key="portal.id"
         :portal="portal"
         :active="portal.slug === activePortalSlug"
         @open-portal-page="onPortalSelect"
@@ -78,7 +87,7 @@ export default {
 <style lang="scss" scoped>
 .portal-popover__container {
   position: absolute;
-  overflow: scroll;
+  overflow-y: scroll;
   max-height: 96vh;
   padding: var(--space-normal);
   background-color: var(--white);
@@ -92,7 +101,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: var(--space-smaller);
+      margin-bottom: var(--space-normal);
 
       .new-popover-link {
         display: flex;
@@ -111,6 +120,7 @@ export default {
       .subtitle {
         font-size: var(--font-size-mini);
         color: var(--s-600);
+        margin-top: var(--space-small);
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 42da70d72..d4e80463b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -4,7 +4,7 @@
     <div class="actions-container">
       <header>
         <div>
-          <h2 class="portal-title">{{ portal.name }}</h2>
+          <h3 class="text-block-title portal-title">{{ portal.name }}</h3>
           <p class="portal-count">
             {{ articlesCount }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
@@ -15,32 +15,40 @@
         }}</span>
       </header>
       <div class="portal-locales">
-        <h2 class="locale-title">
+        <h5 class="locale-title">
           {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h2>
+        </h5>
         <ul>
           <li v-for="locale in locales" :key="locale.code">
-            <label :for="`locale-${locale.code}`" class="locale-item">
-              <input
-                :id="`locale-${locale.code}`"
-                v-model="selectedLocale"
-                type="radio"
-                name="locale"
-                :value="locale.code"
-                :checked="isLocaleActive(locale.code)"
-                @click="() => onClick(locale.code, portal)"
-              />
-              <div>
-                <p>{{ localeName(locale.code) }}</p>
-                <span>
-                  {{ locale.articles_count }}
-                  {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                  {{ locale.code }}
-                </span>
+            <woot-button
+              class="locale-item"
+              variant="clear"
+              size="large"
+              color-scheme="secondary"
+              @click="event => onClick(event, locale.code, portal)"
+            >
+              <div class="locale-content">
+                <input
+                  :id="`locale-${locale.code}`"
+                  v-model="selectedLocale"
+                  type="radio"
+                  name="locale"
+                  :value="locale.code"
+                  class="locale__radio"
+                  :checked="isLocaleActive(locale.code)"
+                />
+                <div>
+                  <p>{{ localeName(locale.code) }}</p>
+                  <span>
+                    {{ locale.articles_count }}
+                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
+                    {{ locale.code }}
+                  </span>
+                </div>
               </div>
-            </label>
+            </woot-button>
           </li>
-          <li>
+          <li class="add-locale-wrap">
             <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
           </li>
         </ul>
@@ -84,7 +92,8 @@ export default {
     this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
   },
   methods: {
-    onClick(code, portal) {
+    onClick(event, code, portal) {
+      event.preventDefault();
       this.$router.push({
         name: 'list_all_locale_articles',
         params: {
@@ -136,10 +145,8 @@ export default {
       }
 
       .portal-title {
-        color: var(--s-900);
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-bold);
         margin-bottom: 0;
+        color: var(--s-700);
       }
 
       .portal-count {
@@ -156,39 +163,46 @@ export default {
         font-weight: var(--font-weight-medium);
       }
 
+      .locale-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+      }
+
       ul {
         list-style: none;
         padding: 0;
         margin: 0;
+      }
 
-        .locale-item {
-          display: flex;
-          align-items: flex-start;
-          margin-bottom: var(--space-smaller);
-          cursor: pointer;
-          padding: var(--space-smaller);
-          border-radius: var(--border-radius-normal);
+      .locale-item {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: var(--space-smaller);
+        padding: var(--space-smaller);
+        border-radius: var(--border-radius-normal);
 
-          &:hover {
-            background-color: var(--w-25);
-          }
-
-          p {
-            margin-bottom: 0;
-          }
-
-          span {
-            color: var(--s-500);
-            font-size: var(--font-size-small);
-          }
+        p {
+          margin-bottom: 0;
+          text-align: left;
         }
+
+        span {
+          color: var(--s-500);
+          font-size: var(--font-size-small);
+        }
+      }
+
+      .locale__radio {
+        width: var(--space-large);
+        margin-top: var(--space-tiny);
+      }
+
+      .add-locale-wrap {
+        margin-top: var(--spacing-small);
       }
     }
   }
 }
-label > [type='radio'] {
-  margin-bottom: 0;
-  margin-top: var(--space-smaller);
-  margin-right: var(--space-one);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index 5ad65792e..9b6932cc7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -2,13 +2,13 @@
   <div class="sidebar-header--wrap">
     <div class="header-left--side">
       <thumbnail
-        size="40px"
+        size="32px"
         :src="thumbnailSrc"
         :username="headerTitle"
         variant="square"
       />
       <div class="header-title--wrap">
-        <h4 class="sub-block-title title-view text-truncate">
+        <h4 class="text-block-title title-view text-truncate">
           {{ headerTitle }}
         </h4>
         <span class="sub-title--view">{{ subTitle }}</span>
@@ -16,28 +16,19 @@
     </div>
     <div class="header-right--side">
       <woot-button
-        variant="link"
+        variant="clear"
         color-scheme="secondary"
+        size="small"
+        icon="arrow-up-right"
         @click="popoutHelpCenter"
-      >
-        <fluent-icon
-          icon="arrow-up-right"
-          size="28px"
-          class="pop-out--icon"
-          @click="popoutHelpCenter"
-        />
-      </woot-button>
+      />
       <woot-button
-        variant="link"
+        variant="clear"
+        size="small"
         color-scheme="secondary"
+        icon="arrow-swap"
         @click="openPortalPopover"
-      >
-        <fluent-icon
-          icon="arrow-swap"
-          size="28px"
-          class="portal-switch--icon"
-        />
-      </woot-button>
+      />
     </div>
   </div>
 </template>
@@ -79,7 +70,9 @@ export default {
   height: var(--space-jumbo);
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-small) 0 var(--space-normal) 0;
+  padding: var(--space-normal);
+  margin: var(--space-minus-small);
+  margin-bottom: var(--space-small);
   border-bottom: 1px solid var(--color-border-light);
 }
 
@@ -93,11 +86,15 @@ export default {
 .title-view {
   width: var(--space-mega);
   margin-bottom: var(--space-zero);
+  height: var(--space-normal);
+  line-height: var(--space-normal);
 }
 
 .sub-title--view {
   font-size: var(--font-size-mini);
-  color: var(--b-600);
+  color: var(--s-600);
+  height: var(--space-normal);
+  line-height: var(--space-normal);
 }
 
 .header-left--side {
@@ -107,21 +104,6 @@ export default {
 
 .header-right--side {
   display: flex;
-  align-items: center;
-}
-
-.pop-out--icon {
-  padding: var(--space-smaller);
-}
-
-.portal-switch--icon {
-  padding: var(--space-smaller);
-  margin-left: var(--space-small);
-
-  &:hover {
-    cursor: pointer;
-    background: var(--s-50);
-    border-radius: var(--border-radius-normal);
-  }
+  align-items: flex-end;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 73ccda403..f46d87d50 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -147,7 +147,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  padding: var(--space-small) var(--space-normal);
+  padding: 0 var(--space-normal);
   width: 100%;
   .articles--loader {
     align-items: center;