Pr 2169 quill layout fixes

gatsby-browser.js

@@ -18,7 +18,9 @@ import {
 import './static/css/noto-sans-arabic.css'
 import 'swiper/swiper-bundle.min.css'
 import 'features/styles/app.scss'
+import './static/css/ubuntu.css'
 import './static/css/global.css'
+import '@deriv-com/blocks/style.css';
 
 const is_browser = typeof window !== 'undefined'
 

src/features/components/quill/layout-overlay/floating-button/index.tsx

@@ -12,7 +12,7 @@ const FloatingButton = ({ children, className, onClick }: TProps) => {
         <button
             className={clsx(
                 className,
-                'tap-highlight-transparent shadow-[0_16px_20px_0_rgba(0,0,0,0.05),0_0_20px_0_rgba(0,0,0,0.05)] bg-background-primary-base p-400 flex cursor-pointer border-[transparent] rounded-[50%] m-800 mt-50 pointer-events-auto transition-all select-none sm:p-700 hover:scale-100',
+                'tap-highlight-transparent shadow-[0_16px_20px_0_rgba(0,0,0,0.05),0_0_20px_0_rgba(0,0,0,0.05)] bg-background-primary-container p-400 flex cursor-pointer border-[transparent] rounded-[50%] m-800 mt-50 pointer-events-auto transition-all select-none sm:p-700 hover:scale-100',
             )}
             onMouseEnter={() => setHasHover(true)}
             onMouseLeave={() => setHasHover(false)}

static/css/global.css

@@ -1,10 +1,9 @@
+@import '@deriv/quill-design/quill-tailwind/fonts.css';
+@import '@deriv/quill-design/dist/quill-design.css';
+@import '@deriv-com/components/style.css';
+@import '@deriv/quill-design/quill-tailwind/styles.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import '@deriv-com/blocks/style.css';
-@import '@deriv-com/components/style.css';
-@import '@deriv/quill-design/dist/quill-design.css';
-@import '@deriv/quill-design/quill-tailwind/styles.css';
-@import '@deriv/quill-design/quill-tailwind/fonts.css';
-

static/css/ubuntu.css

@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Ubuntu';
+    src:url('../fonts/Ubuntu-Regular.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 100 400;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src:url('../fonts/Ubuntu-Bold.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 800;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src:url('../fonts/Ubuntu-Light.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 200;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src:url('../fonts/Ubuntu-Medium.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 500;
+}

tailwind.config.js

@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    content: [
+        './src/**/*.{js,jsx,ts,tsx}',
+        "./node_modules/@deriv-com/blocks/lib/index.js",
+        "./node_modules/@deriv-com/components/lib/index.js",
+        "./node_modules/@deriv/quill-design/dist/index.js",
+    ],
     theme: {
         extend: {
             animation: {