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

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

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

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">
+        <nuxt-link
-          <Avatar :src="invitedBy.avatar_url" circle size="xxs" no-shadow :raised="raised" />
+          :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">
+        <nuxt-link
-          <Avatar :src="invitedBy.avatar_url" circle size="xxs" no-shadow :raised="raised" />
+          :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-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')">
+      <span
-        <CalendarIcon /> Received {{ fromNow(notification.created) }}
+        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">

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>

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>
+        <p class="mb-4">
-          {{ config.public.owner }}/{{ config.public.slug }} {{ config.public.branch }}@<a
+          {{ config.public.branch }}@<a
             :target="$external()"
             :href="
               'https://github.com/' +

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

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>

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>

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-if="history" class="text-2xl">Notification history</h2>
-          <h2 v-else>Notifications</h2>
+          <h2 v-else class="text-2xl">Notifications</h2>
         </div>
         <template v-if="!history">
           <Button v-if="hasRead" @click="updateRoute()"> <HistoryIcon /> View history </Button>

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

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

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>

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"

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

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

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>

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>
+      <h2 class="text-2xl">{{ formatMessage(projectListLayouts.title) }}</h2>
-      <p>{{ formatMessage(projectListLayouts.description) }}</p>
+      <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>
+      <h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
-      <p>{{ formatMessage(toggleFeatures.description) }}</p>
+      <p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
       <div class="adjacent-input small">
         <label for="advanced-rendering">
           <span class="label__title">

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

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"

apps/frontend/src/pages/settings/profile.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <section class="card">
-      <h2>{{ formatMessage(messages.title) }}</h2>
+      <h2 class="text-2xl">{{ formatMessage(messages.title) }}</h2>
-      <p>
+      <p class="mb-4">
         <IntlFormatted :message-id="messages.description">
           <template #docs-link="{ children }">
             <a href="https://docs.modrinth.com/" target="_blank" class="text-link">

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>

apps/frontend/tailwind.config.js

@@ -1,13 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./components/**/*.{js,vue,ts}",
+    "./src/components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
+    "./src/layouts/**/*.vue",
-    "./pages/**/*.vue",
+    "./src/pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
+    "./src/plugins/**/*.{js,ts}",
-    "./app.vue",
+    "./src/app.vue",
-    "./error.vue",
+    "./src/error.vue",
-    // monorepo
+    // monorepo - TODO: migrate this to its own package
     "../../packages/**/*.{js,vue,ts}",
   ],
   theme: {

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>