fix(settings): reduce font-size on small devices

With French translation, words are a little longer so I reduce the
font size on small devices to avoid line breaking.

12 files changed, 105 insertions, 7 deletions

diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
index 6b42b71..81eb5df 100644
--- a/src/components/molecules/forms/ackee-select.stories.tsx
+++ b/src/components/molecules/forms/ackee-select.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Select',
   component: AckeeSelect,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the select wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     initialValue: {
       control: {
         type: 'select',
diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
index 34850fb..f00ca74 100644
--- a/src/components/molecules/forms/ackee-select.tsx
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -11,7 +11,7 @@ import SelectWithTooltip, {
 
 export type AckeeSelectProps = Pick<
   SelectWithTooltipProps,
-  'labelClassName' | 'tooltipClassName'
+  'className' | 'labelClassName' | 'tooltipClassName'
 > & {
   /**
    * A default value for Ackee settings.
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index 60430d5..e9939bd 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: MotionToggleComponent,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index cbe38fe..55ff150 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 
 export type MotionToggleProps = Pick<
   ToggleProps,
-  'labelClassName' | 'value'
+  'className' | 'labelClassName' | 'value'
 > & {
   /**
    * The local storage key to save preference.
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
index ef4ed6e..6a88e51 100644
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: PrismThemeToggle,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 3320722..e0b795f 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -8,7 +8,10 @@ import { usePrismTheme } from '@utils/providers/prism-theme';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type PrismThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
+export type PrismThemeToggleProps = Pick<
+  ToggleProps,
+  'className' | 'labelClassName'
+>;
 
 /**
  * PrismThemeToggle component
diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index ddf5d4c..d6206a9 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -9,6 +9,19 @@ export default {
   title: 'Molecules/Forms/Select',
   component: SelectWithTooltip,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the select wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     content: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index 29e2563..46075c2 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -11,6 +11,10 @@ export type SelectWithTooltipProps = Omit<
 > &
   Pick<TooltipProps, 'title' | 'content'> & {
     /**
+     * Set additional classnames to the select wrapper.
+     */
+    className?: string;
+    /**
      * Set additional classnames to the tooltip wrapper.
      */
     tooltipClassName?: TooltipProps['className'];
@@ -22,9 +26,10 @@ export type SelectWithTooltipProps = Omit<
  * Render a select with a button to display a tooltip about options.
  */
 const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
-  title,
+  className = '',
   content,
   id,
+  title,
   tooltipClassName = '',
   ...props
 }) => {
@@ -47,7 +52,7 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   );
 
   return (
-    <div className={styles.wrapper}>
+    <div className={`${styles.wrapper} ${className}`}>
       <LabelledSelect
         labelPosition="left"
         id={id}
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
index 5ebf5a2..a7bebb4 100644
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/theme-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: ThemeToggle,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 61ee4c6..e9dd5e4 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -8,7 +8,10 @@ import { useTheme } from 'next-themes';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
+export type ThemeToggleProps = Pick<
+  ToggleProps,
+  'className' | 'labelClassName'
+>;
 
 /**
  * ThemeToggle component
diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx
index 0351ab7..f1b8296 100644
--- a/src/components/molecules/forms/toggle.stories.tsx
+++ b/src/components/molecules/forms/toggle.stories.tsx
@@ -17,6 +17,19 @@ export default {
         value: {},
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     id: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
index 288062d..0fac45c 100644
--- a/src/components/molecules/forms/toggle.tsx
+++ b/src/components/molecules/forms/toggle.tsx
@@ -20,6 +20,10 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
    */
   choices: ToggleChoices;
   /**
+   * Set additional classnames to the toggle wrapper.
+   */
+  className?: string;
+  /**
    * The toggle label.
    */
   label: string;
@@ -48,6 +52,7 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
  */
 const Toggle: FC<ToggleProps> = ({
   choices,
+  className = '',
   id,
   label,
   labelClassName = '',
@@ -65,7 +70,11 @@ const Toggle: FC<ToggleProps> = ({
         setValue={() => setValue(!value)}
         className={styles.checkbox}
       />
-      <Label size={labelSize} htmlFor={id} className={styles.label}>
+      <Label
+        size={labelSize}
+        htmlFor={id}
+        className={`${styles.label} ${className}`}
+      >
         <span className={`${styles.title} ${labelClassName}`}>{label}</span>
         {choices.left}
         <span className={styles.toggle}></span>