chore: lint fixes

LexSwed · Mar 29, 2023 · 963f4c3 · 963f4c3
1 parent 32a4cf1
commit 963f4c3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/pages-helpers/PaletteRenderer.tsx b/src/pages-helpers/PaletteRenderer.tsx
@@ -24,7 +24,7 @@ export const ColorBox = ({ color, className }: ColorBoxProps) => {
       <Column className="h-full">
         <Text textStyle="label-sm">{color}</Text>
         <Text textStyle="mono-sm">{defaultTheme.colors[color]}</Text>
-        <div className="mt-auto self-end">
+        <div className="self-end mt-auto">
           <CopyButton label="Copy color token" text={color} />
         </div>
       </Column>

diff --git a/src/pages-helpers/Playground.tsx b/src/pages-helpers/Playground.tsx
@@ -26,7 +26,7 @@ export const Playground = ({ code, language }: Props) => {
       code={code}
       language={language as Language}
     >
-      <div className="shadow-popper mb-6 mt-4 rounded-md">
+      <div className="rounded-md shadow-popper mb-6 mt-4">
         <Root>
           <LivePreview
             // @ts-expect-error
@@ -46,7 +46,7 @@ export const Playground = ({ code, language }: Props) => {
 
 const Preview: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
-    <div className="bg-surface rounded-md">
+    <div className="rounded-md bg-surface">
       <Column>
         <div className="overflow-auto p-4">{children}</div>
         <Trigger asChild>
@@ -70,5 +70,5 @@ const CodeToggleButton = React.forwardRef<HTMLButtonElement, CollapsibleTriggerP
 
 const ErrorRenderer = withLive(({ live }: any) => {
   if (!live.error) return null;
-  return <div className="bg-error/10 text-error rounded-bl-md rounded-br-md p-4 text-sm">{live.error}</div>;
+  return <div className="rounded-bl-md rounded-br-md bg-error/10 p-4 text-sm text-error">{live.error}</div>;
 });
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,7 +7,7 @@ const App = () => {
   return (
     <>
       <NextSeo title="Fxtrot UI" description="A component library for React projects." />
-      <div className="mx-auto flex h-[100lvh] max-w-7xl flex-col px-4 pb-16 lg:px-16">
+      <div className="flex h-[100lvh] max-w-7xl flex-col pb-16 px-4 mx-auto lg:px-16">
         <div className="py-8">
           <Row as="header" main="space-between" cross="center">
             <Heading as="h1" level="2">
@@ -37,7 +37,7 @@ const App = () => {
               </Link>
             </Column>
             <Row gap="sm" wrap="wrap" as="ul">
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 SSR and Server Components compatible, works with{' '}
                 <TextLink href="https://remix.run/" external="icon">
                   Remix
@@ -47,10 +47,10 @@ const App = () => {
                   Next.js
                 </TextLink>
               </li>
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 Fully typed – autocomplete support for properties with TypeScript
               </li>
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 RTL support through extensive usage of{' '}
                 <TextLink
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties"
@@ -59,19 +59,19 @@ const App = () => {
                   CSS Logical Properties
                 </TextLink>
               </li>
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 Satisfying accessibility provided by{' '}
                 <TextLink href="https://www.radix-ui.com/" external="icon">
                   Radix
                 </TextLink>
               </li>
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 Customizable{' '}
                 <Link href="/theming" passHref legacyBehavior>
                   <TextLink inline={false}>theming with great Tailwind defaults</TextLink>
                 </Link>
               </li>
-              <li className="bg-primary/5 w-[16rem] rounded-md p-4">
+              <li className="w-[16rem] rounded-md bg-primary/5 p-4">
                 Overridable styles, with{' '}
                 <TextLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" external="icon">
                   CSS Cascade Layers