feat: upgrade tailwindcss to 2.0.1

src/components/Common/Badge/index.tsx

@@ -14,7 +14,7 @@ const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
       badgeStyle.push('bg-red-600 text-red-100');
       break;
     case 'warning':
-      badgeStyle.push('bg-orange-500 text-orange-100');
+      badgeStyle.push('bg-yellow-500 text-yellow-100');
       break;
     case 'success':
       badgeStyle.push('bg-green-400 text-green-100');

src/components/Common/Button/index.tsx

@@ -26,32 +26,32 @@ const Button: React.FC<ButtonProps> = ({
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 disabled:opacity-50'
+        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 disabled:opacity-50'
       );
       break;
     case 'danger':
       buttonStyle.push(
-        'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:shadow-outline-red active:bg-red-700 disabled:opacity-50'
+        'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:ring-red active:bg-red-700 disabled:opacity-50'
       );
       break;
     case 'warning':
       buttonStyle.push(
-        'text-white bg-orange-500 hover:bg-orange-400 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 disabled:opacity-50'
+        'text-white bg-yellow-500 hover:bg-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-yellow-700 disabled:opacity-50'
       );
       break;
     case 'success':
       buttonStyle.push(
-        'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:shadow-outline-green active:bg-green-700 disabled:opacity-50'
+        'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:ring-green active:bg-green-700 disabled:opacity-50'
       );
       break;
     case 'ghost':
       buttonStyle.push(
-        'text-white bg-transaprent border border-cool-gray-600 hover:border-cool-gray-200 focus:border-cool-gray-100 active:border-cool-gray-100 disabled:opacity-50'
+        'text-white bg-transaprent border border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100 disabled:opacity-50'
       );
       break;
     default:
       buttonStyle.push(
-        'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400 disabled:opacity-50'
+        'leading-5 font-medium rounded-md text-gray-200 bg-gray-500 hover:bg-gray-400 hover:text-white focus:border-blue-300 focus:ring-blue active:text-gray-200 active:bg-gray-400 disabled:opacity-50'
       );
   }
 

src/components/Common/ButtonWithDropdown/index.tsx

@@ -41,7 +41,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
     <span className="relative z-0 inline-flex shadow-sm rounded-md">
       <button
         type="button"
-        className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:shadow-outline-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:shadow-outline-blue transition ease-in-out duration-150 ${
+        className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:ring-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:ring-blue transition ease-in-out duration-150 ${
           children ? 'rounded-l-md' : 'rounded-md'
         }`}
         ref={buttonRef}
@@ -53,7 +53,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
         {children && (
           <button
             type="button"
-            className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:shadow-outline-blue transition ease-in-out duration-150"
+            className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:ring-blue transition ease-in-out duration-150"
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
@@ -85,7 +85,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
           leaveTo="transform opacity-0 scale-95"
         >
           <div className="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg">
-            <div className="rounded-md bg-indigo-600 shadow-xs">
+            <div className="rounded-md bg-indigo-600 ring-1 ring-black ring-opacity-5">
               <div className="py-1">{children}</div>
             </div>
           </div>

src/components/Common/Header/index.tsx

@@ -13,12 +13,12 @@ const Header: React.FC<HeaderProps> = ({
   return (
     <div className="md:flex md:items-center md:justify-between mt-8 mb-8">
       <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
-        <h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
+        <h2 className="text-2xl font-bold leading-7 text-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
           <span className="bg-clip-text text-transparent bg-gradient-to-br from-indigo-400 to-purple-400">
             {children}
           </span>
         </h2>
-        {subtext && <div className="text-cool-gray-400 mt-2">{subtext}</div>}
+        {subtext && <div className="text-gray-400 mt-2">{subtext}</div>}
       </div>
     </div>
   );

src/components/Common/ListView/index.tsx

@@ -27,7 +27,7 @@ const ListView: React.FC<ListViewProps> = ({
   return (
     <>
       {isEmpty && (
-        <div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
+        <div className="w-full mt-64 text-2xl text-center text-gray-400">
           No Results
         </div>
       )}

src/components/Common/LoadingSpinner/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const LoadingSpinner: React.FC = () => {
   return (
-    <div className="h-64 inset-0 flex justify-center items-center text-cool-gray-200">
+    <div className="h-64 inset-0 flex justify-center items-center text-gray-200">
       <svg
         className="w-16 h-16"
         viewBox="0 0 38 38"

src/components/Common/Modal/index.tsx

@@ -77,7 +77,7 @@ const Modal: React.FC<ModalProps> = ({
     <>
       {ReactDOM.createPortal(
         <animated.div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
           style={props.style}
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
@@ -103,7 +103,7 @@ const Modal: React.FC<ModalProps> = ({
               item && (
                 <animated.div
                   style={props}
-                  className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
+                  className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline"
@@ -112,7 +112,7 @@ const Modal: React.FC<ModalProps> = ({
                 >
                   <div className="sm:flex sm:items-center">
                     {iconSvg && (
-                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
+                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
                         {iconSvg}
                       </div>
                     )}
@@ -132,7 +132,7 @@ const Modal: React.FC<ModalProps> = ({
                     </div>
                   </div>
                   {children && (
-                    <div className="mt-4 text-sm leading-5 text-cool-gray-300">
+                    <div className="mt-4 text-sm leading-5 text-gray-300">
                       {children}
                     </div>
                   )}

src/components/Common/SlideOver/index.tsx

@@ -46,7 +46,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
       leaveTo="opacity-0"
     >
       <div
-        className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-cool-gray-800`}
+        className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-gray-800`}
       >
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex">
@@ -61,7 +61,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
               leaveTo="translate-x-full"
             >
               <div className="w-screen max-w-md" ref={slideoverRef}>
-                <div className="h-full flex flex-col bg-cool-gray-700 shadow-xl overflow-y-scroll">
+                <div className="h-full flex flex-col bg-gray-700 shadow-xl overflow-y-scroll">
                   <header className="space-y-1 py-6 px-4 bg-indigo-600 sm:px-6">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-lg leading-7 font-medium text-white">