Improve typography on "Request Review" modal (#675)

Improve markup and typography on Publish modal
hashicorp-forge · Apr 15, 2024 · e44e932 · e44e932
1 parent 5de92f4
commit e44e932
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -736,32 +736,17 @@
           </div>
         {{else}}
           <ul class="mb-6 space-y-1 text-body-300">
-            <li class="flex items-center">
-              <div
-                class="mr-2.5 inline-flex rounded-full text-color-palette-neutral-400"
-              >
-                <FlightIcon @size="16" @name="at-sign" />
-              </div>
-              Approvers and people subscribed to “{{@document.product}}” will be
-              notified.
-            </li>
-            <li class="flex items-center">
-              <div
-                class="mr-2.5 inline-flex rounded-full text-color-palette-neutral-400"
-              >
-                <FlightIcon @size="16" @name="radio" />
-              </div>
-              Your document will appear in Hermes and Google Workspace search.
-            </li>
-            <li class="flex items-center">
-              <div
-                class="mr-2.5 inline-flex rounded-full text-color-palette-neutral-400"
-              >
-
-                <FlightIcon @size="16" @name="globe-private" />
-              </div>
-              Published documents cannot be deleted but can be archived.
-            </li>
+            {{#each this.requestReviewBulletPoints as |b|}}
+              <li class="flex gap-2.5">
+                <FlightIcon
+                  @name={{b.icon}}
+                  class="mt-1 text-color-foreground-disabled"
+                />
+                <span>
+                  {{b.text}}
+                </span>
+              </li>
+            {{/each}}
           </ul>
 
           <Hds::Form::Field @layout="vertical" as |F|>

diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts
@@ -382,6 +382,23 @@ export default class DocumentSidebarComponent extends Component<DocumentSidebarC
     };
   }
 
+  protected get requestReviewBulletPoints() {
+    return [
+      {
+        icon: "at-sign",
+        text: `Approvers and people subscribed to “${this.args.document.product}” will be notified.`,
+      },
+      {
+        icon: "radio",
+        text: "Your document will appear in Hermes and Google Workspace search.",
+      },
+      {
+        icon: "globe-private",
+        text: "Published documents cannot be deleted but can be archived.",
+      },
+    ];
+  }
+
   /**
    * Whether the share button is in the process of creating a shareable link.
    * Used to determine the icon and tooltip text of the share button.