refactor(css): add styles targeting SVG button/modal icons (#1464)

* refactor(css): add global classes for common icon types

* refactor(css): target child SVGs instead of creating new icon classes

* fix: fix ButtonWithDropdown style class spacing

src/components/Common/Button/index.tsx

@@ -81,16 +81,14 @@ function Button<P extends ElementTypes = 'button'>(
 
   switch (buttonSize) {
     case 'sm':
-      buttonStyle.push('px-2.5 py-1.5 text-xs');
-      break;
-    case 'md':
-      buttonStyle.push('px-4 py-2 text-sm');
+      buttonStyle.push('px-2.5 py-1.5 text-xs button-sm');
       break;
     case 'lg':
-      buttonStyle.push('px-6 py-3 text-base');
+      buttonStyle.push('px-6 py-3 text-base button-lg');
       break;
+    case 'md':
     default:
-      buttonStyle.push('px-4 py-2 text-sm');
+      buttonStyle.push('px-4 py-2 text-sm button-md');
   }
 
   buttonStyle.push(className ?? '');

src/components/Common/ButtonWithDropdown/index.tsx

@@ -19,16 +19,16 @@ const DropdownItem: React.FC<DropdownItemProps> = ({
   buttonType = 'primary',
   ...props
 }) => {
-  let styleClass = '';
+  let styleClass = 'button-md text-white';
 
   switch (buttonType) {
     case 'ghost':
-      styleClass =
-        'text-white bg-gray-700 hover:bg-gray-600 hover:text-white focus:border-gray-500 focus:text-white';
+      styleClass +=
+        ' bg-gray-700 hover:bg-gray-600 focus:border-gray-500 focus:text-white';
       break;
     default:
-      styleClass =
-        'text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:border-indigo-700 focus:text-white';
+      styleClass +=
+        ' bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:text-white';
   }
   return (
     <a
@@ -60,9 +60,9 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
   useClickOutside(buttonRef, () => setIsOpen(false));
 
   const styleClasses = {
-    mainButtonClasses: 'text-white border',
-    dropdownSideButtonClasses: 'border',
-    dropdownClasses: '',
+    mainButtonClasses: 'button-md text-white border',
+    dropdownSideButtonClasses: 'button-md border',
+    dropdownClasses: 'button-md',
   };
 
   switch (buttonType) {
@@ -70,14 +70,14 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
       styleClasses.mainButtonClasses +=
         ' bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
       styleClasses.dropdownSideButtonClasses = styleClasses.mainButtonClasses;
-      styleClasses.dropdownClasses = 'bg-gray-700';
+      styleClasses.dropdownClasses += ' bg-gray-700';
       break;
     default:
       styleClasses.mainButtonClasses +=
         ' bg-indigo-600 border-indigo-600 hover:bg-indigo-500 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
       styleClasses.dropdownSideButtonClasses +=
         ' bg-indigo-700 border-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:ring-blue';
-      styleClasses.dropdownClasses = 'bg-indigo-600';
+      styleClasses.dropdownClasses += ' bg-indigo-600';
   }
 
   return (
@@ -100,11 +100,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
-            {dropdownIcon ? (
-              dropdownIcon
-            ) : (
-              <ChevronDownIcon className="w-5 h-5" />
-            )}
+            {dropdownIcon ? dropdownIcon : <ChevronDownIcon />}
           </button>
           <Transition
             show={isOpen}

src/components/Common/Modal/index.tsx

@@ -108,11 +108,7 @@ const Modal: React.FC<ModalProps> = ({
           }}
         >
           <div className="sm:flex sm:items-center">
-            {iconSvg && (
-              <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-600 rounded-full sm:mx-0 sm:h-10 sm:w-10">
-                {iconSvg}
-              </div>
-            )}
+            {iconSvg && <div className="modal-icon">{iconSvg}</div>}
             <div
               className={`mt-3 text-center sm:mt-0 sm:text-left ${
                 iconSvg ? 'sm:ml-4' : 'sm:mb-4'

src/components/Common/PlayButton/index.tsx

@@ -22,7 +22,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
       text={
         <>
           {links[0].svg}
-          {links[0].text}
+          <span>{links[0].text}</span>
         </>
       }
       onClick={() => {
@@ -40,7 +40,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
               buttonType="ghost"
             >
               {link.svg}
-              {link.text}
+              <span>{link.text}</span>
             </ButtonWithDropdown.Item>
           );
         })}