style: tailwind classname sorting (#1169)

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -184,7 +184,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
     >
       <DialogContent
         aria-label="Challenge modal"
-        className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
+        className={`challenge-modal relative flex flex-col items-center rounded bg-default p-8 ${
           challenge.reason !== ChallengeReason.ApplicationUnlock
             ? 'shadow-overlay-light border border-solid border-border'
             : 'focus:shadow-none'
@@ -194,20 +194,20 @@ const ChallengeModal: FunctionComponent<Props> = ({
           <button
             onClick={cancelChallenge}
             aria-label="Close modal"
-            className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4"
+            className="absolute top-4 right-4 flex cursor-pointer border-0 bg-transparent p-1"
           >
             <Icon type="close" className="text-neutral" />
           </button>
         )}
-        <ProtectedIllustration className="w-30 h-30 mb-4" />
-        <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
+        <ProtectedIllustration className="mb-4 h-30 w-30" />
+        <div className="mb-3 max-w-76 text-center text-lg font-bold">{challenge.heading}</div>
 
         {challenge.subheading && (
-          <div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div>
+          <div className="break-word mb-4 max-w-76 text-center text-sm">{challenge.subheading}</div>
         )}
 
         <form
-          className="flex flex-col items-center min-w-76"
+          className="flex min-w-76 flex-col items-center"
           onSubmit={(e) => {
             e.preventDefault()
             submit()
@@ -224,12 +224,12 @@ const ChallengeModal: FunctionComponent<Props> = ({
             />
           ))}
         </form>
-        <Button primary disabled={isProcessing} className="min-w-76 mt-1 mb-3.5" onClick={submit}>
+        <Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
           {isProcessing ? 'Generating Keys...' : 'Submit'}
         </Button>
         {shouldShowForgotPasscode && (
           <Button
-            className="flex items-center justify-center min-w-76"
+            className="flex min-w-76 items-center justify-center"
             onClick={() => {
               setBypassModalFocusLock(true)
               application.alertService

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -28,24 +28,24 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
   }, [isInvalid])
 
   return (
-    <div key={prompt.id} className="w-full mb-3">
+    <div key={prompt.id} className="mb-3 w-full">
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
         <div className="min-w-76">
-          <div className="text-sm font-medium mb-2">Allow protected access for</div>
-          <div className="flex items-center justify-between bg-passive-4 rounded p-1">
+          <div className="mb-2 text-sm font-medium">Allow protected access for</div>
+          <div className="flex items-center justify-between rounded bg-passive-4 p-1">
             {ProtectionSessionDurations.map((option) => {
               const selected = option.valueInSeconds === values[prompt.id].value
               return (
                 <label
                   key={option.label}
-                  className={`cursor-pointer px-2 py-1.5 rounded focus-within:ring-2 focus-within:ring-info ${
-                    selected ? 'bg-default text-foreground font-semibold' : 'text-passive-0 hover:bg-passive-3'
+                  className={`cursor-pointer rounded px-2 py-1.5 focus-within:ring-2 focus-within:ring-info ${
+                    selected ? 'bg-default font-semibold text-foreground' : 'text-passive-0 hover:bg-passive-3'
                   }`}
                 >
                   <input
                     type="radio"
                     name={`session-duration-${prompt.id}`}
-                    className={'appearance-none m-0 focus:shadow-none focus:outline-none'}
+                    className={'m-0 appearance-none focus:shadow-none focus:outline-none'}
                     style={{
                       marginRight: 0,
                     }}
@@ -76,7 +76,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
           onChange={(value) => onValueChange(value, prompt)}
         />
       )}
-      {isInvalid && <div className="text-sm text-danger mt-2">Invalid authentication, please try again.</div>}
+      {isInvalid && <div className="mt-2 text-sm text-danger">Invalid authentication, please try again.</div>}
     </div>
   )
 }

packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

@@ -47,14 +47,14 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
 
   return (
     <div ref={containerRef}>
-      <Button ref={buttonRef} onClick={toggleMenu} className="flex items-center justify-center min-w-76 mt-2">
-        <Icon type="user-switch" className="text-neutral mr-2" />
+      <Button ref={buttonRef} onClick={toggleMenu} className="mt-2 flex min-w-76 items-center justify-center">
+        <Icon type="user-switch" className="mr-2 text-neutral" />
         Switch workspace
       </Button>
       {isOpen && (
         <div
           ref={menuRef}
-          className="bg-default rounded-md shadow-main max-h-120 min-w-68 py-2 fixed overflow-y-auto"
+          className="max-h-120 fixed min-w-68 overflow-y-auto rounded-md bg-default py-2 shadow-main"
           style={menuStyle}
         >
           <WorkspaceSwitcherMenu