Allow variable size for project logo component (#3478)

The project logo component is currently hardcoded to a width of 8.
Upcoming use cases for this component require different widths. This PR
restructures the component to specify a 1:1 aspect ratio, while leaving
exact widths and other styling up to the user.

Author: williamjallen

resources/js/vue/components/ProjectsPage.vue

@@ -68,6 +68,7 @@
                 <project-logo
                   :image-url="project.logoUrl"
                   :project-name="project.name"
+                  class="tw-w-8"
                 />
               </td>
               <td class="tw-align-middle tw-w-full">

resources/js/vue/components/shared/ProjectLogo.vue

@@ -1,18 +1,14 @@
 <template>
-  <div v-if="imageUrl">
-    <div class="tw-rounded tw-w-8">
-      <img
-        :alt="projectName + ' logo'"
-        :src="imageUrl"
-      >
-    </div>
-  </div>
-  <div
-    v-else
-    class="tw-avatar tw-placeholder"
-  >
+  <div class="tw-aspect-square tw-rounded tw-overflow-hidden">
+    <img
+      v-if="imageUrl"
+      :alt="projectName + ' logo'"
+      :src="imageUrl"
+      class="tw-w-full tw-h-full tw-object-cover"
+    >
     <div
-      class="tw-rounded tw-w-8"
+      v-else
+      class="tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center"
       :class="placeholderColorClass"
     >
       <span>{{ projectName[0].toUpperCase() }}</span>