chore: convert text to date

assets/css/typography.css

@@ -3,7 +3,7 @@ html {
   font-size: 19px;
 }
 .typo {
-  @apply leading-normal break-words text-black;
+  @apply break-words leading-normal text-black;
 }
 .typo li + li {
   @apply mt-1;
@@ -29,34 +29,34 @@ html {
   @apply mb-4;
 }
 .typo h1 {
-  @apply leading-tight border-b text-4xl font-sans font-extrabold mb-4 mt-6 pb-2;
+  @apply mb-4 mt-6 border-b pb-2 font-sans text-4xl font-extrabold leading-tight;
 }
 .typo h2 {
-  @apply leading-tight border-b text-2xl font-sans font-semibold mb-4 mt-6 pb-2;
+  @apply mb-4 mt-6 border-b pb-2 font-sans text-2xl font-semibold leading-tight;
 }
 .typo h3 {
-  @apply leading-snug text-lg font-sans font-semibold mb-4 mt-6;
+  @apply mb-4 mt-6 font-sans text-lg font-semibold leading-snug;
 }
 .typo h4 {
-  @apply leading-none text-base font-sans font-semibold mb-4 mt-6;
+  @apply mb-4 mt-6 font-sans text-base font-semibold leading-none;
 }
 .typo h5 {
-  @apply leading-tight text-sm font-sans font-semibold mb-4 mt-6;
+  @apply mb-4 mt-6 font-sans text-sm font-semibold leading-tight;
 }
 .typo h6 {
-  @apply leading-tight text-sm font-sans font-semibold text-gray-600 mb-4 mt-6;
+  @apply mb-4 mt-6 font-sans text-sm font-semibold leading-tight text-gray-600;
 }
 .typo blockquote {
-  @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
+  @apply border-l-4 border-gray-300 pl-4 pr-4 text-base text-gray-600;
 }
 .typo ul {
-  @apply text-base pl-8 list-disc;
+  @apply list-disc pl-8 text-base;
 }
 .typo ol {
-  @apply text-base pl-8 list-decimal;
+  @apply list-decimal pl-8 text-base;
 }
 .typo table {
-  @apply text-base border-gray-600;
+  @apply border-gray-600 text-base;
 }
 .typo th {
   @apply border py-1 px-3;
@@ -69,7 +69,7 @@ html {
   @apply mx-auto block;
 }
 .typo figcaption {
-  @apply font-semibold text-center text-gray-800 mt-2;
+  @apply mt-2 text-center font-semibold text-gray-800;
 }
 .details {
   @apply p-2;

components/Actions/TReaction.vue

@@ -6,9 +6,9 @@
     :data-names="names"
     @click="toggle"
   >
-    <component :is="icon" class="w-4 h-4" />
+    <component :is="icon" class="h-4 w-4" />
     <div class="ml-1">{{ clicked ? toggledLabel : label }}</div>
-    <div class="ml-1 text-xs rounded-full bg-gray-200 px-1 block">
+    <div class="ml-1 block rounded-full bg-gray-200 px-1 text-xs">
       {{ count }}
     </div>
   </TButton>
@@ -90,7 +90,8 @@ export default {
       } else {
         change = {
           [`${props.field}.count`]: count.value - 1,
-          [`${props.field}.list.${username.value}`]: firebase.firestore.FieldValue.delete(),
+          [`${props.field}.list.${username.value}`]:
+            firebase.firestore.FieldValue.delete(),
         }
       }
 

components/Actions/TReactions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="item.hideReactions"></div>
-  <div v-else class="flex flex-wrap gap-2 items-center">
+  <div v-else class="flex flex-wrap items-center gap-2">
     <TReaction
       :label="$t('TReaction.watch')"
       toggled-label="Watching"

components/Actions/TStars.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex border rounded divide-x items-center">
+  <div class="inline-flex items-center divide-x rounded border">
     <div>
       <TReaction
         :label="$t('TReaction.star')"
@@ -14,37 +14,35 @@
       <TMenu>
         <template v-slot:button>
           <TButton type="xs" class="border-none">
-            <ChevronDownIcon class="w-3 h-3" />
+            <ChevronDownIcon class="h-3 w-3" />
           </TButton>
         </template>
         <template v-slot:menu>
           <div
-            class="w-32 bg-white rounded shadow border text-xs flex flex-col"
+            class="flex w-32 flex-col rounded border bg-white text-xs shadow"
           >
-            <div class="px-2 py-1">
-              Add to list
-            </div>
+            <div class="px-2 py-1">Add to list</div>
             <label
               v-for="list in lists"
               :key="list.id"
-              class="px-2 py-1 flex items-center space-x-1"
+              class="flex items-center space-x-1 px-2 py-1"
               @click.prevent="toggle(list)"
             >
               <input type="checkbox" :checked="isSelected(list)" />
               <span>{{ list.label }}</span>
             </label>
             <button
-              class="border-t px-2 py-1 hover:bg-gray-100 text-left flex items-center space-x-1"
+              class="flex items-center space-x-1 border-t px-2 py-1 text-left hover:bg-gray-100"
               @click="showPopup = true"
             >
-              <PlusIcon class="w-3 h-3" />
+              <PlusIcon class="h-3 w-3" />
               <span>Create list</span>
             </button>
           </div>
         </template>
       </TMenu>
       <TPopup v-if="showPopup" title="Create list" @close="showPopup = false">
-        <div class="p-4 space-y-2">
+        <div class="space-y-2 p-4">
           <TField v-model="newListLabel" hide-label placeholder="List name" />
           <div class="flex justify-end">
             <TButton label="Add" @click="addList" />

components/Card/TCardEvent.vue

@@ -9,17 +9,17 @@
         class="font-bold leading-none underline hover:no-underline"
         >{{ node.name }}</NuxtLink
       >
-      <div class="mt-2 text-sm text-gray-700 space-y-1">
-        <div class="flex gap-2 items-center">
-          <CalendarIcon class="w-4 h-4" />
+      <div class="mt-2 space-y-1 text-sm text-gray-700">
+        <div class="flex items-center gap-2">
+          <CalendarIcon class="h-4 w-4" />
           <TDateTime :value="node.startDate" />
         </div>
-        <div class="flex gap-2 items-center">
-          <LocationMarkerIcon class="w-4 h-4" />
+        <div class="flex items-center gap-2">
+          <LocationMarkerIcon class="h-4 w-4" />
           <TVenue :node="node.venue" />
         </div>
-        <div v-if="node.price" class="flex gap-2 items-center">
-          <TicketIcon class="w-4 h-4" />
+        <div v-if="node.price" class="flex items-center gap-2">
+          <TicketIcon class="h-4 w-4" />
           {{ node.price }}
         </div>
         <TStyles :value="node.styles" />

components/Card/TCardLink.vue

@@ -1,10 +1,10 @@
 <template>
   <component :is="component" v-if="component" :url="url" />
-  <div v-else class="p-4 text-xs text-center">
+  <div v-else class="p-4 text-center text-xs">
     <a
       :href="url"
       target="_blank"
-      class="underline text-blue-500 hover:no-underline "
+      class="text-blue-500 underline hover:no-underline"
       >{{ url }}</a
     >
   </div>

components/Card/TCardPoll.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showEditor" class="border p-4 space-y-2">
+  <div v-if="showEditor" class="space-y-2 border p-4">
     <TInput
       v-for="(answer, key) in data.answers"
       :key="`answer-${key}`"

components/Formatters/TVenue.vue

@@ -3,7 +3,7 @@
     <h4>
       {{ node.name }}<span v-if="node.room"> • {{ node.room }}</span>
     </h4>
-    <div v-if="showAddress" class="text-gray-700 text-xs">
+    <div v-if="showAddress" class="text-xs text-gray-700">
       {{ node.formatted_address }}
     </div>
   </div>

components/MainNavigation.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="p-4 flex flex-col space-y-2 text-dark h-screen overflow-y-scroll sticky top-0 border-r"
+    class="sticky top-0 flex h-screen flex-col space-y-2 overflow-y-scroll border-r p-4 text-dark"
   >
     <TButton
       allow-guests
@@ -44,7 +44,7 @@
         to="/register"
         type="nav"
         :label="$t('auth.signup')"
-        class="bg-primary border-none text-white hover:bg-dark"
+        class="border-none bg-primary text-white hover:bg-dark"
       />
     </template>
 
@@ -127,6 +127,6 @@ export default {
 
 <style>
 nav .nuxt-link-exact-active {
-  @apply text-primary border-primary;
+  @apply border-primary text-primary;
 }
 </style>

components/TAuthError.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div>
-      <h2 class="font-bold text-xl text-red-500">Oops</h2>
-      <div class="text-red-500 mt-4">
+      <h2 class="text-xl font-bold text-red-500">Oops</h2>
+      <div class="mt-4 text-red-500">
         {{ error.message }}
       </div>
       <div v-if="error.code === 'auth/web-storage-unsupported'" class="mt-4">
@@ -11,7 +11,7 @@
         third-party cookies."
       </div>
     </div>
-    <div class="border-t mt-4 pt-4">
+    <div class="mt-4 border-t pt-4">
       If you have any problems please contact support:
       <a
         class="text-blue-500 underline hover:no-underline"

components/TButton.vue

@@ -121,19 +121,16 @@ export default {
           'bg-green-500 no-underline text-white font-semibold py-2 px-4 rounded-full hover:text-white hover:bg-green-700 shadow',
         danger:
           'bg-red-500 no-underline text-white font-semibold py-2 px-4 rounded-full hover:text-white hover:bg-red-700 shadow',
-        base:
-          'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-1 px-4 border border-gray-400 rounded-full shadow',
+        base: 'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-1 px-4 border border-gray-400 rounded-full shadow',
         secondary:
           'bg-transparent text-primary font-semibold py-2 px-4 border border-primary rounded-full no-underline hover:bg-primary hover:text-white hover:border-transparent',
         link: 'underline font-semibold hover:no-underline',
         context:
           'text-left w-full px-4 py-2 hover:bg-indigo-500 hover:text-white',
         'context-active': 'text-left w-full px-4 py-2 bg-indigo-500 text-white',
-        nav:
-          'p-2 font-semibold items-center flex rounded-full hover:bg-red-100 hover:text-primary',
+        nav: 'p-2 font-semibold items-center flex rounded-full hover:bg-red-100 hover:text-primary',
         void: '',
-        xs:
-          'inline-flex items-center px-2 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
+        xs: 'inline-flex items-center px-2 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
       }
 
       let classes =

components/TButtonEditProfile.vue

@@ -2,7 +2,7 @@
   <div>
     <TButton @click="showPopup = true"> Edit Profile </TButton>
     <TPopup v-if="showPopup" title="Edit Profile" @close="showPopup = false">
-      <div class="max-w-md mx-auto py-4 h-64 overflow-y-scroll">
+      <div class="mx-auto h-64 max-w-md overflow-y-scroll py-4">
         <TForm
           v-model="profile"
           :fields="profileFields"

components/TCard.vue

@@ -1,13 +1,13 @@
 <template>
-  <pre v-if="$route.query.debug" class="border p-4 m-4 rounded">{{ item }}</pre>
-  <div v-else class="rounded bg-white mb-4 shadow border max-w-sm">
+  <pre v-if="$route.query.debug" class="m-4 rounded border p-4">{{ item }}</pre>
+  <div v-else class="mb-4 max-w-sm rounded border bg-white shadow">
     <div>
       <img class="rounded-t" :src="item.cover" :alt="item.name" />
     </div>
-    <div class="font-bold leading-tight px-4 my-2">
+    <div class="my-2 px-4 font-bold leading-tight">
       {{ item.name }}
     </div>
-    <div class="flex justify-between px-4 mb-4 items-center">
+    <div class="mb-4 flex items-center justify-between px-4">
       <div>{{ getDateTime(item.startTime) }}</div>
       <TButton :href="item.url">Open</TButton>
     </div>

components/TCardComment.vue

@@ -5,7 +5,7 @@
       <div>{{ dateDiff(item.createdAt) }}</div>
     </TAvatar>
     <div class="mt-1">{{ item.body }}</div>
-    <div class="text-sm flex items-start mt-1">
+    <div class="mt-1 flex items-start text-sm">
       <TButton type="xs" @click="onShowForm">Reply</TButton>
     </div>
 

components/TCardList.vue

@@ -12,19 +12,19 @@
 
     <slot name="header" />
 
-    <div v-if="currentId === 'add'" class="mt-4 rounded bg-white mb-4 shadow">
+    <div v-if="currentId === 'add'" class="mt-4 mb-4 rounded bg-white shadow">
       <TForm
         :fields="fields"
         show-cancel
-        class="px-6 py-4 space-y-4"
+        class="space-y-4 px-6 py-4"
         @save="createItem"
         @cancel="cancelItem"
       />
     </div>
 
     <div
       v-if="filters && filters.length > 1"
-      class="mt-4 md:flex bg-orange-100 rounded shadow"
+      class="mt-4 rounded bg-orange-100 shadow md:flex"
     >
       <button
         v-for="filter in filters"

components/TCommentsInline.vue

@@ -3,7 +3,7 @@
   <div v-else>
     <button
       v-if="!showComments"
-      class="p-2 text-blue-700 cursor-pointer underline hover:no-underline text-xs text-center mb-2 block w-full"
+      class="mb-2 block w-full cursor-pointer p-2 text-center text-xs text-blue-700 underline hover:no-underline"
       @click="showComments = true"
     >
       {{ item.commentsCount || 0 }} comments

components/TDropdown.vue

@@ -4,7 +4,7 @@
       <TButton :icon="icon" :type="type" :label="label" :title="title" />
     </template>
     <template v-slot:menu="{ closeMenu }">
-      <div class="w-32 py-2 bg-white rounded-lg shadow-xl border">
+      <div class="w-32 rounded-lg border bg-white py-2 shadow-xl">
         <slot :closeMenu="closeMenu" />
       </div>
     </template>

components/TDropdownSelect.vue

@@ -8,7 +8,7 @@
       />
     </template>
     <template v-slot:menu>
-      <div class="w-40 py-2 bg-white rounded-lg shadow-xl border">
+      <div class="w-40 rounded-lg border bg-white py-2 shadow-xl">
         <TButton
           v-for="option in options"
           :key="getValue(option)"

components/TDropdownSeparator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="font-bold p-2 text-xs text-gray-700 border-b">{{ label }}</div>
+  <div class="border-b p-2 text-xs font-bold text-gray-700">{{ label }}</div>
 </template>
 
 <script>

components/TEventList.vue

@@ -4,17 +4,17 @@
     <div v-else-if="!count && showEmpty">
       {{ emptyLabel }}
     </div>
-    <div class="flex justify-between items-center px-2">
-      <h2 v-if="title" class="font-bold text-lg">{{ title }}</h2>
+    <div class="flex items-center justify-between px-2">
+      <h2 v-if="title" class="text-lg font-bold">{{ title }}</h2>
       <div v-else></div>
       <TButton type="nav" icon="copy" @click="copyToClipboard" />
     </div>
-    <div v-if="items.length" class="space-y-8 mt-4">
+    <div v-if="items.length" class="mt-4 space-y-8">
       <div v-for="(items, date) in itemsByDate" :key="date">
-        <h2 class="font-bold bg-dark text-white py-2 px-4 rounded">
+        <h2 class="rounded bg-dark py-2 px-4 font-bold text-white">
           {{ getDay(date) }}, {{ getDate(date) }}
         </h2>
-        <div v-for="item in items" :key="item.id" class="px-4 mt-4">
+        <div v-for="item in items" :key="item.id" class="mt-4 px-4">
           <TEventText :item="item" />
         </div>
       </div>