chore: copy and style improvements

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

@@ -14,7 +14,7 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
     <div className="flex w-full flex-col">
       <div className="mb-3">
         <label className={labelClassName} htmlFor="change-email-email-input">
-          New Email:
+          New Email
         </label>
         <DecoratedInput
           type="email"
@@ -26,7 +26,7 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
       </div>
       <div className="mb-2">
         <label className={labelClassName} htmlFor="change-email-password-input">
-          Current Password:
+          Current Password
         </label>
         <DecoratedPasswordInput
           id="change-email-password-input"

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx

@@ -21,9 +21,6 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
   const activeSubscriptions = subscriptionInvitations?.filter((invitation) =>
     [InvitationStatus.Sent, InvitationStatus.Accepted].includes(invitation.status),
   )
-  const inActiveSubscriptions = subscriptionInvitations?.filter((invitation) =>
-    [InvitationStatus.Declined, InvitationStatus.Canceled].includes(invitation.status),
-  )
 
   const handleCancel = async (invitationUuid: string) => {
     if (lockContinue) {
@@ -51,7 +48,7 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
 
   return (
     <div>
-      <SubtitleLight className="mb-2 text-info">Active Invites:</SubtitleLight>
+      <SubtitleLight className="mb-2 text-info">Active Invites</SubtitleLight>
       {activeSubscriptions?.map((invitation) => (
         <div key={invitation.uuid} className="mt-1 mb-4">
           <Text>
@@ -62,20 +59,6 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
           )}
         </div>
       ))}
-      {!!inActiveSubscriptions?.length && (
-        <>
-          <SubtitleLight className="mb-2 text-info">Inactive Invites:</SubtitleLight>
-          <div>
-            {inActiveSubscriptions?.map((invitation) => (
-              <div key={invitation.uuid} className="mb-3 first:mt-2">
-                <Text className="mt-1">
-                  {invitation.inviteeIdentifier} <span className="text-info">({invitation.status})</span>
-                </Text>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
       {!subscriptionState.allInvitationsUsed && <HorizontalSeparator classes="my-4" />}
     </div>
   )

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/Invite.tsx

@@ -134,7 +134,7 @@ const Invite: FunctionComponent<Props> = ({ onCloseDialog, application, subscrip
   )
 
   return (
-    <Modal title="Share your Subscription" close={handleDialogClose} actions={modalActions}>
+    <Modal title="Share Your Subscription" close={handleDialogClose} actions={modalActions}>
       <div className="px-4.5 py-4">
         {currentStep === Steps.InitialStep && <InviteForm setInviteeEmail={setInviteeEmail} />}
         {currentStep === Steps.FinishStep && <InviteSuccess />}

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/InviteForm.tsx

@@ -10,16 +10,24 @@ const InviteForm: FunctionComponent<Props> = ({ setInviteeEmail }) => {
   return (
     <div className="flex w-full flex-col">
       <div className="mb-3">
-        <label className="mb-1 block" htmlFor="invite-email-input">
+        <label className="mb-1 block font-bold" htmlFor="invite-email-input">
-          Invitee Email:
+          Invitee Email
         </label>
+
         <DecoratedInput
           type="email"
+          className={{ container: 'mt-4' }}
           id="invite-email-input"
           onChange={(email) => {
             setInviteeEmail(email)
           }}
         />
+
+        <p className="mt-4">
+          <span className="font-bold">Note: </span>
+          The invitee must have an existing account with Standard Notes. If they do not have an account yet, instruct
+          them to make an account first.
+        </p>
       </div>
     </div>
   )

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/InviteSuccess.tsx

@@ -1,9 +1,13 @@
+import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { FunctionComponent } from 'react'
 
 const InviteSuccess: FunctionComponent = () => {
   return (
     <div>
-      <div className={'mb-2 font-bold text-info'}>Your invitation has been successfully sent.</div>
+      <Title className="mb-2">Invite processed successfully.</Title>
+      <div className={'mt-2'}>
+        If an account is found with that email, they will receive an email with your invitation.
+      </div>
     </div>
   )
 }

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

@@ -39,7 +39,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
       <PreferencesSegment>
         <div className="flex flex-row items-center">
           <div className="flex flex-grow flex-col">
-            <Title className="mb-2">Subscription Sharing</Title>
+            <Title className="mb-2">Subscription sharing</Title>
             {isSubscriptionSharingFeatureAvailable ? (
               <div>
                 <SharingStatusText subscriptionState={subscriptionState} />

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -71,7 +71,7 @@ const EditorDefaults = ({ application }: Props) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <Title>Editor Appearance</Title>
+        <Title>Editor appearance</Title>
         <div className="mt-2">
           <div className="flex items-center justify-between">
             <div className="flex flex-col">

packages/web/src/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx

@@ -175,7 +175,7 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Data Backups</Title>
+          <Title>Data backups</Title>
           <Subtitle>Download a backup of all your text-based data</Subtitle>
 
           {isEncryptionEnabled && (

packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx

@@ -110,7 +110,7 @@ const EmailBackups = ({ application }: Props) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <Title>Email Backups</Title>
+        <Title>Email backups</Title>
         {!isDesktopApplication() && (
           <Text className="mb-3">
             Receive daily encrypted email backups of all your notes directly in your email inbox.

packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsCrossPlatform.tsx

@@ -20,7 +20,7 @@ const FileBackupsCrossPlatform = ({ application }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Automatic File Backups</Title>
+          <Title>Automatic file backups</Title>
           <Subtitle>Automatically save encrypted backups of your files.</Subtitle>
           <Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
         </PreferencesSegment>

packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx

@@ -45,7 +45,7 @@ const FileBackupsDesktop = ({ backupsService }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Automatic File Backups</Title>
+          <Title>Automatic file backups</Title>
 
           <div className="flex items-center justify-between">
             <div className="mr-10 flex flex-col">

packages/web/src/javascripts/Components/Preferences/Panes/Backups/PlaintextBackups/PlaintextBackupsCrossPlatform.tsx

@@ -16,7 +16,7 @@ const PlaintextBackupsCrossPlatform = () => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Automatic Plaintext Backups</Title>
+          <Title>Automatic plaintext backups</Title>
           <Subtitle>Automatically save backups of all your notes into plaintext, non-encrypted folders.</Subtitle>
           <Text className="mt-3">To enable plaintext backups, use the Standard Notes desktop application.</Text>
         </PreferencesSegment>

packages/web/src/javascripts/Components/Preferences/Panes/Backups/PlaintextBackups/PlaintextBackupsDesktop.tsx

@@ -42,7 +42,7 @@ const PlaintextBackupsDesktop = ({ backupsService }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Automatic Plaintext Backups</Title>
+          <Title>Automatic plaintext backups</Title>
 
           <div className="flex items-center justify-between">
             <div className="mr-10 flex flex-col">

packages/web/src/javascripts/Components/Preferences/Panes/Backups/TextBackups/TextBackupsCrossPlatform.tsx

@@ -18,7 +18,7 @@ const TextBackupsCrossPlatform = ({ application }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Automatic Text Backups</Title>
+          <Title>Automatic text backups</Title>
           <Subtitle>Automatically save encrypted and decrypted backups of your note and tag data.</Subtitle>
           <Text className="mt-3">To enable text backups, use the Standard Notes desktop application.</Text>
         </PreferencesSegment>

packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx

@@ -19,7 +19,7 @@ const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <AccordionItem title={'Advanced Options'}>
+        <AccordionItem title={'Advanced options'}>
           <div className="flex flex-row items-center">
             <div className="flex max-w-full flex-grow flex-col">
               <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />

packages/web/src/javascripts/Components/Preferences/Panes/General/Moments.tsx

@@ -113,22 +113,16 @@ const Moments: FunctionComponent<Props> = ({ application }: Props) => {
           <div className="flex flex-col"></div>
           <PreferencesSegment>
             <Text>
-              Introducing Moments, a new feature in Standard Notes that lets you capture candid photos of yourself
+              Moments lets you capture photos of yourself throughout the day, creating a visual record of your life, one
-              throughout the day, right in the app. With Moments, you can create a visual record of your life, one photo
+              photo at a time.
-              at a time.
             </Text>
 
             <Text className="mt-3">
-              Moments uses your webcam or mobile selfie-cam to take a photo of you every half hour, ensuring that you
+              Using your webcam or mobile selfie-cam, Moments takes a photo of you every half hour, keeping a complete
-              have a complete record of your day. And because all photos are end-to-end encrypted and stored in your
+              record of your day. All photos are end-to-end encrypted and stored in your private account. Enable Moments
-              private account, you can trust that your memories are safe and secure.
+              on a per-device basis to get started.
             </Text>
 
-            <Text className="mt-3">
-              Whether you're working at your computer or capturing notes on the go from your mobile device, Moments is a
-              fun and easy way to document your life. Plus, with customizable photo intervals coming soon, you'll be
-              able to tailor Moments to your unique needs. Enable Moments on a per-device basis to get started.
-            </Text>
             <div className="mt-5 flex flex-row flex-wrap gap-3">
               <Button colorStyle="info" onClick={takePhoto}>
                 Capture Present Moment

packages/web/src/javascripts/Components/Preferences/Panes/Listed/Listed.tsx

@@ -62,7 +62,7 @@ const Listed = ({ application }: Props) => {
       {accounts.length > 0 && (
         <PreferencesGroup>
           <PreferencesSegment>
-            <Title>Your {accounts.length === 1 ? 'Blog' : 'Blogs'} on Listed</Title>
+            <Title>Your {accounts.length === 1 ? 'blog' : 'blogs'} on Listed</Title>
             <div className="h-2 w-full" />
             {accounts.map((item, index, array) => {
               return (

packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx

@@ -65,7 +65,7 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>
-          Error Decrypting Items <span className="ml-1 text-warning">⚠️</span>
+          Error decrypting items <span className="ml-1 text-warning">⚠️</span>
         </Title>
         <Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
         <div className="flex">

packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx

@@ -190,7 +190,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Passcode Lock</Title>
+          <Title>Passcode lock</Title>
 
           {!hasPasscode && canAddPasscode && (
             <>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx

@@ -12,7 +12,7 @@ const TwoFactorTitle: FunctionComponent<Props> = ({ auth }) => {
     return <Title>Two-factor authentication not available</Title>
   }
 
-  return <Title>Two-Factor Authentication</Title>
+  return <Title>Two-factor authentication</Title>
 }
 
 export default observer(TwoFactorTitle)

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FDescription.tsx

@@ -18,7 +18,7 @@ const U2FDescription: FunctionComponent<Props> = ({ userProvider }) => {
 
   return (
     <div>
-      <Text>Authenticate with a hardware security key such as Yubikey.</Text>
+      <Text>Authenticate with a hardware security key such as YubiKey.</Text>
       {!application.isFullU2FClient && (
         <Text className="italic">Please visit the web app in order to add a hardware security key.</Text>
       )}

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FTitle.tsx

@@ -13,7 +13,7 @@ const U2FTitle: FunctionComponent<Props> = ({ userProvider }) => {
     return <Title>Hardware security key authentication not available</Title>
   }
 
-  return <Title>Hardware Security Key Authentication</Title>
+  return <Title>Hardware security key authentication</Title>
 }
 
 export default observer(U2FTitle)

packages/web/src/javascripts/Event/ApplicationEventObserver.spec.ts

@@ -27,7 +27,7 @@ import { PurchaseFlowController } from '@/Controllers/PurchaseFlow/PurchaseFlowC
 import { SyncStatusController } from '@/Controllers/SyncStatusController'
 import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
 
-import { ApplicationEventObserver } from './ApplicationEventObserver'
+import { ApplicationEventObserver, JoinWorkspaceSuccessString } from './ApplicationEventObserver'
 import { WebApplication } from '@/Application/Application'
 
 describe('ApplicationEventObserver', () => {
@@ -169,10 +169,7 @@ describe('ApplicationEventObserver', () => {
       await createObserver().handle(ApplicationEvent.Launched)
 
       expect(subscriptionManager.acceptInvitation).toHaveBeenCalledWith('1-2-3')
-      expect(toastService.showToast).toHaveBeenCalledWith(
+      expect(toastService.showToast).toHaveBeenCalledWith(ToastType.Success, JoinWorkspaceSuccessString)
-        ToastType.Success,
-        'Successfully joined a shared subscription',
-      )
       expect(routeService.removeQueryParameterFromURL).toHaveBeenCalledWith(RootQueryParam.AcceptSubscriptionInvite)
     })
 
@@ -278,10 +275,7 @@ describe('ApplicationEventObserver', () => {
       await createObserver().handle(ApplicationEvent.SignedIn)
 
       expect(subscriptionManager.acceptInvitation).toHaveBeenCalledWith('1-2-3')
-      expect(toastService.showToast).toHaveBeenCalledWith(
+      expect(toastService.showToast).toHaveBeenCalledWith(ToastType.Success, JoinWorkspaceSuccessString)
-        ToastType.Success,
-        'Successfully joined a shared subscription',
-      )
       expect(routeService.removeQueryParameterFromURL).toHaveBeenCalledWith(RootQueryParam.AcceptSubscriptionInvite)
     })
 

packages/web/src/javascripts/Event/ApplicationEventObserver.ts

@@ -23,6 +23,9 @@ import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
 import { EventObserverInterface } from './EventObserverInterface'
 import { WebApplication } from '@/Application/Application'
 
+export const JoinWorkspaceSuccessString =
+  'Successfully joined a shared subscription. You may have to sign out and back in for changes to take effect.'
+
 export class ApplicationEventObserver implements EventObserverInterface {
   constructor(
     private application: WebApplication,
@@ -129,7 +132,7 @@ export class ApplicationEventObserver implements EventObserverInterface {
     this.toastService.hideToast(processingToastId)
 
     const toastType = acceptResult.success ? ToastType.Success : ToastType.Error
-    const toastMessage = acceptResult.success ? 'Successfully joined a shared subscription' : acceptResult.message
+    const toastMessage = acceptResult.success ? JoinWorkspaceSuccessString : acceptResult.message
 
     this.toastService.showToast(toastType, toastMessage)