Merge branch 'release/3.6.3' into main

2021-03-25 11:04:59 +01:00
parent 6c1622f3d3 07504290af
commit 15efaec8a8
32 changed files with 851 additions and 916 deletions
--- a/app/assets/javascripts/app.ts
+++ b/app/assets/javascripts/app.ts
@@ -43,7 +43,6 @@ import {
  MenuRow,
  PanelResizer,
  PasswordWizard,
-  PermissionsModal,
  RevisionPreviewModal,
  HistoryMenu,
  SyncResolutionMenu,
@@ -57,7 +56,7 @@ import { StartApplication } from './startApplication';
 import { Bridge } from './services/bridge';
 import { SessionsModalDirective } from './components/SessionsModal';
 import { NoAccountWarningDirective } from './components/NoAccountWarning';
-
+import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning';

 function reloadHiddenFirefoxTab(): boolean {
  /**
@@ -67,14 +66,15 @@ function reloadHiddenFirefoxTab(): boolean {
   */
  if (
    document.hidden &&
-    navigator.userAgent.toLowerCase().includes('firefox') &&
-    !localStorage.getItem('reloading')
+    navigator.userAgent.toLowerCase().includes('firefox')
  ) {
-    localStorage.setItem('reloading', 'true');
-    location.reload();
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden) {
+        location.reload();
+      }
+    });
    return true;
  } else {
-    localStorage.removeItem('reloading');
    return false;
  }
 }
@@ -138,12 +138,12 @@ const startApplication: StartApplication = async function startApplication(
    .directive('menuRow', () => new MenuRow())
    .directive('panelResizer', () => new PanelResizer())
    .directive('passwordWizard', () => new PasswordWizard())
-    .directive('permissionsModal', () => new PermissionsModal())
    .directive('revisionPreviewModal', () => new RevisionPreviewModal())
    .directive('historyMenu', () => new HistoryMenu())
    .directive('syncResolutionMenu', () => new SyncResolutionMenu())
    .directive('sessionsModal', SessionsModalDirective)
-    .directive('noAccountWarning', NoAccountWarningDirective);
+    .directive('noAccountWarning', NoAccountWarningDirective)
+    .directive('protectedNotePanel', NoProtectionsdNoteWarningDirective);

  // Filters
  angular.module('app').filter('trusted', ['$sce', trusted]);
@@ -170,7 +170,10 @@ const startApplication: StartApplication = async function startApplication(
 };

 if (__WEB__) {
-  startApplication((window as any)._default_sync_server, new BrowserBridge(__VERSION__));
+  startApplication(
+    (window as any)._default_sync_server,
+    new BrowserBridge(__VERSION__)
+  );
 } else {
  (window as any).startApplication = startApplication;
 }
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/app/assets/javascripts/components/NoAccountWarning.tsx
@@ -2,7 +2,9 @@ import { toDirective, useAutorunValue } from './utils';
 import Close from '../../icons/ic_close.svg';
 import { AppState } from '@/ui_models/app_state';

-function NoAccountWarning({ appState }: { appState: AppState }) {
+type Props = { appState: AppState };
+
+function NoAccountWarning({ appState }: Props) {
  const canShow = useAutorunValue(() => appState.noAccountWarning.show);
  if (!canShow) {
    return null;
@@ -14,7 +16,7 @@ function NoAccountWarning({ appState }: { appState: AppState }) {
        Sign in or register to back up your notes.
      </p>
      <button
-        className="sn-btn mt-3 col-start-1 col-end-3 justify-self-start"
+        className="sn-button info mt-3 col-start-1 col-end-3 justify-self-start"
        onClick={(event) => {
          event.stopPropagation();
          appState.accountMenu.setShow(true);
@@ -28,12 +30,13 @@ function NoAccountWarning({ appState }: { appState: AppState }) {
        }}
        title="Ignore"
        label="Ignore"
+        style="height: 20px"
        className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
      >
-        <Close className="fill-current" />
+        <Close className="fill-current block" />
      </button>
    </div>
  );
 }

-export const NoAccountWarningDirective = toDirective(NoAccountWarning);
+export const NoAccountWarningDirective = toDirective<Props>(NoAccountWarning);
--- a/app/assets/javascripts/components/NoProtectionsNoteWarning.tsx
+++ b/app/assets/javascripts/components/NoProtectionsNoteWarning.tsx
@@ -0,0 +1,36 @@
+import { AppState } from '@/ui_models/app_state';
+import { toDirective } from './utils';
+
+type Props = { appState: AppState; onViewNote: () => void };
+
+function NoProtectionsNoteWarning({ appState, onViewNote }: Props) {
+  return (
+    <div className="flex flex-col items-center justify-center text-center max-w-md">
+      <h1 className="text-2xl m-0 w-full">This note is protected</h1>
+      <p className="text-lg mt-2 w-full">
+        Add a passcode or create an account to require authentication to view
+        this note.
+      </p>
+      <div className="mt-4 flex gap-3">
+        <button
+          className="sn-button info"
+          onClick={() => {
+            appState.accountMenu.setShow(true);
+          }}
+        >
+          Open account menu
+        </button>
+        <button className="sn-button outlined" onClick={onViewNote}>
+          View note
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const NoProtectionsdNoteWarningDirective = toDirective<Props>(
+  NoProtectionsNoteWarning,
+  {
+    onViewNote: '&',
+  }
+);
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/app/assets/javascripts/components/SessionsModal.tsx
@@ -171,7 +171,7 @@ const SessionsModal: FunctionComponent<{
                                  {formatter.format(session.updated_at)}
                                </p>
                                <button
-                                  className="sk-button danger sk-label"
+                                  className="sn-button danger sk-label"
                                  disabled={session.revoking}
                                  onClick={() =>
                                    setRevokingSessionUuid(session.uuid)
@@ -210,17 +210,16 @@ const SessionsModal: FunctionComponent<{
                    <AlertDialogDescription className="sk-panel-row">
                      <p>{SessionStrings.RevokeText}</p>
                    </AlertDialogDescription>
-                    <div className="sk-panel-row">
-                      <div className="sk-button-group">
+                    <div className="flex my-1 gap-2">
                        <button
-                          className="sk-button neutral sk-label"
+                          className="sn-button neutral sk-label"
                          ref={cancelRevokeRef}
                          onClick={closeRevokeSessionAlert}
                        >
                          <span>{SessionStrings.RevokeCancelButton}</span>
                        </button>
                        <button
-                          className="sk-button danger sk-label"
+                          className="sn-button danger sk-label"
                          onClick={() => {
                            closeRevokeSessionAlert();
                            revokeSession(confirmRevokingSessionUuid);
@@ -228,7 +227,6 @@ const SessionsModal: FunctionComponent<{
                        >
                          <span>{SessionStrings.RevokeConfirmButton}</span>
                        </button>
-                      </div>
                    </div>
                  </div>
                </div>
--- a/app/assets/javascripts/components/utils.ts
+++ b/app/assets/javascripts/components/utils.ts
@@ -20,11 +20,9 @@ export function useAutorun(
  useEffect(() => autorun(view, opts), [view, opts]);
 }

-export function toDirective(
-  component: FunctionComponent<{
-    application: WebApplication;
-    appState: AppState;
-  }>
+export function toDirective<Props>(
+  component: FunctionComponent<Props>,
+  scope: Record<string, '=' | '&'> = {}
 ) {
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  return function () {
@@ -37,10 +35,7 @@ export function toDirective(
          return {
            $onChanges() {
              render(
-                h(component, {
-                  application: $scope.application,
-                  appState: $scope.appState,
-                }),
+                h(component, $scope),
                $element[0]
              );
            },
@@ -50,6 +45,7 @@ export function toDirective(
      scope: {
        application: '=',
        appState: '=',
+        ...scope,
      },
    };
  };
--- a/app/assets/javascripts/directives/views/accountMenu.ts
+++ b/app/assets/javascripts/directives/views/accountMenu.ts
@@ -533,7 +533,7 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
        if (this.application!.hasPasscode()) {
          await this.application!.changePasscode(passcode);
        } else {
-          await this.application!.setPasscode(passcode);
+          await this.application!.addPasscode(passcode);
        }
      }
    );
--- a/app/assets/javascripts/directives/views/index.ts
+++ b/app/assets/javascripts/directives/views/index.ts
@@ -7,7 +7,6 @@ export { InputModal } from './inputModal';
 export { MenuRow } from './menuRow';
 export { PanelResizer } from './panelResizer';
 export { PasswordWizard } from './passwordWizard';
-export { PermissionsModal } from './permissionsModal';
 export { RevisionPreviewModal } from './revisionPreviewModal';
 export { HistoryMenu } from './historyMenu';
 export { SyncResolutionMenu } from './syncResolutionMenu';
--- a/app/assets/javascripts/directives/views/permissionsModal.ts
+++ b/app/assets/javascripts/directives/views/permissionsModal.ts
@@ -1,47 +0,0 @@
-import { WebDirective } from './../../types';
-import template from '%/directives/permissions-modal.pug';
-
-class PermissionsModalCtrl {
-
-  $element: JQLite
-  callback!: (success: boolean) => void
-
-  /* @ngInject */
-  constructor($element: JQLite) {
-    this.$element = $element;
-  }
-
-  dismiss() {
-    const elem = this.$element;
-    const scope = elem.scope();
-    scope.$destroy();
-    elem.remove();
-  }
-
-  accept() {
-    this.callback(true);
-    this.dismiss();
-  }
-
-  deny() {
-    this.callback(false);
-    this.dismiss();
-  }
-}
-
-export class PermissionsModal extends WebDirective {
-  constructor() {
-    super();
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = PermissionsModalCtrl;
-    this.controllerAs = 'ctrl';
-    this.bindToController = true;
-    this.scope = {
-      show: '=',
-      component: '=',
-      permissionsString: '=',
-      callback: '='
-    };
-  }
-}
--- a/app/assets/javascripts/index.ts
+++ b/app/assets/javascripts/index.ts
@@ -4,7 +4,6 @@
 import '@reach/dialog/styles.css';
 import 'sn-stylekit/dist/stylekit.css';
 import '../stylesheets/index.css.scss';
-// import '../stylesheets/_reach-sub.scss';

 // Vendor
 import 'angular';
--- a/app/assets/javascripts/services/bridge.ts
+++ b/app/assets/javascripts/services/bridge.ts
@@ -17,6 +17,7 @@ export interface Bridge {
  syncComponents(payloads: unknown[]): void;
  onMajorDataChange(): void;
  onInitialDataLoad(): void;
+  onSignOut(): void;
  onSearch(text?: string): void;
  downloadBackup(): void | Promise<void>;
 }
--- a/app/assets/javascripts/services/browserBridge.ts
+++ b/app/assets/javascripts/services/browserBridge.ts
@@ -30,4 +30,5 @@ export class BrowserBridge implements Bridge {
  onInitialDataLoad(): void {}
  onSearch(): void {}
  downloadBackup(): void {}
+  onSignOut(): void {}
 }
--- a/app/assets/javascripts/services/desktopManager.ts
+++ b/app/assets/javascripts/services/desktopManager.ts
@@ -7,6 +7,7 @@ import {
  ApplicationService,
  ApplicationEvent,
  removeFromArray,
+  BackupFile,
 } from '@standardnotes/snjs';
 /* eslint-disable camelcase */
 import { WebApplication } from '@/ui_models/application';
@@ -14,33 +15,32 @@ import { WebApplication } from '@/ui_models/application';
 import { isDesktopApplication } from '@/utils';
 import { Bridge } from './bridge';

-type UpdateObserverCallback = (component: SNComponent) => void
-type ComponentActivationCallback = (payload: PurePayload) => void
+type UpdateObserverCallback = (component: SNComponent) => void;
+type ComponentActivationCallback = (payload: PurePayload) => void;
 type ComponentActivationObserver = {
  id: string;
  callback: ComponentActivationCallback;
-}
+};

 export class DesktopManager extends ApplicationService {
-
-  $rootScope: ng.IRootScopeService
-  $timeout: ng.ITimeoutService
-  componentActivationObservers: ComponentActivationObserver[] = []
+  $rootScope: ng.IRootScopeService;
+  $timeout: ng.ITimeoutService;
+  componentActivationObservers: ComponentActivationObserver[] = [];
  updateObservers: {
    callback: UpdateObserverCallback;
  }[] = [];

  isDesktop = isDesktopApplication();

-  dataLoaded = false
-  lastSearchedText?: string
+  dataLoaded = false;
+  lastSearchedText?: string;
  private removeComponentObserver?: () => void;

  constructor(
    $rootScope: ng.IRootScopeService,
    $timeout: ng.ITimeoutService,
    application: WebApplication,
-    private bridge: Bridge,
+    private bridge: Bridge
  ) {
    super(application);
    this.$rootScope = $rootScope;
@@ -74,10 +74,7 @@ export class DesktopManager extends ApplicationService {
  }

  getExtServerHost() {
-    console.assert(
-      !!this.bridge.extensionsServerHost,
-      'extServerHost is null'
-    );
+    console.assert(!!this.bridge.extensionsServerHost, 'extServerHost is null');
    return this.bridge.extensionsServerHost;
  }

@@ -97,12 +94,14 @@ export class DesktopManager extends ApplicationService {
    if (!this.isDesktop) {
      return;
    }
-    Promise.all(components.map((component) => {
-      return this.convertComponentForTransmission(component);
-    })).then((payloads) => {
+    Promise.all(
+      components.map((component) => {
+        return this.convertComponentForTransmission(component);
+      })
+    ).then((payloads) => {
      this.bridge.syncComponents(
-        payloads.filter(payload =>
-          !payload.errorDecrypting && !payload.waitingForKey
+        payloads.filter(
+          (payload) => !payload.errorDecrypting && !payload.waitingForKey
        )
      );
    });
@@ -110,7 +109,7 @@ export class DesktopManager extends ApplicationService {

  registerUpdateObserver(callback: UpdateObserverCallback) {
    const observer = {
-      callback: callback
+      callback: callback,
    };
    this.updateObservers.push(observer);
    return () => {
@@ -153,19 +152,14 @@ export class DesktopManager extends ApplicationService {
      (m) => {
        const mutator = m as ComponentMutator;
        if (error) {
-          mutator.setAppDataItem(
-            AppDataField.ComponentInstallError,
-            error
-          );
+          mutator.setAppDataItem(AppDataField.ComponentInstallError, error);
        } else {
          mutator.local_url = componentData.content.local_url;
          mutator.package_info = componentData.content.package_info;
-          mutator.setAppDataItem(
-            AppDataField.ComponentInstallError,
-            undefined
-          );
+          mutator.setAppDataItem(AppDataField.ComponentInstallError, undefined);
        }
-      });
+      }
+    );

    this.$timeout(() => {
      for (const observer of this.updateObservers) {
@@ -174,13 +168,17 @@ export class DesktopManager extends ApplicationService {
    });
  }

-  desktop_registerComponentActivationObserver(callback: ComponentActivationCallback) {
+  desktop_registerComponentActivationObserver(
+    callback: ComponentActivationCallback
+  ) {
    const observer = { id: `${Math.random}`, callback: callback };
    this.componentActivationObservers.push(observer);
    return observer;
  }

-  desktop_deregisterComponentActivationObserver(observer: ComponentActivationObserver) {
+  desktop_deregisterComponentActivationObserver(
+    observer: ComponentActivationObserver
+  ) {
    removeFromArray(this.componentActivationObservers, observer);
  }

@@ -198,7 +196,9 @@ export class DesktopManager extends ApplicationService {

  async desktop_requestBackupFile() {
    const data = await this.application!.createBackupFile(
-      EncryptionIntent.FileEncrypted
+      this.application.hasProtectionSources()
+        ? EncryptionIntent.FileEncrypted
+        : EncryptionIntent.FileDecrypted
    );
    if (data) {
      return JSON.stringify(data, null, 2);
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -6,13 +6,12 @@ import { InputModalScope } from '@/directives/views/inputModal';
 import { PasswordWizardType, PasswordWizardScope } from '@/types';
 import {
  SNApplication,
-  platformFromString,
  SNComponent,
  PermissionDialog,
  DeinitSource,
 } from '@standardnotes/snjs';
 import angular from 'angular';
-import { getPlatform, getPlatformString } from '@/utils';
+import { getPlatform } from '@/utils';
 import { AlertService } from '@/services/alertService';
 import { WebDeviceInterface } from '@/web_device_interface';
 import {
@@ -96,6 +95,9 @@ export class WebApplication extends SNApplication {
     * to complete before destroying the global application instance and all its services */
    setTimeout(() => {
      super.deinit(source);
+      if (source === DeinitSource.SignOut) {
+        this.bridge.onSignOut();
+      }
    }, 0);
  }

@@ -204,10 +206,17 @@ export class WebApplication extends SNApplication {
  }

  async openModalComponent(component: SNComponent): Promise<void> {
-    if (component.package_info?.identifier === "org.standardnotes.batch-manager") {
-      if (!await this.authorizeBatchManagerAccess()) {
-        return;
-      }
+    switch (component.package_info?.identifier) {
+      case 'org.standardnotes.batch-manager':
+        if (!await this.authorizeBatchManagerAccess()) {
+          return;
+        }
+        break;
+      case 'org.standardnotes.cloudlink':
+        if (!await this.authorizeCloudLinkAccess()) {
+          return;
+        }
+        break;
    }
    const scope = this.scope!.$new(true) as Partial<ComponentModalScope>;
    scope.componentUuid = component.uuid;
--- a/app/assets/javascripts/views/account_switcher/account-switcher.pug
+++ b/app/assets/javascripts/views/account_switcher/account-switcher.pug
@@ -26,7 +26,6 @@
              .sk-sublabel(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
                | Current Application
            .sk-menu-panel-column(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
-              .sk-button.success(
+              button.sn-button.success(
                ng-click='ctrl.renameDescriptor($event, descriptor)'
-                )
-                .sk-label Rename
+                ) Rename
--- a/app/assets/javascripts/views/application/application-view.pug
+++ b/app/assets/javascripts/views/application/application-view.pug
@@ -1,4 +1,4 @@
-.main-ui-view(
+.main-ui-view.sn-component(
  ng-class='self.platformString'
 )
  #app.app(
--- a/app/assets/javascripts/views/challenge_modal/challenge_modal.tsx
+++ b/app/assets/javascripts/views/challenge_modal/challenge_modal.tsx
@@ -279,18 +279,16 @@ function ChallengeModalView({ ctrl }: { ctrl: ChallengeModalCtrl }) {
              </div>
            </div>
            <div className="sk-panel-footer extra-padding">
-              <div
+              <button
                className={
-                  'sk-button big block bold ' +
+                  'sn-button w-full py-3 text-base ' +
                  (ctrl.state.processing ? 'neutral' : 'info')
                }
                disabled={ctrl.state.processing}
                onClick={() => ctrl.submit()}
              >
-                <div className="sk-label">
-                  {ctrl.state.processing ? 'Generating Keys…' : 'Submit'}
-                </div>
-              </div>
+                {ctrl.state.processing ? 'Generating Keys…' : 'Submit'}
+              </button>
              {ctrl.challenge.cancelable && (
                <>
                  <div className="sk-panel-row"></div>
--- a/app/assets/javascripts/views/editor/editor-view.pug
+++ b/app/assets/javascripts/views/editor/editor-view.pug
@@ -1,267 +1,275 @@
 #editor-column.section.editor.sn-component(aria-label='Note')
-  .sn-component
-    .sk-app-bar.no-edges(
-      ng-if='self.noteLocked',
-      ng-init="self.lockText = 'Note Locked'",
-      ng-mouseleave="self.lockText = 'Note Locked'",
-      ng-mouseover="self.lockText = 'Unlock'"
-      )
-      .left
-        .sk-app-bar-item(ng-click='self.toggleLockNote()')
-          .sk-label.warning
-            i.icon.ion-locked
-            | {{self.lockText}}
-  #editor-title-bar.section-title-bar(
-    ng-class="{'locked' : self.noteLocked}",
-    ng-show='self.note && !self.note.errorDecrypting'
-    )
-    .title
-      input#note-title-editor.input(
-        ng-blur='self.onTitleBlur()',
-        ng-change='self.onTitleChange()',
-        ng-disabled='self.noteLocked',
-        ng-focus='self.onTitleFocus()',
-        ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
-        ng-model='self.editorValues.title',
-        select-on-focus='true',
-        spellcheck='false'
-        )
-    #save-status
-      .message(
-        ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
-        ) {{self.state.noteStatus.message}}
-      .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
-    .editor-tags
-      #note-tags-component-container(ng-if='self.state.tagsComponent && !self.note.errorDecrypting')
-        component-view.component-view(
-          component-uuid='self.state.tagsComponent.uuid',
-          ng-class="{'locked' : self.noteLocked}",
-          ng-style="self.noteLocked && {'pointer-events' : 'none'}",
-          application='self.application'
-          )
-      input.tags-input(
-        ng-blur='self.onTagsInputBlur()',
-        ng-disabled='self.noteLocked',
-        ng-if='!self.state.tagsComponent',
-        ng-keyup='$event.keyCode == 13 && $event.target.blur();',
-        ng-model='self.editorValues.tagsInputValue',
-        placeholder='#tags',
-        spellcheck='false',
-        type='text'
-        )
-  .sn-component(ng-if='self.note')
-    #editor-menu-bar.sk-app-bar.no-edges
-      .left
-        .sk-app-bar-item(
-          click-outside=`self.setMenuState('showOptionsMenu', false)`,
-          is-open='self.state.showOptionsMenu',
-          ng-class="{'selected' : self.state.showOptionsMenu}",
-          ng-click="self.toggleMenu('showOptionsMenu')"
-          )
-          .sk-label Options
-          .sk-menu-panel.dropdown-menu(ng-if='self.state.showOptionsMenu')
-            .sk-menu-panel-section
-              .sk-menu-panel-header
-                .sk-menu-panel-header-title Note Options
-              menu-row(
-                action='self.selectedMenuItem(true); self.togglePin()'
-                desc="'Pin or unpin a note from the top of your list'",
-                label="self.note.pinned ? 'Unpin' : 'Pin'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.toggleArchiveNote()'
-                desc="'Archive or unarchive a note from your Archived system tag'",
-                label="self.note.archived ? 'Unarchive' : 'Archive'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.toggleLockNote()'
-                desc="'Locking notes prevents unintentional editing'",
-                label="self.noteLocked ? 'Unlock' : 'Lock'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.toggleProtectNote()'
-                desc=`'Protecting a note will require credentials to view it'`,
-                label="self.note.protected ? 'Unprotect' : 'Protect'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.toggleNotePreview()'
-                circle="self.note.hidePreview ? 'danger' : 'success'",
-                circle-align="'right'",
-                desc="'Hide or unhide the note preview from the list of notes'",
-                label="'Preview'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(); self.deleteNote()'
-                desc="'Send this note to the trash'",
-                label="'Move to Trash'",
-                ng-show='!self.state.altKeyDown && !self.note.trashed && !self.note.errorDecrypting',
-                stylekit-class="'warning'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(); self.deleteNotePermanantely()'
-                desc="'Delete this note permanently from all your devices'",
-                label="'Delete Permanently'",
-                ng-show='!self.note.trashed && self.note.errorDecrypting',
-                stylekit-class="'danger'"
-                )
-            div(ng-if='self.note.trashed || self.state.altKeyDown')
-              menu-row(
-                action='self.selectedMenuItem(true); self.restoreTrashedNote()'
-                desc="'Undelete this note and restore it back into your notes'",
-                label="'Restore'",
-                ng-show='self.note.trashed',
-                stylekit-class="'info'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.deleteNotePermanantely()'
-                desc="'Delete this note permanently from all your devices'",
-                label="'Delete Permanently'",
-                stylekit-class="'danger'"
-                )
-              menu-row(
-                action='self.selectedMenuItem(true); self.emptyTrash()'
-                desc="'Permanently delete all notes in the trash'",
-                label="'Empty Trash'",
-                ng-show='self.note.trashed || !self.state.altKeyDown',
-                stylekit-class="'danger'",
-                subtitle="self.getTrashCount() + ' notes in trash'"
-                )
-            .sk-menu-panel-section
-              .sk-menu-panel-header
-                .sk-menu-panel-header-title Global Display
-              menu-row(
-                action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)"
-                circle="self.state.monospaceFont ? 'success' : 'neutral'",
-                desc="'Toggles the font style for the default editor'",
-                disabled='self.state.editorComponent',
-                label="'Monospace Font'",
-                subtitle="self.state.editorComponent ? 'Not available with editor extensions' : null"
-                )
-              menu-row(
-                action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)"
-                circle="self.state.spellcheck ? 'success' : 'neutral'",
-                desc="'Toggles spellcheck for the default editor'",
-                disabled='self.state.editorComponent',
-                label="'Spellcheck'",
-                subtitle=`
-                  self.state.editorComponent
-                    ? 'Not available with editor extensions'
-                    : (self.state.isDesktop ? 'May degrade editor performance' : null)
-                  `)
-              menu-row(
-                action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)"
-                circle="self.state.marginResizersEnabled ? 'success' : 'neutral'",
-                desc="'Allows for editor left and right margins to be resized'",
-                faded='!self.state.marginResizersEnabled',
-                label="'Margin Resizers'"
-                )
-        .sk-app-bar-item(
-          click-outside=`self.setMenuState('showEditorMenu', false)`
-          is-open='self.state.showEditorMenu',
-          ng-class="{'selected' : self.state.showEditorMenu}",
-          ng-click="self.toggleMenu('showEditorMenu')"
-          )
-          .sk-label Editor
-          editor-menu(
-            callback='self.editorMenuOnSelect',
-            current-item='self.note',
-            ng-if='self.state.showEditorMenu',
-            selected-editor-uuid='self.state.editorComponent && self.state.editorComponent.uuid',
-            application='self.application'
-            )
-        .sk-app-bar-item(
-          click-outside=`self.setMenuState('showActionsMenu', false)`,
-          is-open='self.state.showActionsMenu',
-          ng-class="{'selected' : self.state.showActionsMenu}",
-          ng-click="self.toggleMenu('showActionsMenu')"
-          )
-          .sk-label Actions
-          actions-menu(
-            item='self.note',
-            ng-if='self.state.showActionsMenu',
-            application='self.application'
-            )
-        .sk-app-bar-item(
-          click-outside=`self.setMenuState('showHistoryMenu', false)`,
-          is-open='self.state.showHistoryMenu',
-          ng-class="{'selected' : self.state.showHistoryMenu}",
-          ng-click="self.toggleMenu('showHistoryMenu')"
-          )
-          .sk-label History
-          history-menu(
-            item='self.note',
-            ng-if='self.state.showHistoryMenu',
-            application='self.application'
-            )
-  #editor-content.editor-content(ng-if='!self.note.errorDecrypting')
-    panel-resizer.left(
-      control='self.leftPanelPuppet',
-      hoverable='true',
-      min-width='300',
-      ng-if='self.state.marginResizersEnabled',
-      on-resize-finish='self.onPanelResizeFinish',
-      panel-id="'editor-content'",
-      property="'left'"
-      )
-    component-view.component-view(
-      component-uuid='self.state.editorComponent.uuid',
-      ng-if='self.state.editorComponent && !self.state.editorUnloading',
-      on-load='self.onEditorLoad',
-      application='self.application'
-      )
-    textarea#note-text-editor.editable.font-editor(
-      dir='auto',
-      ng-attr-spellcheck='{{self.state.spellcheck}}',
-      ng-change='self.contentChanged()',
-      ng-click='self.clickedTextArea()',
-      ng-focus='self.onContentFocus()',
-      ng-if='!self.state.editorComponent && !self.state.textareaUnloading',
-      ng-model='self.editorValues.text',
-      ng-model-options='{ debounce: self.state.editorDebounce}',
-      ng-readonly='self.noteLocked',
-      ng-trim='false'
-      autocomplete='off'
-      )
-      | {{self.onSystemEditorLoad()}}
-    panel-resizer(
-      control='self.rightPanelPuppet',
-      hoverable='true', min-width='300',
-      ng-if='self.state.marginResizersEnabled',
-      on-resize-finish='self.onPanelResizeFinish',
-      panel-id="'editor-content'",
-      property="'right'"
-      )
-  .section(ng-show='self.note.errorDecrypting')
-    .sn-component#error-decrypting-container
-      .sk-panel#error-decrypting-panel
-        .sk-panel-header
-          .sk-panel-header-title {{self.note.waitingForKey ? 'Waiting for Key' : 'Unable to Decrypt'}}
-        .sk-panel-content
-          .sk-panel-section
-            p.sk-p(ng-if='self.note.waitingForKey')
-              | This note is awaiting its encryption key to be ready. Please wait for syncing to complete
-              | for this note to be decrypted.
-            p.sk-p(ng-if='!self.note.waitingForKey')
-              | There was an error decrypting this item. Ensure you are running the
-              | latest version of this app, then sign out and sign back in to try again.
-  #editor-pane-component-stack(ng-if='!self.note.errorDecrypting' ng-show='self.note')
-    #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.stackComponents.length')
-      .left
-        .sk-app-bar-item(
-          ng-repeat='component in self.state.stackComponents track by component.uuid'
-          ng-click='self.toggleStackComponentForCurrentItem(component)',
-          )
-          .sk-app-bar-item-column
-            .sk-circle.small(
-              ng-class="{'info' : !self.stackComponentHidden(component) && component.active, 'neutral' : self.stackComponentHidden(component)  || !component.active}"
-              )
-          .sk-app-bar-item-column
-            .sk-label {{component.name}}
+  protected-note-panel.h-full.flex.justify-center.items-center(
+    ng-if='self.state.showProtectedWarning'
+    app-state='self.appState'
+    on-view-note='self.dismissProtectedWarning()'
+  )
+  .flex-grow.flex.flex-col(
+    ng-if='!self.state.showProtectedWarning'
+  )
    .sn-component
-      component-view.component-view.component-stack-item(
-        ng-repeat='component in self.state.stackComponents track by component.uuid',
-        component-uuid='component.uuid',
-        manual-dealloc='true',
-        ng-show='!self.stackComponentHidden(component)',
-        application='self.application'
+      .sk-app-bar.no-edges(
+        ng-if='self.noteLocked',
+        ng-init="self.lockText = 'Note Locked'",
+        ng-mouseleave="self.lockText = 'Note Locked'",
+        ng-mouseover="self.lockText = 'Unlock'"
+        )
+        .left
+          .sk-app-bar-item(ng-click='self.toggleLockNote()')
+            .sk-label.warning
+              i.icon.ion-locked
+              | {{self.lockText}}
+    #editor-title-bar.section-title-bar(
+      ng-class="{'locked' : self.noteLocked}",
+      ng-show='self.note && !self.note.errorDecrypting'
      )
+      .title
+        input#note-title-editor.input(
+          ng-blur='self.onTitleBlur()',
+          ng-change='self.onTitleChange()',
+          ng-disabled='self.noteLocked',
+          ng-focus='self.onTitleFocus()',
+          ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
+          ng-model='self.editorValues.title',
+          select-on-focus='true',
+          spellcheck='false'
+          )
+      #save-status
+        .message(
+          ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
+          ) {{self.state.noteStatus.message}}
+        .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
+      .editor-tags
+        #note-tags-component-container(ng-if='self.state.tagsComponent && !self.note.errorDecrypting')
+          component-view.component-view(
+            component-uuid='self.state.tagsComponent.uuid',
+            ng-class="{'locked' : self.noteLocked}",
+            ng-style="self.noteLocked && {'pointer-events' : 'none'}",
+            application='self.application'
+            )
+        input.tags-input(
+          ng-blur='self.onTagsInputBlur()',
+          ng-disabled='self.noteLocked',
+          ng-if='!self.state.tagsComponent',
+          ng-keyup='$event.keyCode == 13 && $event.target.blur();',
+          ng-model='self.editorValues.tagsInputValue',
+          placeholder='#tags',
+          spellcheck='false',
+          type='text'
+          )
+    .sn-component(ng-if='self.note')
+      #editor-menu-bar.sk-app-bar.no-edges
+        .left
+          .sk-app-bar-item(
+            click-outside=`self.setMenuState('showOptionsMenu', false)`,
+            is-open='self.state.showOptionsMenu',
+            ng-class="{'selected' : self.state.showOptionsMenu}",
+            ng-click="self.toggleMenu('showOptionsMenu')"
+            )
+            .sk-label Options
+            .sk-menu-panel.dropdown-menu(ng-if='self.state.showOptionsMenu')
+              .sk-menu-panel-section
+                .sk-menu-panel-header
+                  .sk-menu-panel-header-title Note Options
+                menu-row(
+                  action='self.selectedMenuItem(true); self.togglePin()'
+                  desc="'Pin or unpin a note from the top of your list'",
+                  label="self.note.pinned ? 'Unpin' : 'Pin'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.toggleArchiveNote()'
+                  desc="'Archive or unarchive a note from your Archived system tag'",
+                  label="self.note.archived ? 'Unarchive' : 'Archive'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.toggleLockNote()'
+                  desc="'Locking notes prevents unintentional editing'",
+                  label="self.noteLocked ? 'Unlock' : 'Lock'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.toggleProtectNote()'
+                  desc=`'Protecting a note will require credentials to view it'`,
+                  label="self.note.protected ? 'Unprotect' : 'Protect'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.toggleNotePreview()'
+                  circle="self.note.hidePreview ? 'danger' : 'success'",
+                  circle-align="'right'",
+                  desc="'Hide or unhide the note preview from the list of notes'",
+                  label="'Preview'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(); self.deleteNote()'
+                  desc="'Send this note to the trash'",
+                  label="'Move to Trash'",
+                  ng-show='!self.state.altKeyDown && !self.note.trashed && !self.note.errorDecrypting',
+                  stylekit-class="'warning'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(); self.deleteNotePermanantely()'
+                  desc="'Delete this note permanently from all your devices'",
+                  label="'Delete Permanently'",
+                  ng-show='!self.note.trashed && self.note.errorDecrypting',
+                  stylekit-class="'danger'"
+                  )
+              div(ng-if='self.note.trashed || self.state.altKeyDown')
+                menu-row(
+                  action='self.selectedMenuItem(true); self.restoreTrashedNote()'
+                  desc="'Undelete this note and restore it back into your notes'",
+                  label="'Restore'",
+                  ng-show='self.note.trashed',
+                  stylekit-class="'info'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.deleteNotePermanantely()'
+                  desc="'Delete this note permanently from all your devices'",
+                  label="'Delete Permanently'",
+                  stylekit-class="'danger'"
+                  )
+                menu-row(
+                  action='self.selectedMenuItem(true); self.emptyTrash()'
+                  desc="'Permanently delete all notes in the trash'",
+                  label="'Empty Trash'",
+                  ng-show='self.note.trashed || !self.state.altKeyDown',
+                  stylekit-class="'danger'",
+                  subtitle="self.getTrashCount() + ' notes in trash'"
+                  )
+              .sk-menu-panel-section
+                .sk-menu-panel-header
+                  .sk-menu-panel-header-title Global Display
+                menu-row(
+                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)"
+                  circle="self.state.monospaceFont ? 'success' : 'neutral'",
+                  desc="'Toggles the font style for the default editor'",
+                  disabled='self.state.editorComponent',
+                  label="'Monospace Font'",
+                  subtitle="self.state.editorComponent ? 'Not available with editor extensions' : null"
+                  )
+                menu-row(
+                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)"
+                  circle="self.state.spellcheck ? 'success' : 'neutral'",
+                  desc="'Toggles spellcheck for the default editor'",
+                  disabled='self.state.editorComponent',
+                  label="'Spellcheck'",
+                  subtitle=`
+                    self.state.editorComponent
+                      ? 'Not available with editor extensions'
+                      : (self.state.isDesktop ? 'May degrade editor performance' : null)
+                    `)
+                menu-row(
+                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)"
+                  circle="self.state.marginResizersEnabled ? 'success' : 'neutral'",
+                  desc="'Allows for editor left and right margins to be resized'",
+                  faded='!self.state.marginResizersEnabled',
+                  label="'Margin Resizers'"
+                  )
+          .sk-app-bar-item(
+            click-outside=`self.setMenuState('showEditorMenu', false)`
+            is-open='self.state.showEditorMenu',
+            ng-class="{'selected' : self.state.showEditorMenu}",
+            ng-click="self.toggleMenu('showEditorMenu')"
+            )
+            .sk-label Editor
+            editor-menu(
+              callback='self.editorMenuOnSelect',
+              current-item='self.note',
+              ng-if='self.state.showEditorMenu',
+              selected-editor-uuid='self.state.editorComponent && self.state.editorComponent.uuid',
+              application='self.application'
+              )
+          .sk-app-bar-item(
+            click-outside=`self.setMenuState('showActionsMenu', false)`,
+            is-open='self.state.showActionsMenu',
+            ng-class="{'selected' : self.state.showActionsMenu}",
+            ng-click="self.toggleMenu('showActionsMenu')"
+            )
+            .sk-label Actions
+            actions-menu(
+              item='self.note',
+              ng-if='self.state.showActionsMenu',
+              application='self.application'
+              )
+          .sk-app-bar-item(
+            click-outside=`self.setMenuState('showHistoryMenu', false)`,
+            is-open='self.state.showHistoryMenu',
+            ng-class="{'selected' : self.state.showHistoryMenu}",
+            ng-click="self.toggleMenu('showHistoryMenu')"
+            )
+            .sk-label History
+            history-menu(
+              item='self.note',
+              ng-if='self.state.showHistoryMenu',
+              application='self.application'
+              )
+    #editor-content.editor-content(ng-if='!self.note.errorDecrypting')
+      panel-resizer.left(
+        control='self.leftPanelPuppet',
+        hoverable='true',
+        min-width='300',
+        ng-if='self.state.marginResizersEnabled',
+        on-resize-finish='self.onPanelResizeFinish',
+        panel-id="'editor-content'",
+        property="'left'"
+        )
+      component-view.component-view(
+        component-uuid='self.state.editorComponent.uuid',
+        ng-if='self.state.editorComponent && !self.state.editorUnloading',
+        on-load='self.onEditorLoad',
+        application='self.application'
+        )
+      textarea#note-text-editor.editable.font-editor(
+        dir='auto',
+        ng-attr-spellcheck='{{self.state.spellcheck}}',
+        ng-change='self.contentChanged()',
+        ng-click='self.clickedTextArea()',
+        ng-focus='self.onContentFocus()',
+        ng-if='!self.state.editorComponent && !self.state.textareaUnloading',
+        ng-model='self.editorValues.text',
+        ng-model-options='{ debounce: self.state.editorDebounce}',
+        ng-readonly='self.noteLocked',
+        ng-trim='false'
+        autocomplete='off'
+        )
+        | {{self.onSystemEditorLoad()}}
+      panel-resizer(
+        control='self.rightPanelPuppet',
+        hoverable='true', min-width='300',
+        ng-if='self.state.marginResizersEnabled',
+        on-resize-finish='self.onPanelResizeFinish',
+        panel-id="'editor-content'",
+        property="'right'"
+        )
+    .section(ng-show='self.note.errorDecrypting')
+      .sn-component#error-decrypting-container
+        .sk-panel#error-decrypting-panel
+          .sk-panel-header
+            .sk-panel-header-title {{self.note.waitingForKey ? 'Waiting for Key' : 'Unable to Decrypt'}}
+          .sk-panel-content
+            .sk-panel-section
+              p.sk-p(ng-if='self.note.waitingForKey')
+                | This note is awaiting its encryption key to be ready. Please wait for syncing to complete
+                | for this note to be decrypted.
+              p.sk-p(ng-if='!self.note.waitingForKey')
+                | There was an error decrypting this item. Ensure you are running the
+                | latest version of this app, then sign out and sign back in to try again.
+    #editor-pane-component-stack(ng-if='!self.note.errorDecrypting' ng-show='self.note')
+      #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.stackComponents.length')
+        .left
+          .sk-app-bar-item(
+            ng-repeat='component in self.state.stackComponents track by component.uuid'
+            ng-click='self.toggleStackComponentForCurrentItem(component)',
+            )
+            .sk-app-bar-item-column
+              .sk-circle.small(
+                ng-class="{'info' : !self.stackComponentHidden(component) && component.active, 'neutral' : self.stackComponentHidden(component)  || !component.active}"
+                )
+            .sk-app-bar-item-column
+              .sk-label {{component.name}}
+      .sn-component
+        component-view.component-view.component-stack-item(
+          ng-repeat='component in self.state.stackComponents track by component.uuid',
+          component-uuid='component.uuid',
+          manual-dealloc='true',
+          ng-show='!self.stackComponentHidden(component)',
+          application='self.application'
+        )
--- a/app/assets/javascripts/views/editor/editor_view.ts
+++ b/app/assets/javascripts/views/editor/editor_view.ts
--- a/app/assets/javascripts/views/editor_group/editor-group-view.pug
+++ b/app/assets/javascripts/views/editor_group/editor-group-view.pug
@@ -1,5 +1,7 @@
-editor-view(
+.flex-grow(
  ng-repeat='editor in self.editors'
-  application='self.application'
-  editor='editor'
+)
+  editor-view(
+    application='self.application'
+    editor='editor'
  )
--- a/app/assets/javascripts/views/notes/notes_view.ts
+++ b/app/assets/javascripts/views/notes/notes_view.ts
@@ -706,7 +706,12 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesState> {
  async onIncludeProtectedNoteTextChange(event: Event) {
    this.searchBarInput?.[0].focus();
    if (this.state.noteFilter.includeProtectedNoteText) {
-      this.state.noteFilter.includeProtectedNoteText = false;
+      await this.setState({
+        noteFilter: {
+          ...this.state.noteFilter,
+          includeProtectedNoteText: false,
+        },
+      });
      this.reloadNotesDisplayOptions();
      await this.reloadNotes();
    } else {
@@ -715,7 +720,12 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesState> {
      });
      event.preventDefault();
      if (await this.application.authorizeSearchingProtectedNotesText()) {
-        this.state.noteFilter.includeProtectedNoteText = true;
+        await this.setState({
+          noteFilter: {
+            ...this.state.noteFilter,
+            includeProtectedNoteText: true,
+          },
+        });
        this.reloadNotesDisplayOptions();
        await this.reloadNotes();
      }
--- a/app/assets/stylesheets/_main.scss
+++ b/app/assets/stylesheets/_main.scss
@@ -63,7 +63,7 @@ h3 {
 input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
-  line-height: inherit;
+  line-height: normal;
 }

 a {
@@ -93,7 +93,6 @@ a {
 }

 p {
-  overflow: auto;
  color: var(--sn-stylekit-paragraph-text-color);
  margin: 0;
 }
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1,16 +0,0 @@
-/* Generic UI controls that have yet to be extracted into Stylekit  */
-
-.sn-btn {
-  @extend .border-0;
-  @extend .bg-main;
-  @extend .cursor-pointer;
-  @extend .capitalize;
-  @extend .font-bold;
-  @extend .py-2;
-  @extend .px-3;
-  @extend .rounded;
-  @extend .text-info-contrast;
-  @extend .text-sm;
-
-  @extend .hover\:brightness-130;
-}
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -81,14 +81,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
  opacity: 0.5;
 }

-.flex {
-  display: flex;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
 .self-start {
  align-self: flex-start;
 }
@@ -226,6 +218,12 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 .grid-template-cols-1fr {
  grid-template-columns: 1fr;
 }
+.col-span-all {
+  grid-column: 1 / -1;
+}
+.grid-col-2 {
+  grid-column: 2;
+}

 .relative {
  position: relative;
--- a/app/assets/stylesheets/index.css.scss
+++ b/app/assets/stylesheets/index.css.scss
@@ -11,4 +11,3 @@
@import "ionicons";
@import "reach-sub";
@import "sessions-modal";
-@import "sn";
--- a/app/assets/templates/directives/account-menu.pug
+++ b/app/assets/templates/directives/account-menu.pug
@@ -12,12 +12,15 @@
        )
        .sk-panel-row
          .sk-h1 Sign in or register to enable sync and end-to-end encryption.
-        .sk-panel-row
-          .sk-button-group.stretch
-            .sk-button.info.featured(ng-click='self.state.formData.showLogin = true')
-              .sk-label Sign In
-            .sk-button.info.featured(ng-click='self.showRegister()')
-              .sk-label Register
+        .flex.my-1
+          button(
+            class="sn-button info flex-grow text-base py-3 mr-1.5"
+            ng-click='self.state.formData.showLogin = true'
+          ) Sign In
+          button(
+            class="sn-button info flex-grow text-base py-3 ml-1.5"
+            ng-click='self.showRegister()'
+          ) Register
        .sk-panel-row.sk-p
          | Standard Notes is free on every platform, and comes
          | standard with sync and encryption.
@@ -95,12 +98,10 @@
                      target='_blank'
                      ) (Learn more)
          .sk-panel-section.form-submit(ng-if='!self.state.formData.authenticating')
-            .sk-button-group.stretch
-              .sk-button.info.featured(
-                ng-click='self.submitAuthForm()',
-                ng-disabled='self.state.formData.authenticating'
-                )
-                .sk-label {{self.state.formData.showLogin ? "Sign In" : "Register"}}
+            button.sn-button.info.text-base.py-3.text-center(
+              ng-click='self.submitAuthForm()',
+              ng-disabled='self.state.formData.authenticating'
+            ) {{self.state.formData.showLogin ? "Sign In" : "Register"}}
          .sk-notification.neutral(ng-if='self.state.formData.showRegister')
            .sk-notification-title No Password Reset.
            .sk-notification-text
@@ -174,17 +175,16 @@
            | or revoking an active session, require additional authentication
            | like entering your account password or application passcode.
          .sk-panel-row(ng-if="self.state.protectionsDisabledUntil")
-            button.sk-button.info(ng-click="self.enableProtections()")
-              span.sk-label.capitalize Enable protections
+            button.sn-button.info(ng-click="self.enableProtections()")
+             | Enable protections
        .sk-panel-section
          .sk-panel-section-title Passcode Lock
          div(ng-if='!self.state.hasPasscode')
            div(ng-if='self.state.canAddPasscode')
              .sk-panel-row(ng-if='!self.state.formData.showPasscodeForm')
-                .sk-button.info(
+                button.sn-button.info(
                  ng-click='self.addPasscodeClicked(); $event.stopPropagation();'
-                  )
-                  .sk-label Add Passcode
+                ) Add Passcode
              p.sk-p
                | Add a passcode to lock the application and
                | encrypt on-device key storage.
@@ -211,12 +211,10 @@
              placeholder='Confirm Passcode',
              type='password'
              )
-            .sk-button-group.stretch.sk-panel-row.form-submit
-              button.sk-button.info(type='submit')
-                .sk-label Set Passcode
-            a.neutral.sk-a.sk-panel-row(
+            button.sn-button.info.mt-2(type='submit') Set Passcode
+            button.sn-button.outlined.ml-2(
              ng-click='self.state.formData.showPasscodeForm = false'
-              ) Cancel
+            ) Cancel
          div(ng-if='self.state.hasPasscode && !self.state.formData.showPasscodeForm')
            .sk-panel-section-subtitle.info Passcode lock is enabled
            .sk-notification.contrast
@@ -245,7 +243,6 @@
          .sk-panel-section-title Data Backups
          .sk-p
            | Download a backup of all your data.
-          .sk-panel-row
          form.sk-panel-form.sk-panel-row(ng-if='self.state.encryptionEnabled')
            .sk-input-group
              label.sk-horizontal-group.tight
@@ -265,18 +262,18 @@
                  )
                p.sk-p Decrypted
          .sk-panel-row
-          .sk-button-group.sk-panel-row.justify-left
-            .sk-button.info(ng-click='self.downloadDataArchive()')
-              .sk-label Download Backup
-            label.sk-button.info
+          .flex
+            button.sn-button.info(ng-click='self.downloadDataArchive()')
+              | Download Backup
+            label.sn-button.info.ml-2
              input(
                file-change='->',
                handler='self.importFileSelected(files)',
                style='display: none;',
                type='file'
-                )
-              .sk-label Import Backup
-          span(ng-if='self.isDesktopApplication()')
+              )
+              | Import Backup
+          p.mt-5(ng-if='self.isDesktopApplication()')
            | Backups are automatically created on desktop and can be managed
            | via the "Backups" top-level menu.
          .sk-panel-row
@@ -296,8 +293,8 @@
            | local storage, and a new identifier will be created should you
            | decide to enable error reporting again in the future.
          .sk-panel-row
-            button(ng-click="self.toggleErrorReportingEnabled()").sk-button.info
-              span.sk-label {{ self.state.errorReportingEnabled ? 'Disable' : 'Enable'}} Error Reporting
+            button(ng-click="self.toggleErrorReportingEnabled()").sn-button.info
+              | {{ self.state.errorReportingEnabled ? 'Disable' : 'Enable'}} Error Reporting
          .sk-panel-row
            a(ng-click="self.openErrorReportingDialog()").sk-a What data is being sent?
    .sk-panel-footer
@@ -313,7 +310,7 @@
          ng-if='self.state.formData.showLogin || self.state.formData.showRegister'
          )
          | Cancel
-        a.sk-a.right.danger(
+        a.sk-a.right.danger.capitalize(
          ng-click='self.destroyLocalData()',
          ng-if=`
              !self.state.formData.showLogin &&
--- a/app/assets/templates/directives/component-view.pug
+++ b/app/assets/templates/directives/component-view.pug
@@ -5,8 +5,7 @@
        .sk-label.warning There was an issue loading {{ctrl.component.name}}.
    .right
      .sk-app-bar-item(ng-click='ctrl.reloadIframe()')
-        .sk-button.info
-          .sk-label Reload
+        button.sn-button.info Reload
 .sn-component(ng-if='ctrl.expired')
  .sk-app-bar.no-edges.no-top-edge.dynamic-height
    .left
@@ -26,16 +25,14 @@
              | Extensions are in a read-only state.
    .right
      .sk-app-bar-item(ng-click='ctrl.reloadStatus(true)')
-        .sk-button.info
-          .sk-label Reload
+        button.sn-button.info Reload
      .sk-app-bar-item
        .sk-app-bar-item-column
-          .sk-button.warning
-            a.sk-label(
-              href='https://standardnotes.org/help/41/expired',
-              rel='noopener',
-              target='_blank'
-              ) Help
+          a.sn-button.warning(
+            href='https://standardnotes.org/help/41/expired',
+            rel='noopener',
+            target='_blank'
+            ) Help

 .sn-component(ng-if="ctrl.error == 'offline-restricted'")
  .sk-panel.static
@@ -57,11 +54,10 @@
              li.sk-p
                strong Use the Desktop application.
        .sk-panel-row
-          .sk-button.info(
+          button.sn-button.info(
            ng-click='ctrl.reloadStatus()',
            ng-if='!ctrl.reloading'
-            )
-            .sk-label Reload
+          ) Reload
          .sk-spinner.info.small(ng-if='ctrl.reloading')
 .sn-component(ng-if="ctrl.error == 'url-missing'")
  .sk-panel.static
--- a/app/assets/templates/directives/menu-row.pug
+++ b/app/assets/templates/directives/menu-row.pug
@@ -30,10 +30,9 @@
  .sk-menu-panel-column(ng-if="ctrl.circle && ctrl.circleAlign == 'right'")
    .sk-circle.small(ng-class='ctrl.circle')
  .sk-menu-panel-column(ng-if='ctrl.hasButton')
-    .sk-button(
+    button.sn-button.small(
      ng-class='ctrl.buttonClass',
      ng-click='ctrl.clickAccessoryButton($event)'
-      )
-      .sk-label {{ctrl.buttonText}}
+    ) {{ctrl.buttonText}}
  .sk-menu-panel-column(ng-if='ctrl.spinnerClass')
    .sk-spinner.small(ng-class='ctrl.spinnerClass')
--- a/app/assets/templates/directives/password-wizard.pug
+++ b/app/assets/templates/directives/password-wizard.pug
@@ -41,8 +41,7 @@
                | Please ensure you are running the latest version of Standard Notes
                | on all platforms to ensure maximum compatibility.
          .sk-panel-footer
-            .sk-button.info(
+            button.sn-button.info(
              ng-click='ctrl.nextStep()',
              ng-disabled='ctrl.state.lockContinue'
-              )
-              .sk-label {{ctrl.state.continueTitle}}
+            ) {{ctrl.state.continueTitle}}
--- a/app/assets/templates/directives/permissions-modal.pug
+++ b/app/assets/templates/directives/permissions-modal.pug
@@ -1,25 +0,0 @@
-.sk-modal-background(ng-click='ctrl.deny()')
-#permissions-modal.sk-modal-content
-  .sn-component
-    .sk-panel
-      .sk-panel-header
-        .sk-panel-header-title Activate Extension
-        a.sk-a.info.close-button(ng-click='ctrl.deny()') Cancel
-      .sk-panel-content
-        .sk-panel-section
-          .sk-panel-row
-            .sk-h2
-              strong {{ctrl.component.name}}
-              |  would like to interact with your
-              |  {{ctrl.permissionsString}}
-          .sk-panel-row
-            p.sk-p
-              | Extensions use an offline messaging system to communicate. Learn more at
-              a.sk-a.info(
-                href='https://standardnotes.org/permissions',
-                rel='noopener',
-                target='_blank'
-                ) https://standardnotes.org/permissions.
-      .sk-panel-footer
-        .sk-button.info.big.block.font-bold(ng-click='ctrl.accept()')
-          .sk-label Continue
--- a/app/assets/templates/directives/sync-resolution-menu.pug
+++ b/app/assets/templates/directives/sync-resolution-menu.pug
@@ -6,44 +6,41 @@
    .sk-panel-content
      .sk-panel-section
        .sk-panel-row.sk-p
-          | We've detected that the data on the server may not match 
+          | We've detected that the data on the server may not match
          | the data in the current application session.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 1 — Restart App:
-            .sk-p 
-              | Quit the application and re-open it. 
+            .sk-p
+              | Quit the application and re-open it.
              | Sometimes, this may resolve the issue.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 2 (recommended) — Sign Out:
            .sk-p
-              | Sign out of your account, then sign back in. 
+              | Sign out of your account, then sign back in.
              | This will ensure your data is consistent with the server.
            | Be sure to download a backup of your data before doing so.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 3 — Sync Resolution:
            .sk-p
-              | We can attempt to reconcile changes by downloading all data from the 
-              | server. No existing data will be overwritten. If the local contents of 
+              | We can attempt to reconcile changes by downloading all data from the
+              | server. No existing data will be overwritten. If the local contents of
              | an item differ from what the server has, a conflicted copy will be created.
        div(ng-if='!ctrl.status.backupFinished')
          .sk-p.sk-panel-row
-            | Please download a backup before we attempt to 
+            | Please download a backup before we attempt to
            | perform a full account sync resolution.
          .sk-panel-row
-            .sk-button-group
-              .sk-button.info(ng-click='ctrl.downloadBackup(true)')
-                .sk-label Encrypted
-              .sk-button.info(ng-click='ctrl.downloadBackup(false)')
-                .sk-label Decrypted
-              .sk-button.danger(ng-click='ctrl.skipBackup()')
-                .sk-label Skip
+            .flex.gap-2
+              button.sn-button.info(ng-click='ctrl.downloadBackup(true)') Encrypted
+              button.sn-button.info(ng-click='ctrl.downloadBackup(false)') Decrypted
+              button.sn-button.danger(ng-click='ctrl.skipBackup()') Skip
        div(ng-if='ctrl.status.backupFinished')
          .sk-panel-row(ng-if='!ctrl.status.resolving && !ctrl.status.attemptedResolution')
-            .sk-button.info(ng-click='ctrl.performSyncResolution()')
-              .sk-label Perform Sync Resolution
+            button.sn-button.info(ng-click='ctrl.performSyncResolution()')
+              | Perform Sync Resolution
          .sk-panel-row.justify-left(ng-if='ctrl.status.resolving')
            .sk-horizontal-group
              .sk-spinner.small.info
@@ -51,8 +48,8 @@
          .sk-panel-column(ng-if='ctrl.status.fail')
            .sk-panel-row.sk-label.danger Sync Resolution Failed
            .sk-p.sk-panel-row
-              | We attempted to reconcile local content and server content, but were 
-              | unable to do so. At this point, we recommend signing out of your account 
+              | We attempted to reconcile local content and server content, but were
+              | unable to do so. At this point, we recommend signing out of your account
              | and signing back in. You may wish to download a data backup before doing so.
          .sk-panel-column(ng-if='ctrl.status.success')
            .sk-panel-row.sk-label.success Sync Resolution Success
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "standard-notes-web",
-  "version": "3.6.2",
+  "version": "3.6.3",
  "license": "AGPL-3.0-or-later",
  "repository": {
    "type": "git",
@@ -53,7 +53,7 @@
    "pug-loader": "^2.4.0",
    "sass-loader": "^8.0.2",
    "serve-static": "^1.14.1",
-    "sn-stylekit": "^2.2.1",
+    "sn-stylekit": "github:standardnotes/StyleKit#1ec13454cc6d8cf97651263a039de8872be527b8",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "typescript-eslint": "0.0.1-alpha.0",
@@ -68,7 +68,7 @@
    "@reach/alert-dialog": "^0.13.0",
    "@reach/dialog": "^0.13.0",
    "@standardnotes/sncrypto-web": "^1.2.10",
-    "@standardnotes/snjs": "^2.0.67",
+    "@standardnotes/snjs": "^2.0.70",
    "mobx": "^6.1.6",
    "preact": "^10.5.12"
  }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1850,10 +1850,10 @@
    "@standardnotes/sncrypto-common" "^1.2.7"
    libsodium-wrappers "^0.7.8"

-"@standardnotes/snjs@^2.0.67":
-  version "2.0.67"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.0.67.tgz#87e29f40bb5efaa36f30ddc5905164f7dce194d9"
-  integrity sha512-XCDxlFQCh0zmV3Hc9mjU7ritZ/2Ma5JPoCbDy4CIAlkKdmVL4tu/4jCfRFILM0zpKF/kLsCTbLGdG7TgU/ReKg==
+"@standardnotes/snjs@^2.0.70":
+  version "2.0.70"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.0.70.tgz#259a4fadc4f9b360f35a399b674b921179bd5768"
+  integrity sha512-D11E+sCeoram2+NhQuFmn333JoHr1kGjVZrkRmZlfhGi+dYXJqZuDDDHbRn5WEJQneDg43Z8DjjAlxL+Mqhp6w==
  dependencies:
    "@standardnotes/auth" "^2.0.0"
    "@standardnotes/sncrypto-common" "^1.2.9"
@@ -7808,10 +7808,9 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

-sn-stylekit@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-2.2.1.tgz#4a81a05b2b2d67a11af9d06f3964ac1ece3aa84a"
-  integrity sha512-mrvUbf2HbWOfxbNglo7RXa5JBe9UV9rurupeGoX/Kh4/lVlB2n/56ZT103xk/4tp0/mVCpxjD7Dt1stKFxsvFA==
+"sn-stylekit@github:standardnotes/StyleKit#1ec13454cc6d8cf97651263a039de8872be527b8":
+  version "3.0.1"
+  resolved "https://codeload.github.com/standardnotes/StyleKit/tar.gz/1ec13454cc6d8cf97651263a039de8872be527b8"

 snapdragon-node@^2.0.1:
  version "2.1.1"