feat(cxl-ui): refactor cxl-dashboard-header

https://app.clickup.com/t/86ayhhfgy
conversionxl · Oct 26, 2023 · 3f79af8 · 3f79af8
1 parent 7c3802e
commit 3f79af8
Show file tree

Hide file tree

Showing 16 changed files with 187 additions and 503 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -8,6 +8,7 @@ html {
   --cxl-wrap-padding: var(--lumo-space-m);
   --cxl-space-sm: 12px;
   --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
+  --cxl-color-athens-gray: hsla(210, 20%, 96%, 1);
   --cxl-color-dark-gray: hsla(240, 1%, 24%, 1);
   --cxl-color-black: hsl(0, 0%, 0%);
   --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);

diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -68,8 +68,8 @@
 }
 
 /**
-  * Theme "featured-course-slider"
-*/
+ * Theme "featured-course-slider"
+ */
 
 :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
   position: relative;
@@ -139,8 +139,8 @@
 }
 
 /**
-  * Theme "cxl-course-slider"
-*/
+ * Theme "cxl-course-slider"
+ */
 
 :host([theme~="cxl-course-slider"][theme~="minimal"]) {
   margin-top: calc(var(--lumo-space-s) * -1);
@@ -217,8 +217,8 @@
 }
 
 /**
-  * Theme "cxl-course-slider" and "cxl-category-accordion"
-*/
+ * Theme "cxl-course-slider" and "cxl-category-accordion"
+ */
 
 :host([theme~="cxl-course-slider"][theme~="cxl-category-accordion"][theme~="minimal"]) {
   margin-left: calc(-1 * var(--lumo-space-m));
@@ -227,3 +227,20 @@
     margin-left: calc(-1 * var(--lumo-space-l));
   }
 }
+
+/**
+ * Theme "cxl-course-slider" and "cxl-slider-dashboard-header"
+ */
+
+:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="minimal"]) {
+  margin-left: calc(-1 * var(--lumo-space-m));
+
+  @media #{mq.$small} {
+    margin-left: calc(-1 * var(--lumo-space-l));
+  }
+
+  &::before,
+  &::after {
+    background: linear-gradient(270deg, var(--cxl-color-athens-gray) 0%, rgba(255, 255, 255, 0) 100%);
+  }
+}
diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -2,26 +2,50 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mixins";
 
 :host {
+  position: relative;
+  background-color: var(--cxl-color-athens-gray);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    z-index: 0;
+    width: 100vw;
+    background-color: var(--cxl-color-athens-gray);
+    transform: translateX(-50%);
+  }
+
   .container {
-    padding: 0 var(--lumo-space-m);
-    background-color: var(--cxl-color-light-gray);
+    position: relative;
+    padding: 0 var(--lumo-space-m) var(--lumo-space-l);
+    z-index: 1;
 
     @media #{mq.$medium} {
-      padding: 0 var(--lumo-space-l);
+      padding: calc(var(--lumo-space-m) * 2) var(--lumo-space-l);
     }
   }
 
   header {
-    margin-bottom: var(--lumo-space-l);
-
     @media #{mq.$medium} {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding-top: var(--lumo-size-s);
+    }
+
+    .updates {
+      position: relative;
+
+      @media #{mq.$medium} {
+        position: absolute;
+        right: 0;
+        bottom: calc(100% + var(--lumo-space-m));
+      }
     }
 
     .titles {
+      flex-shrink: 0;
       padding-top: var(--lumo-size-s);
 
       @media #{mq.$medium} {
@@ -33,191 +57,28 @@
       font-size: var(--lumo-font-size-xs);
       line-height: 1;
       text-transform: uppercase;
+      color: var(--cxl-color-black-50pct);
     }
 
-    .updates {
-      @media #{mq.$medium} {
-        order: 2;
-        padding-bottom: 0;
-      }
+    .title {
+      margin: 0;
+      padding-right: var(--lumo-space-m);
+      font-size: var(--lumo-font-size-xxxl);
+      font-weight: 900;
+      line-height: 1.4;
     }
   }
 
-  .icon-bell {
-    position: relative;
-    margin-right: 14px;
-
-    &::after {
-      position: absolute;
-      top: 4px;
-      right: -7px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 12px;
-      height: 12px;
-      font-size: 8px;
-      font-weight: 700;
-      color: var(--lumo-tint);
-      content: attr(count);
-      background-color: var(--lumo-primary-color);
-      border: 2px solid var(--cxl-color-dark-gray);
-      border-radius: 100%;
-    }
+  .slider {
+    margin-top: var(--lumo-space-l);
   }
 
-  .title {
-    margin: 0;
-    font-size: var(--lumo-font-size-xxxl);
-    line-height: 1.4;
-  }
-
-  .content {
-    padding-bottom: var(--lumo-space-l);
-
-    @media #{mq.$large} {
-      padding-bottom: var(--lumo-space-xl);
-    }
-  }
-
-  .last-course {
-    margin-bottom: var(--lumo-space-l);
-
-    @media #{mq.$large} {
-      display: flex;
-    }
-
-    a {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--lumo-space-m);
-      color: var(--lumo-body-text-color);
-      text-decoration: none;
-      background-color: var(--lumo-primary-contrast-color);
-
-      > div {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .subtitle {
-        font-size: var(--lumo-font-size-xs);
-        line-height: 1;
-        color: var(--cxl-color-black-50pct);
-        text-transform: uppercase;
-      }
-
-      .title {
-        margin-top: calc(var(--lumo-space-s) / 2);
-        font-size: var(--lumo-font-size-xl);
-        font-weight: 700;
-        line-height: 1.2;
-      }
-
-      vaadin-icon {
-        flex-shrink: 0;
-        margin-left: var(--lumo-space-s);
-        color: var(--lumo-primary-color);
-        background: var(--lumo-shade-10pct);
-        border-radius: 100%;
-      }
-    }
-  }
-
-  .progress {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: var(--lumo-space-m);
-    color: var(--lumo-body-text-color);
-    background-color: var(--cxl-color-light-gray);
-  }
-
-  .courses {
-    display: flex;
-    flex-direction: column;
-    gap: var(--lumo-space-s);
-
-    @media #{mq.$large} {
-      flex-direction: row;
-      gap: var(--lumo-space-m);
-    }
-
-    vaadin-button {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: var(--lumo-size-xl);
-      padding: var(--lumo-space-m);
-      line-height: 1.3;
-      cursor: pointer;
-      border-radius: var(--lumo-border-radius-s);
-      background-color: var(--lumo-primary-contrast-color);
-
-      &::part(label) {
-        width: 100%;
-        padding-right: var(--lumo-space-l);
-        text-align: left;
-      }
-
-      @media #{mq.$large} {
-        width: 100%;
-      }
-
-      vaadin-icon {
-        position: absolute;
-        right: var(--lumo-space-m);
-        color: var(--lumo-primary-color);
-        background-color: var(--lumo-tint-5pct);
-        border-radius: 100%;
-      }
-    }
-
-    .roadmap {
-      color: var(--lumo-primary-contrast-color);
-      background-color: var(--lumo-primary-color);
-
-      @media #{mq.$large} {
-        color: var(--lumo-primary-contrast-color);
-      }
-
-      vaadin-icon {
-        color: var(--lumo-primary-contrast-color);
-      }
-    }
-  }
-}
-
-:host([hasroadmap]) {
-  .content {
-    @media #{mq.$large} {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: var(--lumo-space-l);
-
-      > div {
-        grid-column: 1 / 3;
-      }
-
-      .stats {
-        grid-column: 3 / 4;
-      }
-    }
-  }
-}
-
-::slotted(.stats-desktop) {
-  display: none;
-
-  @media #{mq.$large} {
+  .slider-title {
     display: block;
-  }
-}
-
-::slotted(.stats-mobile) {
-  @media #{mq.$large} {
-    display: none;
+    margin-bottom: var(--lumo-space-s);
+    font-size: var(--lumo-font-size-xs);
+    line-height: 1;
+    text-transform: uppercase;
+    color: var(--cxl-color-black-50pct);
   }
 }
diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
@@ -15,12 +15,14 @@
   }
 }
 
-:host([theme~="cxl-stats-dashboard-header"]) {
-  padding: var(--lumo-space-m);
+:host([theme="cxl-stats-dashboard-header"]) {
+  margin-top: var(--lumo-space-m);
+  padding: 0;
   border: 0;
-  background-color: var(--lumo-primary-contrast-color);
 
   @media #{mq.$medium} {
-    grid-template-columns: repeat(2, 1fr);
+    margin-top: 0;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--lumo-space-l);
   }
 }
diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss
@@ -2,22 +2,4 @@ cxl-dashboard-header {
   position: relative;
   z-index: 1;
   display: block;
-
-  .edit-roadmap {
-    display: flex;
-    align-items: center;
-    align-self: end;
-    max-width: fit-content;
-    height: fit-content;
-    padding: 0 var(--lumo-space-s);
-    margin: 0;
-    color: var(--lumo-primary-color);
-    cursor: pointer;
-    background-color: var(--lumo-primary-contrast-color);
-    border-radius: var(--lumo-border-radius-s);
-
-    &::part(label) {
-      line-height: 1.5;
-    }
-  }
 }
diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss
@@ -1,6 +1,10 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
 cxl-stats {
+  .stat-item {
+    min-width: 112px;
+  }
+
   .stat-title {
     margin: 0 0 var(--lumo-space-s) 0;
     font-size: var(--lumo-font-size-xs);
@@ -19,11 +23,14 @@ cxl-stats {
     small {
       font-size: var(--lumo-font-size-l);
     }
+  }
+
+  a.stat-count {
+    color: var(--cxl-color-black);
+    text-decoration: underline;
 
-    a {
-      font-size: var(--lumo-font-size-m);
-      font-weight: 400;
-      text-decoration: underline;
+    &:hover {
+      color: var(--lumo-primary-color);
     }
   }
 }