chore: add prettier tailwind (#14)

* chore: 🔧 add prettier tailwind * style: 🎨 ran `pnpm format`
icssc · Jan 9, 2024 · 1c60c86 · 1c60c86
1 parent 3c35cfc
commit 1c60c86
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 24 deletions.
diff --git a/.github/ISSUE_TEMPLATE/default-issue.md b/.github/ISSUE_TEMPLATE/default-issue.md
@@ -1,16 +1,16 @@
 ---
 name: Default Issue
 about: Default template for issues
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 ## Description
 
 <! -- ### Deadline-->
 
 ## TODOs
+
 - [ ] First
 - [ ] Second
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "prettier-plugin-packagejson": "2.4.6",
     "prettier-plugin-prisma": "5.0.0",
     "prettier-plugin-svelte": "3.1.2",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "prisma": "5.6.0",
     "sst": "2.36.6",
     "svelte": "4.2.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/prettier.config.cjs b/prettier.config.cjs
@@ -7,7 +7,12 @@
  */
 const config = {
   printWidth: 100,
-  plugins: ["prettier-plugin-packagejson", "prettier-plugin-prisma", "prettier-plugin-svelte"],
+  plugins: [
+    "prettier-plugin-packagejson",
+    "prettier-plugin-prisma",
+    "prettier-plugin-svelte",
+    "prettier-plugin-tailwindcss",
+  ],
   overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
 };
 

diff --git a/src/lib/components/summary/GroupsCarousel.svelte b/src/lib/components/summary/GroupsCarousel.svelte
@@ -2,14 +2,14 @@
   import { groups } from "$lib/stores/summaryStores";
 </script>
 
-<div class="flex gap-2 overflow-x-auto md:gap-4 snap-x snap-mandatory scroll-smooth">
+<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth md:gap-4">
   {#each $groups as group (group.id)}
     <a href={group.link} target="_blank" referrerpolicy="no-referrer">
       <div
-        class="flex h-24 p-3 bg-center bg-cover rounded-lg md:h-36 snap-start w-36 md:w-64 card"
+        class="card flex h-24 w-36 snap-start rounded-lg bg-cover bg-center p-3 md:h-36 md:w-64"
         style="background-image:url({group.img})"
       >
-        <p class="mt-auto text-lg font-bold text-white md:text-xl line-clamp-2 max-h-12">
+        <p class="mt-auto line-clamp-2 max-h-12 text-lg font-bold text-white md:text-xl">
           {group.name}
         </p>
       </div>

diff --git a/src/lib/components/summary/ScheduledMeetingsList.svelte b/src/lib/components/summary/ScheduledMeetingsList.svelte
@@ -14,40 +14,40 @@
 </script>
 
 {#each Object.keys(sortedMeetings) as date}
-  <div class="p-2 card variant-glass">
+  <div class="card variant-glass p-2">
     <h2 class="mb-2 text-xl font-bold md:text-2xl">{convertIsoToWeekdayDate(date)}</h2>
 
     <div class="flex flex-col gap-2">
       {#each sortedMeetings[date] as meeting}
         <div
-          class="flex flex-col justify-between gap-4 p-3 bg-center bg-cover rounded-lg md:items-center h-fit md:flex-row card hover:variant-ghost"
+          class="card flex h-fit flex-col justify-between gap-4 rounded-lg bg-cover bg-center p-3 hover:variant-ghost md:flex-row md:items-center"
         >
-          <div class="flex flex-wrap items-center justify-between w-full gap-2">
+          <div class="flex w-full flex-wrap items-center justify-between gap-2">
             <div class="flex flex-col gap-y-1">
               <a href={meeting.link} target="_blank" referrerpolicy="no-referrer">
-                <p class="text-xl font-bold md:text-2xl line-clamp-1 max-h-12">
+                <p class="line-clamp-1 max-h-12 text-xl font-bold md:text-2xl">
                   {meeting.name}
                 </p>
               </a>
 
               <div class="flex flex-row flex-wrap gap-x-4">
-                <p class="flex items-center gap-1 text-md md:text-lg">
+                <p class="text-md flex items-center gap-1 md:text-lg">
                   <ClockIcon />
                   {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(
                     meeting.endTime,
                   )}
                 </p>
-                <p class="flex items-center gap-1 text-md md:text-lg">
+                <p class="text-md flex items-center gap-1 md:text-lg">
                   <LocationIcon />
                   {meeting.location}
                 </p>
               </div>
             </div>
           </div>
 
-          <div class="flex justify-center w-full md:w-fit">
+          <div class="flex w-full justify-center md:w-fit">
             <RadioGroup
-              class="flex items-center h-fit w-fit"
+              class="flex h-fit w-fit items-center"
               active="variant-filled-primary"
               hover="hover:variant-soft-primary"
             >

diff --git a/src/lib/components/summary/UnscheduledMeetingsList.svelte b/src/lib/components/summary/UnscheduledMeetingsList.svelte
@@ -15,26 +15,26 @@
 <div class="flex flex-col gap-2">
   {#each sortedMeetings as meeting}
     <div
-      class="flex flex-col justify-between gap-4 p-3 bg-center bg-cover rounded-lg md:items-center h-fit md:flex-row card hover:variant-ghost"
+      class="card flex h-fit flex-col justify-between gap-4 rounded-lg bg-cover bg-center p-3 hover:variant-ghost md:flex-row md:items-center"
     >
-      <div class="flex flex-wrap items-center justify-between w-full gap-2">
+      <div class="flex w-full flex-wrap items-center justify-between gap-2">
         <div class="flex flex-col gap-y-1">
           <a href={meeting.link} target="_blank" referrerpolicy="no-referrer">
-            <p class="text-xl font-bold md:text-2xl line-clamp-1 max-h-12">
+            <p class="line-clamp-1 max-h-12 text-xl font-bold md:text-2xl">
               {meeting.name}
             </p>
           </a>
 
           <div class="flex flex-row flex-wrap gap-x-4">
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <CalendarIcon />
               {convertIsoToDate(meeting.startDate)} - {convertIsoToDate(meeting.endDate)}
             </p>
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <ClockIcon />
               {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(meeting.endTime)}
             </p>
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <LocationIcon />
               {meeting.location}
             </p>

diff --git a/src/routes/summary/+page.svelte b/src/routes/summary/+page.svelte
@@ -12,13 +12,13 @@
 
 <div class="flex flex-col gap-8 px-4 pt-8 md:px-32">
   <div class="flex flex-col gap-4">
-    <h1 class="text-4xl font-bold border-b border-surface-400-500-token">Groups</h1>
+    <h1 class="border-surface-400-500-token border-b text-4xl font-bold">Groups</h1>
     <GroupList />
   </div>
 
   <div class="flex flex-col gap-4">
     <TabGroup>
-      <div class="flex flex-col w-full gap-x-10 gap-y-2">
+      <div class="flex w-full flex-col gap-x-10 gap-y-2">
         <h1 class="text-4xl font-bold">Meetings</h1>
         <div class="flex justify-center gap-5">
           <Tab bind:group={tabSet} name="scheduledTab" value={0}>Scheduled</Tab>