improve settings components and scss

src/components/settings/form/FormAppPicker.vue

@@ -15,44 +15,47 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcButton
-    aria-label="t('side_menu', 'Select apps')"
-    variant="primary"
-    @click="openModal"
-  >
-    {{ t('side_menu', 'Select apps') }} ({{ model.length }})
-  </NcButton>
+  <div class="cm-settings-form-apppicker">
+    <NcButton
+      aria-label="t('side_menu', 'Select apps')"
+      variant="primary"
+      @click="openModal"
+    >
+      {{ t('side_menu', 'Select apps') }} ({{ model.length }})
+    </NcButton>
 
-  <NcModal
-    v-if="modal"
-    size="small"
-    @close="closeModal"
-  >
-    <div class="modal__content">
-      <NcCheckboxRadioSwitch
-        v-for="(item, key) in apps"
-        :key="key"
-        v-model="model"
-        name="value"
-        :value="item.id"
-      >
-        <img
-          :src="item.icon"
-          :alt="item.name"
-        />
-        {{ item.name }}
-      </NcCheckboxRadioSwitch>
-
-      <div class="modal__footer">
-        <NcButton
-          variant="primary"
-          @click="closeModal"
+    <NcModal
+      v-if="modal"
+      size="small"
+      class="cm-settings-form-apppicker-modal"
+      @close="closeModal"
+    >
+      <div class="modal__content">
+        <NcCheckboxRadioSwitch
+          v-for="(item, key) in apps"
+          :key="key"
+          v-model="model"
+          name="value"
+          :value="item.id"
         >
-          {{ t('side_menu', 'Close') }}
-        </NcButton>
+          <img
+            :src="item.icon"
+            :alt="item.name"
+          />
+          {{ item.name }}
+        </NcCheckboxRadioSwitch>
+
+        <div class="modal__footer">
+          <NcButton
+            variant="primary"
+            @click="closeModal"
+          >
+            {{ t('side_menu', 'Close') }}
+          </NcButton>
+        </div>
       </div>
-    </div>
-  </NcModal>
+    </NcModal>
+  </div>
 </template>
 
 <script setup>
@@ -77,23 +80,3 @@ onMounted(async () => {
   apps.value = await navStore.getCoreApps()
 })
 </script>
-
-<style scoped>
-.modal__content {
-  padding: 20px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-}
-
-img {
-  width: 15px;
-  height: 15px;
-}
-</style>