docCreatorMenu refactor work

1 files changed, 0 insertions, 1044 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
deleted file mode 100644
index 4ea904b8e..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ /dev/null
@@ -1,1044 +0,0 @@
-.no-margin {
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-    margin-left: 0px !important;
-    margin-right: 0px !important;
-}
-
-.docCreatorMenu-cont {
-    position: absolute;
-    z-index: 100000;
-    // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
-    // background: whitesmoke; 
-    // color: black;
-    border-radius: 3px;
-}   
-
-.docCreatorMenu-menu {
-    display: flex;
-    flex-direction: row;
-    height: 25px;
-    align-items: flex-end;
-}
-
-.docCreatorMenu-menu-button {
-    width: 25px;
-    height: 25px;
-    background: whitesmoke; 
-    background-color: rgb(50, 50, 50);
-    border-radius: 5px;
-    border: 1px solid rgb(180, 180, 180);
-    padding: 0px;
-    font-size: 13px;
-    //box-shadow: 3px 3px rgb(29, 29, 31);
-
-    &:hover {
-        box-shadow: none;
-    }
-     
-    &.right{
-        margin-left: 0px;
-        font-size: 12px;
-    }
-
-    &.close-menu {
-        font-size: 12px;
-        width: 18px;
-        height: 18px;
-        border-radius: 2px;
-        font-size: 12px;
-        margin-left: auto;
-    }
-
-    &.options {
-        margin-left: 0px;
-    }
-
-    &:hover {
-        background-color: rgb(60, 60, 65);
-    }
-
-    &.top-bar {
-        border-bottom: 25px solid #555;
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        // border-top-left-radius: 5px;
-        // border-top-right-radius: 5px;
-        border-radius: 0px;
-        height: 0;
-        width: 50px;
-    }
-
-    &.preview-toggle {
-        margin: 0px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-left: 0px;
-    }
-}
-
-.docCreatorMenu-top-buttons-container {
-    position: relative;
-    margin-top: 5px;
-    margin-left: 7px;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    width: 150px;
-    height: auto;
-}
-
-.top-button-container {
-    position: relative;
-    width: 52px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.left {
-        z-index: 3;
-    }
-
-    &.middle {
-        position: absolute;
-        left: 40px;
-        z-index: 2;
-
-        &.selected {
-            z-index: 4;
-        }
-    }
-
-    &.right {
-        position: absolute;
-        left: 80px;
-        z-index: 1;
-
-        &.selected {
-            z-index: 4;
-        }
-    }
-
-    &:hover::before{
-        border-bottom: 20px solid rgb(82, 82, 82);
-    }
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-bottom: 20px solid rgb(50, 50, 50);
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        height: 0;
-        width: 50px;
-    }
-
-    &::after {
-        content: "";    
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        border-bottom: 22px solid rgb(180, 180, 180);
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        height: 0;
-        width: 52px;
-        z-index: -1;
-    }
-
-    &.selected::before {
-        border-bottom-color: rgb(67, 119, 214);
-    }
-}
-
-.top-button-content {
-    position: relative;
-    z-index: 1;
-    color: white;
-}
-
-.docCreatorMenu-menu-hr{
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: rgb(180, 180, 180);
-}
-
-.docCreatorMenu-placement-indicator {
-    position: absolute;
-    z-index: 100000;
-    border-left: solid 3px #9fd7fb;
-    border-top: solid 3px #9fd7fb;
-    width: 25px;
-    height: 25px;
-}
-
-.docCreatorMenu-general-options-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0px;
-    padding: 0px;
-    gap: 5px;
-}
-
-.docCreatorMenu-save-layout-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    background-color: rgb(99, 148, 238); 
-    border: 2px solid rgb(80, 107, 152);
-    border-radius: 5px;
-    margin-bottom: 20px;
-    font-size: 25px;
-
-    &:hover{
-        background-color: rgb(59, 128, 255);  
-        border: 2px solid rgb(53, 80, 127);
-    }
-}
-
-.docCreatorMenu-create-docs-button {
-    width: 40px;
-    height: 40px;
-    background-color: rgb(176, 229, 149); 
-    border: 2px solid rgb(126, 219, 80);
-    border-radius: 5px;
-    padding: 0px;
-    font-size: 25px;
-    color: white;
-    flex: 0 0 auto;
-    margin-bottom: 20px; //remove later !!!
-
-    &:hover {
-        background-color: rgb(129, 223, 83);
-        border: 2px solid rgb(80, 185, 28); 
-    }
-}
-
-.docCreatorMenu-option-divider {
-    border-top: 1px solid rgb(180, 180, 180);
-    width: 95%;
-    margin-top: 10px;
-    margin-bottom: 10px;
-
-    &.full {
-        width: 100%;
-    }
-}
-
-//------------------------------------------------------------------------------------------------------------------------------------------
-// Resizers CSS
-//--------------------------------------------------------------------------------------------------------------------------------------------
-
-.docCreatorMenu-resizer {
-    position: absolute;
-    background-color: none;
-
-    &.top, &.bottom {
-        height: 10px;
-        cursor: ns-resize;
-    }
-
-    &.right, &.left {
-        width: 10px;
-        cursor: ew-resize;
-    }
-
-    &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
-        height: 15px;
-        width: 15px;
-        background-color: none;
-    }
-}
-
-//------------------------------------------------------------------------------------------------------------------------------------------
-// DocCreatorMenu templates preview CSS
-//--------------------------------------------------------------------------------------------------------------------------------------------
-
-.docCreatorMenu-templates-view {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    overflow-y: scroll;
-    //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;
-    -ms-overflow-style: none; 
-    scrollbar-width: none;
-}
-
-.docCreatorMenu-preview-container {
-    display: grid;
-    grid-template-columns: repeat(2, 140px);
-    grid-template-rows: 140px;
-    grid-auto-rows: 141px;
-    overflow-y: scroll;
-    margin: 0px;
-    margin-top: 0px;
-    width: 100%;
-    height: 100%;
-}
-
-.docCreatorMenu-expanded-template-preview {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .top-panel{
-        width: 100%;
-        height: 10px;
-    }
-
-    .right-buttons-panel {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        height: 100%;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 40px;
-        padding: 5px;
-        gap: 2px;
-    }
-}
-
-.docCreatorMenu-preview-window {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 113px;
-    height: 113px;
-    margin-top: 10px;
-    margin-left: 10px;
-    border: 1px solid rgb(163, 163, 163);
-    border-radius: 5px;
-    box-shadow: 5px 5px rgb(29, 29, 31);
-    flex: 0 0 auto;
-
-    &:hover{
-        background-color: rgb(72, 72, 73);
-    }
-
-    &.empty {
-        font-size: 35px;
-
-        &.GPT {
-            margin-top: 0px;
-        }
-    }
-
-    .option-button {
-        display: none;
-        height: 25px;
-        width: 25px;
-        margin: 0px;
-        background: none;
-        border: 0px;
-        padding: 0px;
-        font-size: 15px;
-
-        &.right {
-            position: absolute;
-            bottom: 0px;
-            right: 0px;
-        }
-
-        &.left {
-            position: absolute;
-            bottom: 0px;
-            left: 0px;
-        }
-
-        &.top-left {
-            position: absolute;
-            top: 0px;
-            left: 0px;
-        }
-    }
-
-    &:hover .option-button {
-        display: block;
-    }
-    
-}
-
-.docCreatorMenu-preview-image{ 
-    background-color: transparent;
-    height: 100px;
-    width: 100px;
-    display: block;
-    object-fit: contain;
-    border-radius: 5px;
-
-    &.expanded {
-        height: 100%;
-        width: 100%;
-    }
-}
-
-.docCreatorMenu-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    margin: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    width: 100%;
-    height: 200;
-    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-templates-preview-window {
-    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;
-
-    .loading-spinner {
-        justify-self: center;
-    }
-}
-
-.divvv{
-    width: 200;
-    height: 200;
-    border: solid 1px white;
-}
-
-.docCreatorMenu-section-topbar {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-}
-
-.section-reveal-options {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-right: 0px;
-    margin-left: auto;
-    border: 0px;
-    background: none;
-
-    &.float-right {
-        float: right;
-    }
-}
-
-.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;
-    height: 25px;
-    overflow-y: scroll;
-    border: 1px solid rgb(180, 180, 180);
-    background-color: rgb(35, 35, 35);
-    border-radius: 3px;
-    padding-left: 4px;
-}
-
-//------------------------------------------------------------------------------------------------------------------------------------------
-// DocCreatorMenu options CSS
-//--------------------------------------------------------------------------------------------------------------------------------------------
-
-.docCreatorMenu-option-container{
-    display: flex;
-    width: 180px;
-    height: 30px;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
-
-    &.layout{
-        z-index: 5;
-    }
-}
-
-.docCreatorMenu-option-title{
-    display: flex;
-    width: 140px;
-    height: 30px;
-    background: whitesmoke; 
-    background-color: rgb(34, 34, 37);
-    border-radius: 5px;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border: 1px solid rgb(180, 180, 180);
-    padding: 0px;
-    font-size: 12px;
-    align-items: center;
-    justify-content: center;
-    text-transform: uppercase;
-    cursor: pointer;
-
-    &.spacer {
-        border-left: none;
-        border-right: none;
-        border-radius: 0px;
-        width: auto;
-        text-transform: none;
-         
-        &.small {
-            height: 20px;
-            transform: translateY(-5px);
-        }
-    }
-
-    &.config {
-        border-radius: 4px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-        width: 30px;
-        border-right: 0px;
-        gap: 3px;
-
-        &.layout-config {
-            height: 20px;
-            transform: translateY(-5px);
-            text-transform: none;
-            padding-left: 2px;
-        }
-
-        &.dimensions {
-            text-transform: none;
-            height: 20px;
-            transform: translateY(-5px);
-            width: 70px;
-        }
-    }
-}
-
-.docCreatorMenu-input {
-    display: flex;
-    height: 30px;
-    background-color: rgb(34, 34, 37);
-    border: 1px solid rgb(180, 180, 180);
-    align-items: center;
-    justify-content: center;
-
-    &.config {
-        border-radius: 4px;
-        margin: 0px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-left: 0px;
-        width: 25px;
-
-        &.layout-config {
-            height: 20px;
-            transform: translateY(-5px);
-        }
-
-        &.dimensions {
-            height: 20px;
-            width: 30px;
-            transform: translateY(-5px);
-
-            &.right {
-                border-top-left-radius: 0px;
-                border-bottom-left-radius: 0px;
-            }
-
-            &.left {
-                border-radius: 0px;
-                border-right: 0px;
-            }
-        }
-    }
-}
-
-.docCreatorMenu-configuration-bar {
-    width: 200;
-    gap: 5px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    &.no-gap {
-        gap: 0px;
-    }
-}
-
-.docCreatorMenu-menu-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: scroll;
-    margin: 5px;
-    margin-top: 0px;
-    width: calc(100% - 10px);
-    height: calc(100% - 30px);
-    border: 1px solid rgb(180, 180, 180);
-    border-radius: 5px;
-
-    .docCreatorMenu-option-container{
-        width: 180px;
-        height: 30px;
-
-        .docCreatorMenu-dropdown-hoverable {
-            width: 140px;
-            height: 30px;
-    
-            &:hover .docCreatorMenu-dropdown-content {
-                display: block;
-            }
-    
-            &:hover .docCreatorMenu-option-title {
-                border-bottom-left-radius: 0px;
-                border-bottom-right-radius: 0px;
-            }
-        
-            .docCreatorMenu-dropdown-content {
-                display: none;
-                min-width: 100px;
-                height: 75px;
-                overflow-y: scroll;
-                -ms-overflow-style: none; 
-                scrollbar-width: none;
-                border-bottom: 1px solid rgb(180, 180, 180);
-                border-bottom-left-radius: 5px;
-                border-bottom-right-radius: 5px;
-        
-                .docCreatorMenu-dropdown-option{
-                    display: flex;
-                    background-color: rgb(42, 42, 46);
-                    border-left: 1px solid rgb(180, 180, 180);
-                    border-right: 1px solid rgb(180, 180, 180);
-                    border-bottom: 1px solid rgb(180, 180, 180);
-                    width: 140px;
-                    height: 25px;
-                    justify-content: center;
-                    justify-items: center;
-                    padding-top: 3px;
-    
-                    &:hover {
-                        background-color: rgb(68, 68, 74);
-                        cursor: pointer;
-                    }
-                }
-            }    
-        }
-    }
-}
-
-.docCreatorMenu-layout-preview-window-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 85%;
-    height: auto;
-    position: relative;
-    padding: 0px;
-
-    &:hover .docCreatorMenu-zoom-button-container {
-        display: block;
-    }
-
-    .docCreatorMenu-layout-preview-window {
-        padding: 5px;
-        flex: 0 0 auto;
-        overflow: scroll;
-        display: grid;
-        width: 100%;
-        aspect-ratio: 1;
-        //height: auto;
-        // max-width: 240;
-        // max-height: 240;
-        border: 1px solid rgb(180, 180, 180);
-        border-radius: 5px;
-        background-color: rgb(34, 34, 37);
-        -ms-overflow-style: none; 
-        scrollbar-width: none;
-
-        &.small {
-            max-width: 100;
-            max-height: 100;
-        }
-
-        .docCreatorMenu-layout-preview-item {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 3px;
-            border: solid 1px lightblue;
-
-            &:hover {
-                border: solid 2px rgb(68, 153, 233);
-                z-index: 2;
-            }
-        }
-    }
-
-    .docCreatorMenu-zoom-button-container {
-        position: absolute;
-        top: 0px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        display: none;
-        z-index: 999;
-    }
-
-    .docCreatorMenu-zoom-button{ 
-        width: 15px;
-        height: 15px;
-        background: whitesmoke; 
-        background-color: rgb(34, 34, 37);
-        border-radius: 3px;
-        border: 1px solid rgb(180, 180, 180);
-        padding: 0px;
-        font-size: 10px;
-        z-index: 6;
-        margin-left: 0px;
-        margin-top: 0px;
-        margin-right: 0px; //225px
-        margin-bottom: 0px;
-    }
-}
-
-//------------------------------------------------------------------------------------------------------------------------------------------
-// DocCreatorMenu dashboard CSS
-//--------------------------------------------------------------------------------------------------------------------------------------------
-
-.docCreatorMenu-dashboard-view {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    overflow-y: hidden;
-    //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;
-    -ms-overflow-style: none; 
-    scrollbar-width: none;
-
-    .panels-container {
-        height: 100%;
-        width: 100%;
-        flex-direction: column;
-        justify-content: flex-start;
-        overflow-y: scroll;
-    }
-
-    .topbar {
-        height: 30px;
-        width: 100%;
-        background-color: rgb(50, 50, 50);
-    }
-
-//     .field-panel {
-//         position: relative;
-//         display: flex;
-//         // align-items: flex-start;
-//         flex-direction: column;
-//         gap: 5px;
-//         padding: 5px;
-//         height: 100px;
-//         //width: 100%;
-//         border: 1px solid rgb(180, 180, 180);
-//         margin: 5px;
-//         margin-top: 0px;
-//         border-radius: 3px;
-//         flex: 0 0 auto;
-
-//         .properties-wrapper {
-//             display: flex;
-//             flex-direction: row;
-//             align-items: flex-start;
-//             gap: 5px;
-
-//             .field-property-container {
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 30%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 align-items: center;
-//                 color: whitesmoke;
-//             }
-
-//             .field-type-selection-container {
-//                 display: flex;
-//                 flex-direction: row;
-//                 align-items: center;
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 31%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 color: whitesmoke;
-
-//                 .placeholder {
-//                     color: gray;
-//                 }
-
-//                 &:hover .placeholder {
-//                     display: none;
-//                 }
-
-//                 .bubbles {
-//                     display: none;
-//                 }
-
-//                 .text {
-//                     margin-top: 5px;
-//                     margin-bottom: 5px;
-//                 }
-
-//                 &:hover .bubbles {
-//                     display: flex;
-//                     flex-direction: row;
-//                     align-items: flex-start;
-//                 }
-
-//                 &:hover .type-display {
-//                     display: none;
-//                 }
-
-//                 .bubble {
-//                     margin: 5px;
-//                 }
-
-//                 &:hover .bubble {
-//                     margin-top: 7px;
-//                 }
-//             }
-//         }
-
-//         .field-description-container {
-//             background-color: rgb(40, 40, 40);
-//             border: 1px solid rgb(100, 100, 100);
-//             border-radius: 3px;
-//             width: 100%;
-//             height: 100%;
-//             resize: none;
-
-//             ::-webkit-scrollbar-track {
-//                 background: none; 
-//             }
-//         }
-
-//         .top-right {
-//             position: absolute;
-//             top: 0px;
-//             right: 0px;
-//         }
-//     }
-// }
-
-    .field-panel {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        height: 285px;
-        width: calc(100% - 10px);
-        border: 1px solid rgb(180, 180, 180);
-        margin: 5px;
-        margin-top: 0px;
-        margin-bottom: 10px;
-        border-radius: 3px;
-        flex: 0 0 auto;
-        gap: 25px;
-        background-color: rgb(60, 60, 60);
-
-        .top-bar {
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            border-bottom: 1px solid rgb(180, 180, 180);
-            border-top-right-radius: 5px;
-            border-top-left-radius: 5px;
-            width: 100%;
-            height: 20px;
-            background-color: rgb(50, 50, 50);
-            color: rgb(168, 167, 167);
-
-            .field-title {
-                color: whitesmoke;
-            }
-        }  
-        
-        .opts-bar {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-
-            .opt-box {
-                border: 1px solid rgb(180, 180, 180);
-                border-radius: 5px;
-                width: 40%;
-                height: 50px;
-                margin-right: 4%;
-                margin-left: 4%;
-                box-shadow: 5px 5px rgb(29, 29, 31);
-            }
-
-            .content {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                height: calc(100% - 20px);
-                width: 100%;
-                background-color: rgb(50, 50, 50);
-                border-bottom-right-radius: 5px;
-                border-bottom-left-radius: 5px;
-                resize: none;
-
-                .bubbles {
-                    display: none;
-                }
-
-                .text {
-                    margin-right: 5px;
-                }
-
-                &:hover .bubbles {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: flex-start;
-                }
-        
-                &:hover .type-display {
-                    display: none;
-                }
-        
-                .bubble {
-                    margin: 3px;
-                }
-            }
-        }
-
-        .sizes-box {
-            width: 88%;
-            height: 60px;
-            border: 1px solid rgb(180, 180, 180);
-            border-radius: 5px;
-            background-color: rgb(50, 50, 50);
-            box-shadow: 5px 5px rgb(29, 29, 31);
-
-            .content {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                height: calc(100% - 20px);
-                width: 100%;
-                background-color: rgb(50, 50, 50);
-                border-bottom-right-radius: 5px;
-                border-bottom-left-radius: 5px;
-
-                .text {
-                    margin-right: 9px;
-                }
-
-                .bubbles {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                }
-        
-                .bubble {
-                    margin: 3px;
-                    margin-right: 4px;
-                }
-            }
-        }
-
-        .desc-box {
-            width: 88%;
-            height: 50px;
-            border: 1px solid rgb(180, 180, 180);
-            border-radius: 5px;
-            background-color: rgb(50, 50, 50);
-            box-shadow: 5px 5px rgb(29, 29, 31);
-
-            .content {
-                height: calc(100% - 20px);
-                width: 100%;
-                background-color: rgb(50, 50, 50);
-                border-bottom-right-radius: 5px;
-                border-bottom-left-radius: 5px;
-                resize: none;
-
-            }
-        }
-
-    }
-
-}