Account settings page.

components/common/Button.js

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

components/common/Button.module.css

@@ -9,6 +9,7 @@
   border: 0;
   outline: none;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .button:hover {

components/common/DropDown.js

@@ -36,7 +36,7 @@ export default function DropDown({
     <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
       <div className={styles.value}>
         {options.find(e => e.value === value)?.label}
-        <Icon icon={<Chevron />} size="S" />
+        <Icon icon={<Chevron />} size="small" />
       </div>
       {showMenu && <Menu className={menuClassName} options={options} onSelect={handleSelect} />}
     </div>

components/common/Icon.js

@@ -6,10 +6,10 @@ export default function Icon({ icon, className, size = 'M' }) {
   return (
     <div
       className={classNames(styles.icon, className, {
-        [styles.xl]: size === 'XL',
-        [styles.large]: size === 'L',
-        [styles.medium]: size === 'M',
-        [styles.small]: size === 'S',
+        [styles.xlarge]: size === 'xlarge',
+        [styles.large]: size === 'large',
+        [styles.medium]: size === 'medium',
+        [styles.small]: size === 'small',
       })}
     >
       {icon}

components/common/Icon.module.css

@@ -13,7 +13,7 @@
   fill: currentColor;
 }
 
-.xl > svg {
+.xlarge > svg {
   width: 48px;
   height: 48px;
 }

components/common/Table.js

@@ -6,11 +6,11 @@ export default function Table({ columns, rows }) {
   return (
     <div className={styles.table}>
       <div className={styles.header}>
-        {columns.map(({ key, label, header }) => (
+        {columns.map(({ key, label, className, style, header }) => (
           <div
             key={key}
-            className={classNames(styles.head, header?.className)}
-            style={header?.style}
+            className={classNames(styles.head, className, header?.className)}
+            style={{ ...style, ...header?.style }}
           >
             {label}
           </div>
@@ -19,11 +19,11 @@ export default function Table({ columns, rows }) {
       <div className={styles.body}>
         {rows.map((row, rowIndex) => (
           <div className={styles.row} key={rowIndex}>
-            {columns.map(({ key, render, cell }) => (
+            {columns.map(({ key, render, className, style, cell }) => (
               <div
                 key={`${rowIndex}${key}`}
-                className={classNames(styles.cell, cell?.className)}
-                style={cell?.style}
+                className={classNames(styles.cell, className, cell?.className)}
+                style={{ ...style, ...cell?.style }}
               >
                 {render ? render(row) : row[key]}
               </div>

components/common/UserButton.js

@@ -24,16 +24,13 @@ export default function UserButton() {
       value: 'username',
       className: styles.username,
     },
-    { label: 'Account', value: 'account' },
     { label: 'Logout', value: 'logout' },
   ];
 
   function handleSelect(value) {
     setShowMenu(false);
 
-    if (value === 'account') {
-      router.push('/account');
-    } else if (value === 'logout') {
+    if (value === 'logout') {
       router.push('/logout');
     }
   }
@@ -47,8 +44,8 @@ export default function UserButton() {
   return (
     <div ref={ref} className={styles.container}>
       <div onClick={() => setShowMenu(state => !state)}>
-        <Icon icon={<User />} size="L" />
-        <Icon icon={<Chevron />} size="S" />
+        <Icon icon={<User />} size="large" />
+        <Icon icon={<Chevron />} size="small" />
       </div>
       {showMenu && <Menu options={menuOptions} onSelect={handleSelect} align="right" />}
     </div>