Tmwih share 02072024

source/website/css/dialogs.css

@@ -12,14 +12,13 @@ div.ov_modal_overlay
 	position: absolute;
 }
 
-div.ov_dialog
-{
-	color: var(--ov_dialog_foreground_color);
-	background: var(--ov_dialog_background_color);
-	width: 400px;
-	padding: 20px;
-	box-shadow: var(--ov_shadow);
-	border-radius: 5px;
+div.ov_dialog {
+    color: var(--ov_dialog_foreground_color);
+    background: var(--ov_dialog_background_color);
+    width: 80vw; /* Adjust width */
+    padding: 20px;
+    box-shadow: var(--ov_shadow);
+    border-radius: 5px;
 }
 
 div.ov_dialog div.ov_dialog_title

source/website/css/sharingdialog.css

@@ -0,0 +1,152 @@
+.ov_dialog_form_container {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    max-height: 80vh; /* Ensure the form doesn't extend beyond 80% of the viewport height */
+    overflow-y: auto; /* Enable scrolling if content overflows */
+    width: 90vw; /* Make the form wider */
+    max-width: 1200px; /* Limit the max width */
+    margin: auto; /* Center the form horizontally */
+}
+
+.ov_dialog_step {
+    display: flex;
+    flex-direction: row; /* Change direction to row to place elements side by side */
+    gap: 15px;
+}
+
+.ov_dialog_title {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.ov_dialog_description {
+    font-size: 1em;
+    margin-bottom: 20px;
+    color: #666;
+}
+
+.ov_dialog_label {
+    font-size: 1em;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.ov_dialog_input {
+    padding: 10px;
+    font-size: 1em;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.ov_snapshot_preview_container {
+    margin: 20px 0;
+    text-align: center;
+}
+
+.ov_snapshot_preview_image {
+    border: 1px solid #ccc;
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px; /* Match the border radius of other elements */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visual separation */
+}
+
+.ov_button {
+    padding: 10px 15px;
+    font-size: 1em;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.ov_button:hover {
+    background-color: #0056b3;
+}
+
+.ov_left_container {
+    width: 40%;
+    padding: 20px;
+}
+
+.ov_right_container {
+    width: 60%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* Add space between preview containers */
+}
+
+.ov_step1, .ov_step2 {
+    padding: 20px;
+}
+
+.ov_email_fields_container {
+    margin-bottom: 20px;
+}
+
+.ov_preview_container {
+    display: flex;
+    flex-direction: column; /* Ensure images are stacked correctly */
+    gap: 10px; /* Add space between preview containers */
+}
+
+.ov_preview1_container {
+    width: 100%;
+    display: flex;
+    justify-content: center; /* Center the image horizontally */
+    align-items: center; /* Center the image vertically */
+}
+
+.ov_preview_row {
+    display: flex;
+    width: 100%;
+    gap: 10px; /* Add space between side-by-side previews */
+}
+
+.ov_preview2_container, .ov_preview3_container {
+    flex: 1; /* Each takes up equal space in the row */
+    height: 150px; /* Adjust height for better layout */
+    display: flex;
+    justify-content: center; /* Center the image horizontally */
+    align-items: center; /* Center the image vertically */
+    overflow: hidden; /* Ensure no overflow */
+}
+
+.ov_preview2_container,
+.ov_preview3_container {
+    width: calc(50% - 5px);
+}
+
+.ov_preview_container img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border: 1px solid #ddd; /* Add border to preview images */
+    border-radius: 4px; /* Match the border radius of other elements */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visual separation */
+}
+
+.ov_next_button, .ov_submit_button {
+    text-align: center;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.ov_next_button:hover, .ov_submit_button:hover {
+    background-color: #0056b3;
+}

source/website/index.js

@@ -23,6 +23,7 @@ import './css/navigator.css';
 import './css/sidebar.css';
 import './css/website.css';
 import './css/embed.css';
+import './css/sharingdialog.css';
 
 export const UI = {
     ButtonDialog,