Merge pull request #3396 from overleaf/jel-match-grays

Improve editor color contrast and remove light theme blue-gray colors

GitOrigin-RevId: acc5659c41201fce47e9ff03531cb51bfbf590bc

services/web/app/views/project/editor/history.pug

@@ -72,7 +72,7 @@ script(type="text/ng-template", id="historyV2DeleteLabelModalTemplate")
 	.modal-body
 		.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
 		.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
-		p.help-block(ng-if="labelDetails")
+		p(ng-if="labelDetails")
 			| #{translate("history_are_you_sure_delete_label")}
 			strong  "{{ labelDetails.comment }}"
 			| ?

services/web/app/views/project/editor/history/fileTreeV2.pug

@@ -22,7 +22,7 @@ script(type="text/ng-template", id="historyFileEntityTpl")
 	.history-file-entity-wrapper
 		a.history-file-entity-link(
 			href
-			ng-click="$ctrl.handleClick()"
+			ng-click="$ctrl.isSelected ? '' : $ctrl.handleClick()"
 			ng-class="{ 'history-file-entity-link-selected': $ctrl.isSelected }"
 		)
 			span.history-file-entity-name-container

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

@@ -78,7 +78,7 @@
 .history-entry-day {
   display: block;
   background-color: @history-entry-day-bg;
-  color: #fff;
+  color: @history-entry-day-color;
   padding: 5px 10px;
   line-height: 1;
   position: sticky;
@@ -331,6 +331,7 @@
   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;
@@ -340,20 +341,18 @@
     outline: none;
     text-decoration: none;
   }
-  &:hover {
-    .fake-full-width-bg(@file-tree-item-hover-bg);
-  }
 }
 .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 {
-    background-color: @file-tree-item-hover-bg;
-  }
+  &:hover,
   &:focus {
-    color: @file-tree-item-focus-selected-color;
+    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 {

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

@@ -942,25 +942,17 @@
 
 .review-icon {
   display: inline-block;
-  background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat;
+  background: url('/img/ol-icons/review-icon-dark-theme.svg') top/30px no-repeat;
   width: 30px;
-  background-position-y: -30px;
 
   &::before {
     content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
   }
-
-  @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-    background-image: url('/img/review-icon-sprite-ol@2x.png');
-  }
 }
 
 .review-icon when (@is-overleaf-light = true) {
-  background-position-y: 0;
-  .toolbar .btn-full-height.active &,
-  .toolbar .btn-full-height:active & {
-    background-position-y: -30px;
-  }
+  background: url('/img/ol-icons/review-icon-light-theme.svg') top/30px
+    no-repeat;
 }
 
 .resolved-comments-toggle {

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

@@ -1,12 +1,4 @@
 // Styleguide colors
-@ol-blue-gray-0 : #F4F5FB;
-@ol-blue-gray-1 : #DFE2E8;
-@ol-blue-gray-2 : #9DA7B7;
-@ol-blue-gray-3 : #727E91;
-@ol-blue-gray-4 : #455265;
-@ol-blue-gray-5 : #2C3645;
-@ol-blue-gray-6 : #1E2530;
-
 @ol-green : #138A07;
 @ol-dark-green : #004A0E;
 @ol-blue : #3E70BB;
@@ -19,7 +11,6 @@
 // Sidebar
 @sidebar-bg : #FFF;
 @sidebar-color : @ol-blue-gray-2;
-@sidebar-link-color : @ol-blue-gray-3;
 @sidebar-active-bg : @ol-green;
 @sidebar-active-color : #FFF;
 @sidebar-hover-bg : @ol-blue-gray-1;
@@ -43,7 +34,6 @@
 @file-tree-line-height : 2.05;
 @file-tree-item-color : @ol-blue-gray-3;
 @file-tree-item-focus-color : @file-tree-item-color;
-@file-tree-item-focus-selected-color : #FFF;
 @file-tree-item-selected-color : #FFF;
 @file-tree-item-input-color : @ol-blue-gray-2;
 @file-tree-item-toggle-color : @ol-blue-gray-2;
@@ -88,6 +78,8 @@
 @toolbar-icon-btn-hover-color : @ol-blue-gray-3;
 @editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat;
 @project-name-color : @ol-blue-gray-3;
+@project-rename-link-color: @ol-blue-gray-3;
+@project-rename-link-color-hover: @ol-blue-gray-4;
 @pdf-bg : @ol-blue-gray-0;
 @logs-pane-bg: @ol-blue-gray-1;
 
@@ -114,7 +106,6 @@
 
 // v2 History
 @history-toolbar-color : @ol-blue-gray-3;
-@history-entry-day-bg : @ol-blue-gray-2;
 @history-base-bg : @ol-blue-gray-0;
 @history-file-badge-bg : rgba(0, 0, 0, .25);
 @history-file-badge-color : #FFF;

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

@@ -1000,7 +1000,6 @@
 @file-tree-line-height: 2.05;
 @file-tree-item-color: #fff;
 @file-tree-item-focus-color: @file-tree-item-color;
-@file-tree-item-focus-selected-color: @file-tree-item-color;
 @file-tree-item-selected-color: @file-tree-item-color;
 @file-tree-item-toggle-color: @ol-blue-gray-2;
 @file-tree-item-icon-color: @ol-blue-gray-2;
@@ -1019,7 +1018,7 @@
 @outline-item-h-padding: @outline-h-rhythm * 0.25;
 @outline-line-guide-color: @ol-blue-gray-3;
 @outline-expand-collapse-color: @ol-blue-gray-2;
-@outline-no-items-color: @ol-blue-gray-2;
+@outline-no-items-color: @file-tree-item-color;
 @outline-header-hover-bg: @ol-blue-gray-6;
 @outline-highlight-bg: tint(@file-tree-bg, 15%);
 @vertical-resizable-resizer-bg: @ol-blue-gray-5;
@@ -1097,11 +1096,12 @@
 @history-entry-selected-label-bg-color: #fff;
 @history-entry-selected-label-color: @ol-blue;
 @history-entry-selected-pseudo-label-color: @ol-green;
-@history-entry-day-bg: @ol-blue-gray-2;
+@history-entry-day-bg: @ol-blue-gray-1;
+@history-entry-day-color: @ol-blue-gray-3;
 @history-entry-selected-bg: @ol-green;
 @history-entry-handle-bg: darken(@ol-green, 10%);
 @history-entry-handle-height: 8px;
-@history-base-color: @ol-blue-gray-2;
+@history-base-color: @ol-blue-gray-3;
 @history-highlight-color: @ol-type-color;
 @history-toolbar-bg-color: @editor-toolbar-bg;
 @history-toolbar-color: #fff;

services/web/public/img/ol-icons/review-icon-dark-theme.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4 21.87h4.1L38.34 44h-3.93l-.9-5.86h-8.8L21.28 44h-4.15l13.27-22.13zm1.34 3.9h-.06l-5.33 9.43h6.75l-1.36-9.43zM39.38 21.87h3.54v8.18h.06a4.86 4.86 0 012.05-1.83c.43-.23.88-.4 1.33-.5a7.4 7.4 0 014.68.5 6.26 6.26 0 012.36 1.83 7.78 7.78 0 011.4 2.7 11.49 11.49 0 01.02 6.45 7.92 7.92 0 01-1.27 2.7 6.43 6.43 0 01-2.14 1.85c-.87.46-1.89.68-3.07.68-.53 0-1.08-.04-1.64-.12a5.71 5.71 0 01-2.91-1.2c-.4-.34-.73-.77-1-1.31h-.06V44h-3.35V21.87zM51.72 36c0-.72-.09-1.42-.28-2.1a5.54 5.54 0 00-.83-1.8 4.1 4.1 0 00-3.32-1.77c-1.49 0-2.61.52-3.38 1.55A6.91 6.91 0 0042.8 36c0 .8.1 1.56.28 2.27.21.68.51 1.27.9 1.76.4.5.86.9 1.4 1.18.56.29 1.2.43 1.92.43a3.95 3.95 0 003.41-1.76 5 5 0 00.77-1.8c.17-.68.25-1.38.25-2.08z" fill="#fff"/><path d="M19 34.39h18.45v1.55H19v-1.55z" fill="#fff"/><path d="M37.43 34.39h18.94v1.55H37.43v-1.55z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 37.17v.77h.01l-.68 2.38c-.24.85-.5 1.61-.8 2.3l.14-.06L13.61 46h4.1a28.28 28.28 0 01-9.27 3c-.43.03-.84-.2-1.06-.58-.07-.11-.11-.23-.14-.36v-.03h.12l.94-.2v-.01l-1.06.21c-.11-.54.2-.89.53-1.26a11.73 11.73 0 00.34-.39l.1-.1.35-.38a46.83 46.83 0 001.04-1.15 13.78 13.78 0 002.89-5.53C7.3 36.33 4 31.85 4 26.83 4 18.1 14.07 11 26.5 11c11.84 0 21.54 6.42 22.43 14.6-.38-.04-.78-.06-1.18-.06a7.5 7.5 0 00-2.8.52 7.4 7.4 0 00-.03-.3v-5.9h-3.57c-.38-.32-.8-.64-1.24-.96-3.32-2.33-8.12-3.9-13.61-3.9s-10.29 1.57-13.6 3.91C9.55 21.26 8 24.12 8 26.83c0 3.11 2.07 6.46 6.44 8.9L17 37.17zm15.1 5l-.3-2.03h-5.95l-1.43 2.46a33.37 33.37 0 007.68-.43zM9.15 47.64l1.01-.2-1 .2zm-.06.01l.01.01-.76.16v-.01l.75-.16z" fill="#fff"/></svg>

services/web/public/img/ol-icons/review-icon-light-theme.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4 21.87h4.1L38.34 44h-3.93l-.9-5.86h-8.8L21.28 44h-4.15l13.27-22.13zm1.34 3.9h-.06l-5.33 9.43h6.75l-1.36-9.43zM39.38 21.87h3.54v8.18h.06a4.86 4.86 0 012.05-1.83c.43-.23.88-.4 1.33-.5a7.4 7.4 0 014.68.5 6.26 6.26 0 012.36 1.83 7.78 7.78 0 011.4 2.7 11.49 11.49 0 01.02 6.45 7.92 7.92 0 01-1.27 2.7 6.43 6.43 0 01-2.14 1.85c-.87.46-1.89.68-3.07.68-.53 0-1.08-.04-1.64-.12a5.71 5.71 0 01-2.91-1.2c-.4-.34-.73-.77-1-1.31h-.06V44h-3.35V21.87zM51.72 36c0-.72-.09-1.42-.28-2.1a5.54 5.54 0 00-.83-1.8 4.1 4.1 0 00-3.32-1.77c-1.49 0-2.61.52-3.38 1.55A6.91 6.91 0 0042.8 36c0 .8.1 1.56.28 2.27.21.68.51 1.27.9 1.76.4.5.86.9 1.4 1.18.56.29 1.2.43 1.92.43a3.95 3.95 0 003.41-1.76 5 5 0 00.77-1.8c.17-.68.25-1.38.25-2.08z" fill="#5d6879"/><path d="M19 34.39h18.45v1.55H19v-1.55z" fill="#5d6879"/><path d="M37.43 34.39h18.94v1.55H37.43v-1.55z" fill="#5d6879"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 37.17v.77h.01l-.68 2.38c-.24.85-.5 1.61-.8 2.3l.14-.06L13.61 46h4.1a28.28 28.28 0 01-9.27 3c-.43.03-.84-.2-1.06-.58-.07-.11-.11-.23-.14-.36v-.03h.12l.94-.2v-.01l-1.06.21c-.11-.54.2-.89.53-1.26a11.73 11.73 0 00.34-.39l.1-.1.35-.38a46.83 46.83 0 001.04-1.15 13.78 13.78 0 002.89-5.53C7.3 36.33 4 31.85 4 26.83 4 18.1 14.07 11 26.5 11c11.84 0 21.54 6.42 22.43 14.6-.38-.04-.78-.06-1.18-.06a7.5 7.5 0 00-2.8.52 7.4 7.4 0 00-.03-.3v-5.9h-3.57c-.38-.32-.8-.64-1.24-.96-3.32-2.33-8.12-3.9-13.61-3.9s-10.29 1.57-13.6 3.91C9.55 21.26 8 24.12 8 26.83c0 3.11 2.07 6.46 6.44 8.9L17 37.17zm15.1 5l-.3-2.03h-5.95l-1.43 2.46a33.37 33.37 0 007.68-.43zM9.15 47.64l1.01-.2-1 .2zm-.06.01l.01.01-.76.16v-.01l.75-.16z" fill="#5d6879"/></svg>