improve settings components and scss

src/pages/UserSettings.vue

@@ -21,55 +21,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   >
     <NcAppContent
       v-if="config['force']"
-      class="side-menu-setting-app"
+      class="cm-settings"
     >
-      <TableContainer>
-        <TableLabel label="You do not have permission to change the settings." />
-      </TableContainer>
+      <SettingsSection>
+        <SettingLabel label="You do not have permission to change the settings." />
+      </SettingsSection>
     </NcAppContent>
     <NcAppContent
       v-else
-      class="side-menu-setting-app side-menu-setting-app--user"
+      class="cm-settings"
     >
-      <TableContainer>
+      <SettingsSection>
         <SectionTitle label="Menu" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Enable the custom menu"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['enabled']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu"
             help="If there is no selection then the global configuration is applied."
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-menu-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu but also shown in side menu"
             help="These applications must be selected in the previous option."
             help2="If there is no selection then the global configuration is applied"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-side-menu-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Open apps in new tab"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSelect
               v-model="config['target-blank-mode']"
               :options="[
@@ -81,28 +81,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               v-if="config['target-blank-mode'] === 2"
               v-model="config['target-blank-apps']"
             />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Customize sorting"
             :top="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppSort v-model="config['apps-order']" />
-          </TableValue>
-        </TableRow>
-      </TableContainer>
+          </SettingValue>
+        </SettingItem>
+      </SettingsSection>
 
-      <TableContainer>
+      <SettingsSection>
         <SectionTitle label="Support" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="You like this app and you want to support me?"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <a
               target="_blank"
               href="https://www.buymeacoffee.com/deblan"
@@ -110,11 +110,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
             </a>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
         <UserSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
     </NcAppContent>
   </NcContent>
 </template>
@@ -124,10 +124,10 @@ import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
 
-import TableContainer from '../components/settings/TableContainer'
-import TableRow from '../components/settings/TableRow'
-import TableLabel from '../components/settings/TableLabel'
-import TableValue from '../components/settings/TableValue'
+import SettingsSection from '../components/settings/SettingsSection'
+import SettingItem from '../components/settings/SettingItem'
+import SettingLabel from '../components/settings/SettingLabel'
+import SettingValue from '../components/settings/SettingValue'
 import SectionTitle from '../components/settings/SectionTitle'
 import UserSaveButton from '../components/settings/UserSaveButton'
 import FormYesNo from '../components/settings/form/FormYesNo'