Merge pull request #12363 from overleaf/td-history-main-area-shell

Add CSS for main history view shell

GitOrigin-RevId: 9c455007bf8b177d59ea97cd73b608d48aba3907

services/web/frontend/js/features/history/components/change-list/change-list.tsx

@@ -4,8 +4,12 @@ import Main from './main'
 function ChangeList() {
   return (
     <aside className="change-list">
-      <ToggleSwitch />
-      <Main />
+      <div className="history-header toggle-switch-container">
+        <ToggleSwitch />
+      </div>
+      <div className="version-list-container">
+        <Main />
+      </div>
     </aside>
   )
 }

services/web/frontend/js/features/history/components/editor/editor.tsx

@@ -3,9 +3,13 @@ import Main from './main'
 
 function Editor() {
   return (
-    <div className="point-in-time-panel">
-      <Toolbar />
-      <Main />
+    <div className="doc-panel">
+      <div className="history-header toolbar-container">
+        <Toolbar />
+      </div>
+      <div className="doc-container">
+        <Main />
+      </div>
     </div>
   )
 }

services/web/frontend/js/features/history/components/history-root.tsx

@@ -12,8 +12,8 @@ export default function HistoryRoot() {
         ? createPortal(<HistoryFileTree />, fileTreeContainer)
         : null}
       <div className="history-react">
-        <ChangeList />
         <Editor />
+        <ChangeList />
       </div>
     </>
   )

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

@@ -1,22 +1,49 @@
-@changesListWidth: 320px;
+@versions-list-width: 320px;
+@history-toolbar-height: 40px;
+
+history-root {
+  height: 100%;
+  display: block;
+}
 
 .history-react {
-  .point-in-time-panel {
-    .full-size;
-    margin-right: @changesListWidth;
+  display: flex;
+  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: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
   }
 
-  .change-list {
-    border-left: 1px solid @editor-border-color;
-    height: 100%;
-    width: @changesListWidth;
-    position: absolute;
-    right: 0;
+  .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;
+    }
   }
 
-  .editor-dark {
-    .change-list {
-      border-color: @editor-dark-toolbar-border-color;
+  .change-list {
+    width: @versions-list-width;
+    border-left: 1px solid @history-react-separator-color;
+    box-sizing: content-box;
+
+    .toggle-switch-container {
+      padding: 0 16px;
     }
   }
 }

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -140,3 +140,8 @@
 @galileo-color: @ol-blue-gray-3;
 @galileo-header-background: @ol-blue-gray-1;
 @galileo-suggestion-background: @ol-blue-gray-1;
+
+// React History
+@history-react-header-bg: #fff;
+@history-react-header-color: @ol-blue-gray-3;
+@history-react-separator-color: @neutral-20;

services/web/frontend/stylesheets/core/variables.less

@@ -13,6 +13,7 @@
 @neutral-90: #1b222c;
 @neutral-40: #afb5c0;
 @neutral-10: #f4f5f6;
+@neutral-80: #2f3a4c;
 
 // Styleguide colors
 @ol-blue-gray-0: #f4f5f8;
@@ -1161,3 +1162,9 @@
 
 @mobile-action-element-width: 48px;
 @mobile-action-element-height: @mobile-action-element-width;
+
+// React History
+@history-react-header-bg: @neutral-80;
+@history-react-header-color: #fff;
+@history-react-separator-color: @neutral-80;
+@history-main-bg: #fff;

services/web/frontend/stylesheets/variables/all.less

@@ -949,3 +949,9 @@
 
 @mobile-action-element-width: 48px;
 @mobile-action-element-height: @mobile-action-element-width;
+
+// React History
+@history-react-header-bg: @neutral-80;
+@history-react-header-color: #fff;
+@history-react-separator-color: @neutral-80;
+@history-main-bg: #fff;

services/web/frontend/stylesheets/variables/themes/light.less

@@ -128,3 +128,8 @@
 @galileo-color: @neutral-70;
 @galileo-header-background: @neutral-20;
 @galileo-suggestion-background: @neutral-20;
+
+// React History
+@history-react-header-bg: #fff;
+@history-react-header-color: @ol-blue-gray-3;
+@history-react-separator-color: @neutral-20;