From e6d091d35eccd74976c4c32a0cdcf322f4b311bb Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Fri, 14 Apr 2023 16:56:07 +0200
Subject: [PATCH] fix widget styling, add z-index, remove env to fix vercel
 error

---
 apps/web/.env                             | 1 -
 apps/web/components/preview/Modal.tsx     | 2 +-
 packages/js/src/components/Headline.tsx   | 2 +-
 packages/js/src/components/Modal.tsx      | 6 ++----
 packages/js/src/components/SurveyView.tsx | 6 ++----
 5 files changed, 6 insertions(+), 11 deletions(-)
 delete mode 120000 apps/web/.env

diff --git a/apps/web/.env b/apps/web/.env
deleted file mode 120000
index c7360fb82d..0000000000
--- a/apps/web/.env
+++ /dev/null
@@ -1 +0,0 @@
-../../.env
\ No newline at end of file
diff --git a/apps/web/components/preview/Modal.tsx b/apps/web/components/preview/Modal.tsx
index 562518e9a1..1d407f84da 100644
--- a/apps/web/components/preview/Modal.tsx
+++ b/apps/web/components/preview/Modal.tsx
@@ -18,7 +18,7 @@ export default function Modal({
   }, [isOpen]);
 
   return (
-    <div aria-live="assertive" className="absolute inset-0 flex cursor-pointer items-end px-4 py-6 sm:p-6">
+    <div aria-live="assertive" className="absolute inset-0 flex cursor-pointer items-end">
       <div className="flex w-full flex-col items-center  sm:items-end">
         <div
           className={cn(
diff --git a/packages/js/src/components/Headline.tsx b/packages/js/src/components/Headline.tsx
index 330c51bc2c..cde0c0e8b0 100644
--- a/packages/js/src/components/Headline.tsx
+++ b/packages/js/src/components/Headline.tsx
@@ -12,7 +12,7 @@ export default function Headline({
   return (
     <label
       htmlFor={questionId}
-      className="fb-block fb-text-base fb-font-semibold fb-leading-6 fb-mr-8 text-slate-900"
+      className="fb-mb-1.5  fb-block fb-text-base fb-font-semibold fb-leading-6 fb-mr-8 text-slate-900"
       style={style}>
       {headline}
     </label>
diff --git a/packages/js/src/components/Modal.tsx b/packages/js/src/components/Modal.tsx
index 7e9f836274..9f659369bc 100644
--- a/packages/js/src/components/Modal.tsx
+++ b/packages/js/src/components/Modal.tsx
@@ -20,14 +20,12 @@ export default function Modal({
     setShow(isOpen);
   }, [isOpen]);
   return (
-    <div
-      aria-live="assertive"
-      className="fb-pointer-events-none fb-fixed fb-inset-0 fb-flex fb-items-end fb-px-4 fb-py-6 sm:fb-p-6 z-50">
+    <div aria-live="assertive" className="fb-pointer-events-none fb-fixed fb-inset-0 fb-flex fb-items-end">
       <div className="fb-flex fb-w-full fb-flex-col fb-items-center fb-space-y-4 sm:fb-items-end">
         <div
           className={cn(
             show ? "fb-translate-x-0 fb-opacity-100" : "fb-translate-x-28 fb-opacity-0",
-            "fb-pointer-events-auto fb-relative fb-w-full fb-max-w-sm fb-overflow-hidden fb-rounded-lg fb-bg-white fb-shadow-lg fb-ring-1 fb-ring-black fb-ring-opacity-5 fb-transition-all fb-duration-500 fb-ease-in-out"
+            "fb-pointer-events-auto fb-relative fb-w-full fb-max-w-sm fb-overflow-hidden fb-rounded-lg fb-bg-white fb-shadow-lg fb-ring-1 fb-ring-black fb-ring-opacity-5 fb-transition-all fb-duration-500 fb-ease-in-out z-40"
           )}>
           <div class="fb-absolute fb-top-0 fb-right-0 fb-hidden fb-pt-4 fb-pr-4 sm:fb-block">
             <button
diff --git a/packages/js/src/components/SurveyView.tsx b/packages/js/src/components/SurveyView.tsx
index 0bc05ffccd..8189f1353b 100644
--- a/packages/js/src/components/SurveyView.tsx
+++ b/packages/js/src/components/SurveyView.tsx
@@ -80,7 +80,7 @@ export default function SurveyView({ config, survey, close, brandColor }: Survey
       <div
         className={cn(
           loadingElement ? "fb-animate-pulse fb-opacity-60" : "",
-          "fb-p-4 fb-text-slate-800 fb-font-sans"
+          "fb-text-slate-800 fb-font-sans fb-px-4 fb-py-6 sm:fb-p-6"
         )}>
         {progress === 100 && survey.thankYouCard.enabled ? (
           <ThankYouCard
@@ -108,9 +108,7 @@ export default function SurveyView({ config, survey, close, brandColor }: Survey
           />
         ) : null}
       </div>
-      <div className="fb-mt-2">
-        <Progress progress={progress} brandColor={brandColor} />
-      </div>
+      <Progress progress={progress} brandColor={brandColor} />
     </div>
   );
 }