feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx

@@ -36,10 +36,10 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
           <Text className="text-center mb-3">
             Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
           </Text>
-          <Button variant="primary" label="Create free account" onClick={clickRegister} className="mb-3" />
-          <div className="text-input">
+          <Button primary label="Create free account" onClick={clickRegister} className="mb-3" />
+          <div className="text-sm">
             Already have an account?{' '}
-            <button className="border-0 p-0 bg-default color-info underline cursor-pointer" onClick={clickSignIn}>
+            <button className="border-0 p-0 bg-default text-info underline cursor-pointer" onClick={clickSignIn}>
               Sign in
             </button>
           </div>

packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx

@@ -142,14 +142,14 @@ const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) =
     <div>
       <ModalDialog>
         <ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel>
-        <ModalDialogDescription className="px-4.5">
+        <ModalDialogDescription className="px-4.5 flex flex-row items-center">
           {currentStep === Steps.InitialStep && (
             <ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} />
           )}
           {currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
         </ModalDialogDescription>
         <ModalDialogButtons className="px-4.5">
-          <Button className="min-w-20" variant="primary" label={submitButtonTitle} onClick={handleSubmit} />
+          <Button className="min-w-20" primary label={submitButtonTitle} onClick={handleSubmit} />
         </ModalDialogButtons>
       </ModalDialog>
     </div>

packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx

@@ -1,3 +1,5 @@
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import { Dispatch, SetStateAction, FunctionComponent } from 'react'
 
 type Props = {
@@ -7,8 +9,6 @@ type Props = {
 
 const labelClassName = 'block mb-1'
 
-const inputClassName = 'sk-input contrast'
-
 const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="w-full flex flex-col">
@@ -16,12 +16,11 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
         <label className={labelClassName} htmlFor="change-email-email-input">
           New Email:
         </label>
-        <input
-          id="change-email-email-input"
-          className={inputClassName}
+        <DecoratedInput
           type="email"
-          onChange={({ target }) => {
-            setNewEmail((target as HTMLInputElement).value)
+          id="change-email-email-input"
+          onChange={(newEmail) => {
+            setNewEmail(newEmail)
           }}
         />
       </div>
@@ -29,12 +28,11 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
         <label className={labelClassName} htmlFor="change-email-password-input">
           Current Password:
         </label>
-        <input
+        <DecoratedPasswordInput
           id="change-email-password-input"
-          className={inputClassName}
           type="password"
-          onChange={({ target }) => {
-            setCurrentPassword((target as HTMLInputElement).value)
+          onChange={(currentPassword) => {
+            setCurrentPassword(currentPassword)
           }}
         />
       </div>

packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx

@@ -3,8 +3,8 @@ import { FunctionComponent } from 'react'
 const ChangeEmailSuccess: FunctionComponent = () => {
   return (
     <div>
-      <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
-      <p className={'sk-p'}>
+      <div className={'font-bold text-info mb-2'}>Your email has been successfully changed.</div>
+      <p>
         Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
         compatibility.
       </p>

packages/web/src/javascripts/Components/Preferences/Panes/Account/ClearSessionDataView.tsx

@@ -13,10 +13,9 @@ const ClearSessionDataView: FunctionComponent<{
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Clear workspace</Title>
-        <Text>Remove all data related to the current workspace from the application.</Text>
-        <div className="min-h-3" />
+        <Text className="mb-3">Remove all data related to the current workspace from the application.</Text>
         <Button
-          dangerStyle={true}
+          colorStyle="danger"
           label="Clear workspace"
           onClick={() => {
             viewControllerManager.accountMenuController.setSigningOut(true)

packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -44,7 +44,6 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
           </Text>
           <Button
             className="min-w-20 mt-3"
-            variant="normal"
             label="Change email"
             onClick={() => {
               setIsChangeEmailDialogOpen(true)
@@ -55,7 +54,7 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
           <Text>
             Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
           </Text>
-          <Button className="min-w-20 mt-3" variant="normal" label="Change password" onClick={presentPasswordWizard} />
+          <Button className="min-w-20 mt-3" label="Change password" onClick={presentPasswordWizard} />
           {isChangeEmailDialogOpen && (
             <ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
           )}

packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -1,4 +1,5 @@
 import { WebApplication } from '@/Application/Application'
+import Spinner from '@/Components/Spinner/Spinner'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
 import { FunctionComponent, useEffect, useState } from 'react'
@@ -44,7 +45,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
         <Subtitle>Storage Quota</Subtitle>
         {isLoading ? (
           <div className="mt-2">
-            <div className="sk-spinner spinner-info w-3 h-3"></div>
+            <Spinner className="w-3 h-3" />
           </div>
         ) : (
           <>

packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx

@@ -101,7 +101,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
             )}
             {hasUserPreviouslyStoredCode && (
               <Button
-                dangerStyle={true}
+                colorStyle="danger"
                 label="Remove offline key"
                 onClick={() => {
                   handleRemoveClick().catch(console.error)
@@ -111,7 +111,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
             {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
               <Button
                 label={'Submit'}
-                variant="primary"
+                primary
                 disabled={activationCode === ''}
                 onClick={(event) => handleSubscriptionCodeSubmit(event)}
               />
@@ -119,7 +119,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
           </form>
         </div>
       </div>
-      <HorizontalSeparator classes="mt-8 mb-5" />
+      <HorizontalSeparator classes="mt-5 mb-3" />
     </>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx

@@ -23,30 +23,24 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, viewContr
           <Title>Sign out</Title>
           <Subtitle>Other devices</Subtitle>
           <Text>Want to sign out on all devices except this one?</Text>
-          <div className="min-h-3" />
-          <div className="flex flex-row">
+          <div className="flex flex-row mt-3">
             <Button
               className="mr-3"
-              variant="normal"
               label="Sign out other sessions"
               onClick={() => {
                 viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)
               }}
             />
-            <Button
-              variant="normal"
-              label="Manage sessions"
-              onClick={() => viewControllerManager.openSessionsModal()}
-            />
+            <Button label="Manage sessions" onClick={() => viewControllerManager.openSessionsModal()} />
           </div>
         </PreferencesSegment>
         <HorizontalSeparator classes="my-4" />
         <PreferencesSegment>
           <Subtitle>This workspace</Subtitle>
           <Text>Remove all data related to the current workspace from the application.</Text>
-          <div className="min-h-3" />
           <Button
-            dangerStyle={true}
+            className="mt-3"
+            colorStyle="danger"
             label="Sign out workspace"
             onClick={() => {
               viewControllerManager.accountMenuController.setSigningOut(true)

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -30,11 +30,11 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
     <>
       <Text>You don't have a Standard Notes subscription yet.</Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
-      {purchaseFlowError && <Text className="color-danger">{purchaseFlowError}</Text>}
+      {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
       <div className="flex">
         <LinkButton className="min-w-20 mt-3 mr-3" label="Learn More" link={window.plansUrl as string} />
         {application.hasAccount() && (
-          <Button className="min-w-20 mt-3" variant="primary" label="Subscribe" onClick={onPurchaseClick} />
+          <Button className="min-w-20 mt-3" primary label="Subscribe" onClick={onPurchaseClick} />
         )}
       </div>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -18,12 +18,7 @@ const SubscriptionInformation = ({ subscriptionState, application }: Props) => {
   return (
     <>
       <StatusText subscriptionState={subscriptionState} />
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        variant="normal"
-        label="Manage subscription"
-        onClick={manageSubscription}
-      />
+      <Button className="min-w-20 mt-3 mr-3" label="Manage subscription" onClick={manageSubscription} />
     </>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Account/Sync.tsx

@@ -43,7 +43,6 @@ const Sync: FunctionComponent<Props> = ({ application }: Props) => {
             </Text>
             <Button
               className="min-w-20 mt-3"
-              variant="normal"
               label="Sync now"
               disabled={isSyncingInProgress}
               onClick={doSynchronization}