Various fixings

web-frontend/modules/builder/components/theme/MainThemeConfigBlock.vue

@@ -67,12 +67,12 @@
             <div class="control__label">
               {{ $t('mainThemeConfigBlock.headingLabel', { i }) }}
             </div>
-            <div class="control__elements">
+            <div class="control__elements control__elements--flex">
               <ColorInput
                 :value="builder.theme[`heading_${i}_color`]"
                 @input="setPropertyInStore(`heading_${i}_color`, $event)"
               />
-              <div class="input__with-icon">
+              <div class="input__with-icon margin-left-2">
                 <input
                   type="number"
                   class="input remove-number-input-controls"

web-frontend/modules/core/assets/scss/components/choice_items.scss

@@ -48,11 +48,11 @@
 
   &:hover {
     text-decoration: none;
-  }
 
-  &:not(.disabled, .active):hover {
+    &:not(.disabled, .active) {
-    background-color: $color-neutral-100;
+      background-color: $color-neutral-100;
-    color: $color-neutral-900;
+      color: $color-neutral-900;
+    }
   }
 
   &.disabled {

web-frontend/modules/core/components/workspace/GenerativeAIWorkspaceSettings.vue

@@ -44,14 +44,13 @@
         </div>
       </div>
       <div class="actions actions--right">
-        <button
+        <Button
-          :class="{ 'button--loading': updateLoading }"
-          class="button button--large"
           :disabled="updateLoading || $v.$invalid || !$v.$anyDirty"
+          :loading="updateLoading"
+          icon="iconoir-edit-pencil"
         >
           {{ $t('generativeAIWorkspaceSettings.submitButton') }}
-          <i class="iconoir-edit-pencil"></i>
+        </Button>
-        </button>
       </div>
     </form>
   </div>

web-frontend/modules/core/pages/admin/settings.vue

@@ -142,35 +142,11 @@
             </div>
           </div>
           <div class="admin-settings__control">
-            <Radio
+            <RadioGroup
-              :value="EMAIL_VERIFICATION_OPTIONS.NO_VERIFICATION"
               :model-value="settings.email_verification"
+              :options="emailVerificationOptions"
               @input="updateSettings({ email_verification: $event })"
-            >
+            ></RadioGroup>
-              {{ $t('settings.emailVerificationNoVerification') }}
-            </Radio>
-            <Radio
-              :value="EMAIL_VERIFICATION_OPTIONS.RECOMMENDED"
-              :model-value="settings.email_verification"
-              @input="
-                updateSettings({
-                  email_verification: $event,
-                })
-              "
-            >
-              {{ $t('settings.emailVerificationRecommended') }}
-            </Radio>
-            <Radio
-              :value="EMAIL_VERIFICATION_OPTIONS.ENFORCED"
-              :model-value="settings.email_verification"
-              @input="
-                updateSettings({
-                  email_verification: $event,
-                })
-              "
-            >
-              {{ $t('settings.emailVerificationEnforced') }}
-            </Radio>
           </div>
         </div>
         <div class="admin-settings__item">
@@ -252,7 +228,23 @@ export default {
     return { instanceId: data.instance_id }
   },
   data() {
-    return { account_deletion_grace_delay: null }
+    return {
+      account_deletion_grace_delay: null,
+      emailVerificationOptions: [
+        {
+          label: this.$t('settings.emailVerificationNoVerification'),
+          value: EMAIL_VERIFICATION_OPTIONS.NO_VERIFICATION,
+        },
+        {
+          label: this.$t('settings.emailVerificationRecommended'),
+          value: EMAIL_VERIFICATION_OPTIONS.RECOMMENDED,
+        },
+        {
+          label: this.$t('settings.emailVerificationEnforced'),
+          value: EMAIL_VERIFICATION_OPTIONS.ENFORCED,
+        },
+      ],
+    }
   },
   computed: {
     additionalSettingsComponents() {
@@ -287,6 +279,7 @@ export default {
   },
   methods: {
     async updateSettings(values) {
+      console.log(values)
       this.$v.$touch()
       if (this.$v.$invalid) {
         return

web-frontend/modules/database/components/webhook/WebhookForm.vue

@@ -103,12 +103,12 @@
           {{ $t('webhookForm.inputLabels.events') }}
         </label>
         <div class="control__elements">
-          <Radio v-model="values.include_all_events" :value="true">{{
+          <RadioGroup
-            $t('webhookForm.radio.allEvents')
+            v-model="values.include_all_events"
-          }}</Radio>
+            :options="eventsRadioOptions"
-          <Radio v-model="values.include_all_events" :value="false">
+            vertical-layout
-            {{ $t('webhookForm.radio.customEvents') }}
+          >
-          </Radio>
+          </RadioGroup>
           <div v-if="!values.include_all_events" class="webhook__types">
             <Checkbox
               v-for="webhookEvent in webhookEventTypes"
@@ -246,7 +246,6 @@ import { required, maxLength } from 'vuelidate/lib/validators'
 import form from '@baserow/modules/core/mixins/form'
 import error from '@baserow/modules/core/mixins/error'
 import Checkbox from '@baserow/modules/core/components/Checkbox'
-import Radio from '@baserow/modules/core/components/Radio'
 import TestWebhookModal from '@baserow/modules/database/components/webhook/TestWebhookModal'
 import { isValidURLWithHttpScheme } from '@baserow/modules/core/utils/string'
 
@@ -254,7 +253,6 @@ export default {
   name: 'WebhookForm',
   components: {
     Checkbox,
-    Radio,
     TestWebhookModal,
   },
   mixins: [form, error],
@@ -295,6 +293,10 @@ export default {
       },
       headers: [],
       exampleWebhookEventType: '',
+      eventsRadioOptions: [
+        { value: true, label: this.$t('webhookForm.radio.allEvents') },
+        { value: false, label: this.$t('webhookForm.radio.customEvents') },
+      ],
     }
   },
   computed: {