first commit

services/web/frontend/stylesheets/app/editor/chat.less

@@ -0,0 +1,136 @@
+@new-message-height: 80px;
+
+.chat {
+  .loading {
+    font-family: @font-family-serif;
+    padding: @line-height-computed / 2;
+    text-align: center;
+  }
+
+  .no-messages {
+    padding: @line-height-computed / 2;
+    color: @chat-instructions-color;
+  }
+
+  .first-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: @line-height-computed / 2;
+    color: @chat-instructions-color;
+  }
+
+  .chat-error {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: @chat-bg;
+    padding: @line-height-computed / 2;
+    text-align: center;
+  }
+
+  .messages {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: @new-message-height;
+    overflow-x: hidden;
+    background-color: @chat-bg;
+
+    li.message {
+      margin: @line-height-computed / 2;
+      .date {
+        font-size: 12px;
+        color: @chat-message-date-color;
+        margin-bottom: @line-height-computed / 2;
+        text-align: right;
+      }
+      .message-wrapper {
+        .name {
+          font-size: 12px;
+          color: @chat-message-name-color;
+          margin-bottom: 4px;
+          min-height: 16px;
+        }
+        .message {
+          border-left: 3px solid transparent;
+          font-size: 14px;
+          box-shadow: @chat-message-box-shadow;
+          border-radius: @chat-message-border-radius;
+          position: relative;
+
+          .message-content {
+            padding: @chat-message-padding;
+            overflow-x: auto;
+            color: @chat-message-color;
+            font-weight: @chat-message-weight;
+          }
+
+          .arrow {
+            transform: rotate(90deg);
+            right: 90%;
+            top: -15px;
+            border: solid;
+            content: ' ';
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-top-color: transparent !important;
+            border-bottom-color: transparent !important;
+            border-width: 10px;
+          }
+        }
+        p {
+          margin-bottom: @line-height-computed / 4;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.self) {
+        .message {
+          .arrow {
+            border-left-color: transparent !important;
+          }
+        }
+      }
+
+      &.self {
+        margin-top: @line-height-computed;
+        .message-wrapper .message {
+          border-left: none;
+          border-right: 3px solid transparent;
+          .arrow {
+            left: 100%;
+            right: auto;
+            border-right-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  .new-message {
+    .full-size;
+    top: auto;
+    height: @new-message-height;
+    background-color: @chat-new-message-bg;
+    padding: @line-height-computed / 4;
+    border-top: 1px solid @chat-new-message-border-color;
+    textarea {
+      overflow: auto;
+      resize: none;
+      border-radius: @border-radius-base;
+      border: 1px solid @chat-new-message-border-color;
+      height: 100%;
+      width: 100%;
+      color: @chat-new-message-textarea-color;
+      font-size: 14px;
+      padding: @line-height-computed / 4;
+      background-color: @chat-new-message-textarea-bg;
+    }
+  }
+}

services/web/frontend/stylesheets/app/editor/compile-button.less

@@ -0,0 +1,92 @@
+@stripe-width: 20px;
+@keyframes pdf-toolbar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: @stripe-width 0;
+  }
+}
+
+.detach-compile-button-container {
+  border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
+  margin-left: 6px;
+}
+
+// only apply for legacy editor
+.toolbar-pdf-right {
+  // because 2px border on :active state
+  .detach-compile-button-container {
+    margin-right: -3px;
+  }
+}
+
+.btn-striped-animated {
+  // prettier-ignore
+  #gradient > .striped(@color: rgba(255, 255, 255, 0.2), @angle: -45deg);
+  background-size: @stripe-width @stripe-width;
+  background-origin: content-box;
+  .animation(pdf-toolbar-stripes 2s linear infinite);
+}
+
+.detach-compile-button {
+  height: 28px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &.detach-compile-button-disabled {
+    &,
+    &:hover {
+      color: @white;
+      background-color: @ol-green;
+    }
+  }
+}
+
+.detach-compile-button {
+  border: none;
+}
+
+.detach-compile-button-label {
+  margin-left: @line-height-computed / 4;
+}
+
+@keyframes compile-button-flash {
+  from,
+  to {
+    background: rgba(0, 0, 0, 0);
+  }
+
+  25%,
+  75% {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+@keyframes compile-button-bounce {
+  from,
+  50%,
+  to {
+    transform: translateY(0);
+  }
+
+  25%,
+  75% {
+    transform: translateY(2px);
+  }
+}
+
+.detach-compile-button-animate {
+  animation-duration: 1.2s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+  animation-name: compile-button-flash;
+}
+
+.detach-compile-button-animate .caret {
+  animation-duration: 0.6s;
+  animation-delay: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+  animation-name: compile-button-bounce;
+}

services/web/frontend/stylesheets/app/editor/dictionary.less

@@ -0,0 +1,33 @@
+#dictionary-modal {
+  .modal-body {
+    padding: 0;
+  }
+}
+
+.dictionary-entries-list {
+  overflow-y: scroll;
+  max-height: calc(100vh - 225px);
+  margin: 0;
+  padding: @padding-sm;
+}
+
+.dictionary-entry {
+  word-break: break-all;
+  display: flex;
+  padding: @padding-sm;
+  border-bottom: solid 1px @modal-header-border-color;
+  align-items: center;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.dictionary-entry-name {
+  flex-grow: 1;
+  padding-right: @padding-xs;
+}
+
+.dictionary-empty-body {
+  padding: @padding-md;
+}

services/web/frontend/stylesheets/app/editor/error-boundary.less

@@ -0,0 +1,26 @@
+.error-boundary-alert {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: @ol-blue-gray-0;
+  padding: @line-height-computed / 2;
+}
+
+.error-boundary-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .error-message {
+    align-items: center;
+    color: @neutral-90;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+}

services/web/frontend/stylesheets/app/editor/figure-modal.less

@@ -0,0 +1,120 @@
+.figure-modal-help-link,
+.figure-modal-help-link:hover,
+.figure-modal-help-link:focus,
+.figure-modal-help-link:active {
+  color: @neutral-90;
+  text-decoration: none;
+}
+
+.figure-modal-help-link {
+  padding-left: 0;
+}
+
+.figure-modal-checkbox-input {
+  label {
+    display: inline-block;
+    font-weight: normal;
+    line-height: 100%;
+
+    .figure-modal-label-content {
+      display: block;
+      overflow: hidden;
+    }
+  }
+
+  input[type='checkbox'] {
+    margin-right: 12px;
+    margin-top: 2px;
+    vertical-align: top;
+    accent-color: @ol-green;
+  }
+}
+
+.figure-modal-switcher-input {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-container {
+  width: 100%;
+  height: 120px;
+  padding: 22px 24px;
+  border: 1px dashed #eaeaea;
+  background-color: #fafafa;
+  justify-content: space-between;
+  border-radius: 8px;
+}
+
+.file-container-file {
+  display: flex;
+  align-items: center;
+  border: 1px solid @neutral-20;
+  border-radius: 8px;
+  background-color: white;
+  height: 100%;
+  padding: 16px 18px;
+}
+
+.file-info {
+  margin-left: 18px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.file-name {
+  font-weight: bold;
+}
+
+.file-icon {
+  font-size: 20px;
+}
+
+.file-action {
+  cursor: pointer;
+}
+
+.figure-modal-source-button-grid {
+  display: grid;
+  justify-content: space-between;
+  gap: 8px;
+  grid-template-columns: 1fr 1fr;
+  margin: 0 auto;
+
+  &:not(:first-of-type) {
+    margin-top: 8px;
+  }
+}
+
+.figure-modal-source-button {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  box-shadow: 0px 2px 4px 0px #1e253029;
+  line-height: 44px;
+  background-color: white;
+  border-radius: 4px;
+  border: none;
+  padding: 0 8px;
+
+  &-title {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+}
+
+.figure-modal-source-button-icon {
+  margin-right: 6px;
+}
+
+.figure-modal-upload .uppy-Dashboard-AddFiles-list {
+  display: none;
+}
+
+.select-from-files-btn {
+  vertical-align: baseline;
+}

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -0,0 +1,556 @@
+.fake-full-width-bg(@bg-color) {
+  &::before {
+    content: '\00a0';
+    position: absolute;
+    width: 9999px;
+    left: -9999px;
+    background-color: @bg-color;
+  }
+}
+
+.editor-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: @file-tree-bg;
+}
+
+.file-tree {
+  display: flex !important; // To work around jQuery layout's inline styles
+  flex-direction: column;
+  height: 100%;
+
+  .toolbar.toolbar-filetree {
+    .toolbar-small-mixin;
+    .toolbar-alt-mixin;
+    padding: 0 5px;
+    flex-shrink: 0;
+
+    .btn:hover {
+      background-color: @file-tree-toolbar-btn-hover-color;
+    }
+  }
+
+  > file-tree-root,
+  .file-tree-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    width: inherit;
+    height: inherit;
+
+    &.no-toolbar {
+      top: 0;
+    }
+  }
+
+  // TODO; Consolidate with "Project files" in Overleaf
+  h3 {
+    font-size: 1rem;
+    border-bottom: 1px solid @gray;
+    padding-bottom: (@line-height-computed / 4);
+    margin: (@line-height-computed / 2);
+  }
+
+  &-history {
+    .entity-name {
+      padding-left: 6px;
+      &.deleted {
+        text-decoration: line-through;
+      }
+    }
+    .loading {
+      padding-left: 6px;
+      color: #fff;
+
+      i.fa {
+        color: #fff;
+      }
+    }
+  }
+
+  ul.file-tree-list {
+    margin: 0;
+    overflow-x: hidden;
+    height: 100%;
+    flex-grow: 1;
+    position: relative;
+    overflow-y: auto;
+
+    .entity > ul,
+    ul[role='tree'] {
+      margin-left: 22px;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      min-height: @line-height-computed;
+    }
+
+    li {
+      line-height: @file-tree-line-height;
+      position: relative;
+      &:focus {
+        outline: none;
+      }
+
+      .entity {
+        user-select: none;
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .entity > .entity-name > button {
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+        &:focus {
+          outline: none;
+        }
+        &.item-name-button {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: left;
+          padding-right: 32px;
+          white-space: pre;
+        }
+      }
+
+      .entity-name {
+        color: @file-tree-item-color;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.entity-name-react {
+          text-overflow: clip;
+        }
+        &:focus {
+          outline: none;
+        }
+        background-color: transparent;
+        .fake-full-width-bg(transparent);
+        &:hover {
+          background-color: @file-tree-item-hover-bg;
+
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          .fake-full-width-bg(@file-tree-item-hover-bg);
+        }
+        input {
+          line-height: 1.6;
+        }
+        .entity-menu-toggle > i {
+          color: white;
+          font-size: 18px;
+        }
+      }
+
+      i.fa {
+        color: @file-tree-item-icon-color;
+        font-size: 14px;
+
+        &.file-tree-icon {
+          margin-right: 4px;
+          margin-left: 8px;
+
+          &.linked-file-icon {
+            position: relative;
+            left: -2px;
+
+            + .linked-file-highlight {
+              & {
+                color: inherit;
+              }
+              position: relative;
+              top: 4px;
+              width: 0;
+              left: -5px;
+              font-size: 12px;
+            }
+          }
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: 4px;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: 8px;
+        }
+      }
+
+      i.fa-folder-open,
+      i.fa-folder {
+        color: @file-tree-item-folder-color;
+        font-size: 14px;
+      }
+
+      i.toggle {
+        width: 24px;
+        padding: 6px;
+        font-size: 16px;
+        color: @file-tree-item-toggle-color;
+      }
+
+      .file-tree-dropdown-toggle {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        line-height: 1.6;
+        font-size: 20px;
+        padding: 0 4px 0 18px;
+
+        &:hover,
+        &:focus {
+          text-decoration: none;
+        }
+        &::before {
+          content: '\00B7\00B7\00B7';
+          transform: rotate(90deg);
+          letter-spacing: 0.5px;
+        }
+      }
+
+      &.multi-selected {
+        > .entity {
+          > .entity-name {
+            > div > i.fa,
+            > button > i.fa,
+            > i.fa,
+            .entity-menu-toggle i.fa {
+              color: #fff;
+            }
+            > i.linked-file-highlight {
+              color: @blue;
+            }
+            color: #fff;
+            font-weight: bold;
+            background-color: @file-tree-multiselect-bg;
+            .fake-full-width-bg(@file-tree-multiselect-bg);
+            &:hover {
+              background-color: @file-tree-multiselect-hover-bg;
+              .fake-full-width-bg(@file-tree-multiselect-hover-bg);
+            }
+          }
+        }
+      }
+
+      .menu-button {
+        position: absolute;
+        right: 0;
+        top: 3px;
+      }
+
+      .rename-input {
+        display: block;
+        position: absolute;
+        top: 1px;
+        left: 32px;
+        right: 32px;
+        color: @file-tree-item-input-color;
+        input {
+          width: 100%;
+        }
+      }
+
+      > .entity > .entity-name {
+        .entity-menu-toggle {
+          display: none;
+        }
+      }
+
+      .entity-limit-hit {
+        color: @file-tree-item-color;
+        line-height: 2.05;
+        margin-left: (@line-height-computed / 2);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .entity-limit-hit-message {
+        font-style: italic;
+      }
+
+      i.fa.entity-limit-hit-tooltip-trigger {
+        margin-left: (@line-height-computed / 4);
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:not(.multi-selected) {
+    ul.file-tree-list li.selected {
+      > .entity {
+        > .entity-name {
+          color: @file-tree-item-selected-color;
+
+          > div > i.fa,
+          > button > i.fa,
+          > i.fa,
+          .entity-menu-toggle i.fa {
+            color: @file-tree-item-selected-color;
+          }
+
+          > i.linked-file-highlight {
+            color: @blue;
+          }
+
+          background-color: @file-tree-item-selected-bg;
+          font-weight: bold;
+          padding-right: 32px;
+          .fake-full-width-bg(@file-tree-item-selected-bg);
+
+          .entity-menu-toggle {
+            display: inline-block;
+            background-color: transparent;
+            box-shadow: none;
+            border: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // while dragging, the previously selected item gets no highlight
+  ul.file-tree-list.file-tree-dragging li.selected .entity .entity-name {
+    font-weight: normal;
+
+    background-color: transparent;
+    .fake-full-width-bg(transparent);
+    color: @file-tree-item-color;
+    i.fa {
+      color: @file-tree-item-icon-color !important;
+    }
+  }
+
+  // the items being dragged get the full "hover" colour
+  ul.file-tree-list.file-tree-dragging
+    li
+    .entity.file-tree-entity-dragging
+    .entity-name {
+    background-color: fade(@file-tree-item-hover-bg, 90%);
+    .fake-full-width-bg(fade(@file-tree-item-hover-bg, 90%));
+    color: @file-tree-item-color;
+    i.fa {
+      color: @file-tree-item-icon-color !important;
+    }
+  }
+
+  // the drop target gets the "selected" colour
+  ul.file-tree-list.file-tree-dragging
+    li.dnd-droppable-hover
+    .entity
+    .entity-name {
+    background-color: @file-tree-item-selected-bg;
+    .fake-full-width-bg(@file-tree-item-selected-bg);
+    color: @file-tree-item-selected-color;
+    i.fa {
+      color: @file-tree-item-selected-color !important;
+    }
+  }
+
+  .dnd-draggable-preview-layer {
+    position: absolute;
+    pointer-events: none;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &.dnd-droppable-hover {
+      border: 3px solid @file-tree-item-selected-bg;
+    }
+  }
+
+  .dnd-draggable-preview-item {
+    background-color: fade(@file-tree-item-selected-bg, 60%);
+    color: @file-tree-item-selected-color;
+    width: 75%;
+    padding-left: @line-height-computed;
+  }
+
+  .dnd-draggable-preview-item {
+    line-height: @file-tree-line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .disconnected-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    background: @file-tree-bg;
+    opacity: 0.5;
+    cursor: wait;
+  }
+}
+
+.modal-new-file {
+  padding: 0;
+  table {
+    width: 100%;
+    table-layout: fixed;
+    td {
+      vertical-align: top;
+    }
+  }
+  /* old modal */
+  .toggle-output-files-button {
+    font-size: 80%;
+  }
+  /* new modal */
+  .toggle-file-type-button {
+    font-size: 80%;
+    margin-top: -12px;
+    .btn {
+      display: inline-block;
+      padding: 0;
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+    .btn:focus-within {
+      outline: none;
+      text-decoration: none;
+    }
+  }
+}
+.modal-new-file-list {
+  background-color: @modal-footer-background-color;
+  width: 220px;
+  ul {
+    li {
+      /* old modal (a) */
+      a {
+        color: @text-color;
+        padding: (@line-height-computed / 4);
+        display: block;
+        text-decoration: none;
+      }
+      /* new modal (button) */
+      .btn {
+        color: @text-color;
+        padding: (@line-height-computed / 4);
+      }
+      .btn:hover {
+        text-decoration: none;
+      }
+      .btn:focus {
+        outline: none;
+        text-decoration: none;
+        background-color: white;
+      }
+    }
+    li.active {
+      background-color: white;
+      /* old modal (a) */
+      a {
+        color: @link-color;
+      }
+      /* new modal (button) */
+      .btn {
+        color: @link-color;
+        text-decoration: none;
+      }
+    }
+    li:hover {
+      background-color: white;
+    }
+  }
+}
+
+.file-tree-error {
+  text-align: center;
+  color: @file-tree-error-color;
+  padding: 20px;
+}
+
+.file-tree-modal-alert {
+  margin-top: 12.5px;
+}
+
+.btn.modal-new-file-mode {
+  text-align: left;
+  width: 100%;
+}
+
+.modal-new-file-body {
+  padding: 20px;
+  padding-top: (@line-height-computed / 4);
+}
+
+.modal-new-file-body-upload {
+  padding-top: 20px;
+}
+
+.modal-new-file-body-conflict {
+  background-color: @red-10;
+  border: 1px dashed @red-50;
+  min-height: 400px;
+  border-radius: 3px;
+  color: @neutral-90;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: @padding-sm;
+}
+
+.modal-footer {
+  .approaching-file-limit {
+    font-weight: bold;
+  }
+
+  .at-file-limit {
+    text-align: left;
+  }
+}
+
+.modal-new-file-body-upload .uppy-Root {
+  font-family: inherit;
+}
+
+.modal-new-file-body-upload .uppy-Dashboard {
+  .uppy-Dashboard-inner {
+    border: none;
+  }
+
+  .uppy-Dashboard-dropFilesHereHint {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .uppy-Dashboard-AddFiles {
+    margin: 0;
+    border: 1px dashed @neutral-60;
+    height: 100%;
+    .uppy-Dashboard-AddFiles-title {
+      font-size: inherit;
+    }
+  }
+
+  .uppy-Dashboard-AddFiles-title {
+    width: 26em; // sized to create a wrap between the sentences
+    max-width: 100%;
+  }
+
+  .uppy-Informer p {
+    background-color: @blue-10;
+    border: 1px solid @blue-20;
+    border-radius: @border-radius-base-new;
+    color: @content-primary;
+    font-size: @font-size-03;
+  }
+}

services/web/frontend/stylesheets/app/editor/file-view.less

@@ -0,0 +1,82 @@
+.file-view,
+.binary-file {
+  padding: @line-height-computed / 2;
+  background-color: @gray-lightest;
+  text-align: center;
+  overflow: auto;
+
+  .file-view-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: @spacing-03;
+    justify-content: center;
+  }
+
+  .file-view-error {
+    margin: @spacing-08 -15px auto;
+
+    > .alert {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  }
+
+  .tpr-refresh-error {
+    .btn {
+      color: @neutral-90;
+      background-color: @white;
+      &:hover {
+        background-color: @neutral-20;
+      }
+    }
+  }
+
+  img,
+  .file-view-pdf {
+    max-width: 100%;
+    max-height: 90%;
+    display: block;
+    margin: auto;
+    margin-top: @line-height-computed / 2;
+    border: 1px solid @gray;
+    .box-shadow(0 2px 3px @gray;);
+    background-color: white;
+  }
+  .file-view-pdf {
+    overflow: auto;
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .pdf-page:not(:last-of-type) {
+      border-bottom: 1px solid @gray;
+    }
+  }
+  p.no-preview {
+    margin-top: @line-height-computed / 2;
+    font-size: 24px;
+    color: @gray;
+  }
+  .text-loading {
+    margin-top: @line-height-computed / 2;
+    font-size: 24px;
+    color: @gray;
+  }
+  .text-preview {
+    margin-top: @line-height-computed / 2;
+    .scroll-container {
+      background-color: white;
+      font-size: 0.8em;
+      line-height: 1.1em;
+      overflow: auto;
+      border: 1px solid @gray-lighter;
+      padding: 8px 12px;
+      text-align: left;
+      white-space: pre;
+      font-family: monospace;
+    }
+  }
+  .linked-file-icon {
+    color: @blue;
+  }
+}

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -0,0 +1,584 @@
+@versions-list-width: 320px;
+@history-toolbar-height: 40px;
+@history-change-list-padding: 16px;
+
+history-root {
+  height: 100%;
+  display: block;
+}
+
+// Adding !important to override the styling of overlays and popovers
+.history-popover {
+  top: 90px !important;
+  .arrow {
+    top: 20px !important;
+  }
+}
+
+.history-react {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  background-color: @history-main-bg;
+
+  .history-header {
+    height: @history-toolbar-height;
+    background-color: @history-react-header-bg;
+    color: @history-react-header-color;
+    font-size: @font-size-small;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .doc-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .toolbar-container {
+      border-bottom: 1px solid @history-react-separator-color;
+      padding: 0 8px;
+    }
+
+    .doc-container {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+    }
+  }
+
+  .doc-container .loading {
+    margin: 10rem auto auto;
+  }
+
+  .change-list {
+    display: flex;
+    flex-direction: column;
+    width: @versions-list-width;
+    font-size: @font-size-small;
+    border-left: 1px solid @history-react-separator-color;
+    box-sizing: content-box;
+  }
+
+  .toggle-switch-label {
+    flex: 1;
+
+    span {
+      display: block;
+    }
+  }
+
+  .history-version-list-container {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .history-all-versions-scroller {
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .history-all-versions-container {
+    position: relative;
+  }
+
+  .history-versions-bottom {
+    position: absolute;
+    height: 8em;
+    bottom: 0;
+  }
+
+  .history-toggle-switch-container,
+  .history-version-day,
+  .history-version-details {
+    padding: 0 @history-change-list-padding;
+  }
+
+  .history-version-day {
+    background-color: white;
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    display: block;
+    padding-top: 12px;
+    padding-bottom: 4px;
+    line-height: 20px;
+  }
+
+  .history-version-details {
+    display: flow-root;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    position: relative;
+
+    &.history-version-selectable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: @neutral-10;
+      }
+    }
+
+    &.history-version-selected {
+      background-color: @green-10;
+      border-left: 3px solid @green-50;
+      padding-left: @history-change-list-padding - 3px;
+    }
+
+    &.history-version-selected.history-version-selectable:hover {
+      background-color: fade(@green-70, 16%);
+      border-left: 3px solid @green-50;
+    }
+
+    &.history-version-within-selected {
+      background-color: @neutral-10;
+      border-left: 3px solid @green-50;
+    }
+
+    &.history-version-within-selected:hover {
+      background-color: fade(@neutral-90, 8%);
+    }
+  }
+
+  .version-element-within-selected {
+    background-color: @neutral-10;
+    border-left: 3px solid @green-50;
+  }
+
+  .version-element-selected {
+    background-color: @green-10;
+    border-left: 3px solid @green-50;
+  }
+
+  .history-version-metadata-time {
+    display: block;
+    margin-bottom: 4px;
+    color: @neutral-90;
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+
+  .history-version-metadata-users,
+  .history-version-changes {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .history-version-restore-file {
+    margin-bottom: 8px;
+  }
+
+  .history-version-metadata-users {
+    display: inline;
+
+    > li {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 8px;
+    }
+  }
+
+  .history-version-changes {
+    > li {
+      margin-bottom: 4px;
+    }
+  }
+
+  .history-version-user-badge-color {
+    @size: 8px;
+    display: inline-block;
+    width: @size;
+    height: @size;
+    margin-right: 4px;
+    border-radius: 2px;
+  }
+
+  .history-version-user-badge-text {
+    overflow-wrap: anywhere;
+    flex: 1;
+  }
+
+  .history-version-day,
+  .history-version-change-action,
+  .history-version-metadata-users,
+  .history-version-origin,
+  .history-version-saved-by {
+    color: @neutral-70;
+  }
+
+  .history-version-change-action {
+    overflow-wrap: anywhere;
+  }
+
+  .history-version-change-doc {
+    color: @neutral-90;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  .history-version-divider-container {
+    padding: 6px 8px;
+  }
+
+  .history-version-divider {
+    margin: 0px;
+    border-color: @neutral-20;
+  }
+
+  .history-version-badge {
+    margin-bottom: 4px;
+    margin-right: 10px;
+    height: unset;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .history-version-label {
+    margin-bottom: 4px;
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+
+  .loading {
+    font-family: @font-family-serif;
+  }
+
+  .history-all-versions-loading {
+    position: sticky;
+    bottom: 0;
+    padding: @line-height-computed / 2 0;
+    background-color: @gray-lightest;
+    text-align: center;
+  }
+
+  .history-version-saved-by {
+    &-label {
+      margin-right: 8px;
+    }
+  }
+
+  .dropdown.open {
+    .history-version-dropdown-menu-btn {
+      background-color: rgba(@neutral-90, 0.08);
+      box-shadow: initial;
+    }
+  }
+
+  .history-compare-btn,
+  .history-version-dropdown-menu-btn {
+    .reset-button;
+
+    @size: 30px;
+    padding: 0;
+    border-radius: @btn-border-radius-large;
+    width: @size;
+    height: @size;
+    line-height: 1;
+    font-size: @font-size-small;
+    color: @neutral-90;
+    background-color: transparent;
+
+    &:hover,
+    &:active {
+      z-index: initial;
+      background-color: rgba(@neutral-90, 0.08);
+      box-shadow: initial;
+    }
+  }
+
+  .history-loading-panel {
+    padding-top: 10rem;
+    font-family: @font-family-serif;
+    text-align: center;
+  }
+
+  .history-file-entity-operation-badge {
+    flex: 0 0 auto;
+    text-transform: lowercase;
+    margin-left: 0.5em;
+    font-size: 0.7em;
+    background: @history-file-badge-bg;
+    color: @history-file-badge-color;
+    border-radius: 8px;
+    line-height: 1;
+    padding: 2px 4px 3px;
+    margin-top: 2px;
+  }
+
+  .history-react-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .history-react-toolbar-file-info {
+      flex: 1;
+      text-align: right;
+    }
+
+    .history-react-toolbar-time {
+      font-weight: 700;
+    }
+  }
+
+  .history-paywall-prompt {
+    padding: @history-change-list-padding;
+
+    .history-feature-list {
+      list-style: none;
+      padding-left: 8px;
+
+      li {
+        margin-bottom: 16px;
+      }
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .history-version-faded .history-version-details {
+    max-height: 6em;
+    .mask-image(linear-gradient(black 35%, transparent));
+    overflow: hidden;
+  }
+
+  .history-paywall-heading {
+    .premium-text;
+    font-family: inherit;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .history-content {
+    padding: @line-height-computed / 2;
+  }
+}
+
+.history-version-label-tooltip {
+  padding: 6px;
+  text-align: initial;
+
+  &-row {
+    margin-bottom: 6.25px;
+
+    &-comment {
+      overflow-wrap: anywhere;
+    }
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+}
+
+.history-version-dropdown-menu {
+  [role='menuitem'] {
+    padding: 10px 12px;
+    color: @neutral-90;
+
+    &:hover,
+    &:focus {
+      color: @neutral-90;
+      background-color: @neutral-10;
+    }
+
+    span.material-symbols {
+      vertical-align: middle;
+      font-size: inherit;
+    }
+  }
+}
+
+.document-diff-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+
+  .cm-viewer-container,
+  .cm-editor {
+    height: 100%;
+  }
+
+  .previous-highlight-button,
+  .next-highlight-button {
+    position: absolute;
+    right: 16px;
+    box-shadow: @box-shadow;
+  }
+
+  .previous-highlight-button {
+    top: 16px;
+  }
+
+  .next-highlight-button {
+    bottom: 16px;
+  }
+}
+
+.history-dropdown-icon {
+  color: @neutral-90;
+}
+
+.history-dropdown-icon-inverted {
+  color: @neutral-10;
+  vertical-align: top;
+}
+.history-restore-promo-icon {
+  vertical-align: middle;
+}
+
+.history-file-tree {
+  display: flex !important; // To work around jQuery layout's inline styles
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: 100%;
+
+  ul.history-file-tree-list {
+    margin: 0;
+    overflow-x: hidden;
+    height: 100%;
+    flex-grow: 1;
+    position: relative;
+    overflow-y: auto;
+
+    .history-file-tree-item > ul,
+    ul[role='tree'] {
+      margin-left: 22px;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      min-height: @line-height-computed;
+    }
+
+    li {
+      line-height: @file-tree-line-height;
+      position: relative;
+      margin-left: 8px;
+
+      &:focus {
+        outline: none;
+      }
+
+      .history-file-tree-item {
+        color: @file-tree-item-color;
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+        display: flex;
+        align-items: center;
+
+        &:focus {
+          outline: none;
+        }
+
+        .fake-full-width-bg(transparent);
+        &:hover {
+          background-color: @file-tree-item-hover-bg;
+
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          .fake-full-width-bg(@file-tree-item-hover-bg);
+        }
+
+        .history-file-tree-folder-button,
+        .history-file-tree-item-button {
+          .reset-button;
+
+          &:focus {
+            outline: none;
+          }
+        }
+
+        .history-file-tree-item-name-wrapper {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          overflow: hidden;
+
+          .history-file-tree-item-name {
+            margin-right: @margin-xs;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+            font-weight: normal;
+            flex-grow: 1;
+            white-space: pre;
+
+            &.strikethrough {
+              text-decoration: line-through;
+            }
+          }
+
+          .history-file-tree-item-badge {
+            text-transform: capitalize;
+            font-weight: normal;
+            margin-right: @margin-sm;
+            flex-shrink: 0;
+
+            &:hover {
+              background-color: @neutral-20;
+            }
+          }
+        }
+      }
+
+      i.fa {
+        color: @file-tree-item-icon-color;
+        font-size: 14px;
+        display: inline-flex;
+        flex-shrink: 0;
+
+        &.file-tree-icon {
+          margin-right: 4px;
+          margin-left: 8px;
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: 4px;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: 8px;
+        }
+      }
+
+      i.fa-folder-open,
+      i.fa-folder {
+        color: @file-tree-item-folder-color;
+        font-size: 14px;
+      }
+    }
+
+    li.selected > .history-file-tree-item {
+      color: @file-tree-item-selected-color;
+      background-color: @file-tree-item-selected-bg;
+      font-weight: bold;
+
+      > div > i.fa,
+      > button > i.fa,
+      > i.fa {
+        color: @file-tree-item-selected-color;
+      }
+
+      .fake-full-width-bg(@file-tree-item-selected-bg);
+    }
+  }
+}
+
+.history-error {
+  padding: 16px;
+}

services/web/frontend/stylesheets/app/editor/history-v2.less

@@ -0,0 +1,404 @@
+.history-toolbar {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  top: @ide-body-top-offset;
+  height: @editor-toolbar-height;
+  line-height: 1;
+  font-size: @font-size-small;
+  background-color: @history-toolbar-bg-color;
+  color: @history-toolbar-color;
+  padding-left: (@line-height-computed / 2);
+}
+
+.history-compare-mode-toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  line-height: 1;
+  font-size: @font-size-small;
+  background-color: @history-toolbar-bg-color;
+  height: @editor-toolbar-height;
+  color: @history-toolbar-color;
+  padding: 0 10px;
+}
+
+.history-toolbar when (@is-overleaf-light) {
+  border-bottom: @toolbar-border-bottom;
+}
+
+.history-toolbar-selected-version {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: (@line-height-computed / 2);
+}
+.history-toolbar-time,
+.history-toolbar-selected-label {
+  font-weight: bold;
+}
+.history-toolbar-actions {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.history-toolbar-btn,
+.history-toolbar-btn-danger {
+  .btn;
+  .btn-xs;
+  padding-left: @padding-small-horizontal;
+  padding-right: @padding-small-horizontal;
+  margin-right: (@line-height-computed / 2);
+}
+.history-toolbar-btn {
+  .btn-info;
+}
+.history-toolbar-btn-danger {
+  .btn-danger;
+}
+.history-toolbar-entries-list {
+  flex: 0 0 @changesListWidth;
+  padding: 0 10px;
+  border-left: 1px solid @editor-border-color;
+  display: flex;
+  justify-content: center;
+}
+
+.history-entries {
+  font-size: @history-base-font-size;
+  color: @history-base-color;
+  height: 100%;
+  background-color: @history-base-bg;
+  position: relative;
+  &.history-entries-dragging {
+    cursor: row-resize;
+  }
+}
+
+.history-entry-day {
+  display: block;
+  background-color: @history-entry-day-bg;
+  color: @history-entry-day-color;
+  padding: 5px 10px;
+  line-height: 1;
+  position: sticky;
+  top: 0;
+}
+
+.history-entry-toV-handle,
+.history-entry-fromV-handle {
+  position: absolute;
+  background-color: @history-entry-handle-bg;
+  height: @history-entry-handle-height;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  cursor: row-resize;
+
+  &.ui-draggable-dragging {
+    opacity: 0;
+  }
+
+  &::after {
+    content: '\00b7\00b7\00b7\00b7';
+    position: absolute;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    width: 100%;
+    font-size: 20px;
+    color: #fff;
+    height: @history-entry-handle-height;
+    line-height: @history-entry-handle-height / 2;
+  }
+}
+
+.history-entry-fromV-handle {
+  top: auto;
+  bottom: 0;
+}
+
+.history-entry-details {
+  position: relative;
+  background-color: #fff;
+  border-bottom: solid 2px @history-base-bg;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.history-version-with-label {
+  .history-entry-details;
+  padding: 7px 10px;
+}
+
+.history-entry-selected .history-entry-details,
+.history-version-with-label-selected & {
+  background-color: @history-entry-selected-bg;
+  color: #fff;
+}
+
+.history-entry-hover-selected .history-entry-details,
+.history-entry-hover-selected.history-entry-selected .history-entry-details,
+.history-version-with-label-hover-selected &,
+.history-version-with-label-hover-selected.history-entry-selected & {
+  background-color: tint(@history-entry-selected-bg, 20%);
+  color: #fff;
+}
+
+.history-entry-selected-to .history-entry-details,
+.history-entry-hover-selected-to .history-entry-details,
+.history-version-with-label-selected-to &,
+.history-version-with-label-hover-selected-to & {
+  padding-top: @history-entry-handle-height + 5px;
+}
+
+.history-entry-selected-from .history-entry-details,
+.history-entry-hover-selected-from .history-entry-details,
+.history-version-with-label-selected-from &,
+.history-version-with-label-hover-selected-from & {
+  padding-bottom: @history-entry-handle-height + 5px;
+}
+
+.history-label {
+  display: inline-block;
+  color: @history-entry-label-color;
+  font-size: @font-size-small;
+  margin-bottom: 3px;
+  margin-right: 10px;
+  white-space: nowrap;
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected &,
+  .history-version-with-label-hover-selected & {
+    color: @history-entry-selected-label-color;
+  }
+  &.history-label-pseudo-current-state {
+    .history-entry-selected &,
+    .history-entry-hover-selected &,
+    .history-version-with-label-selected &,
+    .history-version-with-label-hover-selected & {
+      color: @history-entry-selected-pseudo-label-color;
+    }
+  }
+}
+.history-label-comment,
+.history-label-delete-btn {
+  padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
+  border: 0;
+  background-color: @history-entry-label-bg-color;
+  .history-label-pseudo-current-state & {
+    background-color: @history-entry-pseudo-label-bg-color;
+  }
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected &,
+  .history-version-with-label-hover-selected & {
+    background-color: @history-entry-selected-label-bg-color;
+  }
+}
+.history-label-comment {
+  display: block;
+  float: left;
+  border-radius: 9999px;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .history-label-own & {
+    padding-right: (@padding-xs-horizontal / 2);
+    border-radius: 9999px 0 0 9999px;
+  }
+}
+.history-label-delete-btn {
+  padding-left: (@padding-xs-horizontal / 2);
+  padding-right: @padding-xs-horizontal;
+  border-radius: 0 9999px 9999px 0;
+  &:hover {
+    background-color: darken(@history-entry-label-bg-color, 8%);
+    .history-entry-selected &,
+    .history-entry-hover-selected &,
+    .history-version-with-label-selected &,
+    .history-version-with-label-hover-selected & {
+      background-color: darken(@history-entry-selected-label-bg-color, 8%);
+    }
+  }
+}
+
+.history-label-tooltip {
+  white-space: normal;
+  padding: (@line-height-computed / 4);
+  text-align: left;
+}
+.history-label-tooltip-title,
+.history-label-tooltip-owner,
+.history-label-tooltip-datetime {
+  margin: 0 0 (@line-height-computed / 4) 0;
+}
+.history-label-tooltip-title {
+  font-weight: bold;
+}
+.history-label-tooltip-datetime {
+  margin-bottom: 0;
+}
+
+.history-entry-changes {
+  .list-unstyled;
+  margin-bottom: 3px;
+}
+.history-entry-change {
+  word-break: break-all;
+}
+.history-entry-change-action {
+  margin-right: 0.5em;
+}
+
+.history-entry-change-doc {
+  color: @history-highlight-color;
+  font-weight: bold;
+
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected & {
+    color: #fff;
+  }
+}
+.history-entry-metadata {
+}
+.history-entry-metadata-time {
+  white-space: nowrap;
+}
+
+.history-entry-metadata-users {
+  display: inline;
+  padding: 0;
+  margin-right: 0.5em;
+}
+.history-entry-metadata-user {
+  display: inline;
+  &::after {
+    content: ', ';
+  }
+  &:last-of-type::after {
+    content: none;
+  }
+}
+
+.history-entries-list-upgrade-prompt {
+  background-color: #fff;
+  margin-bottom: 2px;
+  padding: 5px 10px;
+  .change-list-compare & {
+    font-size: @font-size-small;
+  }
+}
+
+.history-labels-list,
+.history-labels-list-compare {
+  .history-entries;
+  overflow-y: auto;
+}
+.history-labels-list-compare {
+  background-color: transparent;
+}
+
+.history-file-tree-inner {
+  .full-size;
+  overflow-y: auto;
+  background-color: @file-tree-bg;
+
+  .loading {
+    color: #fff;
+    font-size: @history-base-font-size;
+    text-align: center;
+    font-family: @font-family-serif;
+  }
+}
+
+.tooltip-history-file-tree {
+  font-size: 12px;
+  .tooltip-inner {
+    max-width: 400px;
+    text-align: left;
+  }
+}
+
+.history-file-entity-wrapper {
+  color: #fff;
+  margin-left: (@line-height-computed / 2);
+}
+.history-file-entity-link {
+  display: block;
+  position: relative;
+  color: @file-tree-item-color;
+  line-height: @file-tree-line-height;
+  &:hover {
+    .fake-full-width-bg(@file-tree-item-hover-bg);
+    background-color: @file-tree-item-hover-bg;
+    color: @file-tree-item-color;
+    text-decoration: none;
+  }
+  &:focus {
+    color: @file-tree-item-focus-color;
+    outline: none;
+    text-decoration: none;
+  }
+}
+.history-file-entity-link-selected {
+  background-color: @file-tree-item-selected-bg;
+  font-weight: bold;
+  color: #fff;
+  .fake-full-width-bg(@file-tree-item-selected-bg);
+  &:hover,
+  &:focus {
+    background-color: @file-tree-item-selected-bg;
+    .fake-full-width-bg(@file-tree-item-selected-bg);
+    color: #fff;
+    pointer-events: none;
+  }
+}
+.history-file-entity-name-container {
+  display: flex;
+  align-items: center;
+}
+.history-file-entity-name {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.history-file-entity-operation-badge {
+  flex: 0 0 auto;
+  text-transform: lowercase;
+  margin-left: 0.5em;
+  font-size: 0.7em;
+  background: @history-file-badge-bg;
+  color: @history-file-badge-color;
+  border-radius: 8px;
+  line-height: 1;
+  padding: 2px 4px 3px;
+  margin-top: 2px;
+}
+
+.history-file-entity-icon,
+.history-file-operation-icon {
+  flex: 0 0 auto;
+  color: @file-tree-item-icon-color;
+  font-size: 14px;
+  margin-right: 0.5em;
+  .history-file-entity-link-selected & {
+    color: #fff;
+  }
+}
+
+.history-file-operation-icon {
+  margin-left: 0.5em;
+  margin-right: 0;
+}
+.history-file-entity-name-edited,
+.history-file-entity-name-added,
+.history-file-entity-name-removed,
+.history-file-entity-name-renamed {
+}
+.history-file-entity-name-removed {
+  text-decoration: line-through;
+}

services/web/frontend/stylesheets/app/editor/history.less

@@ -0,0 +1,344 @@
+@changesListWidth: 250px;
+@changesListPadding: @line-height-computed / 2;
+
+@selector-padding-vertical: 10px;
+@selector-padding-horizontal: @line-height-computed / 2;
+@day-header-height: 24px;
+
+@range-bar-color: @link-color;
+@range-bar-selected-offset: 14px;
+
+@history-toolbar-height: 32px;
+
+#history {
+  .upgrade-prompt {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: rgba(128, 128, 128, 0.4);
+    .message {
+      margin: auto;
+      margin-top: 100px;
+      padding: (@line-height-computed / 2) @line-height-computed;
+      width: 400px;
+      background-color: white;
+      border-radius: 8px;
+    }
+    .message-wider {
+      width: 650px;
+      margin-top: 60px;
+      padding: 0;
+    }
+
+    .message-header {
+      .modal-header;
+    }
+
+    .message-body {
+      .modal-body;
+    }
+  }
+
+  .diff-panel,
+  .point-in-time-panel {
+    .full-size;
+    margin-right: @changesListWidth;
+  }
+
+  .diff {
+    .full-size;
+    .toolbar {
+      padding: 3px;
+      height: @history-toolbar-height;
+      .name {
+        color: #fff;
+        float: left;
+        padding: 3px @line-height-computed / 4;
+        display: inline-block;
+      }
+    }
+    .diff-editor-v2 {
+      .full-size;
+    }
+    .diff-editor {
+      .full-size;
+      top: @history-toolbar-height;
+    }
+    .diff-deleted {
+      padding: @line-height-computed;
+    }
+    .deleted-warning {
+      background-color: @brand-danger;
+      color: white;
+      padding: @line-height-computed / 2;
+      margin-right: @line-height-computed / 4;
+    }
+    &-binary {
+      .alert {
+        margin: @line-height-computed / 2;
+      }
+    }
+  }
+
+  aside.change-list {
+    border-left: 1px solid @editor-border-color;
+    height: 100%;
+    width: @changesListWidth;
+    position: absolute;
+    right: 0;
+
+    .loading {
+      text-align: center;
+      font-family: @font-family-serif;
+      margin-top: (@line-height-computed / 2);
+    }
+
+    ul {
+      li.change {
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+
+        .day {
+          background-color: #fafafa;
+          border-bottom: 1px solid @editor-border-color;
+          padding: 4px;
+          font-weight: bold;
+          text-align: center;
+          height: @day-header-height;
+          font-size: 14px;
+          line-height: 1;
+        }
+        .selectors {
+          input {
+            margin: 0;
+          }
+          position: absolute;
+          left: @selector-padding-horizontal;
+          top: 0;
+          bottom: 0;
+          width: 24px;
+          .selector-from {
+            position: absolute;
+            bottom: @selector-padding-vertical;
+            left: 0;
+            opacity: 0.8;
+          }
+          .selector-to {
+            position: absolute;
+            top: @selector-padding-vertical;
+            left: 0;
+            opacity: 0.8;
+          }
+          .range {
+            position: absolute;
+            left: 5px;
+            width: 4px;
+            top: 0;
+            bottom: 0;
+          }
+        }
+        .description {
+          padding: (@line-height-computed / 4);
+          padding-left: 38px;
+          min-height: 38px;
+          border-bottom: 1px solid @editor-border-color;
+          cursor: pointer;
+          &:hover {
+            background-color: @gray-lightest;
+          }
+        }
+        .users {
+          .user {
+            font-size: 0.8rem;
+            color: @gray;
+            text-transform: capitalize;
+            position: relative;
+            padding-left: 16px;
+            .color-square {
+              height: 12px;
+              width: 12px;
+              border-radius: 3px;
+              position: absolute;
+              left: 0;
+              bottom: 3px;
+            }
+            .name {
+              width: 94%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .time {
+          float: right;
+          color: @gray;
+          display: inline-block;
+          padding-right: (@line-height-computed / 2);
+          font-size: 0.8rem;
+          line-height: @line-height-computed;
+        }
+        .doc {
+          font-size: 0.9rem;
+          font-weight: bold;
+        }
+        .action {
+          color: @gray;
+          text-transform: uppercase;
+          font-size: 0.7em;
+          margin-bottom: -2px;
+          margin-top: 2px;
+          &-edited {
+            margin-top: 0;
+          }
+        }
+      }
+      li.loading-changes,
+      li.empty-message {
+        padding: 6px;
+        cursor: default;
+        &:hover {
+          background-color: inherit;
+        }
+      }
+      li.selected {
+        border-left: 4px solid @range-bar-color;
+        .day {
+          padding-left: 0;
+        }
+        .description {
+          padding-left: 34px;
+        }
+        .selectors {
+          left: @selector-padding-horizontal - 4px;
+          .range {
+            background-color: @range-bar-color;
+          }
+        }
+      }
+      li.selected-to {
+        .selectors {
+          .range {
+            top: @range-bar-selected-offset;
+          }
+          .selector-to {
+            opacity: 1;
+          }
+        }
+      }
+      li.selected-from {
+        .selectors {
+          .range {
+            bottom: @range-bar-selected-offset;
+          }
+          .selector-from {
+            opacity: 1;
+          }
+        }
+      }
+      li.first-in-day {
+        .selectors {
+          .selector-to {
+            top: @day-header-height + @selector-padding-vertical;
+          }
+        }
+      }
+      li.first-in-day.selected-to {
+        .selectors {
+          .range {
+            top: @day-header-height + @range-bar-selected-offset;
+          }
+        }
+      }
+    }
+    ul.hover-state {
+      li {
+        .selectors {
+          .range {
+            background-color: transparent;
+            top: 0;
+            bottom: 0;
+          }
+        }
+      }
+      li.hover-selected {
+        .selectors {
+          .range {
+            top: 0;
+            background-color: @gray-light;
+          }
+        }
+      }
+      li.hover-selected-to {
+        .selectors {
+          .range {
+            top: @range-bar-selected-offset;
+          }
+          .selector-to {
+            opacity: 1;
+          }
+        }
+      }
+      li.hover-selected-from {
+        .selectors {
+          .range {
+            bottom: @range-bar-selected-offset;
+          }
+          .selector-from {
+            opacity: 1;
+          }
+        }
+      }
+      li.first-in-day.hover-selected-to {
+        .selectors {
+          .range {
+            top: @day-header-height + @range-bar-selected-offset;
+          }
+        }
+      }
+    }
+  }
+}
+
+.diff-deleted {
+  padding-top: 15px;
+}
+
+.hide-ace-cursor {
+  .ace_active-line,
+  .ace_cursor-layer,
+  .ace_bracket {
+    display: none;
+  }
+
+  .ace_gutter-active-line {
+    background-color: transparent;
+  }
+}
+
+.editor-dark {
+  #history {
+    aside.change-list {
+      border-color: @editor-dark-toolbar-border-color;
+
+      ul li.change {
+        .day {
+          background-color: darken(@editor-dark-background-color, 10%);
+          border-bottom: 1px solid @editor-dark-toolbar-border-color;
+        }
+        .description {
+          border-bottom: 1px solid @editor-dark-toolbar-border-color;
+          &:hover {
+            background-color: black;
+          }
+        }
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/app/editor/hotkeys.less

@@ -0,0 +1,31 @@
+.hotkeys-modal {
+  font-size: 14px;
+
+  h3:first-child {
+    margin-top: 0;
+  }
+
+  .hotkey {
+    margin-bottom: @line-height-computed / 2;
+  }
+
+  .description {
+    display: inline-block;
+  }
+
+  .combination {
+    padding: 4px 8px;
+    border-radius: 3px;
+    background-color: @gray-dark;
+    color: white;
+    font-family: @font-family-sans-serif;
+    font-weight: 600;
+    margin-right: @line-height-computed / 4;
+  }
+
+  .hotkeys-modal-bottom-text {
+    background-color: @ol-blue-gray-0;
+    padding: @padding-sm;
+    border-radius: 5px;
+  }
+}

services/web/frontend/stylesheets/app/editor/ide-react.less

@@ -0,0 +1,180 @@
+#ide-root {
+  height: 100vh; /* for backwards compatibility */
+  height: 100dvh; /* needed for mobile devices */
+
+  .global-alerts {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .chat {
+    position: relative;
+    height: 100%;
+  }
+
+  .review-panel-wrapper {
+    &.rp-state-overview {
+      position: sticky;
+      top: 0;
+      height: 100%;
+    }
+  }
+}
+
+.ide-react-main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .toolbar.toolbar-header {
+    position: static;
+    flex-grow: 0;
+    color: var(--neutral-20);
+  }
+}
+
+.ide-react-body {
+  flex-grow: 1;
+  background-color: @pdf-bg;
+  overflow-y: hidden;
+  z-index: 0;
+}
+
+.horizontal-resize-handle {
+  width: @ui-resizer-size !important;
+  height: 100%;
+
+  // Enable ::before and ::after pseudo-elements to position themselves correctly
+  position: relative;
+  background-color: @editor-resizer-bg-color;
+
+  .custom-toggler {
+    padding: 0;
+    border-width: 0;
+
+    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+    cursor: pointer !important;
+  }
+
+  &.horizontal-resize-handle-enabled {
+    &::before,
+    &::after {
+      // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+      // we'd have to change this SVG too
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+      display: block;
+      position: absolute;
+      text-align: center;
+      left: 0;
+      width: 7px;
+      height: 18px;
+    }
+
+    &::before {
+      top: 25%;
+    }
+
+    &::after {
+      top: 75%;
+    }
+  }
+
+  &:not(.horizontal-resize-handle-enabled) {
+    cursor: default;
+  }
+
+  .synctex-controls {
+    left: -8px;
+    margin: 0;
+
+    // Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
+    z-index: 12;
+
+    & .synctex-control .synctex-control-icon {
+      // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+      cursor: pointer !important;
+    }
+  }
+}
+
+.vertical-resize-handle {
+  height: 6px;
+  background-color: @vertical-resizable-resizer-bg;
+
+  &.vertical-resize-handle-enabled {
+    &:hover {
+      background-color: @vertical-resizable-resizer-hover-bg;
+    }
+  }
+
+  &:not(.vertical-resize-handle-enabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  &::after {
+    // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+    // we'd have to change this SVG too
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+    display: block;
+    text-align: center;
+    line-height: 0;
+  }
+}
+
+.ide-react-editor-sidebar {
+  height: 100%;
+  background-color: @file-tree-bg;
+  color: var(--neutral-20);
+  position: relative;
+}
+
+.ide-react-symbol-palette {
+  height: 100%;
+  background-color: @symbol-palette-bg;
+  color: var(--neutral-20);
+}
+
+.ide-react-file-tree-panel {
+  display: flex;
+  flex-direction: column;
+
+  // Prevent the file tree expanding beyond the boundary of the panel
+  .file-tree {
+    width: 100%;
+  }
+}
+
+.ide-react-editor-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+// Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
+.ide-react-panel {
+  position: relative;
+  container-type: size;
+}
+
+// Styles for placeholder elements that will eventually be replaced
+// Unused, not migrated to SCSS
+.ide-react-placeholder-chat {
+  background-color: var(--editor-toolbar-bg);
+  color: var(--neutral-20);
+  height: 100%;
+}
+
+.ide-panel-group-resizing {
+  background-color: white;
+
+  // Hide panel contents while resizing
+  .ide-react-editor-content,
+  .pdf {
+    display: none !important;
+  }
+}

services/web/frontend/stylesheets/app/editor/left-menu.less

@@ -0,0 +1,238 @@
+#left-menu {
+  position: absolute;
+  width: @left-menu-width;
+  padding: (@line-height-computed / 2);
+  top: 0;
+  bottom: 0;
+  background-color: #f4f4f4;
+  z-index: 100;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-transition: left ease-in-out @left-menu-animation-duration;
+  transition: left ease-in-out @left-menu-animation-duration;
+  font-size: 14px;
+  left: -@left-menu-width;
+
+  &.shown {
+    left: 0;
+  }
+
+  h4 {
+    font-family: @font-family-sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+    margin: (@line-height-computed / 2) 0;
+    padding-bottom: (@line-height-computed / 4);
+    color: @neutral-70;
+    border-bottom: 1px solid @gray-lighter;
+  }
+
+  > h4:first-child {
+    margin-top: 0;
+  }
+
+  ul.nav {
+    .left-menu-button {
+      cursor: pointer;
+      padding: (@line-height-computed / 4);
+      font-weight: 700;
+      color: @link-color;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      background-color: inherit;
+      border: none;
+
+      i {
+        margin-right: @margin-sm;
+        color: @gray;
+      }
+
+      &:hover,
+      &:active {
+        background-color: @link-color;
+        color: white;
+
+        i {
+          color: white;
+        }
+      }
+    }
+
+    a {
+      cursor: pointer;
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: @link-color;
+        color: white;
+        i {
+          color: white;
+        }
+      }
+      i {
+        color: @gray;
+      }
+      padding: (@line-height-computed / 4);
+      font-weight: 700;
+    }
+    .link-disabled {
+      color: @gray-light;
+    }
+  }
+
+  > ul.nav:last-child {
+    margin-bottom: @line-height-computed / 2;
+  }
+
+  ul.nav-downloads {
+    li {
+      display: inline-block;
+      text-align: center;
+      width: 100px;
+      a {
+        color: @gray-dark;
+      }
+      i {
+        margin: (@line-height-computed / 4) 0;
+      }
+    }
+  }
+
+  form.settings {
+    label {
+      font-weight: normal;
+      color: @gray-dark;
+      flex: 1 0 50%;
+      margin-bottom: 0;
+      margin-top: 9px;
+      padding-right: 5px;
+      white-space: nowrap;
+    }
+    button,
+    select {
+      width: 50%;
+      margin: 9px 0;
+    }
+    .form-controls {
+      clear: both;
+      padding: 0 9px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      justify-content: flex-end;
+      border-bottom: solid 1px rgba(0, 0, 0, 0.07);
+      &:first-child {
+        margin-top: -9px;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+      &:hover {
+        background-color: @link-color;
+        // select.form-control {
+        // 	color: white;
+        // }
+        label,
+        i.fa {
+          color: white;
+        }
+      }
+      &:after {
+        content: '';
+        display: table;
+        clear: both;
+      }
+    }
+  }
+
+  .left-menu-setting-position {
+    position: relative;
+
+    .left-menu-setting {
+      margin-top: 0 !important;
+    }
+
+    .left-menu-setting-icon {
+      position: absolute;
+      right: 65%;
+      top: 25%;
+    }
+  }
+
+  .left-menu-setting {
+    padding: 0 9px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: flex-end;
+    border-bottom: solid 1px rgba(0, 0, 0, 0.07);
+    margin-bottom: 0;
+
+    &:first-child {
+      margin-top: -9px;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: @link-color;
+
+      label {
+        color: @white;
+      }
+    }
+
+    select.form-control {
+      height: 23px;
+      padding: 1px @padding-xs;
+      font-size: inherit;
+
+      &:hover {
+        background-color: @ol-blue-gray-1;
+      }
+    }
+  }
+}
+
+#left-menu-mask {
+  .full-size;
+  opacity: 0.4;
+  background-color: #999;
+  z-index: 99;
+  transition: opacity 0.5s;
+}
+
+// Make the Bootstrap Modal behavior as a left sidebar
+#left-menu-modal {
+  opacity: 1;
+  overflow-y: hidden;
+  padding-left: 0 !important; // bootstrap modal may randomly give padding-left when zooming in / out in chrome
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    width: @left-menu-width;
+  }
+
+  .modal-content {
+    position: initial;
+  }
+  &.modal.fade .modal-dialog {
+    left: -@left-menu-width;
+    transition: left ease-in-out @left-menu-animation-duration;
+    -webkit-transition: left ease-in-out @left-menu-animation-duration;
+    transform: translate(0, 0);
+  }
+  &.modal.in .modal-dialog {
+    left: 0;
+    transform: translate(0, 0);
+  }
+}
+// Don't disable backdrop that allows closing the Modal when clicking outside of it,
+// But match its background color with the original mask background color.
+.left-menu-modal-backdrop {
+  background-color: transparent;
+}

services/web/frontend/stylesheets/app/editor/logs.less

@@ -0,0 +1,193 @@
+.logs-pane {
+  .full-size;
+  top: @pdf-top-offset;
+  overflow-y: auto;
+  background-color: @logs-pane-bg;
+  z-index: 11; // above the PDF viewer + controls
+}
+
+.logs-pane-content {
+  display: flex;
+  flex-direction: column;
+  padding: @padding-sm;
+  min-height: 100%;
+}
+
+.logs-pane-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: @padding-sm 0;
+  flex-grow: 1;
+  align-items: flex-end;
+}
+
+.logs-pane-actions-clear-cache {
+  .no-outline-ring-on-click;
+  margin-right: @margin-sm;
+}
+
+.log-entry {
+  margin-bottom: @margin-sm;
+  border-radius: @border-radius-base;
+  overflow: hidden;
+}
+
+.log-entry-header {
+  padding: 3px @padding-sm;
+  display: flex;
+  align-items: flex-start;
+  border-radius: @border-radius-base @border-radius-base 0 0;
+  color: #fff;
+}
+
+.log-entry-header-error {
+  background-color: @ol-red;
+}
+
+.log-entry-header-link-error {
+  .btn-alert-variant(@ol-red);
+}
+
+.log-entry-header-warning {
+  background-color: @orange;
+}
+
+.log-entry-header-link-warning {
+  .btn-alert-variant(@orange);
+}
+
+.log-entry-header-typesetting {
+  background-color: @ol-blue;
+}
+
+.log-entry-header-link-typesetting {
+  .btn-alert-variant(@ol-blue);
+}
+
+.log-entry-header-raw,
+.log-entry-header-info {
+  background-color: @ol-blue-gray-4;
+}
+
+.log-entry-header-link-raw,
+.log-entry-header-link-info {
+  .btn-alert-variant(@ol-blue-gray-4);
+}
+
+.log-entry-header-success {
+  background-color: @green;
+}
+
+.log-entry-header-link-success {
+  .btn-alert-variant(@green);
+}
+
+.log-entry-header-title,
+.log-entry-header-link {
+  font-family: @font-family-sans-serif;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  font-weight: 700;
+  flex-grow: 1;
+  margin: 0;
+  color: #fff;
+}
+
+.log-entry-header-icon-container {
+  margin-right: @margin-sm;
+}
+
+.log-entry-header-link {
+  display: flex;
+  align-items: center;
+  border-radius: 9999px;
+  border-width: 0;
+  flex-grow: 0;
+  text-align: right;
+  margin-left: @margin-sm;
+  max-width: 33%;
+  padding: 0 @padding-xs;
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    outline: 0;
+    color: #fff;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+.log-entry-header-link-location {
+  white-space: nowrap;
+  direction: rtl;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0 @padding-xs;
+}
+
+.log-entry-content {
+  &:empty {
+    display: none;
+  }
+
+  background-color: #fff;
+  padding: @padding-sm;
+}
+
+.log-entry-content-raw-container {
+  background-color: @ol-blue-gray-1;
+  border-radius: @border-radius-base;
+  overflow: hidden;
+  margin-top: @margin-sm;
+}
+
+.log-entry-content-raw {
+  font-size: @font-size-extra-small;
+  color: @ol-blue-gray-4;
+  padding: @padding-sm;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.log-entry-content-button-container {
+  position: relative;
+  height: 40px;
+  margin-top: 0;
+  transition:
+    margin 0.15s ease-in-out,
+    opacity 0.15s ease-in-out;
+  padding-bottom: @padding-sm;
+  text-align: center;
+  background-image: linear-gradient(0, @ol-blue-gray-1, transparent);
+  border-radius: 0 0 @border-radius-base @border-radius-base;
+}
+.log-entry-content-button-container-collapsed {
+  margin-top: -40px;
+}
+
+.log-entry-btn-expand-collapse {
+  position: relative;
+  z-index: 1;
+  .no-outline-ring-on-click;
+}
+
+.log-entry-formatted-content,
+.log-entry-content-link {
+  font-size: @font-size-small;
+  margin-top: @margin-xs;
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.log-location-tooltip {
+  word-break: break-all;
+  &.tooltip.in {
+    opacity: 1;
+  }
+  & > .tooltip-inner {
+    max-width: 450px;
+    text-align: left;
+  }
+}

services/web/frontend/stylesheets/app/editor/math-preview.less

@@ -0,0 +1,77 @@
+.ol-cm-math-tooltip-container {
+  position: relative;
+  overflow: visible;
+  border: 0px !important;
+  background-color: transparent !important;
+}
+
+.ol-cm-math-tooltip {
+  display: flex;
+  gap: 8px;
+  overflow: auto;
+  padding: 8px;
+  border-radius: 4px;
+  max-height: 200px;
+  max-width: 800px;
+  margin-top: 10px;
+
+  .dropdown {
+    position: static;
+  }
+}
+
+.math-tooltip-options-toggle {
+  border: none;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  background-color: transparent;
+  color: black !important;
+
+  &:focus {
+    background-color: transparent;
+  }
+
+  &:hover,
+  &:active {
+    background-color: @neutral-20;
+  }
+}
+
+.math-preview-tooltip-menu {
+  top: 28px;
+  right: 8px;
+}
+
+.dropdown-menu {
+  .math-preview-tooltip-option {
+    a {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+
+    div {
+      padding: 0;
+    }
+  }
+}
+
+.math-preview-tooltip-option-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.math-preview-tooltip-option-label {
+  color: @content-primary;
+}
+
+.math-preview-tooltip-option-description {
+  color: @content-secondary;
+  font-size: 12px;
+}
+
+.math-preview-tooltip-option-shortcut {
+  color: @content-secondary;
+}

services/web/frontend/stylesheets/app/editor/online-users.less

@@ -0,0 +1,45 @@
+.online-users {
+  display: flex;
+
+  .online-user {
+    width: 24px;
+    display: inline-block;
+    height: 24px;
+    margin-right: 8px;
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  .online-user-multi {
+    .reset-button;
+
+    color: @toolbar-btn-color;
+    width: auto;
+    min-width: 24px;
+    padding-left: 8px;
+    padding-right: 5px;
+    display: flex;
+    align-items: center;
+  }
+
+  .dropdown-menu {
+    margin-right: 8px;
+    a {
+      // Override toolbar link styles
+      display: block;
+      padding: 4px 10px 5px;
+      margin: 1px 2px;
+      color: @text-color;
+      &:hover,
+      &:active {
+        color: @text-color!important;
+        background-color: @gray-lightest;
+        text-shadow: none;
+        .box-shadow(none);
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/app/editor/outline.less

@@ -0,0 +1,192 @@
+.outline-container {
+  width: 100%;
+  height: 100%;
+  background-color: @file-tree-bg;
+}
+
+.outline-pane {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  font-size: @font-size-small;
+  color: @file-tree-item-color;
+}
+
+.outline-pane-disabled {
+  opacity: 0.5;
+}
+
+.documentation-btn-container {
+  .toolbar-small-mixin;
+  .toolbar-alt-mixin;
+  display: flex;
+  align-items: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  & *,
+  & :hover {
+    color: @white;
+    text-decoration: none;
+  }
+  &:hover {
+    background-color: @outline-header-hover-bg;
+  }
+}
+
+.documentation-close {
+  padding: 0;
+}
+
+.outline-header {
+  .toolbar-small-mixin;
+  .toolbar-alt-mixin;
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid @toolbar-border-color;
+  border-top: 1px solid @toolbar-border-color;
+}
+
+.outline-header-expand-collapse-btn {
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  padding: 0 (@outline-h-rhythm * 0.25) 0 0;
+  font-size: inherit;
+  vertical-align: inherit;
+  color: @file-tree-item-color;
+  flex: 1 0 100%;
+  text-align: left;
+  white-space: nowrap;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    background-color: @outline-header-hover-bg;
+  }
+  &:hover[disabled] {
+    background-color: transparent;
+  }
+}
+
+.outline-header-name {
+  display: inline-block;
+  font-family: @font-family-sans-serif;
+  font-size: @font-size-small;
+  color: @file-tree-item-color;
+  font-weight: 700;
+  margin: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.outline-body {
+  overflow-y: auto;
+  background-color: @file-tree-bg;
+  padding-right: @outline-h-rhythm * 0.25;
+}
+
+.outline-body-no-elements {
+  color: @outline-no-items-color;
+  text-align: center;
+  padding: @outline-v-rhythm @outline-h-rhythm (@outline-v-rhythm * 2);
+  margin-right: -(@outline-h-rhythm * 0.25);
+}
+
+.outline-body-link {
+  display: block;
+  color: @file-tree-item-color;
+  text-decoration: underline;
+  &:hover,
+  &:focus {
+    color: @file-tree-item-color;
+    text-decoration: underline;
+  }
+}
+
+.outline-item-list {
+  position: relative;
+  list-style: none;
+  padding-left: @outline-h-rhythm;
+
+  &::before {
+    content: '';
+    background-color: @outline-line-guide-color;
+    top: @outline-h-rhythm / 4;
+    bottom: @outline-h-rhythm / 4;
+    width: 1px;
+    left: (@outline-h-rhythm * 1.5);
+    position: absolute;
+  }
+
+  &.outline-item-list-root {
+    padding-left: 0;
+    &::before {
+      left: (@outline-h-rhythm * 0.5);
+    }
+  }
+}
+
+.outline-item-no-children {
+  padding-left: @outline-h-rhythm - @outline-item-h-padding;
+}
+
+.outline-item-row {
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.outline-item-expand-collapse-btn {
+  display: inline;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  vertical-align: inherit;
+  position: relative;
+  z-index: 1;
+  background-color: @file-tree-bg;
+  color: @outline-expand-collapse-color;
+  margin-right: -(@outline-item-h-padding);
+  border-radius: @border-radius-base;
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    background-color: @file-tree-item-hover-bg;
+  }
+}
+
+.outline-item-link {
+  display: inline;
+  color: @file-tree-item-color;
+  background-color: transparent;
+  border: 0;
+  position: relative;
+  z-index: 1;
+  padding: 0 @outline-item-h-padding;
+  line-height: @outline-v-rhythm;
+  border-radius: @border-radius-base;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  &:hover,
+  &:focus {
+    outline: 0;
+    background-color: @file-tree-item-hover-bg;
+  }
+}
+
+.outline-item-link-highlight {
+  background-color: @outline-highlight-bg;
+}
+
+.outline-caret-icon {
+  width: @outline-h-rhythm;
+  font-size: 17px;
+  text-align: center;
+}

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -0,0 +1,554 @@
+.pdf .toolbar.toolbar-pdf {
+  .toolbar-small-mixin;
+  .toolbar-alt-mixin;
+  padding-right: 5px;
+  margin-left: 0;
+  .auto-compile-status {
+    color: white;
+    margin-right: (@line-height-computed / 2);
+    i {
+      color: @brand-danger;
+    }
+  }
+  .auto-compile-status when (@is-overleaf-light = true) {
+    color: @ol-blue-gray-3;
+  }
+}
+
+.toolbar-pdf-orphan,
+.toolbar-pdf-left,
+.toolbar-pdf-right,
+.toolbar-pdf-controls {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+
+.toolbar-pdf-orphan,
+.toolbar-pdf-controls {
+  flex: 1 1 100%;
+}
+
+.toolbar-pdf-controls {
+  margin-right: 4px;
+  justify-content: flex-end;
+}
+
+.toolbar-pdf-right {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.toolbar-pdf-orphan {
+  justify-content: center;
+  color: @toolbar-btn-color;
+  .btn {
+    margin-left: @margin-xs;
+  }
+}
+
+.btn-toggle-logs {
+  &:focus,
+  &:active:focus {
+    outline: none;
+  }
+}
+
+.pdf-toolbar-btn {
+  display: inline-block;
+  color: @toolbar-btn-color;
+  background-color: transparent;
+  padding: 4px 2px;
+  line-height: 1;
+  height: 24px;
+  border-radius: @border-radius-base;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: @toolbar-btn-color;
+  }
+
+  &:hover {
+    &:not(:disabled) {
+      background-color: @pdf-toolbar-btn-hover-color;
+    }
+  }
+
+  .label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.15em 0.6em 0.2em;
+    font-size: 60%;
+    pointer-events: none;
+  }
+
+  &.log-btn {
+    border: none;
+    margin-right: 3px;
+
+    &.active {
+      color: white;
+      background-color: @link-color;
+      box-shadow: @toolbar-icon-btn-hover-boxshadow;
+      opacity: 0.65;
+
+      &:hover {
+        &:not(:disabled) {
+          background-color: transparent;
+          color: @toolbar-btn-color;
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.pdf {
+  background-color: @pdf-bg;
+}
+
+.pdf-viewer,
+.pdf-errors,
+.pdf-uncompiled {
+  .full-size;
+  top: @pdf-top-offset;
+}
+
+.pdf-errors,
+.pdf-uncompiled,
+.pdf-validation-problems {
+  padding: @line-height-computed / 2;
+}
+
+.pdf-uncompiled {
+  .fa {
+    color: @blue;
+  }
+}
+
+.toolbar-text {
+  padding-left: @padding-xs;
+}
+
+.pdf-viewer {
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+  .pdfjs-viewer {
+    .full-size;
+    background-color: @pdfjs-bg;
+    overflow: scroll;
+    .canvasWrapper > canvas,
+    div.pdf-canvas {
+      background: white;
+      box-shadow: @pdf-page-shadow-color 0px 0px 10px;
+    }
+    div.pdf-canvas.pdfng-empty {
+      background-color: white;
+    }
+    div.pdf-canvas.pdfng-loading {
+      background-color: white;
+    }
+    .page-container {
+      margin: 10px auto;
+      padding: 0 10px;
+      box-sizing: content-box;
+      user-select: none;
+    }
+    .page {
+      box-sizing: content-box;
+      margin-left: auto;
+      margin-right: auto;
+      box-shadow: 0 0 8px #bbb;
+      border: none;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+    .pdfjs-viewer-inner {
+      position: absolute;
+      overflow-y: scroll;
+      width: 100%;
+      height: 100%;
+      -webkit-font-smoothing: initial;
+      -moz-osx-font-smoothing: initial;
+      /* fix review-panel overflow issue, see: https://github.com/overleaf/internal/issues/6781#issuecomment-1112708638 */
+      .pdfViewer {
+        min-height: 100%;
+      }
+    }
+    &:focus-within {
+      outline: none;
+    }
+    /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
+    .textLayer br::selection {
+      background: transparent;
+    }
+  }
+  .progress-thin {
+    position: absolute;
+    top: -2px;
+    height: 3px;
+    left: 0;
+    right: 0;
+    .progress-bar {
+      height: 100%;
+      background-color: @link-color;
+    }
+  }
+}
+
+.pdfjs-viewer-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.pdfjs-zoom-controls {
+  border-left: 1px solid rgba(125, 125, 125, 0.3);
+}
+
+.pdfjs-toolbar-buttons {
+  display: flex;
+  gap: 8px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.pdfjs-toolbar-button {
+  padding: 2px !important;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: @toolbar-btn-color;
+  }
+}
+
+.pdfjs-zoom-dropdown-button {
+  width: 60px;
+  text-align: right;
+  font-size: 14px;
+  font-weight: normal;
+
+  .caret {
+    margin-left: 4px;
+  }
+}
+
+.pdfjs-zoom-dropdown-mac-shortcut-char {
+  display: inline-block;
+  width: 1em;
+  text-align: center;
+}
+
+.pdfjs-custom-zoom-menu-item {
+  a:hover {
+    background-color: initial !important;
+    color: initial !important;
+    cursor: initial !important;
+  }
+
+  &.disabled {
+    a {
+      color: initial !important;
+    }
+  }
+}
+
+.pdfjs-page-number-input {
+  color: @toolbar-btn-color;
+  font-size: 14px;
+  padding: 8px 8px 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  input {
+    color: initial;
+    border: 1px solid @neutral-60;
+    width: 32px;
+    height: 24px;
+    border-radius: @border-radius-base;
+    text-align: center;
+  }
+}
+
+.pdfjs-viewer-controls-small {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pdfjs-toolbar-popover-button {
+  padding: 2px !important;
+  display: flex;
+  align-items: center;
+}
+
+.pdfjs-toolbar-popover {
+  background-color: @editor-toolbar-bg;
+  border-radius: 4px;
+
+  .arrow {
+    display: none;
+  }
+
+  button {
+    background-color: transparent;
+    color: @toolbar-btn-color;
+  }
+
+  .popover-content {
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+}
+
+// The new viewer UI has overflow on the inner element,
+// so disable the overflow on the outer element
+.pdf-viewer .pdfjs-viewer.pdfjs-viewer-outer {
+  overflow: hidden;
+}
+
+:fullscreen {
+  .pdfViewer {
+    min-height: auto !important;
+  }
+
+  .pdfjs-viewer-inner {
+    overflow-y: hidden !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.synctex-controls {
+  margin-right: -8px;
+  position: absolute;
+  z-index: @synctex-controls-z-index;
+  padding: @synctex-controls-padding;
+  top: 68px;
+}
+
+.synctex-control:not(.detach-synctex-control) {
+  @ol-synctex-control-size: 24px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  font-size: 1em;
+  margin-bottom: @ol-synctex-control-size / 2;
+  width: @ol-synctex-control-size;
+  height: @ol-synctex-control-size;
+  border-radius: @ol-synctex-control-size / 2;
+  padding: 0 0 2px;
+  background-color: fade(@btn-default-bg, 80%);
+  transition: background 0.15s ease;
+  color: white;
+  border-color: transparent;
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &[disabled] {
+    opacity: 1;
+    background-color: fade(@btn-default-bg, 60%);
+  }
+}
+
+.synctex-control {
+  > .synctex-control-icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  > .synctex-spin-icon {
+    margin-top: 2px;
+  }
+}
+
+.editor-dark {
+  .pdfjs-viewer {
+    background-color: lighten(@editor-dark-background-color, 10%);
+  }
+  .pdf .toolbar {
+    .toolbar-right a {
+      i {
+        border-color: @gray;
+      }
+      &:hover {
+        i {
+          border-color: @gray-light;
+        }
+      }
+    }
+  }
+}
+
+.keyboard-tooltip {
+  .tooltip-inner {
+    max-width: none;
+  }
+}
+
+.keyboard-shortcut {
+  white-space: nowrap;
+}
+
+@keyframes expand-feedback-area {
+  from {
+    max-height: 0;
+  }
+
+  to {
+    max-height: 500px;
+  }
+}
+
+.card-hint:extend(.card-thin) {
+  margin-top: 10px;
+  padding-bottom: 7px;
+  cursor: default;
+
+  &-icon-container {
+    background: currentColor;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.5rem;
+    text-align: center;
+    border-radius: 50%;
+    float: left;
+    margin-right: 10px;
+
+    .fa {
+      color: #fff;
+    }
+
+    .alert-danger & {
+      color: @state-danger-border;
+    }
+
+    .alert-warning & {
+      color: @state-warning-border;
+    }
+
+    .alert-info & {
+      color: @state-info-border;
+    }
+  }
+
+  &-text,
+  &-feedback-label {
+    color: @log-hints-color;
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+  }
+
+  &-text {
+    min-height: 35px;
+  }
+
+  &-feedback-label {
+    font-size: inherit;
+    margin-right: 0.5em;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  &-ext-link,
+  &-feedback {
+    display: inline-block;
+    font-size: 0.8rem;
+  }
+
+  &-footer a,
+  &-text a {
+    .alert-danger & {
+      color: @state-danger-text;
+    }
+
+    .alert-warning & {
+      color: @state-warning-text;
+    }
+
+    .alert-info & {
+      color: @state-info-text;
+    }
+  }
+
+  &-feedback {
+    color: @log-hints-color;
+    float: right;
+  }
+
+  &-extra-feedback {
+    color: @log-hints-color;
+    font-size: 0.8rem;
+    margin-top: 10px;
+    padding-bottom: 5px;
+    animation: 0.5s ease-out expand-feedback-area;
+    overflow: hidden;
+
+    &-label {
+      margin: 5px 0 10px;
+      padding-top: 5px;
+      border-top: solid 1px @gray-lighter;
+    }
+
+    .radio {
+      margin: 5px;
+    }
+
+    textarea {
+      font-size: 0.8rem;
+      margin-bottom: 10px;
+      padding: 5px;
+    }
+
+    input[type='radio'] {
+      margin-top: 2px;
+    }
+  }
+
+  & + p {
+    margin-top: 20px;
+  }
+}
+
+.files-dropdown-container {
+  .pull-right();
+  position: relative;
+}
+
+.files-dropdown {
+  display: inline-block;
+}
+
+@editor-and-logs-pane-toolbars-height: @toolbar-small-height + @toolbar-height;
+@btn-small-height: (@padding-small-vertical * 2)+ (@font-size-small *
+      @line-height-small); // 5px * 2 + 14px * 1.5 = 31px
+
+#dropdown-files-logs-pane-list {
+  overflow-y: auto;
+  .dropdown-header {
+    white-space: nowrap;
+  }
+  max-height: calc(
+    ~'100vh - ' @editor-and-logs-pane-toolbars-height ~' - ' @btn-small-height ~' - '
+      @margin-md
+  );
+}

services/web/frontend/stylesheets/app/editor/publish-modal.less

@@ -0,0 +1,96 @@
+.modal-body-publish {
+  input[type='checkbox'] {
+    margin-top: 6px;
+  }
+  .gallery-export-license {
+    display: flex;
+    align-items: center;
+  }
+  .table-content-name {
+    width: 100%;
+    margin-bottom: 10px;
+    font-weight: 300;
+  }
+  .table-content-category {
+    font-weight: 300;
+    text-align: right;
+    font-style: italic;
+    width: 30%;
+    float: right;
+    text-transform: capitalize;
+  }
+  .table-content-category ~ .table-content-name {
+    width: 70%;
+    display: inline-block;
+  }
+  .wl-icon:before {
+    font-size: 14px;
+  }
+  .btn-wrapping {
+    min-width: 8em;
+    max-width: 25em;
+    white-space: normal;
+  }
+  .button-as-link {
+    color: green;
+    text-transform: none;
+    text-decoration: none;
+    background: none;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    font-size: 14px;
+    @extend a;
+    &:hover,
+    &:active,
+    &:focus {
+      color: green;
+      background: none;
+    }
+    text-align: left;
+  }
+  .affix-content-title {
+    color: @gray-light;
+    font-size: 1.2em;
+    padding-left: 10px;
+  }
+
+  .affix-subcontent {
+    margin: 5px 0 50px;
+  }
+  .overbox {
+    padding: @line-height-computed / 2;
+    background-color: white;
+    margin-top: @line-height-computed / 2;
+    border: 1px solid @gray-lighter;
+    border-radius: 9px;
+  }
+  .content-as-table {
+    .table-content-main {
+      display: flex;
+    }
+    .table-content-icon {
+      height: 100px;
+      width: 106px;
+      display: flex;
+      align-items: flex-start;
+      overflow: hidden;
+      * {
+        border: 1px solid @gray-lightest;
+        width: 100%;
+      }
+    }
+    .table-content-text {
+      width: calc(~'100% - 106px');
+      vertical-align: top;
+      padding-left: 15px;
+    }
+    .table-content-slogan {
+      height: 100px;
+      overflow: hidden;
+    }
+    .table-content-link {
+      padding-top: 10px;
+    }
+  }
+}

services/web/frontend/stylesheets/app/editor/publish-template.less

@@ -0,0 +1,3 @@
+.publishedDetails {
+  color: @gray;
+}

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -0,0 +1,775 @@
+.review-panel-new {
+  &.review-panel-container {
+    height: 100%;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .review-panel-inner {
+    z-index: 6;
+    flex-shrink: 0;
+    background-color: @neutral-10;
+    border-left: 1px solid @neutral-20;
+    color: @content-primary;
+    font-family: @font-family-base;
+    line-height: @line-height-base;
+    font-size: @font-size-01;
+    box-sizing: content-box;
+    width: var(--review-panel-width);
+    min-height: var(--review-panel-height);
+  }
+
+  .review-panel-entry {
+    background-color: white;
+    border-radius: @border-radius-base-new;
+    border: 1px solid @neutral-20;
+    padding: @spacing-04;
+    width: calc(100% - @spacing-04);
+    margin-left: @spacing-02;
+    z-index: 1;
+  }
+  .review-panel-entry:hover {
+    // shadow-sm
+    box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
+  }
+
+  .review-panel-entry.review-panel-entry-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .review-panel-entry-indicator {
+    display: none;
+  }
+
+  .review-panel-entry-content {
+    display: flex;
+    flex-direction: column;
+    font-size: @font-size-01;
+    gap: @spacing-04;
+  }
+
+  .review-panel-entry.review-panel-entry-selected,
+  .review-panel-entry.review-panel-entry-highlighted,
+  .review-panel-entry.review-panel-entry-textarea-focused {
+    margin-left: @spacing-01;
+    border: 1px solid @blue-50;
+    // shadow-md
+    box-shadow:
+      0px 4px 12px rgba(30, 37, 48, 0.12),
+      0px 2px 4px rgba(30, 37, 48, 0.08);
+  }
+
+  .review-panel-entry.review-panel-entry-focused {
+    z-index: 2;
+  }
+
+  .review-panel-entry-header {
+    display: flex;
+    justify-content: space-between;
+
+    .review-panel-entry-user {
+      color: @content-primary;
+      font-size: 110%;
+    }
+
+    .review-panel-entry-time {
+      color: @content-secondary;
+    }
+
+    .review-panel-entry-actions {
+      display: flex;
+      align-items: center;
+      gap: @spacing-03;
+
+      .btn {
+        background-color: transparent;
+        padding: 0;
+        height: 24px;
+        width: 24px;
+
+        &:hover,
+        &:focus {
+          background-color: @neutral-20;
+          color: @content-primary;
+        }
+      }
+
+      .review-panel-entry-actions-icon {
+        padding: @spacing-01;
+        font-size: @font-size-05;
+      }
+    }
+  }
+
+  .review-panel-entry-user-color-badge {
+    display: inline-block;
+    width: @spacing-04;
+    height: @spacing-04;
+    margin-right: @spacing-02;
+    border-radius: @border-radius-small;
+  }
+
+  .review-panel-change-body {
+    display: flex;
+    align-items: flex-start;
+    color: @content-secondary;
+    gap: @spacing-02;
+    overflow-wrap: anywhere;
+  }
+
+  .review-panel-content-highlight {
+    color: @content-primary;
+    text-decoration: none;
+  }
+
+  del.review-panel-content-highlight {
+    text-decoration: line-through;
+  }
+
+  .review-panel-entry-icon {
+    border-radius: @border-radius-base-new;
+    padding: @spacing-02;
+    font-size: @font-size-03;
+  }
+
+  .review-panel-entry-change-icon {
+    margin-top: -2px;
+  }
+
+  .review-panel-entry-icon-accept {
+    background-color: @green-10;
+    color: @green-50;
+  }
+
+  .review-panel-entry-icon-reject {
+    background-color: @red-10;
+    color: @red-50;
+  }
+
+  .review-panel-entry-icon-changed {
+    background-color: @neutral-20;
+    color: @content-secondary;
+  }
+
+  .review-panel-header {
+    position: sticky;
+    top: 0;
+    width: var(--review-panel-width);
+    height: var(--review-panel-header-height);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-bottom: 1px solid @rp-border-grey;
+    background-color: white;
+    text-align: center;
+    z-index: 4;
+  }
+
+  // TODO: Update this when we move the track changes menu to the new design
+  .rp-tc-state {
+    background-color: white;
+    max-height: calc(
+      100vh - var(--review-panel-top) - var(--review-panel-header-height)
+    );
+    overflow-y: auto;
+  }
+
+  .review-panel-tools {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 4px;
+    padding-right: 12px;
+    flex-shrink: 0;
+    flex-basis: 32px;
+  }
+
+  .review-panel-resolved-comments-toggle {
+    background-color: @gray-lightest;
+    font-size: 14px;
+    color: lighten(@rp-type-blue, 25%);
+    border: solid 1px @rp-border-grey;
+    border-radius: 3px;
+    padding: 0 4px;
+    height: 22px;
+    width: 22px;
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: @rp-type-blue;
+    }
+  }
+
+  .review-panel-resolved-comments-toggle-reviewer-role {
+    display: flex;
+    align-items: center;
+    border: none;
+    background-color: transparent;
+    color: @content-primary;
+    padding: 2px;
+    border-radius: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: @neutral-20;
+    }
+  }
+
+  .track-changes-indicator-circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    background-color: @green-50;
+  }
+
+  .track-changes-menu-button {
+    border: none;
+    background: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: @font-size-02;
+
+    i {
+      width: 8px;
+    }
+  }
+
+  .review-panel-heading {
+    display: flex;
+    align-items: center;
+    padding: 6px 4px;
+    gap: 2px;
+
+    .review-panel-label {
+      font-family: Lato, sans-serif;
+      font-size: @font-size-02;
+      font-weight: bold;
+      margin: 0;
+      flex: 1;
+      text-align: start;
+    }
+
+    .review-panel-split-test-badge {
+      margin-left: 4px;
+    }
+
+    .review-panel-close-button {
+      display: flex;
+      align-items: center;
+      border: none;
+      background-color: transparent;
+      color: @content-primary;
+      padding: 2px;
+
+      &:hover,
+      &:focus {
+        background-color: @neutral-20;
+      }
+    }
+  }
+
+  &.review-panel-resolved-comments {
+    width: 280px;
+
+    .popover-content {
+      background-color: @neutral-10;
+      overflow-y: auto;
+      max-height: calc(100vh - 180px);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 8px 6px;
+    }
+  }
+
+  .review-panel-resolved-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .review-panel-resolved-comments-empty {
+    text-align: center;
+  }
+
+  .review-panel-resolved-comments-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  }
+
+  .review-panel-resolved-comments-label {
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .review-panel-resolved-comments-count {
+    color: @content-secondary;
+    background-color: @neutral-20;
+    font-weight: normal;
+    padding: 4px;
+  }
+
+  .review-panel-resolved-comment {
+    background-color: white;
+    border-radius: @border-radius-base-new;
+    padding: @spacing-04;
+    display: flex;
+    flex-direction: column;
+    gap: @spacing-04;
+  }
+
+  .review-panel-resolved-comment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: @content-secondary;
+    font-size: 12px;
+  }
+
+  .review-panel-resolved-comment-filename {
+    color: @content-primary;
+  }
+
+  .review-panel-resolved-comment-buttons {
+    display: flex;
+    align-items: center;
+    gap: @spacing-03;
+
+    .btn {
+      background-color: transparent;
+      color: @content-primary;
+      padding: @spacing-01;
+      height: 24px;
+      width: 24px;
+
+      &:hover,
+      &:focus {
+        background-color: @neutral-20;
+      }
+    }
+
+    .material-symbols {
+      font-size: 20px;
+    }
+  }
+
+  .review-panel-resolved-comment-quoted-text {
+    background-color: @neutral-20;
+    border-radius: @border-radius-base-new;
+    padding: 4px 8px;
+
+    .btn-inline-link {
+      font-size: 12px;
+    }
+  }
+
+  .review-panel-resolved-comment-quoted-text-label {
+    color: @content-secondary;
+    font-size: 12px;
+  }
+
+  .review-panel-resolved-comment-quoted-text-quote {
+    color: @content-primary;
+    overflow-wrap: anywhere;
+    font-size: 14px;
+  }
+
+  .review-panel-comment-wrapper {
+    display: flex;
+    gap: @spacing-04;
+  }
+
+  .review-panel-comment {
+    flex-grow: 1;
+  }
+
+  .review-panel-comment-reply-divider {
+    border-left: 2px solid @yellow-20;
+  }
+
+  .review-panel-comment-body {
+    font-size: @font-size-02;
+    color: @content-primary;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  .review-panel-expandable-content {
+    display: inline;
+    padding-right: var(--spacing-02);
+  }
+
+  .review-panel-expandable-inline {
+    display: inline;
+  }
+
+  .review-panel-expandable-links {
+    .btn-inline-link {
+      text-decoration: none;
+      line-height: 1;
+    }
+    .btn-inline-link:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .review-panel-comment-input {
+    width: 100%;
+    font-size: @rp-base-font-size;
+    padding: 2px @spacing-03;
+    border-radius: @border-radius-base-new;
+    border: solid 1px @neutral-60;
+    resize: vertical;
+    color: @rp-type-darkgrey;
+    background-color: #fff;
+    height: 25px;
+    min-height: 25px;
+    overflow-x: hidden;
+    max-height: 400px;
+  }
+
+  .review-panel-comment-edit {
+    margin-top: var(--spacing-03);
+  }
+
+  .review-panel-empty-state {
+    position: fixed;
+    width: var(--review-panel-width);
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .review-panel-empty-state-inner {
+    position: sticky;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 100%;
+    padding-left: 16px;
+    padding-right: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    p {
+      margin-bottom: 0;
+      text-align: center;
+    }
+  }
+
+  .review-panel-empty-state-comment-icon {
+    width: 80px;
+    height: 80px;
+    background-color: white;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+
+    .material-symbols {
+      font-size: 32px;
+    }
+  }
+
+  .review-panel-overview {
+    padding: 4px;
+    position: absolute;
+    top: var(--review-panel-header-height);
+    bottom: 59px;
+    width: 100%;
+    overflow: auto;
+    overscroll-behavior-block: none;
+
+    .review-panel-entry {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+
+  .collapsible-file-header {
+    all: unset;
+    padding: 6px 8px;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .review-panel-overfile-divider {
+    border-bottom: 1px solid #e7e9ee;
+    margin: 2px 0;
+  }
+
+  .review-panel-overview-file-entries {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: hidden;
+    padding-top: 4px;
+    padding-bottom: 6px;
+  }
+
+  .collapsible-file-header-count {
+    background-color: @neutral-20;
+    padding: 2px 4px;
+    margin-left: auto;
+    border-radius: @border-radius-base;
+  }
+
+  .review-panel-footer {
+    position: fixed;
+    height: 60px;
+    bottom: 0;
+    width: var(--review-panel-width);
+    z-index: 2;
+    background-color: white;
+    border-top: 1px solid @rp-border-grey;
+    display: flex;
+
+    .review-panel-tab {
+      flex: 0 0 50%;
+      padding: 6px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      border: 0;
+      border-top: solid 3px transparent;
+      background: none;
+      color: @content-secondary;
+      font-size: @font-size-02;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: @content-primary;
+      }
+
+      &-active {
+        color: @content-primary;
+        border-top: solid 3px @green-50;
+      }
+    }
+  }
+
+  .review-panel-add-comment-textarea {
+    padding: 2px 6px;
+    resize: vertical;
+    min-height: 44px;
+  }
+
+  .review-panel-add-comment-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .review-panel-add-comment-cancel-button {
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: @neutral-20;
+      color: @content-primary;
+    }
+  }
+
+  .review-panel-more-comments-button-container {
+    position: fixed;
+    width: var(--review-panel-width);
+    display: flex;
+    justify-content: center;
+    z-index: 3;
+
+    &.downwards {
+      // TODO: fix this to not use a magic number when we have updated the footer ui
+      top: calc(100% - 102px);
+    }
+
+    &.upwards {
+      top: calc(
+        var(--review-panel-top) + var(--review-panel-header-height) + 16px
+      );
+    }
+  }
+
+  // Would not be migrated
+  .review-panel-more-comments-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.review-panel-subview-overview {
+    &.review-panel-container {
+      overflow-y: hidden;
+      position: sticky;
+      top: 0;
+    }
+
+    .review-panel-inner {
+      min-height: auto;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &.review-panel-mini {
+    overflow: visible !important;
+
+    .review-panel-inner {
+      width: 24px;
+    }
+
+    .review-panel-entry {
+      margin-left: 0;
+      background-color: transparent;
+      border: none;
+      width: 100%;
+    }
+
+    .review-panel-entry:hover,
+    .review-panel-entry-focused,
+    .review-panel-entry-highlighted {
+      box-shadow: none;
+    }
+
+    .review-panel-entry-indicator {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      color: @content-secondary;
+      cursor: pointer;
+    }
+
+    .review-panel-entry-content {
+      display: none;
+      background: white;
+      border: 1px solid @rp-border-grey;
+      border-radius: @border-radius-base-new;
+      width: 200px;
+      padding: @spacing-02;
+    }
+
+    .review-panel-entry-hover {
+      .review-panel-entry-content {
+        display: flex;
+        position: absolute;
+        left: -200px;
+        top: 0;
+        padding: @spacing-04;
+      }
+    }
+
+    .review-panel-more-comments-button-container {
+      display: none;
+    }
+
+    .review-panel-footer {
+      display: none;
+    }
+  }
+}
+
+.review-tooltip-menu {
+  display: flex;
+  box-shadow: 0px 2px 4px 0px #1e253029;
+  border: none;
+  border-radius: 4px;
+  padding: 4px;
+  gap: 4px;
+  transition: opacity 0.05s ease-in;
+  opacity: 0;
+}
+
+.review-tooltip-menu-visible {
+  opacity: 1;
+}
+
+.review-tooltip-menu-button {
+  background-color: inherit;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: @border-radius-base;
+}
+
+.review-tooltip-menu-divider {
+  width: 1px;
+  background-color: #e7e9ee;
+}
+
+.review-tooltip-add-comment-button {
+  padding: 2px 8px;
+}
+
+.review-panel-tooltip {
+  pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
+}
+
+.review-panel-in-editor-widgets {
+  position: sticky;
+  top: 0;
+  right: 0;
+  font-size: 11px;
+  z-index: 2;
+  font-family: @font-family-sans-serif;
+
+  .review-panel-in-editor-widgets-inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .review-panel-track-changes-indicator {
+    border: 0;
+  }
+}
+.review-panel-track-changes-indicator {
+  display: block;
+  padding: 5px 10px;
+  background-color: rgba(240, 240, 240, 0.9);
+  color: @rp-type-blue;
+  text-align: center;
+  border-bottom-left-radius: 3px;
+  white-space: nowrap;
+
+  &.review-panel-track-changes-indicator-on-dark {
+    background-color: rgba(88, 88, 88, 0.8);
+    color: #fff;
+
+    &:hover,
+    &:focus {
+      background-color: rgba(88, 88, 88, 1);
+      color: #fff;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: rgba(240, 240, 240, 1);
+    color: @rp-type-blue;
+  }
+}

services/web/frontend/stylesheets/app/editor/search.less

@@ -0,0 +1,70 @@
+.ace_search {
+  background-color: @gray-lightest;
+  border: 1px solid @editor-border-color;
+  border-top: 0 none;
+  width: 350px;
+  overflow: hidden;
+  position: absolute;
+  top: 0px;
+  z-index: 99;
+  white-space: normal;
+  padding: @line-height-computed / 4;
+
+  font-family: @font-family-sans-serif;
+
+  a,
+  button {
+    i {
+      pointer-events: none;
+    }
+  }
+
+  .ace_searchbtn_close {
+    position: absolute;
+    top: 6px;
+    right: 12px;
+    color: @gray;
+    &:hover {
+      color: @gray-dark;
+    }
+  }
+
+  .ace_search_form,
+  .ace_replace_form {
+    margin-bottom: @line-height-computed / 4;
+    input {
+      width: 210px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .btn-group {
+      display: inline-block;
+    }
+  }
+
+  .ace_nomatch {
+    input {
+      border-color: @red;
+    }
+  }
+
+  .ace_search_options {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .ace_search_counter {
+    color: @editor-search-count-color;
+    margin: auto 0;
+  }
+}
+.ace_search.left {
+  border-left: 0 none;
+  border-radius: 0px 0px @border-radius-base 0px;
+  left: 0;
+}
+.ace_search.right {
+  border-radius: 0px 0px 0px @border-radius-base;
+  border-right: 0 none;
+  right: 0;
+}

services/web/frontend/stylesheets/app/editor/share.less

@@ -0,0 +1,212 @@
+.modal-body-share {
+  h3 {
+    border-bottom: 1px solid @gray-lighter;
+    padding-bottom: @line-height-computed / 4;
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .project-member.form-group {
+    margin-bottom: 0;
+  }
+
+  .project-member .form-control-static.text-center {
+    padding-top: 0;
+  }
+
+  .project-member .remove-button {
+    font-size: inherit;
+  }
+
+  .project-member {
+    padding: (@line-height-computed / 2) 0;
+    font-size: 16px;
+    span {
+      padding-right: @line-height-computed / 2;
+    }
+  }
+
+  .project-invite,
+  .public-access-level {
+    font-size: 14px;
+    padding: (@line-height-computed / 2) 0;
+    border-bottom: 1px solid @gray-lighter;
+  }
+
+  .public-access-level {
+    margin-top: @line-height-computed / 4;
+    font-size: 13px;
+    padding-bottom: @modal-inner-padding;
+    .access-token-display-area {
+      margin-top: @line-height-computed / 4;
+      .access-token-wrapper {
+        padding-top: @line-height-computed / 4;
+        .access-token {
+          margin-top: @line-height-computed / 4;
+          background-color: @gray-lightest;
+          border: 1px solid @gray-lighter;
+          padding: 6px 12px 6px 12px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+    }
+    .fa-chevron-down,
+    .fa-chevron-up {
+      vertical-align: top;
+      color: @neutral-70;
+    }
+    .btn-chevron {
+      padding: 0 (@line-height-computed / 2);
+    }
+  }
+
+  .public-access-level.public-access-level-notice {
+    background-color: @gray-lightest;
+    border-bottom: none;
+    margin-top: @margin-md;
+    padding-top: @margin-md;
+  }
+
+  .project-member,
+  .project-invite {
+    &:hover {
+      background-color: @gray-lightest;
+    }
+  }
+
+  .project-member {
+    .select-trigger {
+      color: @neutral-70;
+      border: none;
+      padding: 0 10px 5px 10px;
+    }
+
+    .select-items {
+      max-height: 300px;
+      width: 300px;
+      li:last-child {
+        color: @brand-danger;
+      }
+    }
+
+    .project-member-email-icon {
+      display: grid;
+      grid-template-columns: 2em auto;
+      align-items: center;
+      padding-bottom: 5px;
+
+      .fa-warning {
+        color: @brand-warning;
+      }
+
+      .subtitle {
+        font-size: @font-size-small;
+      }
+    }
+  }
+
+  .project-member .text-left,
+  .project-invite .text-left {
+    padding-left: 25px;
+  }
+
+  .invite-controls {
+    .small {
+      padding: 2px;
+      margin-bottom: 0;
+    }
+    padding: @line-height-computed / 2;
+    background-color: @gray-lightest;
+    margin-top: @line-height-computed / 2;
+    form {
+      .form-group {
+        margin-bottom: @line-height-computed / 2;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      .privileges {
+        display: inline-block;
+        width: auto;
+      }
+      .tags-new .privileges {
+        background: transparent;
+        width: auto;
+        height: 30px;
+        font-size: 14px;
+        border: none;
+        border-right: 5px solid transparent;
+      }
+    }
+    .add-collaborators-upgrade {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: var(--spacing-08);
+
+      .upgrade-actions {
+        display: flex;
+        gap: @margin-md;
+      }
+    }
+  }
+
+  .rbt-menu > .dropdown-item {
+    display: block;
+    padding: 0.25rem 1rem;
+    color: #212529;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      text-decoration: none;
+      background-color: @gray-lightest;
+    }
+  }
+}
+
+.copy-button:focus-within {
+  outline: none;
+}
+
+.modal-link-share {
+  .invite-controls {
+    padding: 0;
+    background-color: transparent;
+    margin-top: 0;
+  }
+  .public-access-level {
+    border: none;
+  }
+
+  .invite-warning {
+    margin-bottom: @line-height-computed / 2;
+  }
+
+  .project-member-select {
+    padding: 0;
+    .fa-warning {
+      color: @brand-warning;
+    }
+  }
+
+  .project-member.form-group,
+  .project-member.row {
+    margin: 0 -30px;
+  }
+  .project-member .select-wrapper {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+
+    .select-trigger {
+      gap: @spacing-02;
+    }
+  }
+  .project-member.row {
+    padding-right: 1.28571429em;
+  }
+}

services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less

@@ -0,0 +1,13 @@
+.table-generator-width-modal {
+  .table-generator-width-label {
+    width: 100%;
+  }
+
+  .table-generator-usepackage-copy {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: #f4f5f6;
+    border: 1px solid #d0d5dd;
+  }
+}

services/web/frontend/stylesheets/app/editor/toast.less

@@ -0,0 +1,22 @@
+.toast-container {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.toast-content {
+  pointer-events: auto;
+}
+
+.global-toasts {
+  position: fixed;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  [role='alert'] {
+    z-index: 20;
+  }
+}

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -0,0 +1,460 @@
+@toolbar-height: 40px;
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  height: @toolbar-height;
+  border-bottom: @toolbar-border-bottom;
+
+  > a,
+  .toolbar-right > a,
+  button {
+    position: relative;
+    .label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0.15em 0.6em 0.2em;
+      font-size: 60%;
+      pointer-events: none; // Labels were capturing button/anchor clicks.
+    }
+  }
+
+  .toolbar-right,
+  .toolbar-left {
+    button {
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .toolbar-right .back-to-editor-btn {
+    margin-right: 27px;
+    display: flex;
+    align-items: center;
+    .btn-secondary;
+
+    .toolbar-label {
+      margin-bottom: 0;
+    }
+  }
+
+  > a:focus,
+  button:focus {
+    outline: none;
+  }
+
+  > a:not(.btn),
+  > button,
+  .toolbar-left > a:not(.btn),
+  .toolbar-left > button,
+  .toolbar-right > a:not(.btn),
+  .toolbar-right > button:not(.back-to-editor-btn) {
+    display: inline-block;
+    color: @toolbar-icon-btn-color;
+    background-color: transparent;
+    padding: 4px 2px;
+    line-height: 1;
+    height: 24px;
+    border-radius: @border-radius-small;
+    &.toolbar-header-back-projects {
+      padding: 5px 10px 4px;
+      margin-bottom: 1px;
+    }
+
+    &:hover {
+      text-shadow: @toolbar-icon-btn-hover-shadow;
+      color: @toolbar-icon-btn-hover-color;
+      background-color: transparent;
+      text-decoration: none;
+    }
+    &.active,
+    &:active {
+      .label {
+        display: none;
+      }
+      color: white;
+      background-color: @link-color;
+      box-shadow: @toolbar-icon-btn-hover-boxshadow;
+      &:hover {
+        color: white;
+      }
+    }
+  }
+
+  &.toolbar-pdf > a:not(.btn) {
+    margin-right: 3px;
+  }
+
+  .btn-full-height {
+    border: none;
+    border-radius: 0;
+    border-right: 1px solid @toolbar-header-btn-border-color;
+    color: @toolbar-btn-color;
+    padding: 3px 10px 5px;
+    font-size: 20px;
+    max-height: 39px;
+    &:hover {
+      text-shadow: @toolbar-btn-hover-text-shadow;
+      background-color: @toolbar-btn-hover-bg-color;
+      color: @toolbar-btn-hover-color;
+    }
+    &.active,
+    &:active {
+      color: @toolbar-btn-active-color;
+      background-color: @toolbar-btn-active-bg-color;
+      box-shadow: @toolbar-btn-active-shadow;
+      .editor-menu-icon {
+        background: @editor-header-logo-background-active;
+      }
+    }
+    .label {
+      top: 4px;
+      right: 4px;
+    }
+
+    &.header-cobranding-logo-container {
+      height: @toolbar-height - 1;
+      padding: 8px 10px;
+    }
+  }
+
+  .toolbar-left {
+    display: flex;
+    float: left;
+    text-align: center;
+    align-items: center;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: flex-end;
+    .btn-full-height {
+      border-right: 0;
+      border-left: 1px solid @toolbar-header-btn-border-color;
+    }
+  }
+
+  .toolbar-center {
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    // At small screen sizes, center relative to the left menu and right buttons
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  &.toolbar-header {
+    background-color: @toolbar-header-bg-color;
+    box-shadow: @toolbar-header-shadow;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  &.toolbar-alt {
+    .toolbar-alt-mixin;
+  }
+}
+
+.header-cobranding-logo {
+  display: block;
+  width: auto;
+  max-height: 100%;
+}
+
+.toolbar-small-mixin() {
+  height: @toolbar-small-height;
+}
+
+.toolbar-tall-mixin() {
+  height: @toolbar-tall-height;
+  padding-top: 10px;
+}
+.toolbar-alt-mixin() {
+  background-color: @toolbar-alt-bg-color;
+}
+
+.toolbar-label {
+  display: none;
+  margin: 0 4px;
+  font-size: @toolbar-font-size;
+  font-weight: 600;
+  margin-bottom: 2px;
+  vertical-align: middle;
+  text-align: left;
+
+  @media (min-width: @screen-md-min) {
+    display: inline-block;
+  }
+
+  &.toolbar-label-multiline {
+    line-height: 1.1;
+  }
+}
+
+.toolbar-header-upgrade-prompt {
+  margin-left: 10px;
+  @media (max-width: @screen-md-min) {
+    display: none;
+  }
+}
+
+.editor-dark {
+  .toolbar-alt {
+    background-color: darken(@editor-dark-background-color, 0%);
+  }
+  .toolbar {
+    border-color: @editor-dark-toolbar-border-color;
+    .btn-full-height {
+      border-color: @editor-dark-toolbar-border-color;
+      &:hover {
+        background-color: black;
+        color: lighten(@link-color, 10%);
+      }
+    }
+    &.toolbar-header {
+      box-shadow: none;
+    }
+    > a:not(.btn) {
+      color: @gray;
+      &:hover {
+        color: @gray-light;
+      }
+    }
+  }
+}
+
+/**************************************
+	Toggle Switch
+***************************************/
+
+.toggle-wrapper {
+  white-space: nowrap;
+}
+
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  height: @toolbar-btn-height;
+  margin-right: 5px;
+  border-radius: @btn-border-radius-base;
+  background-color: @toggle-switch-bg;
+  padding: 2px;
+}
+
+.toggle-switch-label {
+  display: inline-block;
+  float: left;
+  font-weight: normal;
+  height: 100%;
+  text-align: center;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  color: @text-color;
+  border-radius: @btn-border-radius-base;
+  transition:
+    color 0.12s ease-out,
+    background-color 0.12s ease-out,
+    box-shadow 0.12s ease-out;
+  overflow: hidden;
+
+  span {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding: 0 8px;
+    background-size: 200% 100%;
+    background-position: 0 0;
+    transition: background-position 0.12s ease-out;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
+
+.toggle-switch-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toggle-switch-input:disabled + .toggle-switch-label {
+  cursor: not-allowed;
+}
+
+.toggle-switch-input:checked + .toggle-switch-label {
+  span {
+    background-position: -100% 0;
+  }
+  color: @white;
+  background-color: @toggle-switch-highlight-color;
+  border-radius: @btn-border-radius-base;
+  box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
+}
+
+.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
+  span {
+    background-position: 100% 0;
+  }
+}
+
+.editor-toggle-switch {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  .toggle-switch {
+    margin-left: 5px;
+  }
+
+  .toggle-switch-label span {
+    background: none;
+    transition: background 0.12s ease-out;
+  }
+
+  .toggle-switch-label:first-of-type span {
+    padding-left: 8px;
+  }
+
+  .toggle-switch-label:last-of-type span {
+    padding-right: 8px;
+    border-right: none;
+  }
+
+  .badge {
+    margin-right: 5px;
+  }
+}
+
+/**************************************
+	Formatting buttons
+***************************************/
+.formatting-buttons {
+  width: 100%;
+  overflow: hidden;
+}
+
+.formatting-btn {
+  color: @formatting-btn-color;
+  background-color: @formatting-btn-bg;
+  padding: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  border: none;
+  border-left: 1px solid @formatting-btn-border;
+  border-radius: 0;
+
+  &:hover {
+    color: @formatting-btn-color;
+  }
+
+  &.active {
+    color: @toolbar-btn-active-color;
+    background-color: @toolbar-btn-active-bg-color;
+    box-shadow: @toolbar-btn-active-shadow;
+
+    &:focus {
+      color: @toolbar-btn-active-color;
+
+      &:not(:focus-visible) {
+        outline: none;
+      }
+    }
+  }
+
+  &:focus {
+    color: @formatting-btn-color;
+  }
+}
+
+.formatting-btn-icon {
+  min-width: 32px;
+  width: 32px;
+}
+
+.formatting-btn-icon:last-of-type {
+  border-right: 1px solid @formatting-btn-border;
+}
+
+.formatting-btn--more {
+  padding-left: 9px;
+  padding-right: 9px;
+
+  .caret {
+    margin-top: 1px;
+  }
+}
+
+.formatting-icon {
+  font-style: normal;
+  line-height: 1.5;
+}
+
+.formatting-icon--small {
+  font-size: small;
+  line-height: 1.9;
+}
+
+.formatting-icon--serif {
+  font-family: @font-family-serif;
+}
+
+.formatting-more {
+  margin-left: auto;
+}
+
+.formatting-menu {
+  min-width: auto;
+  max-width: 130px;
+  background-color: @formatting-menu-bg;
+}
+
+.formatting-menu-item {
+  float: left;
+}
+
+.formatting-menu-item > .formatting-btn {
+  border-right: none;
+}
+
+// Disable border on left-most icon in menu
+.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
+  border-left: none;
+}
+
+.toolbar.toolbar-pdf > a[disabled] {
+  cursor: not-allowed;
+  .opacity(0.65);
+  .box-shadow(none);
+}
+
+.toolbar-btn-secondary {
+  height: @toolbar-btn-height;
+  padding-bottom: 0px;
+  margin-bottom: 0.5px;
+}
+
+.switch-to-editor-btn {
+  margin-right: 7px;
+}
+
+.switch-to-editor-btn,
+.switch-to-pdf-btn {
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  .toolbar-btn-secondary-icon {
+    margin-right: 5px;
+  }
+}