Lint & Prettier

src/components/Breakdown.jsx

@@ -80,10 +80,10 @@ const BreakdownSubtotalItem = ({ children, info, value, className, color = "blac
 
     return (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>
-            <td className="pt-1 pb-4 text-left">{children}</td>
-            <td className="whitespace-nowrap pt-1 pb-4 text-right">{info}</td>
+            <td className="pb-4 pt-1 text-left">{children}</td>
+            <td className="whitespace-nowrap pb-4 pt-1 text-right">{info}</td>
 
-            <td className="w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right">
+            <td className="w-[1%] whitespace-nowrap pb-4 pl-4 pt-1 text-right">
                 <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
                     {value}
                 </Currency>

src/components/Buttons/ButtonGroup.jsx

@@ -52,6 +52,7 @@ const Button = ({
     as: Tag = "button",
     isActive,
     shouldShowText = true,
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     isHidden = false,
     size = "medium",
     icon,

src/components/DatePicker/DatePicker.css

@@ -29,7 +29,7 @@
   * This does not include the today button
   */
 .DayPicker-Month {
-    @apply my-0 mx-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
+    @apply mx-0 my-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
     min-width: 400px; /* Odd width given from Figma */
     border-collapse: inherit;
     border-spacing: 0 8px; /* 8px between each week (row) */
@@ -52,7 +52,7 @@
 /* The "Today" button.
     A lot of specific vaules which I normally wouldn't use. But this is a third party lib where I cannot change the markup */
 .DayPicker-TodayButton {
-    @apply absolute top-0 right-24 h-10 px-3.5 py-2.5 leading-4;
+    @apply absolute right-24 top-0 h-10 px-3.5 py-2.5 leading-4;
     @apply rounded border border-solid border-gray bg-white text-base font-semibold tracking-tightest text-black hover:border-blue hover:bg-blue-lighter;
 }
 

src/components/DatePicker/DatePicker.jsx

@@ -207,7 +207,7 @@ export const DatePicker = ({
             {components.Footer ? <components.Footer /> : null}
 
             {useDateRangeStyle && shouldShowRelativeRanges && (
-                <div className="ml-auto w-6/12 pl-5 pr-10 pb-5">
+                <div className="ml-auto w-6/12 pb-5 pl-5 pr-10">
                     <RelativeDateRange
                         value={rangeName}
                         ranges={ranges}

src/components/DatePicker/NavbarElement.jsx

@@ -9,7 +9,7 @@ import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
  */
 export const NavbarElement = ({ onPreviousClick, onNextClick, className, showNextButton, showPreviousButton }) => {
     return (
-        <div className={clsx("absolute top-1.5 right-1 z-50", className)}>
+        <div className={clsx("absolute right-1 top-1.5 z-50", className)}>
             <ChevronButton isVisible={showPreviousButton} onClick={onPreviousClick}>
                 <ChevronLeftIcon />
             </ChevronButton>

src/components/Key.jsx

@@ -10,7 +10,7 @@ export const Key = ({ char, className, ...rest }) => {
         <div
             className={clsx(
                 "ui-key",
-                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
+                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter px-2 py-1 text-xs font-semibold text-gray",
                 key.length === 1 && "w-5",
                 className,
             )}

src/components/Modal.jsx

@@ -65,7 +65,7 @@ export const Modal = ({
                             {onClose ? (
                                 <button
                                     type="button"
-                                    className="absolute top-0 right-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
+                                    className="absolute right-0 top-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
                                     onClick={onClose}
                                 >
                                     <CloseIcon />

src/components/Screens/Login.jsx

@@ -59,7 +59,7 @@ export const Login = ({
             {...rest}
         >
             <div className="md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8">
-                <div className="w-82 rounded-lg py-0 px-9 md:bg-white md:py-10">
+                <div className="w-82 rounded-lg px-9 py-0 md:bg-white md:py-10">
                     <div className="mb-12 space-y-4 md:mb-20">
                         <XolaLogoSimple className="mx-auto h-10 w-auto md:h-12" />
                         {label && <div className="flex items-center justify-center">{label}</div>}
@@ -127,7 +127,7 @@ export const Login = ({
             </div>
 
             <footer>
-                <div className="flex w-full flex-col items-center justify-center overflow-hidden py-1 px-4 sm:px-6 lg:px-8">
+                <div className="flex w-full flex-col items-center justify-center overflow-hidden px-4 py-1 sm:px-6 lg:px-8">
                     <div className="m-5 w-82 rounded-lg px-4 text-center text-xs opacity-80 md:text-sm">
                         <a
                             href="https://www.xola.com/team"

src/components/Sidebar/Sidebar.Account.jsx

@@ -20,7 +20,7 @@ export const SidebarAccount = ({
             type="button"
             className={clsx(
                 "ui-sidebar-account",
-                "flex w-full cursor-pointer items-center justify-center rounded py-3 px-4 hover:bg-gray-darker xl:justify-start",
+                "flex w-full cursor-pointer items-center justify-center rounded px-4 py-3 hover:bg-gray-darker xl:justify-start",
                 className,
             )}
             {...rest}

src/components/Sidebar/Sidebar.Button.jsx

@@ -5,7 +5,7 @@ export const SidebarButton = ({ icon: Icon, label, ...rest }) => {
     return (
         <button
             type="button"
-            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker"
+            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded px-4 py-2 hover:bg-gray-darker"
             {...rest}
         >
             <div className="p-1.5">

src/components/Sidebar/Sidebar.jsx

@@ -69,7 +69,7 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
             className={clsx(
                 "ui-sidebar",
                 isFixed ? "fixed" : "relative",
-                "z-20 flex h-full w-16 flex-col overflow-y-auto bg-black py-2 px-1 text-white md:w-24 xl:w-50",
+                "z-20 flex h-full w-16 flex-col overflow-y-auto bg-black px-1 py-2 text-white md:w-24 xl:w-50",
                 className,
             )}
         >
@@ -117,7 +117,7 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
                 />
             )}
 
-            <div className="mt-4 mb-10 text-center">
+            <div className="mb-10 mt-4 text-center">
                 {logo ?? (
                     <XolaLogoSimple
                         className={clsx(

src/components/Tabs/Tabs.Tab.jsx

@@ -33,7 +33,7 @@ export const Tab = ({
             className={clsx(
                 "ui-tabs-tab",
                 className,
-                "cursor-pointer whitespace-nowrap py-4 px-8 text-center font-semibold focus-visible:ring",
+                "cursor-pointer whitespace-nowrap px-8 py-4 text-center font-semibold focus-visible:ring",
                 variants[variant](isActive),
             )}
             {...rest}

src/stories/Forms/SubmitButton.stories.js

@@ -94,7 +94,6 @@ export const Default = ({ isLoading, ...rest }) => {
                     color="danger"
                     isLoading={showLoading}
                     onClick={handleClick}
-
                 >
                     Button with really long text
                 </SubmitButton>

src/stories/Navigation/Sidebar.stories.js

@@ -29,7 +29,7 @@ const SidebarFooter = () => {
                         </div>
 
                         <div className="space-y-2">
-                            <Sidebar.Separator className="my-0 mx-0 mt-4" />
+                            <Sidebar.Separator className="mx-0 my-0 mt-4" />
                             <Sidebar.Button icon={PolicyIcon} label="Privacy Policy" />
 
                             <Sidebar.Button icon={HelpCenterIcon} label="Help Center" />