style(dx): fix prettier-plugin-tailwindcss config

.prettierrc

@@ -13,5 +13,19 @@
   "arrowParens": "avoid",
   "endOfLine": "crlf",
   "htmlWhitespaceSensitivity": "strict",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "./apps/deploy-web/**",
+      "options": {
+        "tailwindConfig": "./apps/deploy-web/tailwind.config.ts"
+      }
+    },
+    {
+      "files": "./apps/stats-web/**",
+      "options": {
+        "tailwindConfig": "./apps/stats-web/tailwind.config.ts"
+      }
+    }
+  ]
 }

apps/deploy-web/src/components/authorizations/AllowanceModal.tsx

@@ -117,7 +117,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
     >
       <form onSubmit={handleSubmit(onSubmit)} ref={formRef}>
         <Alert className="mb-4">
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             <LinkTo onClick={ev => handleDocClick(ev, "https://docs.cosmos.network/v0.46/modules/feegrant/")}>Authorized Fee Spend</LinkTo> allows users to
             authorize spend of a set number of tokens on fees from a source wallet to a destination, funded wallet.
           </p>
@@ -206,7 +206,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
 
         {!!amount && granteeAddress && (
           <Alert>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               This address will be able to spend up to {amount} AKT on <b>transaction fees</b> on your behalf ending on{" "}
               <FormattedDate value={expiration} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />.
             </p>

apps/deploy-web/src/components/authorizations/Authorizations.tsx

@@ -135,7 +135,7 @@ export const Authorizations: React.FunctionComponent = () => {
           </div>
         }
       >
-        <h3 className="text-muted-foreground mb-4">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on deployments or deployment deposits using your funds. You can revoke these
           authorizations at any time.
         </h3>
@@ -164,7 +164,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No authorizations given.</p>
+                <p className="text-sm text-muted-foreground">No authorizations given.</p>
               )}
             </>
           )}
@@ -194,7 +194,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No authorizations received.</p>
+                <p className="text-sm text-muted-foreground">No authorizations received.</p>
               )}
             </>
           )}
@@ -208,7 +208,7 @@ export const Authorizations: React.FunctionComponent = () => {
           </Button>
         </div>
 
-        <h3 className="text-muted-foreground mb-4">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on transaction fees using your funds. You can revoke these authorizations at any
           time.
         </h3>
@@ -244,7 +244,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No allowances issued.</p>
+                <p className="text-sm text-muted-foreground">No allowances issued.</p>
               )}
             </>
           )}
@@ -275,7 +275,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No allowances received.</p>
+                <p className="text-sm text-muted-foreground">No allowances received.</p>
               )}
             </>
           )}

apps/deploy-web/src/components/authorizations/GrantModal.tsx

@@ -124,7 +124,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
           className="mb-4"
           // severity="info"
         >
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             <LinkTo onClick={ev => handleDocClick(ev, "https://akash.network/docs/network-features/authorized-spend/")}>Authorized Spend</LinkTo> allows users
             to authorize spend of a set number of tokens from a source wallet to a destination, funded wallet. The authorized spend is restricted to Akash
             deployment activities and the recipient of the tokens would not have access to those tokens for other operations.
@@ -235,7 +235,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
           <Alert
           // severity="info"
           >
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               This address will be able to spend up to {amount} {selectedToken?.label} on your behalf ending on{" "}
               <FormattedDate value={expiration} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />.
             </p>

apps/deploy-web/src/components/deployments/DeploymentListRow.tsx

@@ -167,7 +167,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
 
   return (
     <>
-      <TableRow className="hover:bg-muted-foreground/10 cursor-pointer [&>td]:p-2" onClick={() => viewDeployment()}>
+      <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" onClick={() => viewDeployment()}>
         <TableCell>
           <div className="flex items-center justify-center">
             <SpecDetailList
@@ -196,7 +196,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                     </>
                   }
                 >
-                  <WarningTriangle className="text-warning text-xs" />
+                  <WarningTriangle className="text-xs text-warning" />
                 </CustomTooltip>
               )}
             </div>
@@ -225,18 +225,18 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                       </strong>
                     </div>
                     <br />
-                    <p className="text-muted-foreground text-xs">
+                    <p className="text-xs text-muted-foreground">
                       The escrow account balance will be fully returned to your wallet balance when the deployment is closed.
                     </p>
                   </div>
                 }
               >
-                <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                <InfoCircle className="ml-2 text-xs text-muted-foreground" />
               </CustomTooltip>
 
               {escrowBalance <= 0 && (
                 <CustomTooltip title="Your deployment is out of funds and can be closed by your provider at any time now. You can add funds to keep active.">
-                  <WarningCircle className="text-destructive-foreground ml-2" />
+                  <WarningCircle className="ml-2 text-destructive-foreground" />
                 </CustomTooltip>
               )}
             </div>
@@ -255,7 +255,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                     </span>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
             </div>

apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx

@@ -52,12 +52,12 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                   </>
                 }
               >
-                <InfoCircle className="text-muted-foreground text-xs" />
+                <InfoCircle className="text-xs text-muted-foreground" />
               </CustomTooltip>
 
               {isActive && hasActiveLeases && !!realTimeLeft && realTimeLeft.escrow <= 0 && (
                 <CustomTooltip title="Your deployment is out of funds and can be closed by your provider at any time now. You can add funds to keep active.">
-                  <WarningCircle className="text-destructive text-xs" />
+                  <WarningCircle className="text-xs text-destructive" />
                 </CustomTooltip>
               )}
             </div>
@@ -78,7 +78,7 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                     </span>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground text-xs" />
+                  <InfoCircle className="text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
             )
@@ -102,7 +102,7 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                   </span>
                 }
               >
-                <InfoCircle className="text-muted-foreground text-xs" />
+                <InfoCircle className="text-xs text-muted-foreground" />
               </CustomTooltip>
             </div>
           }

apps/deploy-web/src/components/deployments/LeaseChip.tsx

@@ -34,7 +34,7 @@ export const LeaseChip: React.FunctionComponent<Props> = ({ lease, providers })
         event.stopPropagation();
       }}
     >
-      <Badge variant="outline" className="hover:bg-primary/20 whitespace-nowrap text-xs">
+      <Badge variant="outline" className="whitespace-nowrap text-xs hover:bg-primary/20">
         <span>
           {providerName?.length > 20 ? (
             <CustomTooltip title={providerName}>

apps/deploy-web/src/components/deployments/LeaseRow.tsx

@@ -151,11 +151,11 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
     <Card className="mb-4">
       <CardHeader className="bg-secondary py-2">
         <div className="flex items-center">
-          <div className="text-muted-foreground inline-flex items-center text-xs">
+          <div className="inline-flex items-center text-xs text-muted-foreground">
             <span>{lease.state}</span>
             <StatusPill state={lease.state} size="small" />
 
-            <span className="text-muted-foreground ml-4">GSEQ:</span>
+            <span className="ml-4 text-muted-foreground">GSEQ:</span>
             <span className="ml-1">{lease.gseq}</span>
 
             <span className="ml-4">OSEQ:</span>
@@ -274,7 +274,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                           </>
                         }
                       >
-                        <InfoCircle className="text-muted-foreground ml-2 text-xs" fontSize="small" />
+                        <InfoCircle className="ml-2 text-xs text-muted-foreground" fontSize="small" />
                       </CustomTooltip>
                     </div>
                   )}
@@ -292,19 +292,19 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                   })}
                 >
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Available:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Available:&nbsp;</span>
                     <Badge variant={service.available > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.available}</small>
                     </Badge>
                   </div>
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Ready Replicas:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Ready Replicas:&nbsp;</span>
                     <Badge variant={service.ready_replicas > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.ready_replicas}</small>
                     </Badge>
                   </div>
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Total:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Total:&nbsp;</span>
                     <Badge variant={service.total > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.total}</small>
                     </Badge>
@@ -321,7 +321,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                             <div key={"port_" + p.externalPort}>
                               {p.host ? (
                                 <Link
-                                  className={cn({ ["text-muted-foreground cursor-none"]: p.available < 1 }, "inline-flex items-center space-x-2 text-sm")}
+                                  className={cn({ ["cursor-none text-muted-foreground"]: p.available < 1 }, "inline-flex items-center space-x-2 text-sm")}
                                   href={`http://${p.host}:${p.externalPort}`}
                                   target="_blank"
                                 >
@@ -405,7 +405,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                         </>
                       }
                     >
-                      <InfoCircle className="text-muted-foreground text-xs" />
+                      <InfoCircle className="text-xs text-muted-foreground" />
                     </CustomTooltip>
                     <Button
                       size="icon"

apps/deploy-web/src/components/deployments/ManifestUpdate.tsx

@@ -205,7 +205,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                     </div>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground text-xs" />
+                  <InfoCircle className="text-xs text-muted-foreground" />
                 </CustomTooltip>
 
                 {!!deploymentVersion && deploymentVersion !== deployment.version && (
@@ -216,7 +216,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                       </Alert>
                     }
                   >
-                    <WarningCircle className="text-warning text-xs" />
+                    <WarningCircle className="text-xs text-warning" />
                   </CustomTooltip>
                 )}
               </div>

apps/deploy-web/src/components/deployments/ServiceSelect.tsx

@@ -31,7 +31,7 @@ export const ServiceSelect = ({ defaultValue, services, onSelectedChange }) => {
       >
         {services.map(service => (
           <MenuItem key={service} value={service} dense>
-            <span className="text-muted-foreground text-sm">{service}</span>
+            <span className="text-sm text-muted-foreground">{service}</span>
           </MenuItem>
         ))}
       </Select>

apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx

@@ -64,7 +64,7 @@ export const ShellDownloadModal = ({ selectedLease, onCloseClick, selectedServic
       onClose={onCloseClick}
       maxWidth="xs"
     >
-      <p className="text-muted-foreground text-xs">Enter the path of a file on the server to be downloaded to your computer. Example: /app/logs.txt</p>
+      <p className="text-xs text-muted-foreground">Enter the path of a file on the server to be downloaded to your computer. Example: /app/logs.txt</p>
       <Alert variant="warning" className="my-2 py-2">
         <p className="text-xs">This is an experimental feature and may not work reliably.</p>
       </Alert>

apps/deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -153,7 +153,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
           Docker container
         </StepLabel>
         <StepContent>
-          <p className="text-muted-foreground mb-2">
+          <p className="mb-2 text-muted-foreground">
             To deploy on Akash, you need a docker container image as everything runs within Kubernetes. You can make your own or browse through pre-made
             solutions in the marketplace.
           </p>

apps/deploy-web/src/components/graph/Graph.tsx

@@ -81,7 +81,7 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ rangedData, snapshotMetad
         pointBorderWidth={graphMetadata.border}
         isInteractive={true}
         tooltip={props => (
-          <div className="bg-primary text-primary-foreground rounded-sm px-3 py-2 leading-4">
+          <div className="rounded-sm bg-primary px-3 py-2 leading-4 text-primary-foreground">
             <div className="mb-1 text-xs">
               <FormattedDate value={new Date(props.point.data.x)} day="numeric" month="long" timeZone="UTC" year="2-digit" />
             </div>

apps/deploy-web/src/components/home/WelcomePanel.tsx

@@ -38,7 +38,7 @@ export const WelcomePanel: React.FC = () => {
 
                 <div className="flex flex-col">
                   <Link href={UrlService.getStarted()}>Getting started with Akash Console</Link>
-                  <span className="text-muted-foreground text-sm">Learn how to deploy your first docker container on Akash in a few click using Console.</span>
+                  <span className="text-sm text-muted-foreground">Learn how to deploy your first docker container on Akash in a few click using Console.</span>
                 </div>
               </li>
 
@@ -51,7 +51,7 @@ export const WelcomePanel: React.FC = () => {
 
                 <div className="ml-4 flex flex-col">
                   <Link href={UrlService.templates()}>Explore the marketplace</Link>
-                  <span className="text-muted-foreground text-sm">
+                  <span className="text-sm text-muted-foreground">
                     Browse through the marketplace of pre-made solutions with categories like blogs, blockchain nodes and more!
                   </span>
                 </div>
@@ -68,7 +68,7 @@ export const WelcomePanel: React.FC = () => {
                   <Link href="https://akash.network/docs/" target="_blank">
                     Learn more about Akash
                   </Link>
-                  <span className="text-muted-foreground text-sm">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
+                  <span className="text-sm text-muted-foreground">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
                 </div>
               </li>
             </ul>