Merge pull request #226 from the-code-raider/main

Minor UI Fixes

Author: MrSunshyne

packages/frontendmu-astro/src/data/contributors.json

@@ -1,19 +1,19 @@
 [
   {
     "username": "MrSunshyne",
-    "contributions": 662
+    "contributions": 663
   },
   {
     "username": "houzyk",
     "contributions": 31
   },
   {
-    "username": "k3ii",
-    "contributions": 27
+    "username": "n-d-r-d-g",
+    "contributions": 28
   },
   {
-    "username": "n-d-r-d-g",
-    "contributions": 26
+    "username": "k3ii",
+    "contributions": 27
   },
   {
     "username": "nicolasstrands",

packages/frontendmu-nuxt/components/community/ProjectsSection.vue

@@ -55,7 +55,7 @@ const sortedProjects = projects.sort((a, b) => {
                 />
               </div>
             </div>
-            <div class="py-2 text-sm text-start">
+            <div class="py-2 text-sm text-start flex-grow">
               {{ project.description }}
             </div>
 

packages/frontendmu-nuxt/components/meetup/Album.vue

@@ -59,8 +59,8 @@ function setActiveImageIndex(index: number) {
                 </div>
               </CarouselItem>
             </CarouselContent>
-            <CarouselPrevious class="left-1 bg-[#00000097]" />
-            <CarouselNext class="right-1 bg-[#00000097]" />
+            <CarouselPrevious class="left-1" />
+            <CarouselNext class="right-1" />
           </Carousel>
         </DialogContent>
       </Dialog>

packages/frontendmu-nuxt/components/site/MeetupSponsors.vue

@@ -21,7 +21,7 @@ function sponsorClassList(sponsor: Sponsor) {
 </script>
 
 <template>
-  <div class="grid grid-cols-7 gap-8">
+  <div class="grid lg:grid-cols-7 md:gap-8 md:grid-cols-3 grid-cols-2 gap-4 auto-rows-auto">
     <!-- <template v-for="sponsor in allSponsors" :key="sponsor.Sponsor_id">
             <img class="h-16 w-20 md:w-auto object-contain md:object-cover" :src="sponsorLogoUrl(sponsor)"
                 :alt="sponsor.Sponsor_id.Name" :title="sponsor.Sponsor_id.Name" :width="sponsor.Sponsor_id.Logo.width"

packages/frontendmu-nuxt/components/ui/dialog/DialogContent.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       v-bind="forwarded"
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
-        <X class="w-4 h-4" />
+        <X class="w-4 h-4 text-white" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

packages/frontendmu-nuxt/pages/sponsors.vue

@@ -13,8 +13,9 @@ const description = ''
         <BaseHeading>Sponsors</BaseHeading>
         <p class="text-xl text-verse-600 dark:text-verse-200">
           We're lucky to have sponsors support our community. If you're
-          interested in sponsoring us,<a href="mailto:hello@frontend.mu" class="underline"
-                                         title="Please reach out to us via email"
+          interested in sponsoring us,<a
+            href="mailto:hello@frontend.mu" class="underline hover:bg-verse-50 dark:bg-verse-950"
+            title="Please reach out to us via email"
           > please reach out to the organizers
             here</a>.
         </p>
@@ -32,16 +33,19 @@ const description = ''
                 {{ sponsorType.description }}
               </p>
             </div>
-            <ul role="list"
-                class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12"
+            <ul
+              role="list"
+              class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12"
             >
               <template v-for="(sponsor, index) in sponsorType.sponsors" :key="index">
                 <li class="pt-4">
-                  <a target="_blank" :href="sponsor.sponsorUrl"
-                     class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg"
+                  <a
+                    target="_blank" :href="sponsor.sponsorUrl"
+                    class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg h-full"
                   >
-                    <img v-if="sponsor.logo" class="w-48 h-auto" :src="`/img/sponsors/${sponsor.logo}`"
-                         :style="vTransitionName('sponsor-name', sponsor.name)"
+                    <img
+                      v-if="sponsor.logo" class="w-48 h-52 object-contain" :src="`/img/sponsors/${sponsor.logo}`"
+                      :style="vTransitionName('sponsor-name', sponsor.name)"
                     >
                     <div v-else>
                       <span class="text-2xl font-bold">{{ sponsor.name }}</span>