Improve Projects navigation and tiles

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

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">

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}}

web/app/helpers/get-project-status-icon.ts

@@ -0,0 +1,35 @@
+import { helper } from "@ember/component/helper";
+import {
+  ProjectStatus,
+  projectStatusObjects,
+} from "hermes/types/project-status";
+
+export interface GetProjectStatusIconSignature {
+  Args: {
+    Positional: [string | undefined];
+  };
+  Return: string | undefined;
+}
+
+const getProjectStatusIcon = helper<GetProjectStatusIconSignature>(
+  ([status]) => {
+    switch (status) {
+      case ProjectStatus.Active:
+        return projectStatusObjects[ProjectStatus.Active].icon;
+      case ProjectStatus.Completed:
+        return projectStatusObjects[ProjectStatus.Completed].icon;
+      case ProjectStatus.Archived:
+        return projectStatusObjects[ProjectStatus.Archived].icon;
+      default:
+        return;
+    }
+  },
+);
+
+export default getProjectStatusIcon;
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "get-project-status-icon": typeof getProjectStatusIcon;
+  }
+}

web/app/styles/app.scss

@@ -37,6 +37,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";

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;
+    }
+  }
+}

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;
+    }
   }
 }

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;