Some UI improvements (#4497)

Co-authored-by: Robert Kaussow <xoxys@rknet.org>

web/src/components/atomic/Badge.vue

@@ -1,14 +1,17 @@
 <template>
   <span class="text-xs font-medium inline-flex">
     <span
-      class="pl-2 pr-1 py-0.5 bg-wp-state-neutral-100 text-gray-300 border-2 border-wp-state-neutral-100 rounded-l-full"
+      class="pl-2 pr-1 py-0.5 bg-wp-state-neutral-100 text-gray-300 border-2 border-wp-state-neutral-100 rounded-l-full flex items-center"
       :class="{
         'rounded-r-full pr-2': value === undefined,
       }"
     >
       {{ label }}
     </span>
-    <span v-if="value !== undefined" class="pl-1 pr-2 py-0.5 border-2 border-wp-state-neutral-100 rounded-r-full">
+    <span
+      v-if="value !== undefined"
+      class="pl-1 pr-2 py-0.5 border-2 border-wp-state-neutral-100 rounded-r-full flex items-center"
+    >
       {{ value }}
     </span>
   </span>

web/src/views/org/settings/OrgSettingsWrapper.vue

@@ -2,10 +2,10 @@
   <Scaffold v-if="org" enable-tabs :go-back="goBack">
     <template #title>
       <span>
-        <router-link :to="{ name: 'org' }" class="hover:underline">
-          {{ org.name }}
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        </router-link>
+        <router-link :to="{ name: 'org' }" class="hover:underline">{{
+          org.name
+          /* eslint-disable-next-line @intlify/vue-i18n/no-raw-text */
+        }}</router-link>
         /
         {{ $t('settings') }}
       </span>

web/src/views/user/UserCLIAndAPI.vue

@@ -10,7 +10,7 @@
     </InputField>
 
     <InputField :label="$t('user.settings.cli_and_api.token')">
-      <template #headerActions>
+      <template #titleActions>
         <Button class="ml-auto" :text="$t('user.settings.cli_and_api.reset_token')" @click="resetToken" />
       </template>
       <pre class="code-box">{{ token }}</pre>