style: tailwind classname sorting (#1169)

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

@@ -58,9 +58,9 @@ const AccountMenu: FunctionComponent<Props> = ({
   return (
     <div ref={ref} id="account-menu" className="sn-component">
       <div
-        className={`z-footer-bar-item-panel bottom-full left-0 cursor-auto bg-default rounded shadow-main ${
-          shouldAnimateCloseMenu ? 'slide-up-animation' : 'transition-transform duration-150 slide-down-animation'
-        } min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
+        className={`max-h-120 absolute bottom-full left-0 z-footer-bar-item-panel flex min-w-80 max-w-xs cursor-auto flex-col overflow-y-auto rounded bg-default py-2 shadow-main ${
+          shouldAnimateCloseMenu ? 'slide-up-animation' : 'slide-down-animation transition-transform duration-150'
+        }`}
         onKeyDown={handleKeyDown}
       >
         <MenuPaneSelector

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -98,19 +98,19 @@ const AdvancedOptions: FunctionComponent<Props> = ({
   return (
     <>
       <button
-        className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full text-sm focus:bg-info-backdrop focus:shadow-none font-bold"
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm font-bold text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
         onClick={toggleShowAdvanced}
       >
         <div className="flex items-center">
           Advanced options
-          <Icon type="chevron-down" className="text-passive-1 ml-1" />
+          <Icon type="chevron-down" className="ml-1 text-passive-1" />
         </div>
       </button>
       {showAdvanced ? (
-        <div className="px-3 my-2">
+        <div className="my-2 px-3">
           {children}
 
-          <div className="flex justify-between items-center mb-1">
+          <div className="mb-1 flex items-center justify-between">
             <Checkbox
               name="private-workspace"
               label="Private workspace"
@@ -147,7 +147,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
           )}
 
           {onStrictSignInChange && (
-            <div className="flex justify-between items-center mb-1">
+            <div className="mb-1 flex items-center justify-between">
               <Checkbox
                 name="use-strict-signin"
                 label="Use strict sign-in"

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -101,23 +101,23 @@ const ConfirmPassword: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="flex items-center px-3 mt-1 mb-3">
+      <div className="mt-1 mb-3 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 text-neutral p-0"
+          className="mr-2 flex p-0 text-neutral"
           onClick={handleGoBack}
           focusable={true}
           disabled={isRegistering}
         />
-        <div className="font-bold text-base">Confirm password</div>
+        <div className="text-base font-bold">Confirm password</div>
       </div>
-      <div className="px-3 mb-3 text-sm">
+      <div className="mb-3 px-3 text-sm">
         Because your notes are encrypted using your password,{' '}
         <span className="text-danger">Standard Notes does not have a password reset option</span>. If you forget your
         password, you will permanently lose access to your data.
       </div>
-      <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
+      <form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
         <DecoratedPasswordInput
           className="mb-2"
           disabled={isRegistering}
@@ -128,7 +128,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
           ref={passwordInputRef}
           value={confirmPassword}
         />
-        {error ? <div className="text-danger my-2">{error}</div> : null}
+        {error ? <div className="my-2 text-danger">{error}</div> : null}
         <Button
           primary
           fullWidth

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -102,17 +102,17 @@ const CreateAccount: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="flex items-center px-3 mt-1 mb-3">
+      <div className="mt-1 mb-3 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 text-neutral p-0"
+          className="mr-2 flex p-0 text-neutral"
           onClick={handleClose}
           focusable={true}
         />
-        <div className="font-bold text-base">Create account</div>
+        <div className="text-base font-bold">Create account</div>
       </div>
-      <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
+      <form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
         <DecoratedInput
           className="mb-2"
           disabled={isPrivateWorkspace}

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -89,31 +89,31 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="flex items-center justify-between px-3 mt-1 mb-1">
-        <div className="font-bold text-base">Account</div>
+      <div className="mt-1 mb-1 flex items-center justify-between px-3">
+        <div className="text-base font-bold">Account</div>
         <div className="flex cursor-pointer" onClick={closeMenu}>
           <Icon type="close" className="text-neutral" />
         </div>
       </div>
       {user ? (
         <>
-          <div className="px-3 mb-3 text-foreground text-sm">
+          <div className="mb-3 px-3 text-sm text-foreground">
             <div>You're signed in as:</div>
-            <div className="my-0.5 font-bold wrap">{user.email}</div>
+            <div className="wrap my-0.5 font-bold">{user.email}</div>
             <span className="text-neutral">{application.getHost()}</span>
           </div>
-          <div className="flex items-start justify-between px-3 mb-2">
+          <div className="mb-2 flex items-start justify-between px-3">
             {isSyncingInProgress ? (
-              <div className="flex items-center text-info text-sm font-semibold">
-                <Spinner className="w-5 h-5 mr-2" />
+              <div className="flex items-center text-sm font-semibold text-info">
+                <Spinner className="mr-2 h-5 w-5" />
                 Syncing...
               </div>
             ) : (
               <div className="flex items-start">
                 <Icon type="check-circle" className="mr-2 text-success" />
                 <div>
-                  <div className="font-semibold text-success text-sm">Last synced:</div>
-                  <div className="text-text text-sm">{lastSyncDate}</div>
+                  <div className="text-sm font-semibold text-success">Last synced:</div>
+                  <div className="text-sm text-text">{lastSyncDate}</div>
                 </div>
               </div>
             )}
@@ -124,14 +124,14 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
         </>
       ) : (
         <>
-          <div className="px-3 mb-1">
-            <div className="mb-3 text-foreground text-sm">
+          <div className="mb-1 px-3">
+            <div className="mb-3 text-sm text-foreground">
               You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
               encryption.
             </div>
             <div className="flex items-center text-passive-1">
               <Icon type="cloud-off" className="mr-2" />
-              <span className="font-semibold text-sm">Offline</span>
+              <span className="text-sm font-semibold">Offline</span>
             </div>
           </div>
         </>

packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx

@@ -140,18 +140,18 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
 
   return (
     <>
-      <div className="flex items-center px-3 mt-1 mb-3">
+      <div className="mt-1 mb-3 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 text-neutral p-0"
+          className="mr-2 flex p-0 text-neutral"
           onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
           focusable={true}
           disabled={isSigningIn}
         />
-        <div className="font-bold text-base">Sign in</div>
+        <div className="text-base font-bold">Sign in</div>
       </div>
-      <div className="px-3 mb-1">
+      <div className="mb-1 px-3">
         <DecoratedInput
           className={`mb-2 ${error ? 'border-danger' : null}`}
           left={[<Icon type="email" className="text-neutral" />]}
@@ -175,7 +175,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
           ref={passwordInputRef}
           value={password}
         />
-        {error ? <div className="text-danger my-2">{error}</div> : null}
+        {error ? <div className="my-2 text-danger">{error}</div> : null}
         <Button
           className="mt-1 mb-3"
           label={isSigningIn ? 'Signing in...' : 'Sign in'}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -58,11 +58,11 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
   return (
     <MenuItem
       type={MenuItemType.RadioButton}
-      className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
+      className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
       onClick={onClick}
       checked={descriptor.primary}
     >
-      <div className="flex items-center justify-between w-full ml-2">
+      <div className="ml-2 flex w-full items-center justify-between">
         {isRenaming ? (
           <input
             ref={inputRef}
@@ -79,7 +79,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
           <div className="flex items-center">
             <a
               role="button"
-              className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
+              className="mr-3 h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
               onClick={(e) => {
                 e.stopPropagation()
                 setIsRenaming((isRenaming) => !isRenaming)
@@ -89,7 +89,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
             </a>
             <a
               role="button"
-              className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer"
+              className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
               onClick={(e) => {
                 e.stopPropagation()
                 onDelete()

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -78,13 +78,13 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
           void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
         }}
       >
-        <Icon type="user-add" className="text-neutral mr-2" />
+        <Icon type="user-add" className="mr-2 text-neutral" />
         Add another workspace
       </MenuItem>
 
       {!hideWorkspaceOptions && (
         <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
-          <Icon type="signOut" className="text-neutral mr-2" />
+          <Icon type="signOut" className="mr-2 text-neutral" />
           Sign out all workspaces
         </MenuItem>
       )}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -53,7 +53,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
         className="justify-between"
       >
         <div className="flex items-center">
-          <Icon type="user-switch" className="text-neutral mr-2" />
+          <Icon type="user-switch" className="mr-2 text-neutral" />
           Switch workspace
         </div>
         <Icon type="chevron-right" className="text-neutral" />
@@ -61,7 +61,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
       {isOpen && (
         <div
           ref={menuRef}
-          className="bg-default rounded 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 bg-default py-2 shadow-main"
           style={menuStyle}
         >
           <WorkspaceSwitcherMenu