Merge branch 'develop' into fix/379-button-design-in-the-home-page

erenfn · web-flow · commit b8735bf47f4a · 2024-12-24T04:24:46.000+03:00
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -5,8 +5,8 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Bluewave Onboarding</title>
-      <script type="module" crossorigin src="/assets/index-Dm-A1Y3b.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-BMxzGzfc.css">
+      <script type="module" crossorigin src="/assets/index-CSUaIvQz.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-EhLntcaF.css">
     </head>
 
     <body>
diff --git a/frontend/src/components/Button/ButtonStyles.css b/frontend/src/components/Button/ButtonStyles.css
@@ -3,6 +3,7 @@
   border-radius: 4px;
   text-transform: none;
   box-shadow: none;
+  font-weight: 400;
 }
 
 /* .primary */
diff --git a/frontend/src/components/RichTextEditor/RichTextEditor.css b/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 {
diff --git a/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx b/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx
@@ -56,12 +56,18 @@ const Toolbar = ({ editor }) => {
       <Button
         onClick={() => editor.chain().focus().toggleBold().run()}
         disabled={!editor.can().chain().focus().toggleBold().run()}
+        style = {{
+          backgroundColor : editor.isActive("bold") ? "#e0e0e0": "transparent",
+        }}
       >
         <FormatBold />
       </Button>
       <Button
         onClick={() => editor.chain().focus().toggleItalic().run()}
         disabled={!editor.can().chain().focus().toggleItalic().run()}
+        style = {{
+          backgroundColor : editor.isActive("italic")? "#e0e0e0" : "transparent",
+        }}
       >
         <FormatItalic />
       </Button>
@@ -70,6 +76,10 @@ const Toolbar = ({ editor }) => {
         disabled={
           !editor.can().chain().focus().toggleHeading({ level: 2 }).run()
         }
+        style = {{
+          backgroundColor: editor.isActive("heading", {level:3})
+          ? "#e0e0e0" : "transparent",
+        }}
       >
         <Title />
       </Button>
@@ -79,12 +89,20 @@ const Toolbar = ({ editor }) => {
       <Button
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         disabled={!editor.can().chain().focus().toggleBulletList().run()}
+        style = {{
+          backgroundColor : editor.isActive("bulletList") ? "#e0e0e0" : "transparent",
+
+        }}
       >
         <FormatListBulleted />
       </Button>
       <Button
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         disabled={!editor.can().chain().focus().toggleOrderedList().run()}
+
+        style = {{
+          backgroundColor : editor.isActive("orderedList") ? "#e0e0e0" : "transparent",
+        }}
       >
         <FormatListNumbered />
       </Button>
diff --git a/frontend/src/products/Hint/HintComponent.css b/frontend/src/products/Hint/HintComponent.css
@@ -1,6 +1,6 @@
 .preview-container {
   width: 100%;
-  height: 250px;
+  min-height: 250px;
   border: 1px solid var(--light-border-color);
   margin-top: 1rem;
   overflow: auto;
@@ -18,21 +18,24 @@
   line-height: 30px;
   text-align: left;
   padding: 0 2rem;
+  color: var(--preview-header-color);
+  margin-bottom: 8px;
+  margin-top: 24px;
 }
 
 .preview-content-container {
-  color: var(--second-text-color);
+  color: var(--main-text-color);
   justify-content: space-between;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  height: calc(100% - 20px);
+  min-height: 170px;
   padding: 0 2rem;
   font-size: 13px;
 }
 
 .preview-content p {
-  margin: 0.1rem 0;
+  margin: 0;
   line-height: 24px;
 }
 
diff --git a/frontend/src/products/Hint/HintComponent.jsx b/frontend/src/products/Hint/HintComponent.jsx
@@ -29,7 +29,7 @@ const HintComponent = ({
           </div>
         )}
         <div className="preview-content-container" style={{ color: textColor }}>
-          <div>
+          <div className="preview-content">
             <ReactMarkdown>{content}</ReactMarkdown>
           </div>
           <div className="preview-button-container">
@@ -38,7 +38,8 @@ const HintComponent = ({
                 style={{
                   backgroundColor: buttonBackgroundColor,
                   color: buttonTextColor,
-                  margin: "1rem",
+                  marginBottom: "1rem",
+                  borderRadius: '8px'
                 }}
                 text={previewBtnText}
               ></Button>
diff --git a/frontend/src/products/Popup/PopupComponent.jsx b/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
diff --git a/frontend/src/products/Popup/PopupComponent.module.css b/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;
+}
diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
@@ -7,6 +7,7 @@
   --main-text-color: #344054;
   --second-text-color: #667085;
   --third-text-color: #475467;
+  --preview-header-color: #484848;
   --main-purple: #7f56d9;
   --light-purple: #f3e5f5;
   --light-gray: #EAECF0;

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`border-radius: 4px;`
`4`	`4`	`text-transform: none;`
`5`	`5`	`box-shadow: none;`
	`6`	`+ font-weight: 400;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`/* .primary */`