fix(theme): 🐛 Force display block on lite badge

baptisteArno · Mar 7, 2022 · 4c65b4c · 4c65b4c · vercel · Mar 7, 2022
1 parent 7b66494
commit 4c65b4c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/bot-engine/src/assets/importantStyles.css b/packages/bot-engine/src/assets/importantStyles.css
@@ -0,0 +1,3 @@
+.lite-badge {
+  display: block !important;
+}
diff --git a/packages/bot-engine/src/components/TypebotViewer.tsx b/packages/bot-engine/src/components/TypebotViewer.tsx
@@ -7,6 +7,8 @@ import style from '../assets/style.css'
 //@ts-ignore
 import phoneNumberInputStyle from 'react-phone-number-input/style.css'
 //@ts-ignore
+import importantStyles from '../assets/importantStyles.css'
+//@ts-ignore
 import phoneSyle from '../assets/phone.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
@@ -67,6 +69,7 @@ export const TypebotViewer = ({
           {phoneSyle}
           {style}
           {typebot.theme?.customCss}
+          {importantStyles}
         </style>
       }
       name="Typebot viewer"
@@ -107,7 +110,7 @@ export const TypebotViewer = ({
                 href={'https://www.typebot.io/?utm_source=litebadge'}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fixed py-1 px-2 bg-white z-50 rounded shadow-md"
+                className="fixed py-1 px-2 bg-white z-50 rounded shadow-md lite-badge"
                 style={{ bottom: '20px' }}
               >
                 Made with <span className="text-blue-500">Typebot</span>.