From c56b3cc989b6cf93230adc83d11b4741b42e0c02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 6 Nov 2023 15:43:43 +0100
Subject: [PATCH] Make vue-selects rounded

---
 .../src/components/Apigw/CFilterParams.vue    | 255 +++++++++---------
 .../src/components/Apigw/CFiltersDropdown.vue |   5 +-
 .../src/components/Apigw/CFiltersStepper.vue  |  14 +-
 .../src/components/Authclient/CSelectUser.vue |   2 +-
 .../web/admin/src/components/CRolePicker.vue  |   2 +-
 .../Permissions/CPermissionClone.vue          |   2 +-
 .../Permissions/CPermissionList.vue           |   4 +-
 .../components/Role/CRoleEditorMembers.vue    |   2 +-
 .../components/Admin/Module/DalSettings.vue   |   2 +-
 .../components/Admin/Module/UniqueValues.vue  |   2 +-
 .../Admin/Page/Builder/Selector.vue           |   2 +-
 .../components/Common/RecordListFilter.vue    |   2 +-
 .../ModuleFields/Configurator/User.vue        |   2 +-
 .../components/ModuleFields/Editor/Record.vue |   8 +-
 .../components/ModuleFields/Editor/User.vue   |   8 +-
 .../Namespaces/NamespaceSidebar.vue           |   2 +-
 .../components/Namespaces/Reminders/Edit.vue  |   2 +-
 .../PageBlocks/ChartConfigurator.vue          |   4 +-
 .../PageBlocks/MetricConfigurator/index.vue   |   6 +-
 .../Navigation/NavTypes/ComposePage.vue       |   2 +-
 .../PageBlocks/Nylas/NylasConfigurator.vue    |   8 +-
 .../PageBlocks/ProgressConfigurator.vue       |  18 +-
 .../PageBlocks/RecordConfigurator.vue         |   4 +-
 .../PageBlocks/RecordListConfigurator.vue     |   2 +-
 .../PageBlocks/TabsConfigurator.vue           |   2 +-
 .../Public/Record/BulkEdit/index.vue          |   2 +-
 .../Public/Record/Exporter/index.vue          |   2 +-
 .../compose/src/views/Admin/Charts/Edit.vue   |   2 +-
 .../compose/src/views/Admin/Pages/Edit.vue    |   2 +-
 .../components/Requests/Editor/Correct.vue    |   2 +-
 .../src/components/Requests/Editor/Delete.vue |   2 +-
 .../Privacy/DataOverview/Application.vue      |   2 +-
 .../src/components/Common/ColumnSelector.vue  |   2 +-
 .../DisplayElements/Configurators/Chart.vue   |   2 +-
 .../src/components/Configurator/Function.vue  |   3 +
 .../src/components/Configurator/Trigger.vue   |   4 +
 .../src/components/Configurator/Workflow.vue  |   1 +
 .../src/components/ExpressionTable.vue        |   1 +
 .../permissions/CPermissionsModal.vue         |   7 +-
 .../privacy/CSensitivityLevelPicker.vue       |   2 +-
 .../kinds/CPromptComposeRecordPicker.vue      |   2 +-
 41 files changed, 202 insertions(+), 198 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/CFilterParams.vue b/client/web/admin/src/components/Apigw/CFilterParams.vue
index c36f5b880d..31f4a3bd34 100644
--- a/client/web/admin/src/components/Apigw/CFilterParams.vue
+++ b/client/web/admin/src/components/Apigw/CFilterParams.vue
@@ -1,146 +1,139 @@
 <template>
-  <div>
+  <div v-if="filter.params.length">
     <b-form-group
-      v-if="filter.params.length"
-      class="w-100 mb-0"
+      v-for="(param, index) in filter.params"
+      :key="index"
+      class="text-primary"
     >
-      <template
-        v-for="(param, index) in filter.params"
-      >
-        <b-form-group
-          :key="index"
-        >
-          <template slot="label">
-            {{ $t(`filters.labels.${param.label}`) }}
-
-            <template v-if="param.label === 'expr'">
-              <a
-                v-if="param.label === 'expr'"
-                :href="documentationURL"
-                target="_blank"
-              >
-                <font-awesome-icon
-                  :icon="['far', 'question-circle']"
-                />
-              </a>
-            </template>
-          </template>
+      <template slot="label">
+        {{ $t(`filters.labels.${param.label}`) }}
+
+        <template v-if="param.label === 'expr'">
+          <a
+            v-if="param.label === 'expr'"
+            :href="documentationURL"
+            target="_blank"
+          >
+            <font-awesome-icon
+              :icon="['far', 'question-circle']"
+            />
+          </a>
+        </template>
+      </template>
 
-          <!-- TODO create multi field component-->
-          <b-form-checkbox
-            v-if="param.type === 'bool'"
-            v-model="param.value"
-          />
+      <!-- TODO create multi field component-->
+      <b-form-checkbox
+        v-if="param.type === 'bool'"
+        v-model="param.value"
+      />
+
+      <vue-select
+        v-else-if="param.label === 'workflow'"
+        v-model="param.value"
+        :options="workflows"
+        :get-option-key="getOptionKey"
+        :reduce="wf => wf.workflowID"
+        :placeholder="$t('filters.placeholders.workflow')"
+        :calculate-position="calculateDropdownPosition"
+        class="bg-white rounded"
+      />
+
+      <b-form-select
+        v-else-if="param.label === 'status'"
+        v-model="param.value"
+        :options="httpStatusOptions"
+      >
+        <template #first>
+          <b-form-select-option
+            :value="undefined"
+          >
+            {{ $t('filters.httpStatus.none') }}
+          </b-form-select-option>
+        </template>
+      </b-form-select>
 
-          <vue-select
-            v-else-if="param.label === 'workflow'"
-            v-model="param.value"
-            :options="workflows"
-            :get-option-key="getOptionKey"
-            :reduce="wf => wf.workflowID"
-            :placeholder="$t('filters.placeholders.workflow')"
-            :calculate-position="calculateDropdownPosition"
-            class="bg-white"
+      <template v-else-if="filter.ref === 'response'">
+        <template v-if="param.type === 'input'">
+          <b-form-select
+            v-model="param.value.type"
+            :options="inputTypeOptions"
+            class="mb-2"
           />
 
-          <b-form-select
-            v-else-if="param.label === 'status'"
-            v-model="param.value"
-            :options="httpStatusOptions"
+          <b-input-group>
+            <b-input-group-prepend>
+              <b-button variant="dark">
+                ƒ
+              </b-button>
+            </b-input-group-prepend>
+            <b-form-input
+              v-model="param.value.expr"
+              :placeholder="$t('filters.help.expression.example')"
+            />
+          </b-input-group>
+        </template>
+
+        <template v-else>
+          <b-input-group
+            v-for="(header, hIndex) in param.value"
+            :key="`header-${hIndex}`"
+            class="mb-2"
           >
-            <template #first>
-              <b-form-select-option
-                :value="undefined"
-              >
-                {{ $t('filters.httpStatus.none') }}
-              </b-form-select-option>
-            </template>
-          </b-form-select>
-
-          <template v-else-if="filter.ref === 'response'">
-            <template v-if="param.type === 'input'">
-              <b-form-select
-                v-model="param.value.type"
-                :options="inputTypeOptions"
-                class="mb-2"
-              />
-
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-button variant="dark">
-                    ƒ
-                  </b-button>
-                </b-input-group-prepend>
-                <b-form-input
-                  v-model="param.value.expr"
-                  :placeholder="$t('filters.help.expression.example')"
-                />
-              </b-input-group>
-            </template>
-
-            <template v-else>
-              <b-input-group
-                v-for="(header, hIndex) in param.value"
-                :key="`header-${hIndex}`"
-                class="mb-2"
-              >
-                <b-form-input
-                  v-model="header.name"
-                  :placeholder="$t('filters.labels.name')"
-                />
-                <b-form-input
-                  v-model="header.expr"
-                  :placeholder="$t('filters.labels.value')"
-                />
-
-                <b-input-group-append>
-                  <b-button
-                    variant="danger"
-                    @click="param.value.splice(hIndex, 1)"
-                  >
-                    <font-awesome-icon
-                      :icon="['far', 'trash-alt']"
-                    />
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
+            <b-form-input
+              v-model="header.name"
+              :placeholder="$t('filters.labels.name')"
+            />
+            <b-form-input
+              v-model="header.expr"
+              :placeholder="$t('filters.labels.value')"
+            />
 
+            <b-input-group-append>
               <b-button
-                variant="link"
-                class="text-decoration-none px-0"
-                @click="param.value.push({ name: '', expr: '' })"
+                variant="danger"
+                @click="param.value.splice(hIndex, 1)"
               >
-                + {{ $t('filters.addHeader') }}
+                <font-awesome-icon
+                  :icon="['far', 'trash-alt']"
+                />
               </b-button>
-            </template>
-          </template>
-
-          <template v-else>
-            <b-form-textarea
-              v-if="param.label === 'jsfunc'"
-              v-model="param.value"
-              max-rows="6"
-            />
-            <b-input-group v-else>
-              <b-input-group-prepend
-                v-if="param.label === 'expr'"
-              >
-                <b-button variant="dark">
-                  ƒ
-                </b-button>
-              </b-input-group-prepend>
-              <b-form-input
-                v-if="param.label === 'expr'"
-                v-model="param.value"
-                :placeholder="$t('filters.help.expression.example')"
-              />
-              <b-form-input
-                v-else
-                v-model="param.value"
-              />
-            </b-input-group>
-          </template>
-        </b-form-group>
+            </b-input-group-append>
+          </b-input-group>
+
+          <b-button
+            variant="link"
+            class="text-decoration-none px-0"
+            @click="param.value.push({ name: '', expr: '' })"
+          >
+            + {{ $t('filters.addHeader') }}
+          </b-button>
+        </template>
+      </template>
+
+      <template v-else>
+        <b-form-textarea
+          v-if="param.label === 'jsfunc'"
+          v-model="param.value"
+          max-rows="6"
+        />
+        <b-input-group v-else>
+          <b-input-group-prepend
+            v-if="param.label === 'expr'"
+          >
+            <b-button variant="dark">
+              ƒ
+            </b-button>
+          </b-input-group-prepend>
+          <b-form-input
+            v-if="param.label === 'expr'"
+            v-model="param.value"
+            :placeholder="$t('filters.help.expression.example')"
+          />
+          <b-form-input
+            v-else
+            v-model="param.value"
+          />
+        </b-input-group>
       </template>
     </b-form-group>
   </div>
diff --git a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
index dbb0eab51a..8e96e7954e 100644
--- a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
@@ -2,8 +2,9 @@
   <b-dropdown
     data-test-id="dropdown-add-filter"
     :text="$t('filters.addFilter')"
-    variant="light"
-    class="d-inline-flex min-content"
+    variant="primary"
+    size="lg"
+    class="d-inline-flex mt-3"
   >
     <template v-if="filterList.length">
       <b-dropdown-item
diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
index 40c1d38a18..a0ce428e3c 100644
--- a/client/web/admin/src/components/Apigw/CFiltersStepper.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
@@ -11,6 +11,14 @@
       <h3 class="m-0">
         {{ $t('filters.title') }}
       </h3>
+
+      <div class="d-flex flex-wrap flex-fill-child gap-1">
+        <c-filters-dropdown
+          :available-filters="getAvailableFiltersByStep"
+          :filters="getSelectedFiltersByStep"
+          @addFilter="onAddFilter"
+        />
+      </div>
     </template>
 
     <b-tabs
@@ -38,12 +46,6 @@
     </b-tabs>
 
     <template #footer>
-      <c-filters-dropdown
-        :available-filters="getAvailableFiltersByStep"
-        :filters="getSelectedFiltersByStep"
-        @addFilter="onAddFilter"
-      />
-
       <c-button-submit
         :disabled="disabled"
         :processing="processing"
diff --git a/client/web/admin/src/components/Authclient/CSelectUser.vue b/client/web/admin/src/components/Authclient/CSelectUser.vue
index 922a3c098f..7b6944f621 100644
--- a/client/web/admin/src/components/Authclient/CSelectUser.vue
+++ b/client/web/admin/src/components/Authclient/CSelectUser.vue
@@ -6,7 +6,7 @@
     :get-option-key="getOptionKey"
     :value="user.value"
     :calculate-position="calculateDropdownPosition"
-    class="bg-white"
+    class="bg-white rounded"
     @search="search"
     @input="updateRunAs"
   />
diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index c01e4eb928..a218206b1f 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -10,7 +10,7 @@
       :get-option-label="r => getRoleLabel(r)"
       :calculate-position="calculateDropdownPosition"
       :placeholder="$t('admin:picker.role.placeholder')"
-      class="bg-white w-100"
+      class="bg-white w-100 rounded"
       multiple
       @search="search"
       @input="updateValue($event)"
diff --git a/client/web/admin/src/components/Permissions/CPermissionClone.vue b/client/web/admin/src/components/Permissions/CPermissionClone.vue
index 8cd38b720c..cb00b84401 100644
--- a/client/web/admin/src/components/Permissions/CPermissionClone.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionClone.vue
@@ -37,7 +37,7 @@
           multiple
           :placeholder="$t('ui.clone.pick-role')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
     </b-modal>
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index 8a15b42599..2ab199fef0 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -231,7 +231,7 @@
           :disabled="add.mode === 'eval' && !!add.userID"
           :placeholder="$t('ui.add.role.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -253,7 +253,7 @@
           clearable
           :placeholder="$t('ui.add.user.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 29191221c5..8c34cdca27 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -22,7 +22,7 @@
           :get-option-label="u => getUserLabel(u)"
           :calculate-position="calculateDropdownPosition"
           :placeholder="$t('admin:picker.member.placeholder')"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           multiple
           @search="search"
           @input="updateValue($event)"
diff --git a/client/web/compose/src/components/Admin/Module/DalSettings.vue b/client/web/compose/src/components/Admin/Module/DalSettings.vue
index 83ffd1ad2b..d226c87a07 100644
--- a/client/web/compose/src/components/Admin/Module/DalSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/DalSettings.vue
@@ -17,7 +17,7 @@
         :placeholder="$t('connection.placeholder')"
         :get-option-label="getConnectionLabel"
         :calculate-position="calculateDropdownPosition"
-        class="bg-white"
+        class="bg-white rounded"
       />
     </b-form-group>
 
diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index 24ce72a68b..a846bb5f61 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -31,7 +31,7 @@
               :get-option-key="getOptionKey"
               :options="filterFieldOptions(rule)"
               :calculate-position="calculateDropdownPosition"
-              class="bg-white"
+              class="bg-white rounded"
               style="min-width: 300px;"
             />
 
diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
index b3695363d3..de41dc6a56 100644
--- a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
+++ b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -50,7 +50,7 @@
             :calculate-position="calculateDropdownPosition"
             :placeholder="$t('selector.selectableBlocks.placeholder')"
             append-to-body
-            class="bg-white"
+            class="bg-white rounded"
           />
 
           <b-input-group-append>
diff --git a/client/web/compose/src/components/Common/RecordListFilter.vue b/client/web/compose/src/components/Common/RecordListFilter.vue
index 2bb6844b64..1ef2b7f36c 100644
--- a/client/web/compose/src/components/Common/RecordListFilter.vue
+++ b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -79,7 +79,7 @@
                       append-to-body
                       :calculate-position="calculateDropdownPosition"
                       :class="{ 'filter-field-picker': !!filter.name }"
-                      class="field-selector bg-white"
+                      class="field-selector bg-white rounded"
                       @input="onChange($event, groupIndex, index)"
                     />
                   </b-td>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/User.vue b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
index 987ff9fd31..f996484776 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
@@ -24,7 +24,7 @@
         :calculate-position="calculateDropdownPosition"
         multiple
         label="name"
-        class="bg-white"
+        class="bg-white rounded"
       />
     </b-form-group>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
index 87bab70e12..80234b7148 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -55,7 +55,7 @@
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           multiple
           @search="search"
@@ -84,7 +84,7 @@
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           @input="selectChange($event)"
           @search="search"
@@ -114,7 +114,7 @@
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           :value="getRecord(ctx.index)"
           @input="setRecord($event, ctx.index)"
@@ -156,7 +156,7 @@
         :filterable="false"
         :searchable="searchable"
         :selectable="option => option.selectable"
-        class="bg-white w-100"
+        class="bg-white w-100 rounded"
         @search="search"
       >
         <pagination
diff --git a/client/web/compose/src/components/ModuleFields/Editor/User.vue b/client/web/compose/src/components/ModuleFields/Editor/User.vue
index d53e7b1bdc..565759043c 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/User.vue
@@ -53,7 +53,7 @@
           :filterable="false"
           :selectable="option => option.selectable"
           :loading="processing"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           @search="search"
           @input="updateValue($event)"
         >
@@ -79,7 +79,7 @@
           :selectable="option => option.selectable"
           :loading="processing"
           multiple
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           @search="search"
         >
           <pagination
@@ -106,7 +106,7 @@
           :filterable="false"
           :selectable="option => option.selectable"
           :loading="processing"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           @search="search"
           @input="updateValue($event, ctx.index)"
         >
@@ -136,7 +136,7 @@
         :filterable="false"
         :selectable="option => option.selectable"
         :loading="processing"
-        class="bg-white w-100"
+        class="bg-white w-100 rounded"
         @input="updateValue($event)"
         @search="search"
       >
diff --git a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
index 88223b234b..6a9d41e1fa 100644
--- a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
+++ b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
@@ -17,7 +17,7 @@
           :placeholder="$t('pickNamespace')"
           :calculate-position="calculateDropdownPosition"
           :autoscroll="false"
-          class="bg-white"
+          class="bg-white rounded"
           @option:selected="namespaceSelected"
         >
           <template #list-header>
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index de40c27ff4..c08e435001 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -76,7 +76,7 @@
           :calculate-position="calculateDropdownPosition"
           :reduce="user => user.userID"
           option-value="userID"
-          class="bg-white"
+          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
diff --git a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
index 126a16671c..7d7aea7555 100644
--- a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
@@ -15,7 +15,7 @@
           label="name"
           append-to-body
           :selectable="c => !c.deletedAt"
-          class="bg-white"
+          class="bg-white rounded"
           @input="chartSelected"
         />
         <b-input-group-append>
@@ -58,7 +58,7 @@
           :clearable="true"
           :placeholder="$t('chart.drillDown.openInModal')"
           append-to-body
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
         />
       </b-form-group>
     </template>
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
index 4195cd563e..23bd06713f 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -191,7 +191,7 @@
                   :get-option-key="getOptionMetricFieldKey"
                   :reduce="f => f.name"
                   :calculate-position="calculateDropdownPosition"
-                  class="bg-white"
+                  class="bg-white rounded"
                   @input="onMetricFieldChange"
                 />
               </b-form-group>
@@ -208,7 +208,7 @@
                   :get-option-key="getOptionAggregationOperationKey"
                   :reduce="a => a.operation"
                   :calculate-position="calculateDropdownPosition"
-                  class="bg-white"
+                  class="bg-white rounded"
                 />
               </b-form-group>
 
@@ -280,7 +280,7 @@
                   :clearable="true"
                   :placeholder="$t('metric.drillDown.openInModal')"
                   append-to-body
-                  class="block-selector bg-white w-100"
+                  class="block-selector bg-white w-100 rounded"
                 />
               </b-form-group>
             </fieldset>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index dfd9a3d79e..fd689918d7 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -29,7 +29,7 @@
           :reduce="f => f.pageID"
           option-value="pageID"
           option-text="title"
-          class="bg-white"
+          class="bg-white rounded"
           @input="updateLabelValue"
         />
       </b-form-group>
diff --git a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
index 8f5c196492..37e62e4c17 100644
--- a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
@@ -74,7 +74,7 @@
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
                   append-to-body
-                  class="bg-white"
+                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -95,7 +95,7 @@
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
                   append-to-body
-                  class="bg-white"
+                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -116,7 +116,7 @@
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
                   append-to-body
-                  class="bg-white"
+                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -140,7 +140,7 @@
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
                   append-to-body
-                  class="bg-white"
+                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
diff --git a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
index 1ec1c99b79..7dd809b970 100644
--- a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
@@ -41,7 +41,7 @@
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
               :calculate-position="calculateDropdownPosition"
-              class="bg-white"
+              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -88,7 +88,7 @@
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
                 @input="fieldChanged($event, options.value)"
               />
             </b-form-group>
@@ -111,7 +111,7 @@
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
               />
             </b-form-group>
           </b-col>
@@ -159,7 +159,7 @@
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
               :calculate-position="calculateDropdownPosition"
-              class="bg-white"
+              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -206,7 +206,7 @@
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
                 @input="fieldChanged($event, options.minValue)"
               />
             </b-form-group>
@@ -229,7 +229,7 @@
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
               />
             </b-form-group>
           </b-col>
@@ -277,7 +277,7 @@
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
               :calculate-position="calculateDropdownPosition"
-              class="bg-white"
+              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -324,7 +324,7 @@
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
                 @input="fieldChanged($event, options.maxValue)"
               />
             </b-form-group>
@@ -347,7 +347,7 @@
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
               />
             </b-form-group>
           </b-col>
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index bf4a8143a8..3f569cabb5 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -58,7 +58,7 @@
               :reduce="getOptionKey"
               :calculate-position="calculateDropdownPosition"
               append-to-body
-              class="bg-white"
+              class="bg-white rounded"
               @input="updateReferenceModule($event, [])"
             />
           </b-form-group>
@@ -184,7 +184,7 @@
                 :get-option-key="getOptionKey"
                 :reduce="option => option.isSystem ? option.name : option.fieldID"
                 :calculate-position="calculateDropdownPosition"
-                class="bg-white"
+                class="bg-white rounded"
               />
             </b-td>
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index ce8bd7983b..b34dbc6168 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -369,7 +369,7 @@
                             :calculate-position="calculateDropdownPosition"
                             append-to-body
                             multiple
-                            class="bg-white"
+                            class="bg-white rounded"
                           />
                         </b-td>
 
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index 079c4ad174..5b63a48763 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -175,7 +175,7 @@
                 :reduce="option => option.value"
                 :calculate-position="calculateDropdownPosition"
                 append-to-body
-                class="bg-white"
+                class="bg-white rounded"
               />
 
               <b-input-group-append>
diff --git a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
index 04b9abe834..0cb2ae8547 100644
--- a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
+++ b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
@@ -61,7 +61,7 @@
           :calculate-position="calculateDropdownPosition"
           :selectable="option => !fields.includes(option.name)"
           :reduce="f => f.name"
-          class="bg-white position-relative"
+          class="bg-white position-relative rounded"
           @input="addField"
         />
 
diff --git a/client/web/compose/src/components/Public/Record/Exporter/index.vue b/client/web/compose/src/components/Public/Record/Exporter/index.vue
index 74fc753dd4..72791bed22 100644
--- a/client/web/compose/src/components/Public/Record/Exporter/index.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/index.vue
@@ -154,7 +154,7 @@
             :get-option-key="getOptionKey"
             :calculate-position="calculateDropdownPosition"
             :placeholder="$t('recordList.export.timezonePlaceholder')"
-            class="bg-white"
+            class="bg-white rounded"
           />
         </b-form-group>
       </template>
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index a43a16fb14..a1375ef261 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -104,7 +104,7 @@
                             :get-option-key="o => o.id"
                             :placeholder="$t('colorScheme.placeholder')"
                             :calculate-position="calculateDropdownPosition"
-                            class="bg-white"
+                            class="bg-white rounded"
                           >
                             <template #option="option">
                               <p
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index b9e0c5b54e..6568c320c3 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -547,7 +547,7 @@
           :selectable="role => !currentLayoutRoles.includes(role.roleID)"
           append-to-body
           multiple
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
 
diff --git a/client/web/privacy/src/components/Requests/Editor/Correct.vue b/client/web/privacy/src/components/Requests/Editor/Correct.vue
index 4b10303f6d..0d1a3c0680 100644
--- a/client/web/privacy/src/components/Requests/Editor/Correct.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Correct.vue
@@ -19,7 +19,7 @@
           :get-option-key="getOptionKey"
           :placeholder="$t('connection.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="h-100 bg-white"
+          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
diff --git a/client/web/privacy/src/components/Requests/Editor/Delete.vue b/client/web/privacy/src/components/Requests/Editor/Delete.vue
index 43dd97d137..9fe7ba729d 100644
--- a/client/web/privacy/src/components/Requests/Editor/Delete.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Delete.vue
@@ -19,7 +19,7 @@
           :get-option-key="getOptionKey"
           :placeholder="$t('connection.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="h-100 bg-white"
+          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
diff --git a/client/web/privacy/src/views/Privacy/DataOverview/Application.vue b/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
index 2bd3ded66f..22a9aa7b9e 100644
--- a/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
+++ b/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
@@ -23,7 +23,7 @@
           :calculate-position="calculateDropdownPosition"
           :get-option-label="({ handle, meta }) => meta.name || handle"
           :get-option-key="getOptionKey"
-          class="h-100 bg-white"
+          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
diff --git a/client/web/reporter/src/components/Common/ColumnSelector.vue b/client/web/reporter/src/components/Common/ColumnSelector.vue
index d9bf97f0a0..94d6075290 100644
--- a/client/web/reporter/src/components/Common/ColumnSelector.vue
+++ b/client/web/reporter/src/components/Common/ColumnSelector.vue
@@ -9,7 +9,7 @@
     :reduce="r => r.name"
     append-to-body
     :calculate-position="calculateDropdownPosition"
-    class="column-selector bg-white"
+    class="column-selector bg-white rounded"
     v-on="$listeners"
   />
 </template>
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
index 2bf3f7bbab..790b7b6336 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@@ -60,7 +60,7 @@
               option-value="value"
               clearable
               :calculate-position="calculateDropdownPosition"
-              class="mw-100"
+              class="mw-100 rounded"
               style="min-width: 100%;"
             >
               <template #option="option">
diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
index d194dd0200..94958a8e5d 100644
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -35,6 +35,7 @@
             :filter="functionFilter"
             :placeholder="$t('steps:function.configurator.select-function')"
             :calculate-position="calculateDropdownPosition"
+            class="bg-white rounded"
             @input="functionChanged"
           />
         </b-form-group>
@@ -111,6 +112,7 @@
                   :filter="argTypeFilter"
                   :clearable="false"
                   :calculate-position="calculateDropdownPosition"
+                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -148,6 +150,7 @@
                     :reduce="a => a.value"
                     :placeholder="$t('steps:function.configurator.option-select')"
                     :calculate-position="calculateDropdownPosition"
+                    class="bg-white rounded"
                     @input="$root.$emit('change-detected')"
                   />
 
diff --git a/client/web/workflow/src/components/Configurator/Trigger.vue b/client/web/workflow/src/components/Configurator/Trigger.vue
index a08746a7d0..2456e095e3 100644
--- a/client/web/workflow/src/components/Configurator/Trigger.vue
+++ b/client/web/workflow/src/components/Configurator/Trigger.vue
@@ -29,6 +29,7 @@
             :filter="resTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-resource-type')"
             :calculate-position="calculateDropdownPosition"
+            class="bg-white rounded"
             @input="resourceChanged"
           />
         </b-form-group>
@@ -47,6 +48,7 @@
             :filter="evtTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-event-type')"
             :calculate-position="calculateDropdownPosition"
+            class="bg-white rounded"
             @input="eventChanged"
           />
         </b-form-group>
@@ -152,6 +154,7 @@
                   :filter="constrFilter"
                   :placeholder="$t('steps:trigger.configurator.select-constraint-type')"
                   :calculate-position="calculateDropdownPosition"
+                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -168,6 +171,7 @@
                   :reduce="c => c.value"
                   :placeholder="$t('steps:trigger.configurator.select-operator')"
                   :calculate-position="calculateDropdownPosition"
+                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
diff --git a/client/web/workflow/src/components/Configurator/Workflow.vue b/client/web/workflow/src/components/Configurator/Workflow.vue
index 40ce3e413a..dd2a1f28f5 100644
--- a/client/web/workflow/src/components/Configurator/Workflow.vue
+++ b/client/web/workflow/src/components/Configurator/Workflow.vue
@@ -54,6 +54,7 @@
         :get-option-key="getOptionKey"
         :value="user.value"
         :calculate-position="calculateDropdownPosition"
+        class="bg-white rounded"
         @search="search"
         @input="updateRunAs"
       />
diff --git a/client/web/workflow/src/components/ExpressionTable.vue b/client/web/workflow/src/components/ExpressionTable.vue
index fc050241f2..bc25124854 100644
--- a/client/web/workflow/src/components/ExpressionTable.vue
+++ b/client/web/workflow/src/components/ExpressionTable.vue
@@ -97,6 +97,7 @@
                   :filter="varFilter"
                   append-to-body
                   :calculate-position="calculateDropdownPosition"
+                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index 96e467bfe9..3fe2dc9eff 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -53,7 +53,7 @@
               :get-option-key="getOptionRoleKey"
               append-to-body
               :calculate-position="calculateDropdownPosition"
-              class="h-100 bg-white"
+              class="h-100 bg-white rounded"
               @input="onRoleChange"
             />
           </b-form-group>
@@ -207,7 +207,7 @@
           :disabled="!!add.userID"
           :placeholder="labels.add.role.placeholder"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -228,7 +228,7 @@
           clearable
           :placeholder="labels.add.user.placeholder"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
@@ -242,7 +242,6 @@
         </b-button>
 
         <c-button-submit
-          v-if="false"
           data-test-id="button-save"
           :disabled="submitDisabled"
           :processing="processing"
diff --git a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
index 04e1ec8974..ce1b851c99 100644
--- a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
+++ b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
@@ -11,7 +11,7 @@
     :reduce="l => l.sensitivityLevelID"
     append-to-body
     :calculate-position="calculateDropdownPosition"
-    class="bg-white"
+    class="bg-white rounded"
     @input="onInput"
   />
 </template>
diff --git a/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue b/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
index d808868368..c80d97f81f 100644
--- a/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
+++ b/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
@@ -17,7 +17,7 @@
         option-text="label"
         placeholder="Select record"
         :filterable="false"
-        class="bg-white w-100 mb-3"
+        class="bg-white w-100 mb-3 rounded"
         @search="search"
       >
         <c-pagination