Design tweaks

web/app/components/dashboard/docs-awaiting-review.hbs

@@ -1,19 +1,23 @@
-<div class="w-full mb-8">
+<div class="mb-8 w-full">
   <div class="relative flex justify-between">
-    <div class="flex items-center gap-2.5 mb-2">
-      <h2
+    <div class="mb-2 flex items-center gap-2.5">
+      {{!-- <h2
         class="items-center self-center text-body-300 Ztext-color-foreground-strong font-regular leading-none gap-2 md:flex"
       >
         You have
-        <Hds::BadgeCount
-          data-test-docs-awaiting-review-count
-          @text="{{@docs.length}}"
-          @type="inverted"
-          class="!bXg-color-foreground-critical"
-        />
         document{{if (gt @docs.length 1) "s"}}
         awaiting your review
-      </h2>
+      </h2> --}}
+      <div class="mb-2 flex h-4 items-center gap-3">
+        <FlightIcon @name="test" class="text-color-foreground-faint" />
+        <div class="flex items-center gap-2">
+          <h4 class="hermes-h4">Awaiting your review</h4>
+          <Hds::BadgeCount
+            data-test-docs-awaiting-review-count
+            @text="{{@docs.length}}"
+          />
+        </div>
+      </div>
     </div>
   </div>
 

web/app/components/doc/thumbnail-new.hbs

@@ -0,0 +1,46 @@
+<li
+  class="flex items-start gap-3 border-t border-t-color-border-faint py-3.5 first:border-t-0"
+>
+  <div class="w-full overflow-hidden">
+    <div class="flex w-full items-start gap-3">
+
+      {{! Text }}
+      <div class="w-full">
+        <h4 class="mb-1.5">
+          {{@title}}
+        </h4>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-1.5 overflow-hidden">
+            {{!-- <Person::Avatar
+              class="shrink-0"
+              @size="small"
+              @email=""
+              @imgURL={{@avatarURL}}
+            /> --}}
+            {{#if (eq @status "Draft")}}{{/if}}
+            {{!-- <Doc::State @state={{@status}} @hideProgress={{true}} /> --}}
+            <div class="flex gap-[3px]">
+              <span class="tag doctype">
+                {{@docType}}
+              </span>
+              <span class="tag {{dasherize @status}}">
+                {{@status}}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {{! Thumbnail }}
+      <div class="relative flex shrink-0 justify-center">
+        <div class="doc-thumbnail w-9 self-start">
+          <img src="/images/document.png" class="h-auto w-full" />
+          <div class="absolute bottom-0 left-0">
+            <ProductAvatar @productArea={{@product}} @iconSize={{16}} />
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</li>

web/app/components/doc/thumbnail-new.ts

@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+
+interface DocThumbnailNewComponentSignature {
+  Element: null;
+  Args: {
+    title: string;
+    status: string;
+    product: string;
+    docType: string;
+    avatarURL: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class DocThumbnailNewComponent extends Component<DocThumbnailNewComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Doc::ThumbnailNew": typeof DocThumbnailNewComponent;
+  }
+}

web/app/components/header/active-filter-list-item.hbs

@@ -1,4 +1,4 @@
-<LinkTo @query={{this.query}} class="active-filter-list-item">
+<LinkTo @query={{this.query}} class="tag filter-tag">
   <FlightIcon @name="x" />
   {{@filter}}
 </LinkTo>

web/app/styles/components/header/active-filter-list-item.scss

@@ -1,10 +1,26 @@
-.active-filter-list-item {
-  @apply my-0.5 mr-1 flex items-center rounded-full border border-color-border-strong bg-color-surface-interactive py-0.5 pl-2 pr-3.5 text-color-foreground-primary  no-underline;
+.tag {
+  @apply flex items-center rounded border border-color-border-primary bg-color-surface-interactive py-[3px] px-1.5 text-color-foreground-primary  no-underline;
 
   &:hover {
     @apply bg-color-surface-interactive-hover;
   }
 
+  &.in-review {
+    @apply border-transparent bg-color-surface-highlight text-color-foreground-highlight;
+  }
+
+  &.draft {
+    @apply border-transparent bg-color-palette-neutral-400 text-color-page-primary;
+  }
+
+  &.doctype {
+    @apply border-transparent bg-color-palette-neutral-100;
+  }
+}
+
+.filter-tag {
+  @apply my-0.5 mr-1 rounded-full py-0.5 pl-2 pr-3.5;
+
   .flight-icon {
     @apply mr-1 scale-75;
   }