Merge pull request #242 from OpenCovenant/penda_new_look

New Penda Look
OpenCovenant · Sep 14, 2023 · 73f7bd7 · 73f7bd7
2 parents 6030cf2 + 1af4f1c
commit 73f7bd7
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 282 deletions.
diff --git a/cypress/e2e/does-not-change-typo.cy.js b/cypress/e2e/does-not-change-typo.cy.js
diff --git a/cypress/e2e/file-upload.cy.js b/cypress/e2e/file-upload.cy.js
@@ -9,54 +9,60 @@ describe("tests for upload document button", () => {
     });
 
     it("will click on button and will check for loanword in output conainer on WORD file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.docx");
         cy.get("span.loanword").contains("lider").should("exist");
     });
 
     it("will click on button and will check for loanword in output conainer on WORD file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.docx");
         cy.get("span.typo").contains("asd").should("exist");
     });
 
     it("will click on button and will check for loanword in output conainer on PDF file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.pdf");
         cy.get("span.loanword").contains("lider").should("exist");
     });
 
     it("will click on button and will check for loanword in output conainer on PDF file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.pdf");
         cy.get("span.typo").contains("asd").should("exist");
     });
 
     it("will click on button and will check for loanword in output conainer on LIBRA file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.odt");
         cy.get("span.loanword").contains("lider").should("exist");
     });
 
     it("will click on button and will check for loanword in output conainer on LIBRA file", () => {
-        cy.get('button[id="uploadDocumentToggleButton"]').click();
-        cy.get(".btn-primary")
-            .contains(labels.uploadFileLabel)
+        // TODO update?
+        // cy.get('button[id="uploadDocumentToggleButton"]').click();
+        cy.get('[data-test="editor-placeholder-upload"]')
+            // .contains(labels.uploadFileLabel)
             .click()
             .selectFile("cypress/fixtures/test.odt");
         cy.get("span.typo").contains("asd").should("exist");

diff --git a/cypress/e2e/placeholder-does-not-show-after-clicking-dockument.cy.js b/cypress/e2e/placeholder-does-not-show-after-clicking-dockument.cy.js
diff --git a/cypress/e2e/upload-document-back-writing-tab.cy.js b/cypress/e2e/upload-document-back-writing-tab.cy.js
diff --git a/src/app/footer/footer.component.css b/src/app/footer/footer.component.css
@@ -1,5 +1,5 @@
 div:first-of-type {
-    background-color: var(--bar-color);
+    background-color: #f8f9fa;
 }
 
 footer div:first-child {
@@ -15,5 +15,5 @@ a {
 
 .footer-dark-mode {
     color: var(--dark-mode-anti-theme) !important;
-    background-color: var(--dark-mode-smooth-theme) !important;
+    background-color: var(--dark-mode-theme) !important;
 }
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
@@ -1,5 +1,5 @@
 .navbar {
-    background-color: var(--bar-color);
+    background-color: #f8f9fa;
 }
 
 .navbar div {
@@ -13,11 +13,15 @@
 }
 
 .header-dark-mode {
-    background-color: var(--dark-mode-smooth-theme);
+    background-color: var(--dark-mode-theme);
 }
 
 .header-button-dark-mode {
-    background-color: var(--dark-mode-smooth-theme);
+    background-color: #2c2c2c !important;
+}
+
+.header-button-dark-mode:hover {
+    background-color: #545454 !important;
 }
 
 .header-text-dark-mode {
@@ -29,7 +33,8 @@
 }
 
 .off-canvas-start-button {
-    border: 1px solid rgb(213, 213, 213);
+    border: 0;
+    background-color: #f9f9f9;
     border-radius: 0.5rem;
 }
 

diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
@@ -5,8 +5,48 @@
     flex: 1;
 }
 
+.card-body {
+    flex: 1 1 auto;
+    padding: 1rem;
+    background-color: #f8f9fa;
+}
+
+.card-body-dark-mode {
+    background-color: #9a9a9a;
+}
+
+.list-group-item {
+    position: relative;
+    display: block;
+    padding: 0.5rem 1rem;
+    color: #212529;
+    text-decoration: none;
+    background-color: #f8f9fa;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 0px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+    box-shadow: 0 0 10px rgba(216, 216, 216, 0.6);
+}
+
+.card-header {
+    padding: 0.5rem 1rem;
+    margin-bottom: 0;
+    background-color: #00000008;
+    border-bottom: 0px solid rgba(0, 0, 0, 0.125);
+}
+
 .input-container {
-    flex: 0 0 60%;
+    flex: 0 0 62%;
     margin-left: 3rem;
 }
 
@@ -32,10 +72,11 @@
     font-size: 17px;
     padding-right: 2%;
     outline: 0 solid transparent;
+    background-color: #f8f9fa;
 }
 
 .editor-dark-mode {
-    color: var(--dark-mode-anti-theme);
+    background-color: #9a9a9a !important;
 }
 
 .clear-element-dark-mode {
@@ -46,6 +87,9 @@
     display: flex;
     justify-content: space-between;
     font-size: 0.8rem;
+    /* TODO: an attempt to keep the bottom bar of the editor always visible */
+    /*position: sticky;*/
+    /*bottom: 0;*/
 }
 
 .characters-words-markings {
@@ -75,13 +119,10 @@
     color: var(--dark-mode-anti-theme) !important;
 }
 
-#documentUploadingHiddenInput {
-    display: none;
-}
-
 .output-container {
     flex: 0 0 30%;
     margin-right: 3rem;
+    /*padding-right: 25px;*/
 }
 
 .second-header {
@@ -118,6 +159,11 @@
     color: #484848;
 }
 
+.settings-dark-mode {
+    background-color: #2c2c2c;
+    color: white;
+}
+
 .suggestions {
     display: flex;
     flex-wrap: wrap;
@@ -126,6 +172,10 @@
     gap: 1rem;
 }
 
+.editor-hr {
+    color: lightgray;
+}
+
 .suggestion {
     color: black;
 }
@@ -206,11 +256,21 @@
 
 #editor-placeholder {
     position: absolute;
-    color: #a6a6a6;
+    /*color: #707070;*/
+    color: #858585;
+}
+
+.editor-placeholder-text {
     pointer-events: none;
     user-select: none;
 }
 
+.editor-placeholder-upload {
+    color: dodgerblue;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
 /*TODO: improve the following*/
 #editor > p > .typo {
     cursor: pointer;
@@ -230,14 +290,13 @@
     border: none;
     padding-top: 3px;
     padding-bottom: 3px;
+    color: black;
 }
-
-/*TODO change color on .suggestion:hover ?*/
-
-.btnUnselected {
+.suggestion-dark-mode {
+    background-color: #686868;
     color: white;
-    background-color: #a9a9a9;
 }
+/*TODO change color on .suggestion:hover ?*/
 
 @media (max-width: 800px) {
     .high-level-container {
@@ -273,7 +332,7 @@
 }
 
 .second-header-dark-mode {
-    background-color: var(--dark-mode-smooth-theme);
+    background-color: var(--dark-mode-theme);
 }
 
 .supported-documents-text-dark-mode {