Added export popup (only UI)

client/components/export_popup/export_popup.css

@@ -0,0 +1,94 @@
+#export-popup{
+    width: 100%;
+    height: 100%;
+    z-index: 53;
+    position: absolute;
+    top: 0;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin-top: 30px;
+    padding-bottom: 60px;
+}
+
+#export-popup-container{
+    width: 380px;
+    height: 100%;
+    border: 2px solid black;
+    margin: auto;
+    background-color: white;
+}
+
+#export-popup-header{
+    height: 40px;
+    display: flex;
+    border-bottom: 2px solid black;
+    box-sizing: border-box;
+}
+
+#export-popup-header span{
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 10px;
+}
+
+#export-popup-header img{
+    width: 15px;
+    height: 15px;
+    margin-left: auto;
+    margin-right: 10px;
+    margin-top: auto;
+    margin-bottom: auto;
+    cursor: pointer;
+}
+
+#export-popup-content{
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 10px;
+    height: calc(100% - 50px);
+}
+
+.export-section-container{
+    padding: 10px;
+    border-radius: 10px;
+    border: 2px solid gray;
+    box-sizing: border-box;
+    row-gap: 5px;
+    margin-top: 10px; 
+    display: flex;
+    flex-direction: column;
+}
+
+#texport-times-section{
+    height: 100px;
+}
+
+.time-label{
+    float: left; /* Used to be able to set a width*/
+    width: 45px;
+}
+
+#export-curves-section{
+    height: calc(100% - 150px);
+}
+
+#export-button-container{
+    height: 20px;
+    width: 100%;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.export-button{
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.export-curves-container{
+    padding: 5px;
+    border: 2px solid gray;
+    box-sizing: border-box;
+    overflow-y: auto;
+}