Merge pull request #418 from bluewave-labs/popup-preview-fix

Fixed popup container

Author: gorkem-bwl

frontend/src/components/RichTextEditor/RichTextEditor.css

@@ -3,9 +3,11 @@
   color: var(--main-text-color);
   font-size: var(--font-regular);
   border-radius: 8px;
-  padding-top: 1rem;
+  padding-top: 0.5rem;
   margin-top: 1rem;
   width: 400px;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
 }
 
 .ProseMirror {

frontend/src/products/Popup/PopupComponent.jsx

@@ -23,6 +23,9 @@ const PopupComponent = ({
   const sizeClass = validSizes.includes(popupSize.toLowerCase())
     ? styles[popupSize.toLowerCase()]
     : "";
+  const sizeClassContent = validSizes.includes(popupSize.toLowerCase())
+    ? styles[popupSize.toLowerCase() + 'Content']
+    : "";
   const centeredClass = isReal ? styles.centered : "";
 
   const handleClose = () => {
@@ -63,7 +66,7 @@ const PopupComponent = ({
             />
           </div>
         )}
-        <div className={`${styles.popupContentContainer}`}>
+        <div className={`${styles.popupContentContainer} ${sizeClassContent}`}>
           <div className={styles.popupContent} style={{ color: textColor }}>
             <ReactMarkdown>{content}</ReactMarkdown>
           </div>
@@ -73,7 +76,7 @@ const PopupComponent = ({
                 style={{
                   backgroundColor: buttonBackgroundColor,
                   color: buttonTextColor,
-                  marginRight: "1rem",
+                  borderRadius: '8px'
                 }}
                 text={previewBtnText}
                 onClick={handleButtonClick} // Add onClick handler

frontend/src/products/Popup/PopupComponent.module.css

@@ -8,7 +8,6 @@
 }
 
 .popupContent {
-  padding: 20px 25px;
   color: var(--second-text-color);
   font-size: var(--font-regular);
 }
@@ -38,7 +37,8 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  height: calc(100% - 30px);
+  min-height: 177px;
+  padding: 18px 25px 25px 25px;
 }
 
 .popupButtonContainer {
@@ -72,3 +72,15 @@
   min-width: 700px;
   min-height: 350px;
 }
+
+.smallContent {
+  min-height: 177px;
+}
+
+.mediumContent {
+  min-height: 227px;
+}
+
+.largeContent {
+  min-height: 277px;
+}