From fb2c2b9b575e2372b5718ab1b5d308f85fb1dbec Mon Sep 17 00:00:00 2001
From: Naveed Elahi <statix231@hotmail.com>
Date: Thu, 8 Feb 2024 23:55:00 +0800
Subject: [PATCH] remove tailwind from modal pkg

---
 package-lock.json                     |  1 -
 packages/modal/package.json           |  1 -
 packages/modal/postcss.config.js      |  7 ----
 packages/modal/tailwind.config.js     | 48 ---------------------------
 packages/ui/src/components/Header.tsx |  4 +--
 5 files changed, 2 insertions(+), 59 deletions(-)
 delete mode 100644 packages/modal/postcss.config.js
 delete mode 100644 packages/modal/tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index 0035a8eef..e5a052493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28210,7 +28210,6 @@
         "css-loader": "^6.10.0",
         "postcss-prefix-selector": "^1.16.0",
         "style-loader": "^3.3.4",
-        "tailwindcss": "^3.4.1",
         "url-loader": "^4.1.1"
       },
       "engines": {
diff --git a/packages/modal/package.json b/packages/modal/package.json
index fabad6d68..49309cafd 100644
--- a/packages/modal/package.json
+++ b/packages/modal/package.json
@@ -18,7 +18,6 @@
     "css-loader": "^6.10.0",
     "postcss-prefix-selector": "^1.16.0",
     "style-loader": "^3.3.4",
-    "tailwindcss": "^3.4.1",
     "url-loader": "^4.1.1"
   },
   "engines": {
diff --git a/packages/modal/postcss.config.js b/packages/modal/postcss.config.js
deleted file mode 100644
index ff9abd840..000000000
--- a/packages/modal/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    "postcss-prefix-selector": { prefix: ".w3a-parent-container" },
-    // autoprefixer: {},
-  },
-};
diff --git a/packages/modal/tailwind.config.js b/packages/modal/tailwind.config.js
deleted file mode 100644
index 5a38050e7..000000000
--- a/packages/modal/tailwind.config.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: "class",
-  content: ["./src/**/*.{html,js,ts,tsx,jsx}", "../ui/src/**/*.{html,js,ts,tsx,jsx}"],
-  theme: {
-    extend: {
-      fontSize: {
-        xxs: "0.625rem",
-      },
-      fontFamily: {
-        body: ["Inter"],
-      },
-      colors: {
-        app: {
-          gray: {
-            50: "#F9FAFB",
-            100: "#F3F4F6",
-            300: "#D1D5DB",
-            400: "#9CA3AF",
-            500: "#6B7280",
-            600: "#4B5563",
-            700: "#374151",
-            800: "#1F2A37",
-            900: "#111928",
-          },
-          primary: {
-            200: "#C3DDFD",
-            300: "#A4CAFE",
-            400: "#76A9FA",
-            500: "#3F83F8",
-            600: "#0364FF",
-            800: "#1E429F",
-            950: "#2D4874",
-          },
-        },
-      },
-      boxShadow: {
-        modal: "0px 4px 16px rgba(0, 0, 0, 0.08)",
-        autofill: "0 0 0 30px #f9fafb inset !important",
-        autofillDark: "0 0 0 30px #374151 inset !important",
-      },
-      backgroundImage: {
-        select: `url('data:image/svg + xml;charset=utf-8,%3Csvgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="002020"%3E%3Cpathstroke="%236B7280"stroke-linecap="round"stroke-linejoin="round"stroke-width="1.5"d="m68444-4"/%3E%3C/svg%3E')`,
-      },
-    },
-  },
-  plugins: [],
-};
diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
index 348aa9243..b58cbfaae 100644
--- a/packages/ui/src/components/Header.tsx
+++ b/packages/ui/src/components/Header.tsx
@@ -36,8 +36,8 @@ function Header(props: HeaderProps) {
               <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
               <div className="absolute top-4 z-20 flex-col items-center hidden mb-5 group-hover:flex">
                 <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
-                <div className="relative -ml-[100px] p-4 w-[300px] text-xs leading-none text-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg">
-                  <div className="text-xs font-medium mb-1 text-app-gray-900 dark:text-white">{t("modal.header-tooltip-title")}</div>
+                <div className="relative -ml-[100px] p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg">
+                  <div className="text-xs font-medium mb-1 text-app-gray-900 dark:text-app-white">{t("modal.header-tooltip-title")}</div>
                   <div className="text-xs text-app-gray-400">{t("modal.header-tooltip-desc")}</div>
                 </div>
               </div>