Merge pull request #417 from bluewave-labs/hint-preview-fix

gorkem-bwl · web-flow · commit 112118ea17db · 2024-12-23T20:14:18.000-05:00
Hint preview fix
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/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/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 */`