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

2022-05-16 10:24:13 +03:00 · 2022-05-16 10:24:13 +03:00 · 0e257c200f
parent df05914fac
commit 0e257c200f
16 changed files with 27 additions and 56 deletions
--- a/app/assets/css/app.css
+++ b/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;
-  margin-bottom: 0.7rem;
+  padding: 7px;
+  margin-bottom: 7px;
  cursor: pointer;
  border: 1px solid var(--border-blocklist-color);
  border-radius: 2px;
--- a/app/kubernetes/components/datatables/applications-datatable-url/applications-datatable-url.css
+++ b/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-bottom: 0.5rem;
+  padding-top: 10px;
+  padding-bottom: 5px;
 }

 .publish-url-link {
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css
+++ b/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;
-}
--- a/app/portainer/components/BoxSelector/BoxSelector.css
+++ b/app/portainer/components/BoxSelector/BoxSelector.css
@ -1,5 +1,5 @@
 .boxselector_wrapper {
  display: flex;
  flex-flow: row wrap;
-  margin: 0.5rem;
+  margin: 5px;
 }
--- a/app/portainer/components/BoxSelector/BoxSelectorItem.css
+++ b/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);
 }

--- a/app/portainer/components/Tip/TextTip/TextTip.module.css
+++ b/app/portainer/components/Tip/TextTip/TextTip.module.css
@ -1,3 +0,0 @@
-.text-margin {
-  margin-right: 0.5rem;
-}
--- a/app/portainer/components/Tip/TextTip/TextTip.tsx
+++ b/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}
--- a/app/portainer/components/sensitive-details/sensitive-details.css
+++ b/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;
 }

--- a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.module.css
+++ b/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.module.css
@ -1,3 +0,0 @@
-.save-button {
-  margin-top: 2rem;
-}
--- a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
+++ b/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..."
                    >
--- a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.module.css
+++ b/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.module.css
@ -1,7 +1,3 @@
-.save-button {
-  margin-top: 2rem;
-}
-
 .fdo-table {
  margin-top: 3em;
 }
--- a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
+++ b/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..."
                    >
--- a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.module.css
+++ b/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.module.css
@ -1,3 +0,0 @@
-.save-button {
-  margin-top: 2rem;
-}
--- a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
+++ b/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..."
                    >
--- a/app/portainer/views/account/CreateAccessToken/CreateAccessToken.module.css
+++ b/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;
-}
--- a/app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx
+++ b/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
-            disabled={!!errorText || !!accessToken}
-            onClick={() => generateAccessToken()}
-            className={styles.addButton}
-          >
-            {t('Add access token')}
-          </Button>
+          <div className="row mt-5">
+            <div className="col-sm-12">
+              <Button
+                disabled={!!errorText || !!accessToken}
+                onClick={() => generateAccessToken()}
+              >
+                {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 />