Merge pull request #364 from dappforce/integration-unread

Add root font size to the grill integration config
dappforce · Aug 31, 2023 · 1943971 · 1943971
2 parents 7b6ddad + 4a9dd25
commit 1943971
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/integration/index.ts b/integration/index.ts
@@ -71,6 +71,8 @@ export type GrillConfig = {
   /** Option to make the iframe open chat room (a channel) directly */
   channel?: Channel
   order?: string[]
+  /** The root font size of the . You can change it if you want all font sizes to be smaller/bigger. Default root font size is 1rem (16px). For example, you can change it to 0.875rem to make it 14px, or just straight up use 14px. */
+  rootFontSize?: string
   /** The theme of the chat. If omitted, it will use the system preferences or user's last theme used in <https://grill.chat> */
   theme?: Theme
   /** A function that will be called when the iframe is created. You can use this to customize the iframe attributes. */

diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx
@@ -7,6 +7,7 @@ type State = {
   theme?: Theme
   order?: string[]
   channels?: Set<string>
+  rootFontSize?: string
   enableBackButton?: boolean
   enableLoginButton?: boolean
   enableInputAutofocus?: boolean
@@ -61,7 +62,16 @@ export function ConfigProvider({ children }: { children: any }) {
   }, [state])
 
   return (
-    <ConfigContext.Provider value={state}>{children}</ConfigContext.Provider>
+    <>
+      <ConfigContext.Provider value={state}>{children}</ConfigContext.Provider>
+      {state.rootFontSize && (
+        <style jsx global>{`
+          :root {
+            font-size: ${state.rootFontSize};
+          }
+        `}</style>
+      )}
+    </>
   )
 }
 
@@ -85,6 +95,7 @@ const schemaGetter = {
     const theme = getUrlQuery('theme')
     const order = getUrlQuery('order')
     const channels = getUrlQuery('channels')
+    const rootFontSize = getUrlQuery('rootFontSize')
 
     const enableBackButton = getUrlQuery('enableBackButton')
     const enableLoginButton = getUrlQuery('enableLoginButton')
@@ -101,6 +112,7 @@ const schemaGetter = {
       order: usedOrder,
       channels: usedChannels.size > 0 ? usedChannels : undefined,
       theme: validateStringConfig(theme, ['dark', 'light']),
+      rootFontSize,
       enableBackButton: validateStringConfig(
         enableBackButton,
         ['true', 'false'],