Improve Projects navigation and tiles (#514)

* WIP projects index * Refactor `interactive-card` * Update interactive-card.scss
hashicorp-forge · Dec 19, 2023 · ded02df · ded02df
1 parent 198482c
commit ded02df
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 7 deletions.
diff --git a/web/app/components/new/document-template-list.hbs b/web/app/components/new/document-template-list.hbs
@@ -28,10 +28,9 @@
         class="flex w-full items-stretch"
       >
         <Hds::Card::Container
-          @level="mid"
-          @levelHover="high"
+          @levelHover="mid"
           @hasBorder={{true}}
-          class="relative w-full px-5 pt-5 pb-6 hover:bg-gradient-to-b hover:from-color-surface-interactive hover:to-color-surface-action"
+          class="interactive-card relative w-full px-5 pt-5 pb-6"
         >
           <div class="flex w-full gap-3.5">
             <FlightIcon

diff --git a/web/app/components/project/tile.hbs b/web/app/components/project/tile.hbs
@@ -2,7 +2,7 @@
   data-test-project-tile
   @hasBorder={{true}}
   @levelHover="mid"
-  class="project-tile h-48 p-4"
+  class="project-tile interactive-card h-48 p-4"
   ...attributes
 >
   <div class="relative h-full pb-16">

diff --git a/web/app/components/projects/index.hbs b/web/app/components/projects/index.hbs
@@ -1,10 +1,15 @@
-<nav data-test-projects-nav class="secondary-nav mb-7 flex gap-3">
+<nav
+  data-test-projects-nav
+  class="secondary-nav mx-auto mb-8 max-w-[430px] justify-center"
+>
   {{#each this.statuses as |status|}}
     <LinkTo
       data-test-tab={{status.value}}
       @route="authenticated.projects"
       @query={{hash status=status.value}}
+      class="hds-button hds-button--color-secondary"
     >
+      <FlightIcon @name={{get-project-status-icon status.value}} class="mr-1" />
       {{status.label}}
     </LinkTo>
   {{/each}}

diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
@@ -38,6 +38,7 @@
 @use "components/table/sortable-header";
 @use "components/preview-card";
 @use "components/project";
+@use "components/interactive-card";
 @use "components/notification";
 @use "components/sidebar";
 @use "components/document/related-resources";

diff --git a/web/app/styles/components/interactive-card.scss b/web/app/styles/components/interactive-card.scss
@@ -0,0 +1,8 @@
+a {
+  &:hover,
+  &:focus {
+    .interactive-card {
+      @apply bg-gradient-to-t from-color-page-faint to-color-page-primary;
+    }
+  }
+}
diff --git a/web/app/styles/components/secondary-nav.scss b/web/app/styles/components/secondary-nav.scss
@@ -1,5 +1,41 @@
 .secondary-nav {
+  @apply flex;
+
+  a {
+    @apply relative flex h-12 w-1/3 items-center justify-center gap-1.5 rounded-none border border-color-palette-neutral-300;
+    @apply pr-1; // optical centering
+    @apply bg-color-page-faint;
+
+    &:first-child {
+      @apply rounded-l-button-md;
+    }
+
+    &:last-child {
+      @apply rounded-r-button-md;
+    }
+
+    &:hover:not(.active) {
+      @apply bg-color-page-primary;
+    }
+
+    + a {
+      @apply -ml-px;
+    }
+
+    &:focus {
+      @apply z-20;
+    }
+  }
+
   .active {
-    @apply underline;
+    @apply z-10 border-color-foreground-action-hover bg-color-foreground-action text-white;
+
+    path {
+      @apply fill-current;
+    }
+
+    .status-icon-fill {
+      fill: none;
+    }
   }
 }
diff --git a/web/app/styles/hashicorp/product-badge.scss b/web/app/styles/hashicorp/product-badge.scss
@@ -1,5 +1,5 @@
 .product-badge {
-  @apply absolute bg-color-palette-neutral-200 bg-gradient-to-br;
+  @apply absolute bg-color-palette-neutral-200 bg-gradient-to-br from-transparent to-transparent;
 
   &.hcp {
     @apply from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast;