make sure watermark is visible on transitional forms

awell-health · Oct 18, 2024 · feaf9d5 · feaf9d5
1 parent 212813d
commit feaf9d5
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",

diff --git a/src/globalStyles/_variables.scss b/src/globalStyles/_variables.scss
@@ -94,6 +94,8 @@ html {
   /* 56px */
   --spacing-16: 4rem;
   /* 64px */
+  --spacing-18: 4.5rem;
+  /* 72px */
   --spacing-20: 5rem;
   /* 80px */
   --spacing-24: 6rem;

diff --git a/src/hostedPages/activities/form/TraditionalForm.tsx b/src/hostedPages/activities/form/TraditionalForm.tsx
@@ -29,7 +29,7 @@ export const TraditionalForm = ({
       if (scrollHintOverlayRef.current) {
         const { scrollTop, scrollHeight, clientHeight } =
           document.documentElement
-        const isAtBottom = scrollTop + clientHeight >= scrollHeight
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
         scrollHintOverlayRef.current.style.top = isAtBottom ? '100%' : 'auto'
       }
     }
@@ -104,7 +104,7 @@ export const TraditionalForm = ({
             </div>
           )}
           {form?.trademark && (
-            <div className={`${classes.trademark} ${classes.conversational}`}>
+            <div className={`${classes.trademark} ${classes.traditional}`}>
               {form.trademark}
             </div>
           )}

diff --git a/src/hostedPages/activities/form/form.module.scss b/src/hostedPages/activities/form/form.module.scss
@@ -91,7 +91,7 @@
   }
 
   &.traditional {
-    padding-bottom: var(--awell-spacing-6);
+    padding-bottom: var(--spacing-18)
   }
   &.conversational {
     padding-top: var(--awell-spacing-4);
@@ -104,8 +104,8 @@
   bottom: 50px;
   left: 0;
   width: 100%;
-  height: 70px;
-  background: linear-gradient(to bottom, transparent, var(--awell-neutralLight10) 100%);
+  height: 50px;
+  background: linear-gradient(to bottom, transparent, var(--awell-neutralLight10) 50%);
   pointer-events: none; /* Prevent interaction */
   transition: top 0.5s ease-in-out;
 }