From dab284f339f17f41944c528725234a77425322b9 Mon Sep 17 00:00:00 2001
From: Evan Song <hi@evan.graphics>
Date: Sun, 7 Jul 2024 18:28:55 -0700
Subject: [PATCH] Frontend Tailwind Fixes + Small Fixes  (#1258)

* Fix Tailwind not targeting the src dir

* Merge tw fixes

* Fix footer logo alignment in mobile layout
---
 apps/frontend/nuxt.config.ts                  |  2 +-
 apps/frontend/src/components/ui/Badge.vue     |  2 +-
 .../src/components/ui/NotificationItem.vue    | 37 +++++++++++++++----
 .../src/components/ui/ProjectCard.vue         |  2 +-
 apps/frontend/src/layouts/default.vue         |  8 ++--
 apps/frontend/src/pages/[type]/[id].vue       |  6 +--
 .../src/pages/dashboard/collections.vue       |  2 +-
 apps/frontend/src/pages/dashboard/index.vue   |  6 +--
 .../src/pages/dashboard/notifications.vue     |  4 +-
 .../src/pages/dashboard/organizations.vue     |  2 +-
 .../frontend/src/pages/dashboard/projects.vue |  2 +-
 apps/frontend/src/pages/dashboard/reports.vue |  2 +-
 .../src/pages/dashboard/revenue/index.vue     | 11 +++---
 apps/frontend/src/pages/settings/account.vue  |  2 +-
 .../src/pages/settings/applications.vue       |  4 +-
 .../src/pages/settings/authorizations.vue     |  4 +-
 apps/frontend/src/pages/settings/index.vue    | 14 +++----
 apps/frontend/src/pages/settings/language.vue |  2 +-
 apps/frontend/src/pages/settings/pats.vue     |  2 +-
 apps/frontend/src/pages/settings/profile.vue  |  4 +-
 apps/frontend/src/pages/settings/sessions.vue |  4 +-
 apps/frontend/tailwind.config.js              | 14 +++----
 packages/assets/icons/scale.svg               |  2 +-
 23 files changed, 81 insertions(+), 57 deletions(-)

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index b0ccc4d47..d9f98a62e 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -300,7 +300,7 @@ export default defineNuxtConfig({
       featureFlagOverrides: getFeatureFlagOverrides(),
 
       owner: process.env.VERCEL_GIT_REPO_OWNER || "modrinth",
-      slug: process.env.VERCEL_GIT_REPO_SLUG || "knossos",
+      slug: process.env.VERCEL_GIT_REPO_SLUG || "code",
       branch:
         process.env.VERCEL_GIT_COMMIT_REF ||
         process.env.CF_PAGES_BRANCH ||
diff --git a/apps/frontend/src/components/ui/Badge.vue b/apps/frontend/src/components/ui/Badge.vue
index 166ac8628..7ce5937df 100644
--- a/apps/frontend/src/components/ui/Badge.vue
+++ b/apps/frontend/src/components/ui/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="'badge ' + color + ' type--' + type">
+  <span :class="'badge flex items-center gap-2 ' + color + ' type--' + type">
     <template v-if="color"> <span class="circle" /> {{ $capitalizeString(type) }}</template>
 
     <!-- User roles -->
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 478cdcb6a..1d2132953 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -53,8 +53,18 @@
         >, has been updated:
       </template>
       <template v-else-if="type === 'team_invite' && project">
-        <nuxt-link :to="`/user/${invitedBy.username}`" class="iconified-link title-link">
-          <Avatar :src="invitedBy.avatar_url" circle size="xxs" no-shadow :raised="raised" />
+        <nuxt-link
+          :to="`/user/${invitedBy.username}`"
+          class="iconified-link title-link inline-flex"
+        >
+          <Avatar
+            :src="invitedBy.avatar_url"
+            circle
+            size="xxs"
+            no-shadow
+            :raised="raised"
+            class="inline-flex"
+          />
           <span class="space">&nbsp;</span>
           <span>{{ invitedBy.username }}</span>
         </nuxt-link>
@@ -66,8 +76,18 @@
         </span>
       </template>
       <template v-else-if="type === 'organization_invite' && organization">
-        <nuxt-link :to="`/user/${invitedBy.username}`" class="iconified-link title-link">
-          <Avatar :src="invitedBy.avatar_url" circle size="xxs" no-shadow :raised="raised" />
+        <nuxt-link
+          :to="`/user/${invitedBy.username}`"
+          class="iconified-link title-link inline-flex"
+        >
+          <Avatar
+            :src="invitedBy.avatar_url"
+            circle
+            size="xxs"
+            no-shadow
+            :raised="raised"
+            class="inline-flex"
+          />
           <span class="space">&nbsp;</span>
           <span>{{ invitedBy.username }}</span>
         </nuxt-link>
@@ -172,9 +192,12 @@
       </template>
     </div>
     <span class="notification__date">
-      <span v-if="notification.read" class="read-badge"> <ReadIcon /> Read </span>
-      <span v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')">
-        <CalendarIcon /> Received {{ fromNow(notification.created) }}
+      <span v-if="notification.read" class="read-badge inline-flex"> <ReadIcon /> Read </span>
+      <span
+        v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')"
+        class="inline-flex"
+      >
+        <CalendarIcon class="mr-1" /> Received {{ fromNow(notification.created) }}
       </span>
     </span>
     <div v-if="compact" class="notification__actions">
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 0bccc3ab7..5365e65bc 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -19,7 +19,7 @@
     </nuxt-link>
     <div class="title">
       <nuxt-link :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`">
-        <h2 class="name">
+        <h2 class="name !text-2xl">
           {{ name }}
         </h2>
       </nuxt-link>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 2359ec08d..1d5db44d1 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -328,10 +328,10 @@
       <div class="logo-info" role="region" aria-label="Modrinth information">
         <BrandTextLogo
           aria-hidden="true"
-          class="text-logo button-base"
+          class="text-logo button-base mx-auto mb-4 lg:mx-0"
           @click="developerModeIncrement()"
         />
-        <p>
+        <p class="mb-4">
           <IntlFormatted :message-id="footerMessages.openSource">
             <template #github-link="{ children }">
               <a
@@ -345,8 +345,8 @@
             </template>
           </IntlFormatted>
         </p>
-        <p>
-          {{ config.public.owner }}/{{ config.public.slug }} {{ config.public.branch }}@<a
+        <p class="mb-4">
+          {{ config.public.branch }}@<a
             :target="$external()"
             :href="
               'https://github.com/' +
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 294477574..70c739ff5 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -161,7 +161,7 @@
           :class="{ 'has-featured-image': featuredGalleryImage }"
         >
           <nuxt-link
-            class="project__gallery"
+            class="project__gallery relative"
             tabindex="-1"
             :to="
               '/' +
@@ -186,14 +186,14 @@
               :src="project.icon_url"
               :alt="project.title"
               size="md"
-              class="project__icon"
+              class="project__icon relative"
               no-shadow
             />
             <h1 class="title">
               {{ project.title }}
             </h1>
             <nuxt-link
-              class="title-link project-type"
+              class="title-link project-type flex items-center gap-1"
               :to="`/${$getProjectTypeForUrl(project.actualProjectType, project.loaders)}s`"
             >
               <BoxIcon />
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 4933f08cb..4a5a37188 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="universal-card">
     <CollectionCreateModal ref="modal_creation" />
-    <h2>{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
+    <h2 class="text-2xl">{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
     <div class="search-row">
       <div class="iconified-input">
         <label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index 1643b4834..583bb703e 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -15,7 +15,7 @@
     <div class="dashboard-notifications">
       <section class="universal-card">
         <div class="header__row">
-          <h2 class="header__title">Notifications</h2>
+          <h2 class="header__title text-2xl">Notifications</h2>
           <nuxt-link
             v-if="notifications.length > 0"
             class="goto-link"
@@ -38,7 +38,7 @@
           />
           <nuxt-link
             v-if="extraNotifs > 0"
-            class="goto-link view-more-notifs"
+            class="goto-link view-more-notifs mt-4"
             to="/dashboard/notifications"
           >
             View {{ extraNotifs }} more notification{{ extraNotifs === 1 ? "" : "s" }}
@@ -47,7 +47,7 @@
         </template>
         <div v-else class="universal-body">
           <p>You have no unread notifications.</p>
-          <nuxt-link class="iconified-button" to="/dashboard/notifications/history">
+          <nuxt-link class="iconified-button !mt-4" to="/dashboard/notifications/history">
             <HistoryIcon /> View notification history
           </nuxt-link>
         </div>
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 160289b77..db06b5ddd 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -8,8 +8,8 @@
       />
       <div class="header__row">
         <div class="header__title">
-          <h2 v-if="history">Notification history</h2>
-          <h2 v-else>Notifications</h2>
+          <h2 v-if="history" class="text-2xl">Notification history</h2>
+          <h2 v-else class="text-2xl">Notifications</h2>
         </div>
         <template v-if="!history">
           <Button v-if="hasRead" @click="updateRoute()"> <HistoryIcon /> View history </Button>
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index 6e4a3be41..865c39773 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -3,7 +3,7 @@
     <OrganizationCreateModal ref="createOrgModal" />
     <section class="universal-card">
       <div class="header__row">
-        <h2 class="header__title">Organizations</h2>
+        <h2 class="header__title text-2xl">Organizations</h2>
         <div class="input-group">
           <button class="iconified-button brand-button" @click="openCreateOrgModal">
             <PlusIcon />
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 044475fa9..ebd06c9ce 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -159,7 +159,7 @@
     <ModalCreation ref="modal_creation" />
     <section class="universal-card">
       <div class="header__row">
-        <h2 class="header__title">Projects</h2>
+        <h2 class="header__title text-2xl">Projects</h2>
         <div class="input-group">
           <button class="iconified-button brand-button" @click="$refs.modal_creation.show()">
             <PlusIcon />
diff --git a/apps/frontend/src/pages/dashboard/reports.vue b/apps/frontend/src/pages/dashboard/reports.vue
index b269a9c08..a09f4fb5b 100644
--- a/apps/frontend/src/pages/dashboard/reports.vue
+++ b/apps/frontend/src/pages/dashboard/reports.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <section class="universal-card">
-      <h2>Reports</h2>
+      <h2 class="text-2xl">Reports</h2>
       <ReportsList :auth="auth" />
     </section>
   </div>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 299e21f2e..407f9f7bb 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <section class="universal-card">
-      <h2>Revenue</h2>
+      <h2 class="text-2xl">Revenue</h2>
       <div v-if="auth.user.payout_data.balance >= minWithdraw">
         <p>
           You have
@@ -14,7 +14,7 @@
         <strong>{{ $formatMoney(auth.user.payout_data.balance) }}</strong
         >, which is under the minimum of ${{ minWithdraw }} to withdraw.
       </p>
-      <div class="input-group">
+      <div class="input-group mt-4">
         <nuxt-link
           v-if="auth.user.payout_data.balance >= minWithdraw"
           class="iconified-button brand-button"
@@ -34,7 +34,7 @@
       </p>
     </section>
     <section class="universal-card">
-      <h2>Payout methods</h2>
+      <h2 class="text-2xl">Payout methods</h2>
       <h3>PayPal</h3>
       <template v-if="auth.user.auth_providers.includes('paypal')">
         <p>
@@ -42,13 +42,13 @@
           email
           {{ auth.user.payout_data.paypal_address }}
         </p>
-        <button class="btn" @click="removeAuthProvider('paypal')">
+        <button class="btn mt-4" @click="removeAuthProvider('paypal')">
           <XIcon /> Disconnect account
         </button>
       </template>
       <template v-else>
         <p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
-        <a class="btn" :href="`${getAuthUrl('paypal')}&token=${auth.token}`">
+        <a class="btn mt-4" :href="`${getAuthUrl('paypal')}&token=${auth.token}`">
           <PayPalIcon />
           Sign in with PayPal
         </a>
@@ -65,6 +65,7 @@
       <input
         id="venmo"
         v-model="auth.user.payout_data.venmo_handle"
+        class="mt-4"
         type="search"
         name="search"
         placeholder="@example"
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 71dcb57c1..03b748661 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -291,7 +291,7 @@
       </div>
     </Modal>
     <section class="universal-card">
-      <h2>Account security</h2>
+      <h2 class="text-2xl">Account security</h2>
 
       <div class="adjacent-input">
         <label for="theme-selector">
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index 07903f8bf..d9819b8e1 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -128,7 +128,7 @@
 
     <div class="header__row">
       <div class="header__title">
-        <h2>{{ formatMessage(commonSettingsMessages.applications) }}</h2>
+        <h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.applications) }}</h2>
       </div>
       <button
         class="btn btn-primary"
@@ -152,7 +152,7 @@
       information, see
       <a class="text-link" href="https://docs.modrinth.com">Modrinth's API documentation</a>.
     </p>
-    <div v-for="app in usersApps" :key="app.id" class="universal-card recessed token">
+    <div v-for="app in usersApps" :key="app.id" class="universal-card recessed token mt-4">
       <div class="token-info">
         <div class="token-icon">
           <Avatar size="sm" :src="app.icon_url" />
diff --git a/apps/frontend/src/pages/settings/authorizations.vue b/apps/frontend/src/pages/settings/authorizations.vue
index 551cfddf5..a7302eee6 100644
--- a/apps/frontend/src/pages/settings/authorizations.vue
+++ b/apps/frontend/src/pages/settings/authorizations.vue
@@ -7,7 +7,7 @@
       proceed-label="Revoke"
       @proceed="revokeApp(revokingId)"
     />
-    <h2>{{ formatMessage(commonSettingsMessages.authorizedApps) }}</h2>
+    <h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.authorizedApps) }}</h2>
     <p>
       When you authorize an application with your Modrinth account, you grant it access to your
       account. You can manage and review access to your account here at any time.
@@ -18,7 +18,7 @@
     <div
       v-for="authorization in appInfoLookup"
       :key="authorization.id"
-      class="universal-card recessed token"
+      class="universal-card recessed token mt-4"
     >
       <div class="token-content">
         <div>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index bffb9c2a2..d7ef00b60 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <MessageBanner v-if="flags.developerMode" message-type="warning" class="developer-message">
-      <CodeIcon />
+      <CodeIcon class="inline-flex" />
       <IntlFormatted :message-id="developerModeBanner.description">
         <template #strong="{ children }">
           <strong>
@@ -14,9 +14,9 @@
       </Button>
     </MessageBanner>
     <section class="universal-card">
-      <h2>{{ formatMessage(colorTheme.title) }}</h2>
+      <h2 class="text-2xl">{{ formatMessage(colorTheme.title) }}</h2>
       <p>{{ formatMessage(colorTheme.description) }}</p>
-      <div class="theme-options">
+      <div class="theme-options mt-4">
         <button
           v-for="option in themeOptions"
           :key="option"
@@ -50,8 +50,8 @@
       </div>
     </section>
     <section class="universal-card">
-      <h2>{{ formatMessage(projectListLayouts.title) }}</h2>
-      <p>{{ formatMessage(projectListLayouts.description) }}</p>
+      <h2 class="text-2xl">{{ formatMessage(projectListLayouts.title) }}</h2>
+      <p class="mb-4">{{ formatMessage(projectListLayouts.description) }}</p>
       <div class="project-lists">
         <div v-for="projectType in listTypes" :key="projectType.id + '-project-list-layouts'">
           <div class="label">
@@ -137,8 +137,8 @@
       </div>
     </section>
     <section class="universal-card">
-      <h2>{{ formatMessage(toggleFeatures.title) }}</h2>
-      <p>{{ formatMessage(toggleFeatures.description) }}</p>
+      <h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
+      <p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
       <div class="adjacent-input small">
         <label for="advanced-rendering">
           <span class="label__title">
diff --git a/apps/frontend/src/pages/settings/language.vue b/apps/frontend/src/pages/settings/language.vue
index f11f5b0e8..ccaddd5f2 100644
--- a/apps/frontend/src/pages/settings/language.vue
+++ b/apps/frontend/src/pages/settings/language.vue
@@ -285,7 +285,7 @@ function getItemLabel(locale: Locale) {
 <template>
   <div>
     <section class="universal-card">
-      <h2>{{ formatMessage(commonSettingsMessages.language) }}</h2>
+      <h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.language) }}</h2>
 
       <div class="card-description">
         <IntlFormatted :message-id="messages.languagesDescription">
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 069e793fc..fece6d797 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -74,7 +74,7 @@
 
     <div class="header__row">
       <div class="header__title">
-        <h2>{{ formatMessage(commonSettingsMessages.pats) }}</h2>
+        <h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.pats) }}</h2>
       </div>
       <button
         class="btn btn-primary"
diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index aa8399bba..3f59b0dd5 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <section class="card">
-      <h2>{{ formatMessage(messages.title) }}</h2>
-      <p>
+      <h2 class="text-2xl">{{ formatMessage(messages.title) }}</h2>
+      <p class="mb-4">
         <IntlFormatted :message-id="messages.description">
           <template #docs-link="{ children }">
             <a href="https://docs.modrinth.com/" target="_blank" class="text-link">
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index cafed3e02..a7e3fcfbc 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="universal-card">
-    <h2>{{ formatMessage(commonSettingsMessages.sessions) }}</h2>
+    <h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.sessions) }}</h2>
     <p class="preserve-lines">
       {{ formatMessage(messages.sessionsDescription) }}
     </p>
-    <div v-for="session in sessions" :key="session.id" class="universal-card recessed session">
+    <div v-for="session in sessions" :key="session.id" class="universal-card recessed session mt-4">
       <div>
         <div>
           <strong>
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index ecf119b7e..c42c9ad0f 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -1,13 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-    // monorepo
+    "./src/components/**/*.{js,vue,ts}",
+    "./src/layouts/**/*.vue",
+    "./src/pages/**/*.vue",
+    "./src/plugins/**/*.{js,ts}",
+    "./src/app.vue",
+    "./src/error.vue",
+    // monorepo - TODO: migrate this to its own package
     "../../packages/**/*.{js,vue,ts}",
   ],
   theme: {
diff --git a/packages/assets/icons/scale.svg b/packages/assets/icons/scale.svg
index dfdc6cb4b..a583688c8 100644
--- a/packages/assets/icons/scale.svg
+++ b/packages/assets/icons/scale.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
   <path stroke-linecap="round" stroke-linejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
 </svg>