styles: make icons responsive to font size

2021-05-18 12:21:10 -03:00
parent e0fc84b54e
commit 5ddc976446
21 changed files with 53 additions and 35 deletions
--- a/app/assets/icons/ic-archive.svg
+++ b/app/assets/icons/ic-archive.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.4444 12.3333H12.3333C12.3333 12.9522 12.0875 13.5457 11.6499 13.9832C11.2123 14.4208 10.6188 14.6667 10 14.6667C9.38116 14.6667 8.78767 14.4208 8.35008 13.9832C7.9125 13.5457 7.66667 12.9522 7.66667 12.3333H4.55556V4.55556H15.4444V12.3333ZM15.4444 3H4.55556C3.69222 3 3 3.7 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V4.55556C17 4.143 16.8361 3.74733 16.5444 3.45561C16.2527 3.16389 15.857 3 15.4444 3Z" />
 <path d="M13.1111 8.44442H11.5556V6.11108H8.44447V8.44442H6.88892L10 11.5555L13.1111 8.44442Z" />
 </svg>
--- a/app/assets/icons/ic-chevron-right.svg
+++ b/app/assets/icons/ic-chevron-right.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.90918 14.0667L10.7342 10.2417L6.90918 6.4167L8.09251 5.2417L13.0925 10.2417L8.09251 15.2417L6.90918 14.0667Z" />
 </svg>
--- a/app/assets/icons/ic-close.svg
+++ b/app/assets/icons/ic-close.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.2459 5.92925C15.5704 5.60478 15.5704 5.07872 15.2459 4.75425C14.9214 4.42978 14.3954 4.42978 14.0709 4.75425L10.0001 8.82508L5.92925 4.75425C5.60478 4.42978 5.07872 4.42978 4.75425 4.75425C4.42978 5.07872 4.42978 5.60478 4.75425 5.92925L8.82508 10.0001L4.75425 14.0709C4.42978 14.3954 4.42978 14.9214 4.75425 15.2459C5.07872 15.5704 5.60478 15.5704 5.92925 15.2459L10.0001 11.1751L14.0709 15.2459C14.3954 15.5704 14.9214 15.5704 15.2459 15.2459C15.5704 14.9214 15.5704 14.3954 15.2459 14.0709L11.1751 10.0001L15.2459 5.92925Z" />
 </svg>
--- a/app/assets/icons/ic-hashtag.svg
+++ b/app/assets/icons/ic-hashtag.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill-rule="evenodd" clip-rule="evenodd" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill-rule="evenodd" clip-rule="evenodd" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.6 3.5H7V6.9L3.5 6.9V8.5H7V11.4H3.5V13H7V16.5H8.6V13L11.5 13V16.5H13.1V13H16.5V11.4H13.1V8.5H16.5V6.9L13.1 6.9V3.5H11.5V6.9L8.6 6.9V3.5ZM8.6 8.5V11.4L11.5 11.4V8.5L8.6 8.5Z" />
 </svg>
--- a/app/assets/icons/ic-more.svg
+++ b/app/assets/icons/ic-more.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3333 9.99992C13.3333 9.55789 13.5088 9.13397 13.8214 8.82141C14.134 8.50885 14.5579 8.33325 14.9999 8.33325C15.4419 8.33325 15.8659 8.50885 16.1784 8.82141C16.491 9.13397 16.6666 9.55789 16.6666 9.99992C16.6666 10.4419 16.491 10.8659 16.1784 11.1784C15.8659 11.491 15.4419 11.6666 14.9999 11.6666C14.5579 11.6666 14.134 11.491 13.8214 11.1784C13.5088 10.8659 13.3333 10.4419 13.3333 9.99992ZM8.33325 9.99992C8.33325 9.55789 8.50885 9.13397 8.82141 8.82141C9.13397 8.50885 9.55789 8.33325 9.99992 8.33325C10.4419 8.33325 10.8659 8.50885 11.1784 8.82141C11.491 9.13397 11.6666 9.55789 11.6666 9.99992C11.6666 10.4419 11.491 10.8659 11.1784 11.1784C10.8659 11.491 10.4419 11.6666 9.99992 11.6666C9.55789 11.6666 9.13397 11.491 8.82141 11.1784C8.50885 10.8659 8.33325 10.4419 8.33325 9.99992ZM3.33325 9.99992C3.33325 9.55789 3.50885 9.13397 3.82141 8.82141C4.13397 8.50885 4.55789 8.33325 4.99992 8.33325C5.44195 8.33325 5.86587 8.50885 6.17843 8.82141C6.49099 9.13397 6.66658 9.55789 6.66658 9.99992C6.66658 10.4419 6.49099 10.8659 6.17843 11.1784C5.86587 11.491 5.44195 11.6666 4.99992 11.6666C4.55789 11.6666 4.13397 11.491 3.82141 11.1784C3.50885 10.8659 3.33325 10.4419 3.33325 9.99992Z" />
 </svg>
--- a/app/assets/icons/ic-pencil-off.svg
+++ b/app/assets/icons/ic-pencil-off.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.25 7.9L12.25 4.9L15.1 7.75L12.1 10.75L11.05 9.7L13 7.675L12.325 7L10.375 8.95L9.25 7.9ZM17.275 4.45L15.55 2.725C15.4 2.575 15.175 2.5 15.025 2.5C14.875 2.5 14.65 2.575 14.5 2.725L13.15 4.075L16 6.925L17.275 5.5C17.575 5.275 17.575 4.75 17.275 4.45ZM16 16.525L15.025 17.5L10.15 12.625L6.85 16H4V13.15L7.375 9.775L2.5 4.975L3.475 4L16 16.525ZM9.1 11.575L8.425 10.9L5.5 13.825V14.5H6.175L9.1 11.575Z" />
 </svg>
--- a/app/assets/icons/ic-pin-off.svg
+++ b/app/assets/icons/ic-pin-off.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 9.68991L1.66675 4.35665L2.84526 3.17813L16.9874 17.3203L15.8089 18.4988L10.6 13.2899V17.5H9.4V13H4.50001V11.5L7 10V9.68991ZM8.8101 11.5H6.60001L8.09971 10.7896L8.8101 11.5ZM11.5 4V9.47623L15.0238 13H15.5V11.5L13 10V4H13.75V2.5H6.25001V4H7V4.97623L8.5 6.47623V4H11.5Z" />
 </svg>
--- a/app/assets/icons/ic-pin.svg
+++ b/app/assets/icons/ic-pin.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13 10V4H13.75V2.5H6.25V4H7V10L4.5 11.5V13H9.4V17.5H10.6V13H15.5V11.5L13 10ZM6.6 11.5L8.5 10.6V4H11.5V10.6L13.4 11.5H6.6Z" />
 </svg>
--- a/app/assets/icons/ic-restore.svg
+++ b/app/assets/icons/ic-restore.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10H0L3.33333 13.3333L6.66667 10H4.16667C4.16667 8.4529 4.78125 6.96917 5.87521 5.87521C6.96917 4.78125 8.4529 4.16667 10 4.16667C11.5471 4.16667 13.0308 4.78125 14.1248 5.87521C15.2188 6.96917 15.8333 8.4529 15.8333 10C15.8333 11.5471 15.2188 13.0308 14.1248 14.1248C13.0308 15.2188 11.5471 15.8333 10 15.8333C8.75 15.8333 7.575 15.4167 6.61667 14.75L5.41667 15.95C6.7 16.9167 8.28333 17.5 10 17.5C11.9891 17.5 13.8968 16.7098 15.3033 15.3033C16.7098 13.8968 17.5 11.9891 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5ZM11.6667 10C11.6667 9.55797 11.4911 9.13405 11.1785 8.82149C10.8659 8.50893 10.442 8.33333 10 8.33333C9.55797 8.33333 9.13405 8.50893 8.82149 8.82149C8.50893 9.13405 8.33333 9.55797 8.33333 10C8.33333 10.442 8.50893 10.866 8.82149 11.1785C9.13405 11.4911 9.55797 11.6667 10 11.6667C10.442 11.6667 10.8659 11.4911 11.1785 11.1785C11.4911 10.866 11.6667 10.442 11.6667 10Z" />
 </svg>
--- a/app/assets/icons/ic-text-rich.svg
+++ b/app/assets/icons/ic-text-rich.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.5 7.49984H7.5V12.4998H2.5V7.49984ZM2.5 4.1665H17.5V5.83317H2.5V4.1665ZM17.5 7.49984V9.1665H9.16667V7.49984H17.5ZM17.5 10.8332V12.4998H9.16667V10.8332H17.5ZM2.5 14.1665H14.1667V15.8332H2.5V14.1665Z" />
 </svg>
--- a/app/assets/icons/ic-textbox-password.svg
+++ b/app/assets/icons/ic-textbox-password.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16.2 7.8H20.4V16.2H16.2V17.88C16.2 18.1028 16.2885 18.3164 16.446 18.474C16.6035 18.6315 16.8172 18.72 17.04 18.72H18.72V20.4H16.62C16.158 20.4 15.36 20.022 15.36 19.56C15.36 20.022 14.562 20.4 14.1 20.4H12V18.72H13.68C13.9028 18.72 14.1164 18.6315 14.2739 18.474C14.4315 18.3164 14.52 18.1028 14.52 17.88V6.12C14.52 5.89722 14.4315 5.68356 14.2739 5.52603C14.1164 5.3685 13.9028 5.28 13.68 5.28H12V3.6H14.1C14.562 3.6 15.36 3.978 15.36 4.44C15.36 3.978 16.158 3.6 16.62 3.6H18.72V5.28H17.04C16.8172 5.28 16.6035 5.3685 16.446 5.52603C16.2885 5.68356 16.2 5.89722 16.2 6.12V7.8ZM3.59998 7.8H12.84V9.48H5.27998V14.52H12.84V16.2H3.59998V7.8ZM18.72 14.52V9.48H16.2V14.52H18.72ZM9.05998 12C9.05998 11.6658 8.92723 11.3453 8.69093 11.109C8.45463 10.8727 8.13415 10.74 7.79998 10.74C7.4658 10.74 7.14532 10.8727 6.90902 11.109C6.67273 11.3453 6.53998 11.6658 6.53998 12C6.53998 12.3342 6.67273 12.6547 6.90902 12.891C7.14532 13.1272 7.4658 13.26 7.79998 13.26C8.13415 13.26 8.45463 13.1272 8.69093 12.891C8.92723 12.6547 9.05998 12.3342 9.05998 12ZM12.84 11.0676C12.3276 10.5972 11.5296 10.6392 11.0592 11.16C10.5888 11.664 10.6308 12.462 11.16 12.9324C11.622 13.3692 12.3612 13.3692 12.84 12.9324V11.0676Z" />
 </svg>
--- a/app/assets/icons/ic-trash-sweep.svg
+++ b/app/assets/icons/ic-trash-sweep.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5001 13.3333H15.8334V14.9999H12.5001V13.3333ZM12.5001 6.66658H18.3334V8.33325H12.5001V6.66658ZM12.5001 9.99992H17.5001V11.6666H12.5001V9.99992ZM9.16675 8.33325V14.9999H4.16675V8.33325H9.16675ZM10.8334 6.66658H2.50008V14.9999C2.50008 15.4419 2.67568 15.8659 2.98824 16.1784C3.3008 16.491 3.72472 16.6666 4.16675 16.6666H9.16675C9.60878 16.6666 10.0327 16.491 10.3453 16.1784C10.6578 15.8659 10.8334 15.4419 10.8334 14.9999V6.66658ZM11.6667 4.16659H9.16675L8.33342 3.33325H5.00008L4.16675 4.16659H1.66675V5.83325H11.6667V4.16659Z" />
 </svg>
--- a/app/assets/icons/ic-trash.svg
+++ b/app/assets/icons/ic-trash.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.49992 2.5V3.33333H3.33325V5H4.16659V15.8333C4.16659 16.2754 4.34218 16.6993 4.65474 17.0118C4.9673 17.3244 5.39122 17.5 5.83325 17.5H14.1666C14.6086 17.5 15.0325 17.3244 15.3451 17.0118C15.6577 16.6993 15.8333 16.2754 15.8333 15.8333V5H16.6666V3.33333H12.4999V2.5H7.49992ZM5.83325 5H14.1666V15.8333H5.83325V5ZM7.49992 6.66667V14.1667H9.16658V6.66667H7.49992ZM10.8333 6.66667V14.1667H12.4999V6.66667H10.8333Z" />
 </svg>
--- a/app/assets/icons/ic-tune.svg
+++ b/app/assets/icons/ic-tune.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.5 14.1667V15.8333H7.5V14.1667H2.5ZM2.5 4.16667V5.83333H10.8333V4.16667H2.5ZM10.8333 17.5V15.8333H17.5V14.1667H10.8333V12.5H9.16667V17.5H10.8333ZM5.83333 7.5V9.16667H2.5V10.8333H5.83333V12.5H7.5V7.5H5.83333ZM17.5 10.8333V9.16667H9.16667V10.8333H17.5ZM12.5 7.5H14.1667V5.83333H17.5V4.16667H14.1667V2.5H12.5V7.5Z" />
 </svg>
--- a/app/assets/icons/ic-unarchive.svg
+++ b/app/assets/icons/ic-unarchive.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12.3333 12.3333H15.4444V4.55556H4.55556V12.3333H7.66667C7.66667 12.9522 7.9125 13.5457 8.35008 13.9832C8.78767 14.4208 9.38116 14.6667 10 14.6667C10.6188 14.6667 11.2123 14.4208 11.6499 13.9832C12.0875 13.5457 12.3333 12.9522 12.3333 12.3333ZM4.55556 3H15.4444C15.857 3 16.2527 3.16389 16.5444 3.45561C16.8361 3.74733 17 4.143 17 4.55556V15.4444C17 15.857 16.8361 16.2527 16.5444 16.5444C16.2527 16.8361 15.857 17 15.4444 17H4.55556C4.143 17 3.74733 16.8361 3.45561 16.5444C3.16389 16.2527 3 15.857 3 15.4444V4.55556C3 3.7 3.69222 3 4.55556 3ZM8.44442 8.91667L6.88886 8.91667L9.99997 5.80555L13.1111 8.91667H11.5555V11.25H8.44442V8.91667Z" />
 </svg>
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/components/Icon.tsx
@@ -11,6 +11,8 @@ import RestoreIcon from '../../icons/ic-restore.svg';
 import CloseIcon from '../../icons/ic-close.svg';
 import PasswordIcon from '../../icons/ic-textbox-password.svg';
 import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
+import MoreIcon from '../../icons/ic-more.svg';
+import TuneIcon from '../../icons/ic-tune.svg';
 import { toDirective } from './utils';

 const ICONS = {
@@ -26,7 +28,9 @@ const ICONS = {
  'restore': RestoreIcon,
  'close': CloseIcon,
  'password': PasswordIcon,
-'trash-sweep': TrashSweepIcon,
+  'trash-sweep': TrashSweepIcon,
+  'more': MoreIcon,
+  'tune': TuneIcon,
 };

 type Props = {
@@ -36,7 +40,7 @@ type Props = {

 export const Icon: React.FC<Props> = ({ type, className }) => {
  const IconComponent = ICONS[type];
-  return <IconComponent className={className} />;
+  return <IconComponent className={`sn-icon ${className}`} />;
 };

 export const IconDirective = toDirective<Props>(
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/app/assets/javascripts/components/NoAccountWarning.tsx
@@ -1,5 +1,5 @@
 import { toDirective } from './utils';
-import Close from '../../icons/ic-close.svg';
+import { Icon } from './Icon';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';

@@ -34,7 +34,7 @@ const NoAccountWarning = observer(({ appState }: Props) => {
        style="height: 20px"
        className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
      >
-        <Close className="fill-current block" />
+        <Icon type="close" className="block" />
      </button>
    </div>
  );
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -46,7 +46,7 @@ export const NotesOptions = observer(

    const tagsButtonRef = useRef<HTMLButtonElement>();

-    const iconClass = 'fill-current color-neutral mr-2';
+    const iconClass = 'color-neutral mr-2';
    const buttonClass =
      'flex items-center border-0 focus:inner-ring-info ' +
      'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
@@ -141,7 +141,7 @@ export const NotesOptions = observer(
              </div>
              <Icon
                type="chevron-right"
-                className="fill-current color-neutral"
+                className="color-neutral"
              />
            </DisclosureButton>
            <DisclosurePanel
@@ -261,7 +261,7 @@ export const NotesOptions = observer(
                await appState.notes.deleteNotesPermanently();
              }}
            >
-              <Icon type="close" className="fill-current color-danger mr-2" />
+              <Icon type="close" className="color-danger mr-2" />
              <span className="color-danger">Delete permanently</span>
            </button>
            <button
@@ -274,7 +274,7 @@ export const NotesOptions = observer(
              <div className="flex items-start">
                <Icon
                  type="trash-sweep"
-                  className="fill-current color-danger mr-2"
+                  className="color-danger mr-2"
                />
                <div className="flex-row">
                  <div className="color-danger">Empty Trash</div>
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -1,4 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
+import { Icon } from './Icon';
 import VisuallyHidden from '@reach/visually-hidden';
 import { toDirective, useCloseOnBlur } from './utils';
 import {
@@ -7,7 +8,6 @@ import {
  DisclosurePanel,
 } from '@reach/disclosure';
 import { Portal } from '@reach/portal';
-import MoreIcon from '../../icons/ic-more.svg';
 import { useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
@@ -54,7 +54,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
        className="sn-icon-button"
      >
        <VisuallyHidden>Actions</VisuallyHidden>
-        <MoreIcon className="fill-current block" />
+        <Icon type="more" className="block" />
      </DisclosureButton>
      <Portal>
        <div className="sn-component">
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -1,4 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
+import { Icon } from './Icon';
 import { toDirective, useCloseOnBlur } from './utils';
 import { useRef, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
@@ -9,7 +10,6 @@ import {
  DisclosurePanel,
 } from '@reach/disclosure';
 import { Switch } from './Switch';
-import TuneIcon from '../../icons/ic-tune.svg';
 import { observer } from 'mobx-react-lite';

 type Props = {
@@ -56,7 +56,7 @@ const SearchOptions = observer(({ appState }: Props) => {
        className="border-0 p-0 bg-transparent cursor-pointer color-neutral hover:color-info"
      >
        <VisuallyHidden>Search options</VisuallyHidden>
-        <TuneIcon className="fill-current block" />
+        <Icon type="tune" className="block" />
      </DisclosureButton>
      <DisclosurePanel
        ref={panelRef}
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -111,22 +111,30 @@
  line-height: 2.25rem;
 }

-.w-32px {
-  width: 32px;
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-8 {
+  width: 2rem;
 }

 .max-w-60 {
  max-width: 15rem;
 }

-.h-32px {
-  height: 32px;
-}
-
 .h-1px {
  height: 1px;
 }

+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .h-10 {
  height: 2.5rem;
 }
@@ -148,8 +156,8 @@
 * is almost no style overlap.
 */
 .sn-icon-button {
-  @extend .w-32px;
-  @extend .h-32px;
+  @extend .w-8;
+  @extend .h-8;
  @extend .flex;
  @extend .justify-center;
  @extend .items-center;
@@ -171,6 +179,12 @@
  @extend .focus\:ring-info;
 }

+.sn-icon {
+  @extend .h-5;
+  @extend .w-5;
+  @extend .fill-current;
+}
+
 .sn-dropdown {
  @extend .absolute;
  @extend .bg-default;