UI for GPT templates in doccreator menu

1 files changed, 116 insertions, 12 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index b3bacb13c..e2b4014bd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -22,14 +22,14 @@
 }
 
 .docCreatorMenu-menu-button {
-    width: 30px;
-    height: 30px;
+    width: 25px;
+    height: 25px;
     background: whitesmoke; 
-    background-color: rgb(34, 34, 37);
+    background-color: rgb(50, 50, 50);
     border-radius: 5px;
     border: 1px solid rgb(180, 180, 180);
     padding: 0px;
-    font-size: 14px;
+    font-size: 13px;
     //box-shadow: 3px 3px rgb(29, 29, 31);
 
     &:hover {
@@ -222,7 +222,7 @@
 
 .docCreatorMenu-option-divider {
     border-top: 1px solid rgb(180, 180, 180);
-    width: 80%;
+    width: 95%;
     margin-top: 10px;
     margin-bottom: 10px;
 }
@@ -256,6 +256,18 @@
 // DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
 
+.docCreatorMenu-templates-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin: 5px;
+    margin-top: 0px;
+    width: calc(100% - 10px);
+    height: calc(100% - 30px);
+    border: 1px solid rgb(180, 180, 180);
+    border-radius: 5px;
+}
 
 .docCreatorMenu-preview-container {
     display: grid;
@@ -263,20 +275,18 @@
     grid-template-rows: 140px;
     grid-auto-rows: 141px;
     overflow-y: scroll;
-    margin: 5px;
+    margin: 0px;
     margin-top: 0px;
-    width: calc(100% - 10px);
-    height: calc(100% - 30px);
-    border: 1px solid rgb(180, 180, 180);
-    border-radius: 5px;
+    width: 100%;
+    height: 100%;
 }
 
 .docCreatorMenu-preview-window {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 125px;
-    height: 125px;
+    width: 113px;
+    height: 113px;
     margin-top: 10px;
     margin-left: 10px;
     border: 1px solid rgb(163, 163, 163);
@@ -295,9 +305,103 @@
 
     &.empty {
         font-size: 35px;
+        flex: 0 0 auto;
+
+        &.GPT {
+            margin-top: 0px;
+        }
+    }
+}
+
+.docCreatorMenu-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin: 0px;
+    width: 100%;
+    height: 250;
+    flex: 0 0 auto;
+}
+
+.docCreatorMenu-GPT-options-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: auto;
+    margin: 0px;
+    margin-top: 5px;
+    padding: 0px;
+}
+
+.docCreatorMenu-GPT-templates-preview {
+    display: flex;
+    flex-direction: row;
+    //justify-content: center;
+    align-items: center;
+    overflow-y: scroll;
+    position: relative;
+    height: 125px;
+    width: calc(100% - 10px);
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
+}
+
+.docCreatorMenu-section-topbar {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    .section-reveal-options {
+        margin: 0px;
+        margin-left: auto;
+        border: 0px;
+        background: none;
+    }
+}
+
+.docCreatorMenu-section-title {
+    border: 1px solid rgb(163, 163, 163);
+    border-top: 0px;
+    border-left: 0px;
+    border-bottom-right-radius: 5px;
+    font-size: 12px;
+    padding: 2px;
+    padding-left: 3px;
+    padding-right: 3px;
+    margin-bottom: 3px;
+}
+
+.docCreatorMenu-GPT-generate {
+    height: 30px;
+    width: 30px;
+    background-color: rgb(176, 229, 149); 
+    border: 1px solid rgb(126, 219, 80);
+    border-radius: 5px;
+    padding: 0px;
+    font-size: 14px;
+    color: white;
+    letter-spacing: 1px;
+    flex: 0 0 auto;
+
+    &:hover {
+        background-color: rgb(129, 223, 83);
+        border: 2px solid rgb(80, 185, 28); 
     }
 }
 
+.docCreatorMenu-GPT-prompt-input {
+    width: 140px;
+    overflow-y: scroll;
+    border: 1px solid rgb(180, 180, 180);
+    background-color: rgb(35, 35, 35);
+    border-radius: 3px;
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 // DocCreatorMenu options CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------