chore(app): use base font-size of 16px [EE-3186] (#6938)

app/assets/css/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 16px;
+}
+
 html,
 body,
 #page-wrapper,
@@ -217,8 +221,8 @@ a[ng-click] {
 }
 
 .blocklist-item {
-  padding: 0.7rem;
+  padding: 7px;
-  margin-bottom: 0.7rem;
+  margin-bottom: 7px;
   cursor: pointer;
   border: 1px solid var(--border-blocklist-color);
   border-radius: 2px;

app/kubernetes/components/datatables/applications-datatable-url/applications-datatable-url.css

@@ -1,8 +1,8 @@
 .published-url-container {
   display: grid;
   grid-template-columns: 1fr 1fr 3fr;
-  padding-top: 1rem;
+  padding-top: 10px;
-  padding-bottom: 0.5rem;
+  padding-bottom: 5px;
 }
 
 .publish-url-link {

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css

@@ -9,8 +9,3 @@
 .datatable-wide {
   width: 55px;
 }
-
-.datatable-padding-vertical {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}

app/portainer/components/BoxSelector/BoxSelector.css

@@ -1,5 +1,5 @@
 .boxselector_wrapper {
   display: flex;
   flex-flow: row wrap;
-  margin: 0.5rem;
+  margin: 5px;
 }

app/portainer/components/BoxSelector/BoxSelectorItem.css

@@ -2,7 +2,7 @@
 .boxselector_wrapper box-selector-item {
   --selected-item-color: var(--blue-2);
   flex: 1;
-  padding: 0.5rem;
+  padding: 5px;
 }
 
 .boxselector_wrapper .boxselector_header {
@@ -55,7 +55,7 @@
 .boxselector_wrapper input[type='radio']:checked + label {
   background: var(--selected-item-color);
   color: white;
-  padding-top: 2rem;
+  padding-top: 20px;
   border-color: var(--selected-item-color);
 }
 

app/portainer/components/Tip/TextTip/TextTip.module.css

@@ -1,3 +0,0 @@
-.text-margin {
-  margin-right: 0.5rem;
-}

app/portainer/components/Tip/TextTip/TextTip.tsx

@@ -1,8 +1,6 @@
 import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
-import styles from './TextTip.module.css';
-
 type Color = 'orange' | 'blue';
 
 export interface Props {
@@ -20,7 +18,7 @@ export function TextTip({
         className={clsx(
           'fa fa-exclamation-circle',
           `${color}-icon`,
-          styles.textMargin
+          'space-right'
         )}
       />
       {children}

app/portainer/components/sensitive-details/sensitive-details.css

@@ -1,7 +1,7 @@
 .sensitive-details-container {
   display: grid;
   grid-template-columns: 25ch 25ch auto;
-  gap: 2rem;
+  gap: 20px;
   align-items: start;
 }
 

app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.module.css

@@ -1,3 +0,0 @@
-.save-button {
-  margin-top: 2rem;
-}

app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx

@@ -10,7 +10,6 @@ import { FormSectionTitle } from '@/portainer/components/form-components/FormSec
 
 import { Settings } from '../types';
 
-import styles from './EdgeComputeSettings.module.css';
 import { validationSchema } from './EdgeComputeSettings.validation';
 
 export interface FormValues {
@@ -107,12 +106,11 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                   tooltip="Interval used by default by each Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
                 />
 
-                <div className="form-group">
+                <div className="form-group mt-5">
                   <div className="col-sm-12">
                     <LoadingButton
                       disabled={!isValid || !dirty}
                       dataCy="settings-edgeComputeButton"
-                      className={styles.saveButton}
                       isLoading={isSubmitting}
                       loadingText="Saving settings..."
                     >

app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.module.css

@@ -1,7 +1,3 @@
-.save-button {
-  margin-top: 2rem;
-}
-
 .fdo-table {
   margin-top: 3em;
 }

app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx

@@ -140,12 +140,11 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
                   </>
                 )}
 
-                <div className="form-group">
+                <div className="form-group mt-5">
                   <div className="col-sm-12">
                     <LoadingButton
                       disabled={!isValid || !dirty}
                       dataCy="settings-fdoButton"
-                      className={styles.saveButton}
                       isLoading={isSubmitting}
                       loadingText="Saving settings..."
                     >

app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.module.css

@@ -1,3 +0,0 @@
-.save-button {
-  margin-top: 2rem;
-}

app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx

@@ -10,7 +10,6 @@ import { Input } from '@/portainer/components/form-components/Input';
 import { FileUploadField } from '@/portainer/components/form-components/FileUpload';
 import { OpenAMTConfiguration } from '@/portainer/hostmanagement/open-amt/model';
 
-import styles from './SettingsOpenAMT.module.css';
 import { validationSchema } from './SettingsOpenAMT.validation';
 
 export interface Settings {
@@ -243,12 +242,11 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                   </>
                 )}
 
-                <div className="form-group">
+                <div className="form-group mt-5">
                   <div className="col-sm-12">
                     <LoadingButton
                       disabled={!isValid || !dirty}
                       dataCy="settings-fdoButton"
-                      className={styles.saveButton}
                       isLoading={isSubmitting}
                       loadingText="Saving settings..."
                     >

app/portainer/views/account/CreateAccessToken/CreateAccessToken.module.css

@@ -1,9 +0,0 @@
-.add-button {
-  margin-top: 1rem;
-  margin-bottom: 3rem;
-}
-
-.copy-button {
-  margin-top: 1rem;
-  margin-bottom: 3rem;
-}

app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx

@@ -11,8 +11,6 @@ import { Code } from '@/portainer/components/Code';
 import { CopyButton } from '@/portainer/components/Button/CopyButton';
 import { Input } from '@/portainer/components/form-components/Input';
 
-import styles from './CreateAccessToken.module.css';
-
 interface AccessTokenResponse {
   rawAPIKey: string;
 }
@@ -75,13 +73,16 @@ export function CreateAccessToken({
               value={description}
             />
           </FormControl>
-          <Button
+          <div className="row mt-5">
-            disabled={!!errorText || !!accessToken}
+            <div className="col-sm-12">
-            onClick={() => generateAccessToken()}
+              <Button
-            className={styles.addButton}
+                disabled={!!errorText || !!accessToken}
-          >
+                onClick={() => generateAccessToken()}
-            {t('Add access token')}
+              >
-          </Button>
+                {t('Add access token')}
+              </Button>
+            </div>
+          </div>
         </div>
         {accessToken && (
           <>
@@ -95,7 +96,7 @@ export function CreateAccessToken({
               </Trans>
             </TextTip>
             <Code>{accessToken}</Code>
-            <CopyButton copyText={accessToken} className={styles.copyButton}>
+            <CopyButton copyText={accessToken}>
               <Trans ns={translationNS}>Copy access token</Trans>
             </CopyButton>
             <hr />