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

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>