feat: update deps / CB UI (#183)

* feat: loosen dependencies range * feat: adjust popover ui * fix: change font injection
radixdlt · Apr 23, 2024 · 5efbeb3 · 5efbeb3
1 parent 15929c0
commit 5efbeb3
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts
@@ -114,8 +114,12 @@ export class ConnectButton extends LitElement {
     }
   }
 
+  private readonly fontGoogleApiHref =
+    'https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600'
+
   constructor() {
     super()
+    this.injectFontCSS()
     this.windowClickEventHandler = (event) => {
       if (!this.showPopoverMenu) return
       if (this.contains(event.target as HTMLElement)) return
@@ -144,6 +148,25 @@ export class ConnectButton extends LitElement {
     )
   }
 
+  private injectFontCSS() {
+    if (this.shouldSkipFontInjection()) {
+      return
+    }
+
+    const link = document.createElement('link')
+    link.setAttribute('rel', 'stylesheet')
+    link.setAttribute('href', this.fontGoogleApiHref)
+    document.head.append(link)
+  }
+
+  private shouldSkipFontInjection(): boolean {
+    return (
+      !!document.head.querySelector(
+        `link[href|="${this.fontGoogleApiHref}"]`,
+      ) || document.fonts.check('16px IBM Plex Sans')
+    )
+  }
+
   private togglePopoverMenu() {
     this.pristine = false
     this.showPopoverMenu = !this.showPopoverMenu
@@ -293,8 +316,6 @@ export class ConnectButton extends LitElement {
     variablesCSS,
     themeCSS,
     css`
-      @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');
-
       :root {
         font-family: 'IBM Plex Sans';
         margin: 0;

diff --git a/packages/connect-button/src/components/popover/popover.ts b/packages/connect-button/src/components/popover/popover.ts
@@ -75,7 +75,8 @@ export class RadixPopover extends LitElement {
         max-height: 100vh;
         border-radius: 12px;
         padding: 12px;
-        box-shadow: 0px 16px 35px 0px #00000047;
+        border: 1px solid var(--radix-popover-border-color);
+        box-shadow: 0px 11px 35px 0px #00000047;
       }
 
       :host([isMobile]) {

diff --git a/packages/connect-button/src/theme.ts b/packages/connect-button/src/theme.ts
@@ -48,6 +48,7 @@ export const themeCSS = css`
 
   :host([mode='light']) {
     --radix-popover-background: color-mix(in srgb, #efefef 50%, transparent);
+    --radix-popover-border-color: var(--color-grey-3);
     --radix-popover-text-color: var(--color-grey-1);
 
     --radix-popover-tabs-background: color-mix(
@@ -93,6 +94,7 @@ export const themeCSS = css`
 
   :host([mode='dark']) {
     --radix-popover-background: color-mix(in srgb, #000000 50%, transparent);
+    --radix-popover-border-color: var(--color-dark);
     --radix-popover-text-color: var(--color-light);
 
     --radix-popover-tabs-background: color-mix(

diff --git a/packages/dapp-toolkit/package.json b/packages/dapp-toolkit/package.json
@@ -47,16 +47,16 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
-    "@noble/curves": "1.4.0",
-    "bowser": "2.11.0",
-    "buffer": "6.0.3",
-    "immer": "10.0.4",
-    "lit": "3.1.2",
-    "lit-html": "3.1.2",
-    "neverthrow": "6.1.0",
-    "rxjs": "7.8.1",
-    "tslog": "4.8.2",
-    "valibot": "0.30.0"
+    "@noble/curves": "^1.4.0",
+    "bowser": "^2.11.0",
+    "buffer": "^6.0.3",
+    "immer": "^10.0.4",
+    "lit": "^3.1.2",
+    "lit-html": "^3.1.2",
+    "neverthrow": "^6.1.0",
+    "rxjs": "^7.8.1",
+    "tslog": "^4.8.2",
+    "valibot": "^0.30.0"
   },
   "devDependencies": {
     "@radixdlt/connect-button": "*",