From c787f242366edaa9cccb3bb4a1741620650e10c1 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 29 Jul 2024 22:35:23 +0900
Subject: [PATCH] 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
---
 apps/ui/src/components/App/Nav.vue            |  2 +-
 apps/ui/src/components/App/Notifications.vue  |  2 +-
 apps/ui/src/components/App/Sidebar.vue        |  4 ++--
 apps/ui/src/components/App/Topnav.vue         |  4 ++--
 apps/ui/src/components/AppsListItem.vue       |  2 +-
 apps/ui/src/components/EditorChoices.vue      |  4 ++--
 apps/ui/src/components/FormNetwork.vue        |  2 +-
 apps/ui/src/components/FormProfile.vue        |  2 +-
 apps/ui/src/components/Modal/Account.vue      | 15 ++++--------
 apps/ui/src/components/Modal/Connector.vue    |  4 +---
 apps/ui/src/components/Modal/Delegate.vue     |  2 +-
 .../src/components/Modal/DelegationConfig.vue |  2 +-
 apps/ui/src/components/Modal/EditSpace.vue    |  2 +-
 apps/ui/src/components/Modal/EditStrategy.vue |  2 +-
 apps/ui/src/components/Modal/EditUser.vue     |  2 +-
 .../components/Modal/LinkWalletConnect.vue    |  5 +---
 .../src/components/Modal/SelectVotingType.vue |  2 +-
 apps/ui/src/components/Modal/SendNft.vue      |  2 +-
 apps/ui/src/components/Modal/SendToken.vue    |  4 ++--
 apps/ui/src/components/Modal/StakeToken.vue   | 10 +++-----
 apps/ui/src/components/Modal/Timeline.vue     |  4 ++--
 apps/ui/src/components/Modal/Transaction.vue  |  2 +-
 .../src/components/Modal/TreasuryConfig.vue   |  2 +-
 apps/ui/src/components/Modal/Votes.vue        |  4 ++--
 apps/ui/src/components/PickerNft.vue          |  2 +-
 apps/ui/src/components/PickerToken.vue        |  2 +-
 .../components/ProposalExecutionActions.vue   |  4 ++--
 apps/ui/src/components/ProposalResults.vue    | 16 ++++++-------
 apps/ui/src/components/ProposalStatus.vue     | 10 ++++----
 apps/ui/src/components/ProposalVoteBasic.vue  | 12 +++++-----
 .../src/components/ProposalVoteWeighted.vue   |  2 +-
 apps/ui/src/components/ProposalsListItem.vue  |  6 ++---
 apps/ui/src/components/SpaceCover.vue         |  2 +-
 apps/ui/src/components/SpaceTreasury.vue      |  2 +-
 apps/ui/src/components/Ui/Composer.vue        | 18 +++++++--------
 apps/ui/src/components/Ui/Editable.vue        |  2 +-
 apps/ui/src/components/Ui/InputStamp.vue      |  8 +++----
 apps/ui/src/components/Ui/InputStampCover.vue |  8 +++----
 apps/ui/src/components/Ui/Link.vue            |  2 +-
 apps/ui/src/components/Ui/Modal.vue           |  2 +-
 apps/ui/src/components/Ui/SelectDropdown.vue  |  6 ++---
 apps/ui/src/style.scss                        |  4 ++--
 apps/ui/src/views/App.vue                     |  4 ++--
 apps/ui/src/views/Apps.vue                    |  8 +++----
 apps/ui/src/views/Editor.vue                  |  4 +---
 apps/ui/src/views/Landing.vue                 |  2 +-
 apps/ui/src/views/My.vue                      |  2 +-
 apps/ui/src/views/Network.vue                 |  2 +-
 apps/ui/src/views/Proposal/Overview.vue       | 23 ++++++++-----------
 apps/ui/src/views/Proposal/Votes.vue          | 14 +++++------
 apps/ui/src/views/Settings.vue                |  2 +-
 apps/ui/src/views/Space.vue                   |  2 +-
 apps/ui/src/views/Space/Overview.vue          | 14 +++++------
 apps/ui/src/views/SpaceUser.vue               | 12 ++++------
 apps/ui/src/views/SpaceUser/Statement.vue     |  6 ++---
 apps/ui/src/views/User.vue                    | 10 ++++----
 56 files changed, 134 insertions(+), 165 deletions(-)

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index 9c20b9117..b440cc92f 100644
--- 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
index 8c16f251e..90194d988 100644
--- 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
index c4918c0cc..3b9430e59 100644
--- 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
index 1bdfec475..f1a7a8d80 100644
--- 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
index 6f85a2c74..dca97ac39 100644
--- 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
index 2e632ea75..af7817ea3 100644
--- 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
index 4fa19cf4c..56e48808e 100644
--- 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
index e3c5ffb25..c35acf816 100644
--- 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
index df99037f6..8d9d3bcc6 100644
--- 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
index 4e55b73c7..79b4577ee 100644
--- 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
index a1825d338..4d25c8ec5 100644
--- 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
index 41c3fac15..be06750d5 100644
--- 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
index 1e70ce9df..7d6b589c0 100644
--- 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
index 62b0c3d3b..1ce0666a7 100644
--- 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
index 0bf6fd6c8..07cad2201 100644
--- 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
index 2bd7e2f90..60f14d614 100644
--- 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
index 83dc1a823..0cefefb0c 100644
--- 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
index 42d93851c..247bad93b 100644
--- 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
index ccbb3479b..948795194 100644
--- 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
index fd0e276f5..eecb1131a 100644
--- 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
index 8e8010ae7..2fbb05976 100644
--- a/apps/ui/src/components/Modal/Timeline.vue
+++ b/apps/ui/src/components/Modal/Timeline.vue
@@ -74,7 +74,7 @@ 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"
@@ -82,7 +82,7 @@ const now = parseInt((Date.now() / 1e3).toFixed());
           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
index d0d49eab7..39c6cd03b 100644
--- 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
index 9a276a332..319b79160 100644
--- 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
index c5bd149db..f3f907ef7 100644
--- 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
index 265e7a3f8..4e7ff1917 100644
--- 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
index 53a2ff8af..22c542888 100644
--- 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
index fdffd223a..aa9aaf8f1 100644
--- 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>
diff --git a/apps/ui/src/components/ProposalResults.vue b/apps/ui/src/components/ProposalResults.vue
index 4f3f76f26..284f6ddcb 100644
--- a/apps/ui/src/components/ProposalResults.vue
+++ b/apps/ui/src/components/ProposalResults.vue
@@ -116,7 +116,7 @@ const otherResultsSummary = computed(() => {
         }"
       >
         <div
-          class="absolute bg-skin-border top-0 bottom-0 left-0 pointer-events-none -z-10"
+          class="absolute bg-skin-border inset-y-0 left-0 pointer-events-none -z-10"
           :class="{
             [`_${result.choice} choice-bg opacity-20`]:
               proposal.type === 'basic'
@@ -127,20 +127,20 @@ const otherResultsSummary = computed(() => {
         />
         <div
           v-if="proposal.type === 'basic'"
-          class="rounded-full choice-bg inline-block w-[18px] h-[18px]"
+          class="rounded-full choice-bg inline-block size-[18px]"
           :class="`_${result.choice}`"
         >
           <IH-check
             v-if="result.choice === 1"
-            class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+            class="text-white size-[14px] mt-0.5 ml-0.5"
           />
           <IH-x
             v-else-if="result.choice === 2"
-            class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+            class="text-white size-[14px] mt-0.5 ml-0.5"
           />
           <IH-minus-sm
             v-else-if="result.choice === 3"
-            class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+            class="text-white size-[14px] mt-0.5 ml-0.5"
           />
         </div>
         <div
@@ -159,7 +159,7 @@ const otherResultsSummary = computed(() => {
         @click="displayAllChoices = true"
       >
         <div
-          class="absolute bg-skin-border top-0 bottom-0 left-0 pointer-events-none -z-10"
+          class="absolute bg-skin-border inset-y-0 left-0 pointer-events-none -z-10"
           :style="{
             width: `${otherResultsSummary.progress.toFixed(2)}%`
           }"
@@ -176,7 +176,7 @@ const otherResultsSummary = computed(() => {
           v-text="_p(otherResultsSummary.progress / 100)"
         />
         <div class="hidden group-hover:flex items-center gap-1">
-          See all <IH-arrow-down class="w-[16px] h-[16px]" />
+          See all <IH-arrow-down class="size-[16px]" />
         </div>
       </button>
       <div v-if="proposal.quorum">
@@ -200,7 +200,7 @@ const otherResultsSummary = computed(() => {
       class="h-full flex items-center"
     >
       <div
-        class="rounded-full h-1.5 overflow-hidden"
+        class="rounded-full h-[6px] overflow-hidden"
         :style="{
           width: `${width}px`
         }"
diff --git a/apps/ui/src/components/ProposalStatus.vue b/apps/ui/src/components/ProposalStatus.vue
index 34680deb9..b5a81e36c 100644
--- a/apps/ui/src/components/ProposalStatus.vue
+++ b/apps/ui/src/components/ProposalStatus.vue
@@ -26,23 +26,23 @@ defineProps<{ state: ProposalState }>();
   >
     <IS-clock
       v-if="state === 'pending'"
-      class="text-white inline-block w-[17px] h-[17px] mb-[1px]"
+      class="text-white inline-block size-[17px] mb-[1px]"
     />
     <IS-status-online
       v-else-if="state === 'active'"
-      class="text-white inline-block w-[17px] h-[17px] mb-[1px]"
+      class="text-white inline-block size-[17px] mb-[1px]"
     />
     <IS-check-circle
       v-else-if="state === 'passed'"
-      class="text-skin-bg inline-block w-[17px] h-[17px] mb-[1px]"
+      class="text-skin-bg inline-block size-[17px] mb-[1px]"
     />
     <IS-play
       v-else-if="state === 'executed'"
-      class="text-white inline-block w-[17px] h-[17px]"
+      class="text-white inline-block size-[17px]"
     />
     <IS-x-circle
       v-else-if="state === 'rejected'"
-      class="text-white inline-block w-[17px] h-[17px] mb-[1px]"
+      class="text-white inline-block size-[17px] mb-[1px]"
     />
     {{ titles[state] }}
   </div>
diff --git a/apps/ui/src/components/ProposalVoteBasic.vue b/apps/ui/src/components/ProposalVoteBasic.vue
index ba6603ce4..cab3ff8f5 100644
--- a/apps/ui/src/components/ProposalVoteBasic.vue
+++ b/apps/ui/src/components/ProposalVoteBasic.vue
@@ -20,8 +20,8 @@ const emit = defineEmits<{
       <UiButton
         class="!text-skin-success !border-skin-success !px-0"
         :class="{
-          '!w-[48px] !h-[48px]': size === 48,
-          '!w-[40px] !h-[40px]': size === 40
+          '!size-[48px]': size === 48,
+          '!size-[40px]': size === 40
         }"
         :loading="sendingType === 'for'"
         @click="emit('vote', 'for')"
@@ -33,8 +33,8 @@ const emit = defineEmits<{
       <UiButton
         class="!text-skin-danger !border-skin-danger !px-0"
         :class="{
-          '!w-[48px] !h-[48px]': size === 48,
-          '!w-[40px] !h-[40px]': size === 40
+          '!size-[48px]': size === 48,
+          '!size-[40px]': size === 40
         }"
         :loading="sendingType === 'against'"
         @click="emit('vote', 'against')"
@@ -46,8 +46,8 @@ const emit = defineEmits<{
       <UiButton
         class="!text-gray-500 !border-gray-500 !px-0"
         :class="{
-          '!w-[48px] !h-[48px]': size === 48,
-          '!w-[40px] !h-[40px]': size === 40
+          '!size-[48px]': size === 48,
+          '!size-[40px]': size === 40
         }"
         :loading="sendingType === 'abstain'"
         @click="emit('vote', 'abstain')"
diff --git a/apps/ui/src/components/ProposalVoteWeighted.vue b/apps/ui/src/components/ProposalVoteWeighted.vue
index 562d0c7eb..066f68ff1 100644
--- a/apps/ui/src/components/ProposalVoteWeighted.vue
+++ b/apps/ui/src/components/ProposalVoteWeighted.vue
@@ -77,7 +77,7 @@ watch(
           </UiButton>
         </div>
         <div
-          class="top-0 left-0 bottom-0 absolute bg-skin-border opacity-40 -z-10"
+          class="inset-y-0 left-0 absolute bg-skin-border opacity-40 -z-10"
           :style="{ width: _p(getChoiceWeight(selectedChoices, i)) }"
         ></div>
       </div>
diff --git a/apps/ui/src/components/ProposalsListItem.vue b/apps/ui/src/components/ProposalsListItem.vue
index c2f348c42..141b9ffa6 100644
--- a/apps/ui/src/components/ProposalsListItem.vue
+++ b/apps/ui/src/components/ProposalsListItem.vue
@@ -41,7 +41,7 @@ async function handleVoteClick(choice: Choice) {
               width="17"
               height="17"
               :state="proposal.state"
-              class="top-[6px]"
+              class="top-1.5"
             />
           </router-link>
 
@@ -70,12 +70,12 @@ async function handleVoteClick(choice: Choice) {
               class="md:flex md:min-w-0"
             >
               <h3
-                class="text-[21px] inline md:truncate md:text-ellipsis mr-2"
+                class="text-[21px] inline md:truncate mr-2"
                 v-text="proposal.title || `Proposal #${proposal.proposal_id}`"
               />
               <IH-check
                 v-if="votes[`${proposal.network}:${proposal.id}`]"
-                class="text-skin-success inline-block shrink-0 relative top-[-1px] md:top-[2px]"
+                class="text-skin-success inline-block shrink-0 relative top-[-1px] md:top-0.5"
               />
             </router-link>
           </div>
diff --git a/apps/ui/src/components/SpaceCover.vue b/apps/ui/src/components/SpaceCover.vue
index ddae6fa7e..bb9caadc4 100644
--- a/apps/ui/src/components/SpaceCover.vue
+++ b/apps/ui/src/components/SpaceCover.vue
@@ -25,7 +25,7 @@ const cb = computed(() => getCacheHash(props.space.cover));
     :height="height"
     :cb="cb"
     type="space-cover-sx"
-    class="object-cover !rounded-none h-full w-full"
+    class="object-cover !rounded-none size-full"
   />
   <div
     v-else
diff --git a/apps/ui/src/components/SpaceTreasury.vue b/apps/ui/src/components/SpaceTreasury.vue
index 7501e6cdf..190fd8472 100644
--- a/apps/ui/src/components/SpaceTreasury.vue
+++ b/apps/ui/src/components/SpaceTreasury.vue
@@ -179,7 +179,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             width="480"
             height="332"
             viewBox="0 0 480 332"
-            class="inline-block w-[26px] h-[26px]"
+            class="inline-block size-[26px]"
           >
             <path
               fill="rgba(var(--link))"
diff --git a/apps/ui/src/components/Ui/Composer.vue b/apps/ui/src/components/Ui/Composer.vue
index 66163c5ac..d155a0118 100644
--- a/apps/ui/src/components/Ui/Composer.vue
+++ b/apps/ui/src/components/Ui/Composer.vue
@@ -24,7 +24,7 @@ const editor = useMarkdownEditor(
       <UiTooltip title="Add heading text">
         <button
           type="button"
-          class="p-1 w-[26px] h-[26px] leading-[18px] hover:text-skin-link rounded focus-visible:ring-1"
+          class="p-1 size-[26px] leading-[18px] hover:text-skin-link rounded focus-visible:ring-1"
           @click="editor.heading"
         >
           H
@@ -33,7 +33,7 @@ const editor = useMarkdownEditor(
       <UiTooltip title="Add bold text">
         <button
           type="button"
-          class="p-1 w-[26px] h-[26px] leading-[18px] font-bold hover:text-skin-link rounded focus-visible:ring-1"
+          class="p-1 size-[26px] leading-[18px] font-bold hover:text-skin-link rounded focus-visible:ring-1"
           @click="editor.bold"
         >
           B
@@ -42,24 +42,24 @@ const editor = useMarkdownEditor(
       <UiTooltip title="Add italic text">
         <button
           type="button"
-          class="p-1 w-[26px] h-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
+          class="p-1 size-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
           @click="editor.italic"
         >
           <span class="mono !text-[17px] !font-normal">I</span>
         </button>
       </UiTooltip>
-      <UiTooltip title="Add a link" class="w-[26px] h-[26px]">
+      <UiTooltip title="Add a link" class="size-[26px]">
         <button
           type="button"
-          class="p-1 w-[26px] h-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
+          class="p-1 size-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
           @click="editor.link"
         >
-          <IS-link class="w-[18px] h-[18px]" />
+          <IS-link class="size-[18px]" />
         </button>
       </UiTooltip>
-      <UiTooltip title="Add an image" class="w-[26px] h-[26px]">
+      <UiTooltip title="Add an image" class="size-[26px]">
         <label
-          class="flex justify-center p-1 w-[26px] h-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
+          class="flex justify-center p-1 size-[26px] leading-[18px] italic hover:text-skin-link rounded focus-visible:ring-1"
         >
           <input
             ref="editorFileInputRef"
@@ -74,7 +74,7 @@ const editor = useMarkdownEditor(
             :height="14"
             class="inline-block"
           />
-          <IS-photo v-else class="w-[18px] h-[18px]" />
+          <IS-photo v-else class="size-[18px]" />
         </label>
       </UiTooltip>
     </div>
diff --git a/apps/ui/src/components/Ui/Editable.vue b/apps/ui/src/components/Ui/Editable.vue
index 725ddfdce..a6f790709 100644
--- a/apps/ui/src/components/Ui/Editable.vue
+++ b/apps/ui/src/components/Ui/Editable.vue
@@ -95,7 +95,7 @@ function handleSave() {
               definition.format !== 'duration' && !!formErrors.value,
             'top-[-18.5px]':
               definition.format === 'duration' && !!formErrors.value,
-            'top-[-6px]': definition.format === 'duration'
+            '-top-1.5': definition.format === 'duration'
           }"
         >
           <button
diff --git a/apps/ui/src/components/Ui/InputStamp.vue b/apps/ui/src/components/Ui/InputStamp.vue
index 0fdf288a7..845840a39 100644
--- a/apps/ui/src/components/Ui/InputStamp.vue
+++ b/apps/ui/src/components/Ui/InputStamp.vue
@@ -48,13 +48,13 @@ async function handleFileChange(e: Event) {
   <button
     type="button"
     v-bind="$attrs"
-    class="relative group max-w-max cursor-pointer mb-3 border-[4px] border-skin-bg rounded-lg overflow-hidden bg-skin-border"
+    class="relative group max-w-max cursor-pointer mb-3 border-4 border-skin-bg rounded-lg overflow-hidden bg-skin-border"
     @click="openFilePicker()"
   >
     <img
       v-if="imgUrl"
       :src="imgUrl"
-      class="w-[80px] h-[80px] object-cover group-hover:opacity-80"
+      class="size-[80px] object-cover group-hover:opacity-80"
       :class="{
         'opacity-80': isUploadingImage
       }"
@@ -70,9 +70,9 @@ async function handleFileChange(e: Event) {
       }"
     />
     <div
-      class="pointer-events-none absolute group-hover:visible inset-0 z-10 flex flex-row w-full h-full items-center content-center justify-center"
+      class="pointer-events-none absolute group-hover:visible inset-0 z-10 flex flex-row size-full items-center content-center justify-center"
     >
-      <UiLoading v-if="isUploadingImage" class="block z-5" />
+      <UiLoading v-if="isUploadingImage" class="block z-10" />
       <IH-pencil v-else class="invisible text-skin-link group-hover:visible" />
     </div>
   </button>
diff --git a/apps/ui/src/components/Ui/InputStampCover.vue b/apps/ui/src/components/Ui/InputStampCover.vue
index d4ada3282..1cbcd3e81 100644
--- a/apps/ui/src/components/Ui/InputStampCover.vue
+++ b/apps/ui/src/components/Ui/InputStampCover.vue
@@ -59,14 +59,14 @@ async function handleFileChange(e: Event) {
   <button
     type="button"
     v-bind="$attrs"
-    class="relative block bg-skin-border h-[100px] -mb-[50px] w-full overflow-hidden cursor-pointer group"
+    class="relative block bg-skin-border h-[100px] mb-[-50px] w-full overflow-hidden cursor-pointer group"
     @click="openFilePicker()"
   >
     <img
       v-if="imgUrl"
       alt=""
       :src="imgUrl"
-      class="h-full w-full object-cover group-hover:opacity-80"
+      class="size-full object-cover group-hover:opacity-80"
       :class="{
         'opacity-80': isUploadingImage
       }"
@@ -83,9 +83,9 @@ async function handleFileChange(e: Event) {
     />
 
     <div
-      class="pointer-events-none absolute group-hover:visible inset-0 z-10 flex flex-row w-full h-full items-center content-center justify-center"
+      class="pointer-events-none absolute group-hover:visible inset-0 z-10 flex flex-row size-full items-center content-center justify-center"
     >
-      <UiLoading v-if="isUploadingImage" class="block z-5" />
+      <UiLoading v-if="isUploadingImage" class="block z-10" />
       <IH-pencil v-else class="invisible text-skin-link group-hover:visible" />
     </div>
   </button>
diff --git a/apps/ui/src/components/Ui/Link.vue b/apps/ui/src/components/Ui/Link.vue
index 3340a2181..ce4dda5d8 100644
--- a/apps/ui/src/components/Ui/Link.vue
+++ b/apps/ui/src/components/Ui/Link.vue
@@ -11,7 +11,7 @@ defineProps<{
 <template>
   <div
     class="flex items-center"
-    :class="[isActive && 'border-b border-skin-link -mb-[1px]']"
+    :class="[isActive && 'border-b border-skin-link mb-[-1px]']"
   >
     <h4
       class="eyebrow py-2 cursor-pointer inline-block hover:text-skin-link"
diff --git a/apps/ui/src/components/Ui/Modal.vue b/apps/ui/src/components/Ui/Modal.vue
index 427aa8071..e3514ac27 100644
--- a/apps/ui/src/components/Ui/Modal.vue
+++ b/apps/ui/src/components/Ui/Modal.vue
@@ -44,7 +44,7 @@ watch(open, (val, prev) => {
         </div>
         <button
           type="button"
-          class="absolute right-0 -top-1 p-4 text-color"
+          class="absolute right-0 -top-1 p-4"
           @click="$emit('close')"
         >
           <IH-x />
diff --git a/apps/ui/src/components/Ui/SelectDropdown.vue b/apps/ui/src/components/Ui/SelectDropdown.vue
index 87728a5db..f03e65b9c 100644
--- a/apps/ui/src/components/Ui/SelectDropdown.vue
+++ b/apps/ui/src/components/Ui/SelectDropdown.vue
@@ -32,7 +32,7 @@ const items = computed(() => props.items);
       <slot name="button">
         <button
           type="button"
-          class="flex items-center gap-2 relative rounded-full leading-[100%] border button px-[16px] min-w-[76px] h-[42px] top-1 text-skin-link bg-skin-bg"
+          class="flex items-center gap-2 relative rounded-full leading-[100%] border button px-3 min-w-[76px] h-[42px] top-1 outline-0 text-skin-link bg-skin-bg"
         >
           <div
             class="absolute top-[-10px] bg-skin-bg px-1 left-2.5 text-sm text-skin-text"
@@ -42,7 +42,7 @@ const items = computed(() => props.items);
           <template v-if="currentItem">
             <div
               v-if="currentItem.indicator"
-              class="w-[8px] h-[8px] rounded-full"
+              class="size-[8px] rounded-full"
               :class="currentItem.indicator"
             />
             <component
@@ -69,7 +69,7 @@ const items = computed(() => props.items);
         >
           <div
             v-if="item.indicator"
-            class="w-[8px] h-[8px] rounded-full"
+            class="size-[8px] rounded-full"
             :class="item.indicator"
           />
           <component
diff --git a/apps/ui/src/style.scss b/apps/ui/src/style.scss
index cb5c5add3..0220fcaab 100644
--- a/apps/ui/src/style.scss
+++ b/apps/ui/src/style.scss
@@ -304,7 +304,7 @@ input:placeholder-shown {
   .s-label:has(+ textarea),
   .s-base:has(textarea:only-child) {
      &::before {
-      @apply block bg-gradient-to-b from-skin-border to-transparent h-2 w-full absolute top-[20px] left-0;
+      @apply block bg-gradient-to-b from-skin-border to-transparent h-[8px] w-full absolute top-3.5 left-0;
 
       content: '';
     }
@@ -341,7 +341,7 @@ input:placeholder-shown {
 
 .s-compact {
   .s-base {
-    @apply relative pt-[8px];
+    @apply relative pt-2;
   }
 
   .s-label {
diff --git a/apps/ui/src/views/App.vue b/apps/ui/src/views/App.vue
index d4847722a..901319989 100644
--- a/apps/ui/src/views/App.vue
+++ b/apps/ui/src/views/App.vue
@@ -20,12 +20,12 @@ onMounted(() => load());
             <IH-view-grid class="mr-1" />
             Apps
           </router-link>
-          <IH-chevron-right class="w-[14px] h-[14px]" />
+          <IH-chevron-right class="size-[14px]" />
           <div v-text="app.name" />
         </div>
         <div class="md:flex items-center mb-5">
           <div class="flex items-center flex-1 mb-3 md:mb-0">
-            <img class="w-[80px] h-[80px] rounded-lg mr-3" :src="app.avatar" />
+            <img class="size-[80px] rounded-lg mr-3" :src="app.avatar" />
             <div class="flex-1 leading-5 mb-1">
               <h1 v-text="app.name" />
               <div v-text="app.category" />
diff --git a/apps/ui/src/views/Apps.vue b/apps/ui/src/views/Apps.vue
index 228dfccfe..8fdc3e7b3 100644
--- a/apps/ui/src/views/Apps.vue
+++ b/apps/ui/src/views/Apps.vue
@@ -34,7 +34,7 @@ watch(
         <UiLink :count="results.length" text="Result(s)" class="inline-block" />
         <div
           v-if="results.length"
-          class="flex grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4"
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4"
         >
           <AppsListItem v-for="(app, i) in results" :key="i" :app="app" />
         </div>
@@ -45,9 +45,7 @@ watch(
       </div>
       <div v-else>
         <UiLink text="Featured" class="inline-block" />
-        <div
-          class="flex grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4"
-        >
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
           <AppsListItem
             v-for="(app, i) in apps.filter(({ featured }) => featured)"
             :key="i"
@@ -61,7 +59,7 @@ watch(
             class="inline-block"
           />
           <div
-            class="flex grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4"
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4"
           >
             <AppsListItem
               v-for="(app, j) in apps.filter(app => category === app.category)"
diff --git a/apps/ui/src/views/Editor.vue b/apps/ui/src/views/Editor.vue
index 9ab992336..2eba6f5f1 100644
--- a/apps/ui/src/views/Editor.vue
+++ b/apps/ui/src/views/Editor.vue
@@ -349,9 +349,7 @@ export default defineComponent({
 
 <template>
   <div v-if="proposal">
-    <nav
-      class="border-b bg-skin-bg fixed top-0 z-50 right-0 left-0 lg:left-[72px]"
-    >
+    <nav class="border-b bg-skin-bg fixed top-0 z-50 inset-x-0 lg:left-[72px]">
       <div class="flex items-center h-[71px] mx-4">
         <div class="flex-auto space-x-2">
           <router-link
diff --git a/apps/ui/src/views/Landing.vue b/apps/ui/src/views/Landing.vue
index 3eb7438ee..27c72da5c 100644
--- a/apps/ui/src/views/Landing.vue
+++ b/apps/ui/src/views/Landing.vue
@@ -88,7 +88,7 @@ const SOCIALS = [
             target="_blank"
             class="text-[#606060] hover:text-skin-link"
           >
-            <component :is="social.icon" class="w-[32px] h-[32px]" />
+            <component :is="social.icon" class="size-[32px]" />
           </a>
         </div>
       </div>
diff --git a/apps/ui/src/views/My.vue b/apps/ui/src/views/My.vue
index 7c7dcfa8d..6e50f229b 100644
--- a/apps/ui/src/views/My.vue
+++ b/apps/ui/src/views/My.vue
@@ -6,7 +6,7 @@ const uiStore = useUiStore();
   <div>
     <div>
       <div
-        class="ml-0 lg:ml-[240px] mr-0 xl:mr-[240px]"
+        class="mx-0 lg:ml-[240px] xl:mr-[240px]"
         :class="{ 'translate-x-[240px] lg:translate-x-0': uiStore.sidebarOpen }"
       >
         <router-view />
diff --git a/apps/ui/src/views/Network.vue b/apps/ui/src/views/Network.vue
index 25808d63a..5bf59d5a0 100644
--- a/apps/ui/src/views/Network.vue
+++ b/apps/ui/src/views/Network.vue
@@ -153,7 +153,7 @@ watchEffect(() => setTitle('Network'));
               <img
                 :alt="customer.name"
                 :src="getUrl(customer.avatar) ?? undefined"
-                class="w-[54px] h-[54px] rounded-lg"
+                class="size-[54px] rounded-lg"
               />
             </a>
           </div>
diff --git a/apps/ui/src/views/Proposal/Overview.vue b/apps/ui/src/views/Proposal/Overview.vue
index ec7e9623f..3dcfc7d0b 100644
--- a/apps/ui/src/views/Proposal/Overview.vue
+++ b/apps/ui/src/views/Proposal/Overview.vue
@@ -252,13 +252,13 @@ onBeforeUnmount(() => destroyAudio());
             :title="'AI summary'"
           >
             <UiButton
-              class="!p-0 border-0 !h-[auto]"
+              class="!p-0 border-0 !h-auto"
               :disabled="aiSummaryState.loading"
               :loading="aiSummaryState.loading"
               @click="handleAiSummaryClick"
             >
               <IH-sparkles
-                class="inline-block w-[22px] h-[22px]"
+                class="inline-block size-[22px]"
                 :class="aiSummaryOpen ? 'text-skin-link' : 'text-skin-text'"
               />
             </UiButton>
@@ -272,35 +272,30 @@ onBeforeUnmount(() => destroyAudio());
             :title="audioState === 'playing' ? 'Pause' : 'Listen'"
           >
             <UiButton
-              class="!p-0 border-0 !h-[auto]"
+              class="!p-0 border-0 !h-auto"
               :disabled="aiSpeechState.loading"
               :loading="aiSpeechState.loading"
               @click="handleAiSpeechClick"
             >
               <IH-pause
                 v-if="audioState === 'playing'"
-                class="inline-block w-[22px] h-[22px] text-skin-link"
-              />
-              <IH-play
-                v-else
-                class="inline-block text-skin-text w-[22px] h-[22px]"
+                class="inline-block size-[22px] text-skin-link"
               />
+              <IH-play v-else class="inline-block text-skin-text size-[22px]" />
             </UiButton>
           </UiTooltip>
           <DropdownShare :message="shareMsg">
             <template #button>
-              <UiButton class="!p-0 border-0 !h-[auto]">
-                <IH-share
-                  class="text-skin-text inline-block w-[22px] h-[22px]"
-                />
+              <UiButton class="!p-0 border-0 !h-auto">
+                <IH-share class="text-skin-text inline-block size-[22px]" />
               </UiButton>
             </template>
           </DropdownShare>
           <UiDropdown>
             <template #button>
-              <UiButton class="!p-0 border-0 !h-[auto]">
+              <UiButton class="!p-0 border-0 !h-auto">
                 <IH-dots-vertical
-                  class="text-skin-text inline-block w-[22px] h-[22px]"
+                  class="text-skin-text inline-block size-[22px]"
                 />
               </UiButton>
             </template>
diff --git a/apps/ui/src/views/Proposal/Votes.vue b/apps/ui/src/views/Proposal/Votes.vue
index 8a5272f20..22f4d5ffc 100644
--- a/apps/ui/src/views/Proposal/Votes.vue
+++ b/apps/ui/src/views/Proposal/Votes.vue
@@ -188,7 +188,7 @@ watch([sortBy, choiceFilter], () => {
         class="border-b relative flex space-x-1"
       >
         <div
-          class="top-0 bottom-0 left-0 -z-10 pointer-events-none absolute"
+          class="inset-y-0 left-0 -z-10 pointer-events-none absolute"
           :style="{
             width: `${((100 / proposal.scores_total) * vote.vp).toFixed(2)}%`
           }"
@@ -235,11 +235,11 @@ watch([sortBy, choiceFilter], () => {
                 <span class="text-skin-heading leading-[22px]"
                   >Encrypted choice</span
                 >
-                <IH-lock-closed class="w-[16px] h-[16px] shrink-0" />
+                <IH-lock-closed class="size-[16px] shrink-0" />
               </div>
             </div>
             <UiTooltip title="Encrypted choice" class="cursor-help md:hidden">
-              <IH-lock-closed class="w-[16px] h-[16px]" />
+              <IH-lock-closed class="size-[16px]" />
             </UiTooltip>
           </template>
           <template v-else>
@@ -254,20 +254,20 @@ watch([sortBy, choiceFilter], () => {
             </UiTooltip>
             <div v-else class="flex items-center space-x-2">
               <div
-                class="rounded-full choice-bg inline-block w-[18px] h-[18px]"
+                class="rounded-full choice-bg inline-block size-[18px]"
                 :class="`_${vote.choice}`"
               >
                 <IH-check
                   v-if="vote.choice === 1"
-                  class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+                  class="text-white size-[14px] mt-0.5 ml-0.5"
                 />
                 <IH-x
                   v-else-if="vote.choice === 2"
-                  class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+                  class="text-white size-[14px] mt-0.5 ml-0.5"
                 />
                 <IH-minus-sm
                   v-else-if="vote.choice === 3"
-                  class="text-white w-[14px] h-[14px] mt-0.5 ml-0.5"
+                  class="text-white size-[14px] mt-0.5 ml-0.5"
                 />
               </div>
               <h4
diff --git a/apps/ui/src/views/Settings.vue b/apps/ui/src/views/Settings.vue
index b3b39be7e..fa42b3d69 100644
--- a/apps/ui/src/views/Settings.vue
+++ b/apps/ui/src/views/Settings.vue
@@ -7,7 +7,7 @@ const { web3Account } = useWeb3();
   <div>
     <div>
       <div
-        class="ml-0 lg:ml-[240px] mr-0 xl:mr-[240px]"
+        class="mx-0 lg:ml-[240px] xl:mr-[240px]"
         :class="{ 'translate-x-[240px] lg:translate-x-0': uiStore.sidebarOpen }"
       >
         <router-view :key="web3Account.toLowerCase()" />
diff --git a/apps/ui/src/views/Space.vue b/apps/ui/src/views/Space.vue
index 84763dcbf..93e734fa2 100644
--- a/apps/ui/src/views/Space.vue
+++ b/apps/ui/src/views/Space.vue
@@ -50,7 +50,7 @@ watchEffect(() => {
   <div>
     <div>
       <div
-        class="ml-0 lg:ml-[240px] mr-0 xl:mr-[240px]"
+        class="mx-0 lg:ml-[240px] xl:mr-[240px]"
         :class="{ 'translate-x-[240px] lg:translate-x-0': uiStore.sidebarOpen }"
       >
         <UiLoading v-if="!space" class="block p-4" />
diff --git a/apps/ui/src/views/Space/Overview.vue b/apps/ui/src/views/Space/Overview.vue
index 3fbc562ac..4c48f5b77 100644
--- a/apps/ui/src/views/Space/Overview.vue
+++ b/apps/ui/src/views/Space/Overview.vue
@@ -44,14 +44,12 @@ watchEffect(() => setTitle(props.space.name));
 <template>
   <div>
     <div
-      class="relative bg-skin-border h-[156px] md:h-[140px] -mb-[86px] md:-mb-[70px] top-[-1px]"
+      class="relative bg-skin-border h-[156px] md:h-[140px] mb-[-86px] md:mb-[-70px] top-[-1px]"
     >
-      <div class="w-full h-full">
+      <div class="size-full">
         <SpaceCover :space="props.space" />
       </div>
-      <div
-        class="relative bg-skin-bg h-[16px] top-[-16px] rounded-t-[16px] md:hidden"
-      />
+      <div class="relative bg-skin-bg h-[16px] -top-3 rounded-t-[16px] md:hidden" />
       <div class="absolute right-4 top-4 space-x-2">
         <router-link :to="{ name: 'editor' }" tabindex="-1">
           <UiTooltip title="New proposal">
@@ -74,13 +72,13 @@ watchEffect(() => setTitle(props.space.name));
           <SpaceAvatar
             :space="space"
             :size="90"
-            class="relative mb-2 border-[4px] border-skin-bg !rounded-lg left-[-4px]"
+            class="relative mb-2 border-4 border-skin-bg !rounded-lg -left-1"
           />
         </router-link>
         <div class="flex items-center">
           <h1 v-text="space.name" />
           <UiBadgeVerified
-            class="ml-1 top-[2px]"
+            class="ml-1 top-0.5"
             :verified="space.verified"
             :turbo="space.turbo"
           />
@@ -110,7 +108,7 @@ watchEffect(() => setTitle(props.space.name));
               target="_blank"
               class="text-[#606060] hover:text-skin-link"
             >
-              <component :is="social.icon" class="w-[26px] h-[26px]" />
+              <component :is="social.icon" class="size-[26px]" />
             </a>
           </template>
         </div>
diff --git a/apps/ui/src/views/SpaceUser.vue b/apps/ui/src/views/SpaceUser.vue
index 963f5e69f..c82997881 100644
--- a/apps/ui/src/views/SpaceUser.vue
+++ b/apps/ui/src/views/SpaceUser.vue
@@ -180,14 +180,12 @@ watchEffect(() =>
   </div>
   <div v-else>
     <div
-      class="relative bg-skin-border h-[156px] md:h-[140px] -mb-[86px] md:-mb-[70px] top-[-1px]"
+      class="relative bg-skin-border h-[156px] md:h-[140px] mb-[-86px] md:mb-[-70px] top-[-1px]"
     >
-      <div class="w-full h-full overflow-hidden">
+      <div class="size-full overflow-hidden">
         <UserCover :user="user" class="!rounded-none w-full min-h-full" />
       </div>
-      <div
-        class="relative bg-skin-bg h-[16px] top-[-16px] rounded-t-[16px] md:hidden"
-      />
+      <div class="relative bg-skin-bg h-[16px] -top-3 rounded-t-[16px] md:hidden" />
       <div class="absolute right-4 top-4 space-x-2 flex">
         <UiTooltip title="View profile">
           <router-link
@@ -208,7 +206,7 @@ watchEffect(() =>
           :id="user.id"
           :size="90"
           :cb="cb"
-          class="relative mb-2 border-[4px] border-skin-bg !bg-skin-border !rounded-full left-[-4px]"
+          class="relative mb-2 border-4 border-skin-bg !bg-skin-border !rounded-full -left-1"
         />
         <h1 v-text="user.name || shortenAddress(user.id)" />
         <div class="mb-3 text-skin-text">
@@ -233,7 +231,7 @@ watchEffect(() =>
               target="_blank"
               class="text-[#606060] hover:text-skin-link"
             >
-              <component :is="social.icon" class="w-[26px] h-[26px]" />
+              <component :is="social.icon" class="size-[26px]" />
             </a>
           </template>
         </div>
diff --git a/apps/ui/src/views/SpaceUser/Statement.vue b/apps/ui/src/views/SpaceUser/Statement.vue
index 3a0ae6d46..af3a1d98b 100644
--- a/apps/ui/src/views/SpaceUser/Statement.vue
+++ b/apps/ui/src/views/SpaceUser/Statement.vue
@@ -58,14 +58,12 @@ watch(userId, loadStatement, { immediate: true });
           >
             <template v-if="statement.status === 'ACTIVE'">
               <IS-status-online
-                class="text-skin-success inline-block w-[17px] h-[17px] mb-[1px]"
+                class="text-skin-success inline-block size-[17px] mb-[1px]"
               />
               Active
             </template>
             <template v-else>
-              <div
-                class="h-[8px] w-[8px] mx-[4px] bg-gray-500 rounded-full inline-block"
-              />
+              <div class="size-[8px] mx-1 bg-gray-500 rounded-full inline-block" />
               Inactive
             </template>
           </div>
diff --git a/apps/ui/src/views/User.vue b/apps/ui/src/views/User.vue
index 423bc6412..817899157 100644
--- a/apps/ui/src/views/User.vue
+++ b/apps/ui/src/views/User.vue
@@ -120,14 +120,12 @@ watchEffect(() => setTitle(`${user.value?.name || id.value} user profile`));
   </div>
   <div v-else>
     <div
-      class="relative bg-skin-border h-[156px] md:h-[140px] -mb-[86px] md:-mb-[70px] top-[-1px]"
+      class="relative bg-skin-border h-[156px] md:h-[140px] mb-[-86px] md:mb-[-70px] top-[-1px]"
     >
-      <div class="w-full h-full overflow-hidden">
+      <div class="size-full overflow-hidden">
         <UserCover :user="user" class="!rounded-none w-full min-h-full" />
       </div>
-      <div
-        class="relative bg-skin-bg h-[16px] top-[-16px] rounded-t-[16px] md:hidden"
-      />
+      <div class="relative bg-skin-bg h-[16px] -top-3 rounded-t-[16px] md:hidden" />
       <div class="absolute right-4 top-4 space-x-2 flex">
         <DropdownShare :message="shareMsg" class="!px-0 w-[46px]" />
         <UiTooltip v-if="web3.account === user.id" title="Edit profile">
@@ -171,7 +169,7 @@ watchEffect(() => setTitle(`${user.value?.name || id.value} user profile`));
               target="_blank"
               class="text-[#606060] hover:text-skin-link"
             >
-              <component :is="social.icon" class="w-[26px] h-[26px]" />
+              <component :is="social.icon" class="size-[26px]" />
             </a>
           </template>
         </div>