style: observe button width

radixdlt · Aug 8, 2023 · 9ab1bd7 · 9ab1bd7
1 parent 406014d
commit 9ab1bd7
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 6 deletions.
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -54,6 +54,33 @@ export class RadixButton extends LitElement {
     )
   }
 
+  private resizeObserver: undefined | ResizeObserver
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    setTimeout(() => {
+      const button = this.shadowRoot!.querySelector('button')!
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.dispatchEvent(
+          new CustomEvent('onResize', {
+            bubbles: true,
+            composed: false,
+            detail: button,
+          })
+        )
+      })
+
+      this.resizeObserver.observe(button)
+    })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.resizeObserver?.unobserve(this)
+  }
+
   render() {
     const renderContent = () => {
       if (this.status === RadixButtonStatus.pending && this.connected) {
@@ -86,8 +113,10 @@ export class RadixButton extends LitElement {
     loadingSpinnerCSS,
     css`
       :host {
-        width: var(--radix-connect-button-width, 138px);
-        display: block;
+        width: max(var(--radix-connect-button-width, 138px), 42px);
+        min-width: 42px;
+        display: flex;
+        justify-content: flex-end;
         container-type: inline-size;
         user-select: none;
         --radix-connect-button-text-color: var(--color-light);
@@ -113,7 +142,8 @@ export class RadixButton extends LitElement {
       }
 
       button {
-        width: var(--radix-connect-button-width, 138px);
+        width: max(var(--radix-connect-button-width, 138px), 42px);
+        min-width: 42px;
         height: var(--radix-connect-button-height, auto);
         border-radius: var(--radix-connect-button-border-radius, 0);
         background-color: var(--radix-connect-button-background);

diff --git a/src/components/connect-button.ts b/src/components/connect-button.ts
@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { config } from '../config'
 import './popover/popover'
 import './button/button'
@@ -87,6 +87,11 @@ export class ConnectButton extends LitElement {
   @property({ type: String })
   avatarUrl: string = ''
 
+  @state()
+  state = {
+    compact: false,
+  }
+
   get hasSharedData(): boolean {
     return !!(this.accounts.length || this.personaData.length)
   }
@@ -144,6 +149,9 @@ export class ConnectButton extends LitElement {
       ?connected=${this.connected}
       ?fullWidth=${this.fullWidth}
       @onClick=${this.togglePopover}
+      @onResize=${(event: CustomEvent) => {
+        this.state.compact = event.detail.offsetWidth === 42
+      }}
       ><div>${buttonText}</div></radix-button
     >`
   }
@@ -206,6 +214,7 @@ export class ConnectButton extends LitElement {
     return html` <radix-popover
       mode="${this.mode}"
       ?connected=${this.connected}
+      ?compact=${this.state.compact}
       class="popover"
     >
       ${this.connected
@@ -231,10 +240,55 @@ export class ConnectButton extends LitElement {
   }
 
   static styles = css`
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;400;500;600;700&display=swap');
+
+    :root {
+      font-family: 'IBM Plex Sans';
+      font-weight: 400;
+      margin: 0;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+
+      color-scheme: light dark;
+      color: rgba(255, 255, 255, 0.87);
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-text-size-adjust: 100%;
+    }
+
     :host {
       font-family: 'IBM Plex Sans';
       position: relative;
       display: inline-block;
+
+      /* Core colors */
+      --color-radix-green-1: #00ab84;
+      --color-radix-green-2: #00c389;
+      --color-radix-green-3: #21ffbe;
+      --color-radix-blue-1: #060f8f;
+      --color-radix-blue-2: #052cc0;
+      --color-radix-blue-3: #20e4ff;
+      --color-light: #ffffff;
+      --color-dark: #000000;
+
+      /* Accent colors */
+      --color-accent-red: #ef4136;
+      --color-accent-blue: #00aeef;
+      --color-accent-yellow: #fff200;
+      --color-alert: #e59700;
+      --color-radix-error-red-1: #c82020;
+      --color-radix-error-red-2: #fcebeb;
+
+      /* Neutral colors */
+      --color-grey-1: #003057;
+      --color-grey-2: #8a8fa4;
+      --color-grey-3: #ced0d6;
+      --color-grey-4: #e2e5ed;
+      --color-grey-5: #f4f5f9;
     }
     .popover {
       position: absolute;

diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
@@ -18,6 +18,11 @@ export class RadixPopover extends LitElement {
   })
   connected = false
 
+  @property({
+    type: Boolean,
+  })
+  compact = false
+
   @state()
   private height = 0
 
@@ -75,7 +80,7 @@ export class RadixPopover extends LitElement {
         <path
             d="${[
               `M ${startX} ${startY}`,
-              drawArrow(350, startY, 17.5),
+              drawArrow(this.compact ? 400 : 350, startY, 17.5),
               `L ${endX - borderRadius} ${startY}`,
               `C ${endX - halfBorderRadius} ${startY} ${endX} ${
                 startY + halfBorderRadius

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,2 @@
 export * from './components/connect-button'
 export * from './_types'
-import './index.css'