chore(prettier): full repo linting and code reformatting once and for all (#3627)

platform/ui/src/components/Snackbar/Snackbar.css

@@ -44,9 +44,11 @@
 
 .sb-item {
   animation: fadein 1s;
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+  box-shadow:
+    0 6px 10px 0 rgba(0, 0, 0, 0.2),
+    0 1px 18px 0 rgba(0, 0, 0, 0.12),
     0 3px 5px -1px rgba(0, 0, 0, 0.14);
-  @apply relative p-3 text-white overflow-hidden rounded-md transition-height ease-in-out duration-300;
+  @apply transition-height relative overflow-hidden rounded-md p-3 text-white duration-300 ease-in-out;
 }
 
 @keyframes fadein {
@@ -55,7 +57,7 @@
     @apply opacity-0;
   }
   to {
-    @apply opacity-100 top-0;
+    @apply top-0 opacity-100;
   }
 }
 

platform/ui/src/components/Snackbar/SnackbarContainer.tsx

@@ -8,7 +8,11 @@ const SnackbarContainer = () => {
   const { snackbarItems, hide } = useSnackbar();
 
   const renderItem = item => (
-    <SnackbarItem key={item.itemId} options={item} onClose={hide} />
+    <SnackbarItem
+      key={item.itemId}
+      options={item}
+      onClose={hide}
+    />
   );
 
   const renderItems = () => {
@@ -33,7 +37,7 @@ const SnackbarContainer = () => {
             return (
               <div
                 key={pos}
-                className={`fixed z-50 p-6 box-border h-auto sb-${pos}`}
+                className={`fixed z-50 box-border h-auto p-6 sb-${pos}`}
               >
                 {items[pos].map((item, index) => (
                   <div key={item.id + index}>{renderItem(item)}</div>

platform/ui/src/components/Snackbar/SnackbarItem.tsx

@@ -27,36 +27,34 @@ const SnackbarItem = ({ options, onClose }) => {
     [SnackbarTypes.ERROR]: 'bg-[#dabdbe]',
   };
 
-  const hidden =
-    'duration-300 transition-all ease-in-out h-0 opacity-0 pt-0 mb-0 pb-0';
+  const hidden = 'duration-300 transition-all ease-in-out h-0 opacity-0 pt-0 mb-0 pb-0';
 
   return (
     <div
-      className={classNames(
-        `${options.visible ? '' : hidden} sb-item`,
-        typeClasses[options.type]
-      )}
+      className={classNames(`${options.visible ? '' : hidden} sb-item`, typeClasses[options.type])}
     >
       <div className="flex">
-        <Icon name={iconClasses[options.type]} className="w-5 h-5 mt-[1px]" />
-        <div className="flex-col mx-2">
+        <Icon
+          name={iconClasses[options.type]}
+          className="mt-[1px] h-5 w-5"
+        />
+        <div className="mx-2 flex-col">
           {/* </span> */}
           {options.title && (
-            <div className="break-normal text-lg font-bold text-black">
-              {options.title}
-            </div>
+            <div className="break-normal text-lg font-bold text-black">{options.title}</div>
           )}
           {options.message && (
-            <div className="break-normal text-base text-black">
-              {options.message}
-            </div>
+            <div className="break-normal text-base text-black">{options.message}</div>
           )}
         </div>
         <div
           onClick={handleClose}
-          className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
+          className="relative left-[3px] top-[-3px] ml-auto flex h-5 w-5 items-center justify-center self-start rounded-full text-[#0944b3]"
         >
-          <Icon name="close" className="text-black" />
+          <Icon
+            name="close"
+            className="text-black"
+          />
         </div>
       </div>
     </div>