Initial expanded view in details.

components/common/Button.js

@@ -16,8 +16,9 @@ export default function Button({
     <button
       type={type}
       className={classNames(styles.button, className, {
-        [styles.small]: size === 'small',
         [styles.large]: size === 'large',
+        [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
         [styles.action]: variant === 'action',
         [styles.danger]: variant === 'danger',
       })}

components/common/Button.module.css

@@ -20,12 +20,20 @@
   margin-left: 10px;
 }
 
+.large {
+  font-size: var(--font-size-large);
+}
+
+.medium {
+  font-size: var(--font-size-normal);
+}
+
 .small {
   font-size: var(--font-size-small);
 }
 
-.large {
-  font-size: var(--font-size-large);
+.xsmall {
+  font-size: var(--font-size-xsmall);
 }
 
 .action {

components/common/Icon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Icon.module.css';
 
-export default function Icon({ icon, className, size = 'M' }) {
+export default function Icon({ icon, className, size = 'medium' }) {
   return (
     <div
       className={classNames(styles.icon, className, {
@@ -10,6 +10,7 @@ export default function Icon({ icon, className, size = 'M' }) {
         [styles.large]: size === 'large',
         [styles.medium]: size === 'medium',
         [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
       })}
     >
       {icon}

components/common/Icon.module.css

@@ -32,3 +32,8 @@
   width: 12px;
   height: 12px;
 }
+
+.xsmall > svg {
+  width: 10px;
+  height: 10px;
+}