standardnotes · amanharwara · Jun 28, 2022 · Jun 28, 2022
diff --git a/.yarn/cache/prettier-plugin-tailwindcss-npm-0.1.11-09d87a10a6-b06a81a222.zip b/.yarn/cache/prettier-plugin-tailwindcss-npm-0.1.11-09d87a10a6-b06a81a222.zip
diff --git a/packages/toast/src/Toast.tsx b/packages/toast/src/Toast.tsx
@@ -23,12 +23,12 @@ const colorForToastType = (type: ToastType) => {
 const iconForToastType = (type: ToastType) => {
   switch (type) {
     case ToastType.Success:
-      return <CheckCircleFilledIcon className={`w-5 h-5 ${colorForToastType(type)}`} />
+      return <CheckCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
     case ToastType.Error:
-      return <ClearCircleFilledIcon className={`w-5 h-5 ${colorForToastType(type)}`} />
+      return <ClearCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
     case ToastType.Progress:
     case ToastType.Loading:
-      return <div className="animate-spin border border-solid border-info border-r-transparent rounded-full w-4 h-4" />
+      return <div className="border-info h-4 w-4 animate-spin rounded-full border border-solid border-r-transparent" />
     default:
       return null
   }
@@ -77,7 +77,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
     <div
       data-index={index}
       role="status"
-      className={`flex flex-col bg-passive-5 rounded opacity-0 animation-fill-forwards select-none min-w-max relative mt-3 ${currentAnimation}`}
+      className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-max select-none flex-col rounded opacity-0 ${currentAnimation}`}
       style={{
         boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)',
         transition: shouldReduceMotion ? undefined : 'all 0.2s ease',
@@ -90,9 +90,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
       }}
       ref={ref}
     >
-      <div className={`flex items-center w-full ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
-        {icon ? <div className="flex flex-shrink-0 items-center justify-center sn-icon mr-2">{icon}</div> : null}
-        <div className="text-sm text-text">{toast.message}</div>
+      <div className={`flex w-full items-center ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
+        {icon ? <div className="sn-icon mr-2 flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
+        <div className="text-text text-sm">{toast.message}</div>
         {hasActions && (
           <div className="ml-4">
             {toast.actions?.map((action, index) => (
@@ -101,7 +101,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
                   paddingLeft: '0.45rem',
                   paddingRight: '0.45rem',
                 }}
-                className={`py-1 border-0 bg-transparent cursor-pointer font-semibold text-sm hover:bg-passive-3 rounded ${colorForToastType(
+                className={`hover:bg-passive-3 cursor-pointer rounded border-0 bg-transparent py-1 text-sm font-semibold ${colorForToastType(
                   toast.type,
                 )} ${index !== 0 ? 'ml-2' : ''}`}
                 onClick={() => {
@@ -116,9 +116,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
         )}
       </div>
       {hasProgress && (
-        <div className="rounded w-full bg-default overflow-hidden rounded-tl-none rounded-tr-none">
+        <div className="bg-default w-full overflow-hidden rounded rounded-tl-none rounded-tr-none">
           <div
-            className="rounded h-2 bg-info rounded-tl-none transition-[width] duration-100"
+            className="bg-info h-2 rounded rounded-tl-none transition-[width] duration-100"
             role="progressbar"
             style={{
               width: `${toast.progress}%`,

diff --git a/packages/toast/src/ToastContainer.tsx b/packages/toast/src/ToastContainer.tsx
@@ -11,7 +11,7 @@ export const ToastContainer: FunctionComponent = () => {
   }
 
   return (
-    <div className="flex flex-col items-end fixed z-toast bottom-6 right-6">
+    <div className="z-toast fixed bottom-6 right-6 flex flex-col items-end">
       {toasts.map((toast, index) => (
         <ToastTimer toast={toast} index={index} key={toast.id} />
       ))}

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -47,6 +47,7 @@
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.0",
     "prettier": "*",
+    "prettier-plugin-tailwindcss": "^0.1.11",
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
     "tailwindcss": "^3.1.4",

diff --git a/packages/web/prettier.config.js b/packages/web/prettier.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 120,
+  semi: false,
+  plugins: [require('prettier-plugin-tailwindcss')],
+}
diff --git a/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx b/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

diff --git a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/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"

diff --git a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/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

diff --git a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx b/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}

diff --git a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/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>
         </>

diff --git a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx b/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'}

diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/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()

diff --git a/...es/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/...es/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>
       )}

diff --git a/.../web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/.../web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -53,15 +53,15 @@ 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" />
       </MenuItem>
       {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

diff --git a/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx b/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
@@ -84,7 +84,7 @@ class ApplicationGroupView extends Component<Props, State> {
           <DialogContent
             aria-label="Switching workspace"
             className={
-              'challenge-modal flex flex-col items-center bg-default p-8 rounded relative shadow-overlay-light border border-solid border-border'
+              'challenge-modal shadow-overlay-light relative flex flex-col items-center rounded border border-solid border-border bg-default p-8'
             }
           >
             {message}

diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -270,14 +270,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
             }
           }}
           ref={buttonRef}
-          className={`flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer ${
+          className={`bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast ${
             attachedFilesCount > 0 ? 'py-1 px-3' : ''
           }`}
           onBlur={closeOnBlur}
         >
           <VisuallyHidden>Attached files</VisuallyHidden>
           <Icon type="attachment-file" className="block" />
-          {attachedFilesCount > 0 && <span className="text-sm ml-2">{attachedFilesCount}</span>}
+          {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
         </DisclosureButton>
         <DisclosurePanel
           onKeyDown={(event) => {
@@ -291,7 +291,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
             ...position,
             maxHeight,
           }}
-          className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
+          className="slide-down-animation max-h-120 fixed flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default shadow-main transition-transform duration-150"
           onBlur={closeOnBlur}
         >
           {open && (