UPD: Use proper tab select in ConfigPane

src/components/common/PaletteInput.vue

@@ -7,7 +7,7 @@
       <button
         v-for="(option, key) in options" :key="key"
         class="flex-1 pt-2 items-center text-center"
-        :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200 bg-zinc-900' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
+        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground bg-zinc-900' : '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 bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
+    <div class="flex rounded-xl 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,14 +1,15 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center p-2 gap-2 font-heading transition-all"
+    class="flex-1 flex flex-col items-center rounded-xl 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()">
     <slot v-if="$slots['replace']" name="replace" />
     <template v-else>
       <img
+        v-if="icon"
         draggable="false"
-        :src="icon" alt="connection-type-icon"
+        :src="icon" :alt="title"
         class="h-16"
         :class="{'invert': selected}">
       <ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
@@ -27,7 +28,7 @@ defineProps({
   },
   icon: {
     type: [String, Object, Function],
-    default: '',
+    default: null,
   },
   selected: {
     type: Boolean,