Merge pull request #521 from openchatai/widget/better-ui

Use the font-family used in the body automatically
openchatai · Jan 12, 2024 · e4598dc · e4598dc
2 parents 5dc7c09 + 3d99b1f
commit e4598dc
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/copilot-widget/index.html b/copilot-widget/index.html
@@ -11,6 +11,12 @@
   </head>
 
   <body>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");
+      body {
+        font-family: "Cairo", sans-serif;
+      }
+    </style>
     <button id="triggerSelector">toggle the chat widget</button>
     <script type="module" src="/src/main.tsx"></script>
     <script>
@@ -29,6 +35,7 @@
             name: "John Doe",
           },
           containerProps: {
+            dir: "ltr",
             style: {
               position: "fixed",
               height: "100%",

diff --git a/copilot-widget/lib/CopilotWidget.tsx b/copilot-widget/lib/CopilotWidget.tsx
@@ -32,7 +32,7 @@ export function CopilotWidget({
       id="opencopilot-aicopilot"
       data-open={open}
       className={cn(
-        "opencopilot-font-inter opencopilot-w-full opencopilot-overflow-hidden opencopilot-h-full sm:opencopilot-rounded-xl opencopilot-bg-white opencopilot-shadow",
+        "opencopilot-w-full opencopilot-overflow-hidden opencopilot-h-full sm:opencopilot-rounded-xl opencopilot-bg-white opencopilot-shadow",
         "opencopilot-opacity-0 opencopilot-transition-opacity opencopilot-ease",
         open &&
         "opencopilot-opacity-100 opencopilot-animate-in opencopilot-fade-in",

diff --git a/copilot-widget/lib/Root.tsx b/copilot-widget/lib/Root.tsx
@@ -22,7 +22,7 @@ function Root({
 }) {
   const { style, id, ...containerProp } = containerProps || {}
   return (
-    <root.div {...containerProp} id="copilot-widget" style={{ width: '100%', height: '100%', ...style }}>
+    <root.div {...containerProp} id="copilot-widget" style={{ width: '100%', height: '100%', fontFamily: "inherit", ...style }}>
       <ConfigDataProvider data={options}>
         <WidgetState>
           <AxiosProvider>

diff --git a/copilot-widget/styles/index.css b/copilot-widget/styles/index.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 @tailwind utilities;
 @tailwind components;
 @tailwind base;

diff --git a/copilot-widget/tailwind.config.ts b/copilot-widget/tailwind.config.ts
@@ -26,11 +26,6 @@ const config: Config = {
       current,
       emerald,
     },
-    extend: {
-      fontFamily: {
-        inter: ["Inter", "sans-serif", "system-ui"],
-      },
-    },
   },
   plugins: [
     require("tailwindcss-animate"),