fixed buttons to have an embedContainer. cleaning up notetaking view - fixing colors for input buttons, fixing when buttons appear (by extending the column targe to always be 100%)

1 files changed, 22 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index 4c2dcf9ab..81000e7a5 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -1,7 +1,7 @@
 @import '../global/globalCssVariables.module.scss';
 
 .collectionNoteTakingView-DocumentButtons {
-    display: none;
+    opacity: 0;
     justify-content: space-between;
     margin: auto;
 }
@@ -15,7 +15,6 @@
 
     .editableView-container-editing-oneLine,
     .editableView-container-editing {
-        color: grey;
         padding: 10px;
         width: 100%;
     }
@@ -29,7 +28,6 @@
     .editableView-input {
         outline-color: black;
         letter-spacing: 2px;
-        color: grey;
         border: 0px;
         padding: 12px 10px 11px 10px;
     }
@@ -41,7 +39,6 @@
     .editableView-input {
         outline-color: black;
         letter-spacing: 2px;
-        color: grey;
         border: 0px;
         padding: 12px 10px 11px 10px;
     }
@@ -51,9 +48,9 @@
     display: flex;
 }
 
-.collectionNoteTakingViewFieldColumn:hover {
+.collectionNoteTakingViewFieldColumnHover:hover {
     .collectionNoteTakingView-DocumentButtons {
-        display: flex;
+        opacity: 1;
     }
 }
 
@@ -100,6 +97,9 @@
         flex-direction: column;
         height: max-content;
     }
+    .collectionNoteTakingViewFieldColumnHover {
+        min-height: 100%; // if we use this, then we can't have autoHeight
+    }
 
     .collectionSchemaView-previewDoc {
         height: 100%;
@@ -250,7 +250,6 @@
             overflow: visible;
             width: 100%;
             display: flex;
-            color: gray;
             align-items: center;
         }
     }
@@ -262,10 +261,6 @@
         background: $medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
-        .editableView-input {
-            color: $dark-gray;
-        }
-
         .editableView-input:hover,
         .editableView-container-editing:hover,
         .editableView-container-editing-oneLine:hover {
@@ -288,7 +283,6 @@
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
-                color: grey;
                 padding: 10px;
             }
 
@@ -301,7 +295,6 @@
             .editableView-input {
                 padding: 12px 10px 11px 10px;
                 border: 0px;
-                color: grey;
                 text-align: center;
                 letter-spacing: 2px;
                 outline-color: black;
@@ -409,7 +402,6 @@
 
         .editableView-container-editing-oneLine,
         .editableView-container-editing {
-            color: grey;
             padding: 10px;
             width: 100%;
         }
@@ -423,13 +415,16 @@
         .editableView-input {
             outline-color: black;
             letter-spacing: 2px;
-            color: grey;
             border: 0px;
             padding: 12px 10px 11px 10px;
+            &::placeholder {
+                color: black;
+            }
         }
     }
 
     .collectionNoteTakingView-addDocumentButton {
+        opacity: 0.5;
         font-size: 75%;
         letter-spacing: 2px;
         cursor: pointer;
@@ -437,10 +432,12 @@
         .editableView-input {
             outline-color: black;
             letter-spacing: 2px;
-            color: grey;
             border: 0px;
             padding: 12px 10px 11px 10px;
         }
+        &:hover {
+            opacity: unset;
+        }
     }
 
     .collectionNoteTakingView-addGroupButton {
@@ -499,6 +496,15 @@
     }
 }
 
+.collectionNoteTakingViewLight {
+    .collectionNoteTakingView-addDocumentButton,
+    .collectionNoteTakingView-addGroupButton {
+        .editableView-input::placeholder {
+            color: white;
+        }
+    }
+}
+
 @media only screen and (max-device-width: 480px) {
     .collectionNoteTakingView .collectionNoteTakingView-columnDragger,
     .collectionNoteTakingView-columnDragger {