chore: optimize Tailwind CSS classes (#549)

* fix: fix and improve css classes * fix: css fix and improvement * fix: css fix and improvement * fix: typo fix * fix: more css class shorthand * fix: revert changes * fix: revert to use pixels in size * fix: revert h and w to use px values * fix: revert changes * fix: revert unrelated changes * fix: fix wrong classname * fix: link fix * fix: remove text-color class * fix: fix incorrect search/replace
snapshot-labs · Jul 29, 2024 · c787f24 · c787f24
1 parent 9a59a7f
commit c787f24
Show file tree

Hide file tree

Showing 56 changed files with 134 additions and 165 deletions.
diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
@@ -163,7 +163,7 @@ const navigationItems = computed(() =>
 <template>
   <div
     v-if="Object.keys(navigationItems).length"
-    class="lg:visible fixed w-[240px] border-r left-[72px] top-0 bottom-0 z-10 bg-skin-bg"
+    class="lg:visible fixed w-[240px] border-r left-[72px] inset-y-0 z-10 bg-skin-bg"
     :class="{
       invisible: !uiStore.sidebarOpen
     }"

diff --git a/apps/ui/src/components/App/Notifications.vue b/apps/ui/src/components/App/Notifications.vue
@@ -3,7 +3,7 @@ const uiStore = useUiStore();
 </script>
 
 <template>
-  <div class="fixed bottom-4 left-0 right-0 z-[52]">
+  <div class="fixed bottom-4 inset-x-0 z-[52]">
     <UiAlert
       v-for="notification in uiStore.notifications"
       :key="notification.id"

diff --git a/apps/ui/src/components/App/Sidebar.vue b/apps/ui/src/components/App/Sidebar.vue
@@ -7,10 +7,10 @@ const followedSpacesStore = useFollowedSpacesStore();
 
 <template>
   <div
-    class="w-[72px] flex flex-col border-r fixed left-0 top-0 bottom-0 text-center h-screen"
+    class="w-[72px] flex flex-col border-r fixed left-0 inset-y-0 text-center h-screen"
   >
     <router-link :to="{ name: 'landing' }" class="h-[72px] block">
-      <IH-stop class="inline-block my-4 w-[32px] h-[32px] text-skin-link" />
+      <IH-stop class="inline-block my-4 size-[32px] text-skin-link" />
     </router-link>
     <div
       class="bg-gradient-to-b from-skin-bg top-[72px] h-[8px] w-[71px] absolute z-10"

diff --git a/apps/ui/src/components/App/Topnav.vue b/apps/ui/src/components/App/Topnav.vue
@@ -67,7 +67,7 @@ watch(
 
 <template>
   <nav
-    class="border-b fixed top-0 right-0 z-50 left-0 lg:left-[72px]"
+    class="border-b fixed top-0 inset-x-0 z-50 lg:left-[72px]"
     :class="{
       'translate-x-[72px] lg:translate-x-0': uiStore.sidebarOpen
     }"
@@ -79,7 +79,7 @@ watch(
         'translate-x-[240px] lg:translate-x-0': uiStore.sidebarOpen && hasAppNav
       }"
     >
-      <div class="flex flex-grow items-center h-full">
+      <div class="flex grow items-center h-full">
         <button
           type="button"
           class="inline-block text-skin-link mr-4 cursor-pointer lg:hidden"

diff --git a/apps/ui/src/components/AppsListItem.vue b/apps/ui/src/components/AppsListItem.vue
@@ -7,7 +7,7 @@ defineProps<{ app: any }>();
     :to="{ name: 'app', params: { id: app.id } }"
     class="border rounded-lg p-3 leading-6"
   >
-    <img :src="app.avatar" class="w-[32px] h-[32px] rounded-lg mb-2" />
+    <img :src="app.avatar" class="size-[32px] rounded-lg mb-2" />
     <h4 v-text="app.name" />
     <div class="text-skin-text text-[17px]" v-text="app.category" />
   </router-link>

diff --git a/apps/ui/src/components/EditorChoices.vue b/apps/ui/src/components/EditorChoices.vue
@@ -34,7 +34,7 @@ function handlePressEnter(index) {
         <template #item="{ index }">
           <div>
             <div
-              class="flex items-center rounded-lg bg-skin-border h-[40px] gap-[12px] pl-2.5"
+              class="flex items-center rounded-lg bg-skin-border h-[40px] gap-2.5 pl-2.5"
             >
               <div
                 v-if="proposal.type !== 'basic'"
@@ -59,7 +59,7 @@ function handlePressEnter(index) {
               </div>
               <UiButton
                 v-if="proposal.choices.length > 1 && proposal.type !== 'basic'"
-                class="border-0 rounded-l-none rounded-r-lg bg-transparent !h-[40px] w-[40px] !px-0 text-center text-skin-text shrink-0"
+                class="border-0 rounded-l-none rounded-r-lg bg-transparent !size-[40px] !px-0 text-center text-skin-text shrink-0"
                 @click="proposal.choices.splice(index, 1)"
               >
                 <IH-trash class="inline-block" />

diff --git a/apps/ui/src/components/FormNetwork.vue b/apps/ui/src/components/FormNetwork.vue
@@ -27,7 +27,7 @@ const availableNetworks = enabledReadWriteNetworks.map(id => {
       >
         <img
           :src="getUrl(network.avatar) ?? undefined"
-          class="w-[32px] h-[32px] mr-3 rounded-lg"
+          class="size-[32px] mr-3 rounded-lg"
         />
         {{ network.name }}
       </button>

diff --git a/apps/ui/src/components/FormProfile.vue b/apps/ui/src/components/FormProfile.vue
@@ -189,7 +189,7 @@ onMounted(() => {
 <template>
   <h3 v-if="showTitle" class="mb-4">Space profile</h3>
   <UiInputStampCover v-model="(form as any).cover" :space="space" />
-  <div class="s-box p-4 -mt-[80px]">
+  <div class="s-box p-4 mt-[-80px]">
     <UiForm
       :model-value="form"
       :error="formErrors"

diff --git a/apps/ui/src/components/Modal/Account.vue b/apps/ui/src/components/Modal/Account.vue
@@ -66,9 +66,7 @@ watch(open, () => (step.value = null));
           type="button"
           @click="$emit('login', connector.id)"
         >
-          <UiButton
-            class="button-outline w-full flex justify-center items-center"
-          >
+          <UiButton class="w-full flex justify-center items-center">
             <img
               :src="getConnectorIconUrl(connector.icon)"
               height="28"
@@ -89,7 +87,7 @@ watch(open, () => (step.value = null));
           tabindex="-1"
         >
           <UiButton
-            class="button-outline w-full flex justify-center items-center space-x-2"
+            class="w-full flex justify-center items-center space-x-2"
             @click="emit('close')"
           >
             <UiStamp :id="web3.account" :size="18" />
@@ -98,19 +96,16 @@ watch(open, () => (step.value = null));
         </router-link>
         <router-link to="/settings" class="block" tabindex="-1">
           <UiButton
-            class="button-outline w-full flex justify-center items-center"
+            class="w-full flex justify-center items-center"
             @click="emit('close')"
           >
             <span>Settings</span>
           </UiButton>
         </router-link>
-        <UiButton class="button-outline w-full" @click="step = 'connect'">
+        <UiButton class="w-full" @click="step = 'connect'">
           {{ web3.account ? 'Change wallet' : 'Connect wallet' }}
         </UiButton>
-        <UiButton
-          class="button-outline w-full !text-skin-danger"
-          @click="handleLogout"
-        >
+        <UiButton class="w-full !text-skin-danger" @click="handleLogout">
           Log out
         </UiButton>
       </div>

diff --git a/apps/ui/src/components/Modal/Connector.vue b/apps/ui/src/components/Modal/Connector.vue
@@ -56,9 +56,7 @@ const availableConnectors = computed(() => {
           type="button"
           @click="emit('pick', connector.id)"
         >
-          <UiButton
-            class="button-outline w-full flex justify-center items-center"
-          >
+          <UiButton class="w-full flex justify-center items-center">
             <img
               :src="getConnectorIconUrl(connector.icon)"
               height="28"

diff --git a/apps/ui/src/components/Modal/Delegate.vue b/apps/ui/src/components/Modal/Delegate.vue
@@ -91,7 +91,7 @@ watchEffect(async () => {
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/DelegationConfig.vue b/apps/ui/src/components/Modal/DelegationConfig.vue
@@ -133,7 +133,7 @@ watch(
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/EditSpace.vue b/apps/ui/src/components/Modal/EditSpace.vue
@@ -83,7 +83,7 @@ watch(
         <h3>Select contact</h3>
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/EditStrategy.vue b/apps/ui/src/components/Modal/EditStrategy.vue
@@ -55,7 +55,7 @@ watch(
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/EditUser.vue b/apps/ui/src/components/Modal/EditUser.vue
@@ -99,7 +99,7 @@ async function handleSubmit() {
       <h3>Edit profile</h3>
     </template>
     <UiInputStampCover v-model="(form as any).cover" :user="user" />
-    <div class="s-box p-4 -mt-[80px]">
+    <div class="s-box p-4 mt-[-80px]">
       <UiForm v-model="form" :error="formErrors" :definition="definition" />
     </div>
     <template #footer>

diff --git a/apps/ui/src/components/Modal/LinkWalletConnect.vue b/apps/ui/src/components/Modal/LinkWalletConnect.vue
@@ -103,10 +103,7 @@ watch(loading, () => {
     <div class="s-box p-4">
       <template v-if="logged && proposal">
         <div class="flex flex-col items-center">
-          <img
-            :src="proposal.proposer.metadata.icons[0]"
-            class="w-[48px] mb-3"
-          />
+          <img :src="proposal.proposer.metadata.icons[0]" class="w-[48px] mb-3" />
           <span class="text-center mb-2">
             <strong class="text-skin-link">{{
               proposal.proposer.metadata.name

diff --git a/apps/ui/src/components/Modal/SelectVotingType.vue b/apps/ui/src/components/Modal/SelectVotingType.vue
@@ -24,7 +24,7 @@ function handleSelect(type: VoteType) {
     <template #header>
       <h3>Select voting type</h3>
     </template>
-    <div class="p-4 flex flex-col gap-[12px]">
+    <div class="p-4 flex flex-col gap-2.5">
       <UiSelector
         v-for="(type, index) in votingTypes"
         :key="index"

diff --git a/apps/ui/src/components/Modal/SendNft.vue b/apps/ui/src/components/Modal/SendNft.vue
@@ -125,7 +125,7 @@ watchEffect(async () => {
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/SendToken.vue b/apps/ui/src/components/Modal/SendToken.vue
@@ -217,7 +217,7 @@ watchEffect(async () => {
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />
@@ -303,7 +303,7 @@ watchEffect(async () => {
           />
           <button
             type="button"
-            class="absolute right-[16px] top-[4px]"
+            class="absolute right-3 top-1"
             @click="handleMaxClick"
             v-text="'max'"
           />

diff --git a/apps/ui/src/components/Modal/StakeToken.vue b/apps/ui/src/components/Modal/StakeToken.vue
@@ -133,15 +133,13 @@ watch(
           />
           <button
             type="button"
-            class="absolute right-[16px] top-[4px]"
+            class="absolute right-3 top-1"
             href="#"
             @click.prevent="handleMaxClick"
           >
             max
           </button>
-          <div
-            class="absolute right-[16px] top-[26px] flex items-center gap-x-2"
-          >
+          <div class="absolute right-3 top-[26px] flex items-center gap-x-2">
             <UiStamp :id="token.contractAddress" type="token" :size="20" />
             ETH
           </div>
@@ -156,9 +154,7 @@ watch(
               examples: ['0']
             }"
           />
-          <div
-            class="absolute right-[16px] top-[28px] flex items-center gap-x-2"
-          >
+          <div class="absolute right-3 top-[28px] flex items-center gap-x-2">
             <UiStamp
               :id="`${networkId}:${stakingContract.address}`"
               type="token"

diff --git a/apps/ui/src/components/Modal/Timeline.vue b/apps/ui/src/components/Modal/Timeline.vue
@@ -74,15 +74,15 @@ const now = parseInt((Date.now() / 1e3).toFixed());
     <template #header>
       <h3 v-text="'Timeline'" />
     </template>
-    <div class="p-4 flex flex-column">
+    <div class="p-4 flex">
       <div class="mt-1 ml-2">
         <div
           v-for="(state, i) in states"
           :key="state.id"
           class="flex relative h-[60px]"
         >
           <div
-            class="absolute w-[15px] h-[15px] inline-block rounded-full -left-[7px] border-[4px] border-skin-bg"
+            class="absolute size-[15px] inline-block rounded-full left-[-7px] border-4 border-skin-bg"
             :class="state.value <= now ? 'bg-skin-heading' : 'bg-skin-border'"
           />
           <div

diff --git a/apps/ui/src/components/Modal/Transaction.vue b/apps/ui/src/components/Modal/Transaction.vue
@@ -264,7 +264,7 @@ watchEffect(async () => {
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/TreasuryConfig.vue b/apps/ui/src/components/Modal/TreasuryConfig.vue
@@ -106,7 +106,7 @@ watch(
       <template v-if="showPicker">
         <button
           type="button"
-          class="absolute left-0 -top-1 p-4 text-color"
+          class="absolute left-0 -top-1 p-4"
           @click="showPicker = false"
         >
           <IH-arrow-narrow-left class="mr-2" />

diff --git a/apps/ui/src/components/Modal/Votes.vue b/apps/ui/src/components/Modal/Votes.vue
@@ -97,7 +97,7 @@ watch(
           >
             <div
               v-if="!isEncrypted"
-              class="absolute top-0 bottom-0 right-0 z-[-1]"
+              class="absolute inset-y-0 right-0 z-[-1]"
               :style="{
                 width: `${((100 / proposal.scores_total) * vote.vp).toFixed(2)}%`
               }"
@@ -127,7 +127,7 @@ watch(
             <template v-if="isEncrypted">
               <div class="flex gap-1 items-center">
                 <span class="text-skin-heading">Encrypted choice</span>
-                <IH-lock-closed class="w-[16px] h-[16px] shrink-0" />
+                <IH-lock-closed class="size-[16px] shrink-0" />
               </div>
             </template>
             <UiTooltip

diff --git a/apps/ui/src/components/PickerNft.vue b/apps/ui/src/components/PickerNft.vue
@@ -19,7 +19,7 @@ const filteredNfts = computed(() =>
 </script>
 
 <template>
-  <div v-if="loading" class="px-4 py-3 block flex justify-center">
+  <div v-if="loading" class="px-4 py-3 flex justify-center">
     <UiLoading />
   </div>
   <template v-else>

diff --git a/apps/ui/src/components/PickerToken.vue b/apps/ui/src/components/PickerToken.vue
@@ -116,7 +116,7 @@ watch(
 <template>
   <div
     v-if="loading || customTokenLoading"
-    class="px-4 py-3 block flex justify-center"
+    class="px-4 py-3 flex justify-center"
   >
     <UiLoading />
   </div>

diff --git a/apps/ui/src/components/ProposalExecutionActions.vue b/apps/ui/src/components/ProposalExecutionActions.vue
@@ -87,7 +87,7 @@ const network = computed(() => getNetwork(props.proposal.network));
         :loading="executeQueuedProposalSending"
         @click="executeQueuedProposal"
       >
-        <IH-play class="inline-block mr-2 flex-shrink-0" />
+        <IH-play class="inline-block mr-2 shrink-0" />
         <template v-if="executionCountdown === 0"
           >Execute queued transactions</template
         >
@@ -109,7 +109,7 @@ const network = computed(() => getNetwork(props.proposal.network));
         :loading="vetoProposalSending"
         @click="vetoProposal"
       >
-        <IH-play class="inline-block mr-2 flex-shrink-0" />
+        <IH-play class="inline-block mr-2 shrink-0" />
         Veto execution
       </UiButton>
     </template>