UPD: Less global rounding, more consistent

src/components/common/HSVInput.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-      class="flex p-4 font-heading rounded-b-xl border-x border-b border-zinc-800"
+      class="flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
-      :class="{'rounded-t-xl': roundedTop}"
+      :class="{'rounded-t-lg': roundedTop}"
       :style="{backgroundColor: color.hex()}">
       <div
         ref="colorFieldText" class="w-full flex opacity-70"

src/components/common/PaletteInput.vue

@@ -3,11 +3,11 @@
     class="px-4 py-2"
     :style="{background: `linear-gradient(180deg, ${options[currentOption].color.hex()+'11'}, ${options[currentOption].color.hex()+'30'} 25%, ${options[currentOption].color.hex()+'30'} 40%, transparent 60%`}">
     <div
-      class="flex font-heading rounded-t-xl overflow-hidden border-x border-t border-zinc-800">
+      class="flex font-heading rounded-t-lg overflow-hidden border-x border-t border-zinc-800 bg-zinc-900">
       <button
         v-for="(option, key) in options" :key="key"
-        class="flex-1 pt-2 items-center text-center"
+        class="flex-1 pt-2 items-center text-center rounded-lg"
-        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground bg-zinc-900' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
+        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
         @click="currentOption = key">
         {{ $t(option.titleKey) }}
         <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />

src/components/common/TabSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 border-solid border-0 border-b">
-    <div class="flex rounded-xl overflow-hidden border border-zinc-800">
+    <div class="flex rounded-lg overflow-hidden border border-zinc-800">
       <TabSelectButton
         v-for="(option, key) in options" :key="key"
         :ref="(el) => buttons[key] = el"

src/components/common/TabSelectButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl p-2 gap-2 font-heading transition-all"
+    class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all"
     :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
           'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">

src/components/profile/ProfileButton.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="h-12 flex"
+    class="h-12 flex overflow-hidden rounded-lg m-2"
     @mouseenter="hover=true" @mouseleave="hover=false">
     <form
       v-if="nameEditable && editing"
       class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
-      :class="{'bg-zinc-200' : selected}"
+      :class="{'bg-zinc-300' : selected}"
       @submit.prevent="profile.name = nameInput; editing=false">
       <input
         ref="profileNameInput" v-model="nameInput"
@@ -17,7 +17,7 @@
       <button
         ref="nameSubmitButton"
         type="submit"
-        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
         class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors  ">
         <Check class="h-4 w-4" />
@@ -25,7 +25,7 @@
     </form>
     <button
       v-else
-      :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+      :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
       'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
       class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
@@ -49,7 +49,7 @@
     <template v-if="!confirmDelete">
       <button
         v-if="nameEditable"
-        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
         class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@@ -57,7 +57,7 @@
         <PenLine class="h-4 w-4" />
       </button>
       <button
-        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
         class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@@ -83,7 +83,7 @@
         <Check class="h-4 w-4" />
       </button>
       <button
-        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
         class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"

src/components/profile/ProfileManager.vue

@@ -63,12 +63,10 @@
             <CollapsibleContent>
               <ProfileButton
                 v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
-                class="border-0 border-b"
                 :selected="store.selectedProfile?.id === profile.id"
                 @select="store.selectProfile(profile.id); showProfileList=false"
                 @duplicate="store.duplicateProfile(profile.id)"
                 @delete="store.deleteProfile(profile.id)" />
-              <Separator />
             </CollapsibleContent>
           </Collapsible>
         </div>