Translate View changes

mozilla · Oct 23, 2023 · c4d5a2f · c4d5a2f
1 parent 07c6c66
commit c4d5a2f
Show file tree

Hide file tree

Showing 35 changed files with 137 additions and 108 deletions.
diff --git a/pontoon/base/static/css/dark-theme.css b/pontoon/base/static/css/dark-theme.css
@@ -46,6 +46,27 @@
   --blue-2: #5f7285;
   --light-blue: #4fc4f6;
 
+  /* Translation workspace */
+  --translation-background: #3f4752;
+  --translation-border: #5e6475;
+  --translation-color: #ffffff;
+  --translation-secondary-color: #aaaaaa;
+  --translation-main-button-color: #272a2f;
+  --translation-subtitle-color: #888888;
+  --editor-background: #ffffff;
+  --editor-color: #444444;
+  --editor-form-background: #272a2f;
+  --editor-menu-background: #272a2f;
+  --editor-menu-color: #aaaaaa;
+  --editor-menu-action-button-color: #ffffff;
+
+  /* Rarely used */
+  --black-brown: #2d2323;
+  --brown-1: #676054;
+  --mustard-yellow: #fed271;
+  --pink: #ff3366cc;
+  --red: #ff0a43;
+
   /* Chart colors */
   --green-blue: #4fc4f666;
   --grey-9: #5f7285;
@@ -99,10 +120,4 @@
 
   --white-1: #ffffff;
   --white-5: #e2e2e2;
-
-  --black-brown: #2d2323;
-  --brown-1: #676054;
-  --mustard-yellow: #fed271;
-  --pink: #ff3366cc;
-  --red: #ff0a43;
 }
diff --git a/pontoon/base/static/css/light-theme.css b/pontoon/base/static/css/light-theme.css
@@ -45,6 +45,27 @@
   --blue-2: #5f7285;
   --light-blue: #4fc4f6;
 
+  /* Translation workspace */
+  --translation-background: #f6f6f6;
+  --translation-border: #bbbbbb;
+  --translation-color: #000000;
+  --translation-secondary-color: #888888;
+  --translation-main-button-color: #000000;
+  --translation-subtitle-color: #555555;
+  --editor-background: #ffffff;
+  --editor-color: #444444;
+  --editor-form-background: #e8e8e8;
+  --editor-menu-background: #ffffff;
+  --editor-menu-color: #555555;
+  --editor-menu-action-button-color: #000000;
+
+  /* Rarely used */
+  --black-brown: #2d2323;
+  --brown-1: #676054;
+  --mustard-yellow: #fed271;
+  --pink: #ff3366cc;
+  --red: #ff0a43;
+
   /* Chart colors */
   --green-blue: #4fc4f666;
   --grey-9: #5f7285;
@@ -98,10 +119,4 @@
 
   --white-1: #444444;
   --white-5: #e2e2e2;
-
-  --black-brown: #2d2323;
-  --brown-1: #676054;
-  --mustard-yellow: #fed271;
-  --pink: #ff3366cc;
-  --red: #ff0a43;
 }
diff --git a/translate/public/translate.html b/translate/public/translate.html
@@ -16,7 +16,7 @@
     <title>Pontoon</title>
 
     <!-- Inlining CSS mitigates/prevents fouc. -->
-    <style> body { background: var(--dark-grey-2) !important; } </style>
+    <style> body { background: var(--translation-background) !important; } </style>
     <link href="/static/css/fontawesome-all.css" rel="stylesheet" />
     <link href="/static/css/boilerplate.css" rel="stylesheet" />
     <link href="/static/css/fonts.css" rel="stylesheet" />

diff --git a/translate/src/App.css b/translate/src/App.css
@@ -7,7 +7,7 @@
 
 #app > header {
   background: var(--black-3);
-  border-bottom: 1px solid var(--dark-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
   box-sizing: border-box;
   height: 60px;
   min-width: 700px;
@@ -31,7 +31,7 @@
 }
 
 #app > .main-content > .panel-content {
-  border-left: 1px solid var(--light-grey-1);
+  border-left: 1px solid var(--main-border-1);
   box-sizing: border-box;
   width: 75%;
 }

diff --git a/translate/src/index.css b/translate/src/index.css
@@ -14,7 +14,6 @@ button {
 }
 
 body {
-  background: var(--black-3);
   color: var(--white-1);
 }
 

diff --git a/translate/src/modules/batchactions/components/BatchActions.css b/translate/src/modules/batchactions/components/BatchActions.css
@@ -5,7 +5,7 @@
 
 .batch-actions .topbar {
   background: var(--grey-3);
-  border-bottom: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
   padding: 12px 10px 13px;
 }
 
@@ -89,7 +89,7 @@
   background: var(--light-green-1);
   border: none;
   border-radius: 3px;
-  color: var(--black-3);
+  color: var(--translation-main-button-color);
   font-weight: 600;
   margin-top: 10px;
   padding: 15px 5px;

diff --git a/translate/src/modules/comments/components/AddComment.css b/translate/src/modules/comments/components/AddComment.css
@@ -8,7 +8,7 @@
   background-color: var(--dark-grey-1);
   border: none;
   border-radius: 4px;
-  color: var(--white-1);
+  color: var(--translation-color);
   font-size: 11px;
   max-height: 144px;
   margin: auto;

diff --git a/translate/src/modules/editor/components/Editor.css b/translate/src/modules/editor/components/Editor.css
@@ -1,6 +1,6 @@
 .editor {
   background: var(--black-3);
-  border-bottom: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
   display: flex;
   flex-direction: column;
   position: relative;

diff --git a/translate/src/modules/editor/components/EditorMenu.css b/translate/src/modules/editor/components/EditorMenu.css
@@ -1,17 +1,22 @@
 .editor-menu {
+  background: var(--editor-menu-background);
   color: var(--white-1);
   padding: 10px;
   position: relative;
 }
 
+.translationform + .editor-menu {
+  background: var(--editor-form-background);
+}
+
 .editor-menu .actions {
   float: right;
 }
 
 .editor-menu .actions button {
   background: transparent;
   border: none;
-  color: var(--white-1);
+  color: var(--editor-menu-action-button-color);
   height: 40px;
   margin: 0 2px;
   padding: 10px 3px;
@@ -30,7 +35,7 @@
 .editor-menu .actions .action-suggest {
   background: var(--light-green-1);
   border-radius: 3px;
-  color: var(--black-3);
+  color: var(--translation-main-button-color);
   font-weight: 600;
   margin-left: 10px;
   padding: 10px;

diff --git a/translate/src/modules/editor/components/EditorSettings.css b/translate/src/modules/editor/components/EditorSettings.css
@@ -6,7 +6,7 @@
 
 .editor-settings .selector {
   cursor: pointer;
-  color: var(--light-grey-7);
+  color: var(--editor-menu-color);
   font-size: 22px;
   padding: 9px 5px 9px 0;
 }
@@ -17,6 +17,7 @@
 
 .editor-settings .menu {
   background-color: var(--black-3);
+  border: 1px solid var(--main-border-1);
   bottom: auto;
   color: var(--light-grey-7);
   list-style: none;
@@ -48,7 +49,7 @@
 }
 
 .editor-settings .menu .horizontal-separator {
-  border-top: 1px solid var(--grey-2);
+  border-top: 1px solid var(--main-border-1);
   height: 0;
   margin: 5px 0;
   padding: 0;

diff --git a/translate/src/modules/editor/components/FtlSwitch.css b/translate/src/modules/editor/components/FtlSwitch.css
@@ -1,7 +1,7 @@
 .editor .ftl {
   background: transparent;
   border: 0;
-  color: var(--light-grey-7);
+  color: var(--editor-menu-color);
   float: left;
   font-size: 18px;
   font-weight: bold;

diff --git a/translate/src/modules/editor/components/KeyboardShortcuts.css b/translate/src/modules/editor/components/KeyboardShortcuts.css
@@ -5,13 +5,18 @@
 }
 
 .keyboard-shortcuts .selector {
+  color: var(--editor-menu-color);
   font-size: 22px;
   padding: 9px 5px;
 }
 
+.keyboard-shortcuts .selector:hover {
+  color: var(--light-green-1);
+}
+
 .keyboard-shortcuts .overlay {
   background: var(--black-3);
-  border: 1px solid var(--dark-grey-1);
+  border: 1px solid var(--main-border-1);
   font-size: 13px;
   width: 400px;
   height: 435px;
@@ -52,7 +57,7 @@
 
 .keyboard-shortcuts .overlay span {
   background: var(--dark-grey-2);
-  border: 1px solid var(--light-grey-1);
+  border: 1px solid var(--main-border-1);
   border-radius: 2px;
   font-weight: 300;
   margin: 0 4px;

diff --git a/translate/src/modules/editor/components/TranslationLength.css b/translate/src/modules/editor/components/TranslationLength.css
@@ -1,5 +1,5 @@
 .translation-length {
-  color: var(--light-grey-7);
+  color: var(--editor-menu-color);
   float: left;
   line-height: 22px;
   padding: 9px 5px;

diff --git a/translate/src/modules/entitieslist/components/EntitiesList.css b/translate/src/modules/entitieslist/components/EntitiesList.css
@@ -1,5 +1,4 @@
 .entities {
-  background-color: var(--dark-grey-2);
   height: calc(100% - 53px);
   overflow-y: auto;
   position: relative;

diff --git a/translate/src/modules/entitieslist/components/Entity.css b/translate/src/modules/entitieslist/components/Entity.css
@@ -32,6 +32,7 @@
 
 .entity .source-string,
 .entity .translation-string {
+  color: var(--translation-color);
   display: inline-block;
   margin: 0;
   padding-bottom: 3px;
@@ -41,7 +42,7 @@
 }
 
 .entity .translation-string {
-  color: var(--light-grey-7);
+  color: var(--translation-secondary-color);
   min-height: 20px;
   text-align: start;
 }

diff --git a/translate/src/modules/entitydetails/components/EntityDetails.css b/translate/src/modules/entitydetails/components/EntityDetails.css
@@ -1,5 +1,4 @@
 .entity-details {
-  background: var(--dark-grey-2);
   display: flex;
   height: 100%;
 }
@@ -16,6 +15,6 @@
 
 .entity-details .third-column {
   width: 33.33%;
-  border-left: 1px solid var(--light-grey-1);
+  border-left: 1px solid var(--main-border-1);
   box-sizing: border-box;
 }
diff --git a/translate/src/modules/entitydetails/components/EntityNavigation.css b/translate/src/modules/entitydetails/components/EntityNavigation.css
@@ -1,6 +1,6 @@
 .entity-navigation {
   background: var(--grey-3);
-  border-bottom: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
   padding: 12px 10px 13px;
 }
 

diff --git a/translate/src/modules/entitydetails/components/Helpers.css b/translate/src/modules/entitydetails/components/Helpers.css
@@ -1,5 +1,5 @@
 .third-column .top {
-  border-bottom: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
   box-sizing: border-box;
   height: calc(40% + 21px);
   min-height: 200px;
@@ -26,8 +26,8 @@
 
 .react-tabs__tab {
   background: var(--grey-3);
-  border-bottom: 1px solid var(--light-grey-1);
-  border-right: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
+  border-right: 1px solid var(--main-border-1);
   box-sizing: border-box;
   color: var(--light-grey-6);
   cursor: pointer;
@@ -45,7 +45,7 @@
 }
 
 .react-tabs__tab--selected {
-  background: var(--dark-grey-2);
+  background: inherit;
   border-bottom: none;
 }
 
@@ -61,7 +61,7 @@
 
 /* Other tools styles */
 .react-tabs span.count {
-  background: var(--dark-grey-2);
+  background: var(--translation-background);
   border-radius: 3px;
   color: var(--light-grey-6);
   font-weight: 300;

diff --git a/translate/src/modules/entitydetails/components/Metadata.css b/translate/src/modules/entitydetails/components/Metadata.css
@@ -1,6 +1,6 @@
 .metadata {
-  background-color: var(--dark-grey-2);
-  color: var(--light-grey-7);
+  border-bottom: 1px solid var(--main-border-1);
+  color: var(--translation-secondary-color);
   font-size: 12px;
   font-style: italic;
   min-height: 114px;
@@ -18,7 +18,7 @@
 }
 
 .metadata .title {
-  color: var(--light-grey-2);
+  color: var(--translation-subtitle-color);
 }
 
 .metadata div a {
@@ -37,7 +37,7 @@
 }
 
 .metadata .original {
-  color: white;
+  color: var(--translation-color);
   font-size: 14px;
   font-style: normal;
   line-height: 22px;
@@ -93,7 +93,7 @@
 }
 
 .metadata .context a {
-  color: var(--light-grey-7);
+  color: var(--translation-secondary-color);
 }
 
 .metadata .context a:hover {

diff --git a/translate/src/modules/history/components/History.css b/translate/src/modules/history/components/History.css
@@ -9,6 +9,7 @@
 }
 
 .history p {
+  color: var(--translation-color);
   min-height: 22px;
 }
 

diff --git a/translate/src/modules/history/components/HistoryTranslation.css b/translate/src/modules/history/components/HistoryTranslation.css
@@ -1,5 +1,5 @@
 .history .wrapper {
-  border-bottom: 1px solid var(--light-grey-1);
+  border-bottom: 1px solid var(--main-border-1);
 }
 
 .history .translation {
@@ -24,7 +24,7 @@
 
 .history .translation .user-avatar img {
   border-radius: 6px;
-  border: 2px solid var(--light-grey-1);
+  border: 2px solid var(--icon-border-1);
 }
 
 .history .translation:hover .user-avatar img {
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,6 @@ button { @@
     }
     body {
-      background: var(--black-3);
       color: var(--white-1);
     }
@@ Expand Down @@