Lint files

src/components/Widgets/ConfiguringWidget.tsx

@@ -32,9 +32,9 @@ export const ConfiguringWidget = (): JSX.Element => {
   ]);
 
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       <p className="text-xl font-bold">Connecting to device</p>
-      <ol className="flex flex-col overflow-hidden gap-3">
+      <ol className="flex flex-col gap-3 overflow-hidden">
         <StatusIndicator
           title="Device Info"
           current={hardware.myNodeNum ? 1 : 0}
@@ -58,7 +58,7 @@ export const ConfiguringWidget = (): JSX.Element => {
         />
       </ol>
       <div
-        className="mt-2 rounded-md bg-[#dabb6b] p-1 ring-[#f9e3aa]  cursor-pointer text-center"
+        className="mt-2 cursor-pointer rounded-md bg-[#dabb6b] p-1  text-center ring-[#f9e3aa]"
         onClick={() => {
           void connection?.configure();
         }}
@@ -89,12 +89,12 @@ const StatusIndicator = ({
       />
       <div className="flex">
         <div
-          className={`flex relative z-10 h-5 w-5 rounded-full border-2  ${
+          className={`relative z-10 flex h-5 w-5 rounded-full border-2  ${
             current === 0
               ? "border-[#dabb6b] bg-[#f9e3aa]"
               : current >= total
-              ? "bg-green-500 border-green-500"
-              : "bg-[#f9e3aa] border-green-500"
+              ? "border-green-500 bg-green-500"
+              : "border-green-500 bg-[#f9e3aa]"
           }`}
         >
           <span
@@ -104,7 +104,7 @@ const StatusIndicator = ({
           />
         </div>
 
-        <span className="flex text-sm ml-4 gap-1">
+        <span className="ml-4 flex gap-1 text-sm">
           <span className="font-medium">{title}</span>
           <span className="font-mono text-slate-500">
             ({current}

src/components/Widgets/DeviceWidget.tsx

@@ -21,19 +21,19 @@ export const DeviceWidget = ({
   reconnect,
 }: DeviceWidgetProps): JSX.Element => {
   return (
-    <div className="relative rounded-xl bg-emerald-400 overflow-hidden">
-      <div className="absolute w-full h-full bottom-20">
+    <div className="relative overflow-hidden rounded-xl bg-emerald-400">
+      <div className="absolute bottom-20 h-full w-full">
         <Hashicon size={350} value={nodeNum} />
       </div>
-      <div className="flex backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30 p-3">
+      <div className="flex p-3 backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30">
         <div className="drop-shadow-md">
           <Hashicon size={96} value={nodeNum} />
         </div>
-        <div className="w-full flex flex-col">
-          <span className="font-bold text-slate-200 ml-auto text-xl whitespace-nowrap">
+        <div className="flex w-full flex-col">
+          <span className="ml-auto whitespace-nowrap text-xl font-bold text-slate-200">
             {name}
           </span>
-          <div className="ml-auto my-auto">
+          <div className="my-auto ml-auto">
             <Button
               onClick={disconnected ? reconnect : disconnect}
               variant={disconnected ? "secondary" : "primary"}

src/components/Widgets/NodeInfoWidget.tsx

@@ -4,7 +4,7 @@ export interface NodeInfoWidgetProps {}
 
 export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       node info
     </div>
   );

src/components/Widgets/PeersWidget.tsx

@@ -4,7 +4,7 @@ export interface PeersWidgetProps {}
 
 export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       Peers
     </div>
   );

src/components/Widgets/PositionWidget.tsx

@@ -4,7 +4,7 @@ export interface PositionWidgetProps {}
 
 export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       position
     </div>
   );