border radius fix + scroll lock adjustment

reown-com · Sep 7, 2023 · 9899e2a · 9899e2a
1 parent b35eb4b
commit 9899e2a
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 38 deletions.
diff --git a/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts b/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts
@@ -6,9 +6,12 @@ import { html } from 'lit'
 type Component = Meta<WuiLoadingThumbnail>
 
 export default {
-  title: 'Components/wui-loading-thumbnail'
+  title: 'Components/wui-loading-thumbnail',
+  args: {
+    radius: 36
+  }
 } as Component
 
 export const Default: Component = {
-  render: () => html` <wui-loading-thumbnail></wui-loading-thumbnail>`
+  render: args => html` <wui-loading-thumbnail radius=${args.radius}></wui-loading-thumbnail>`
 }
diff --git a/packages/scaffold/src/modal/w3m-modal/index.ts b/packages/scaffold/src/modal/w3m-modal/index.ts
@@ -80,14 +80,20 @@ export class W3mModal extends LitElement {
   }
 
   private onScrollLock() {
+    const { body } = document
+    const { innerHeight: viewportHeight } = window
+    const scrollHeight = body?.scrollHeight
+
+    const scrollbarGutter = scrollHeight > viewportHeight ? 'scrollbar-gutter: stable;' : ''
+
     const styleTag = document.createElement('style')
     styleTag.dataset['w3m'] = SCROLL_LOCK
     styleTag.textContent = `
       html, body {
         touch-action: none;
         overflow: hidden;
         overscroll-behavior: contain;
-        scrollbar-gutter: stable;
+       ${scrollbarGutter}
       }
     `
     document.head.appendChild(styleTag)

diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
@@ -3,7 +3,8 @@ import {
   ConnectionController,
   CoreHelperUtil,
   RouterController,
-  SnackController
+  SnackController,
+  ThemeController
 } from '@web3modal/core'
 import type { IconType } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
@@ -116,7 +117,7 @@ export class W3mConnectingWidget extends LitElement {
         <wui-flex justifyContent="center" alignItems="center">
           <wui-wallet-image size="lg" imageSrc=${ifDefined(this.imageSrc)}></wui-wallet-image>
 
-          ${this.error ? null : html`<wui-loading-thumbnail></wui-loading-thumbnail>`}
+          ${this.error ? null : this.loaderTemplate()}
 
           <wui-icon-box
             backgroundColor="error-100"
@@ -179,6 +180,13 @@ export class W3mConnectingWidget extends LitElement {
     }
   }
 
+  private loaderTemplate() {
+    const borderRadiusMaster = ThemeController.state.themeVariables['--w3m-border-radius-master']
+    const radius = borderRadiusMaster ? parseInt(borderRadiusMaster.replace('px', ''), 10) : 4
+
+    return html`<wui-loading-thumbnail radius=${radius * 4}></wui-loading-thumbnail>`
+  }
+
   // -- Protected ----------------------------------------- //
   protected onCopyUri() {
     try {

diff --git a/packages/ui/src/assets/svg/all-wallets.ts b/packages/ui/src/assets/svg/all-wallets.ts
@@ -1,30 +1,8 @@
 import { svg } from 'lit'
 
-export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 40 40">
-  <g clip-path="url(#a)">
-    <mask
-      id="b"
-      width="40"
-      height="40"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style="mask-type:luminance"
-    >
-      <path fill="#fff" d="M40 0H0v40h40V0Z" />
-    </mask>
-    <g mask="url(#b)">
-      <path
-				style="fill: var(--wui-color-accent-010);"
-        d="M0 16.6c0-6.17 0-9.25 1.31-11.55A10 10 0 0 1 5.05 1.3C7.35 0 10.43 0 16.6 0h6.8c6.17 0 9.25 0 11.55 1.31a10 10 0 0 1 3.74 3.74C40 7.35 40 10.43 40 16.6v6.8c0 6.17 0 9.25-1.31 11.55a10 10 0 0 1-3.74 3.74C32.65 40 29.57 40 23.4 40h-6.8c-6.17 0-9.25 0-11.55-1.31a10 10 0 0 1-3.74-3.74C0 32.65 0 29.57 0 23.4v-6.8Z"
-      />
-      <path
-				style="fill: var(--wui-color-accent-100);"
-        d="M18.2 14.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Zm10.8 0a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM18.2 25.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Zm10.8 0a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z"
-      />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h40v40H0z" /></clipPath>
-  </defs>
+export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 24 24">
+  <path
+    style="fill: var(--wui-color-accent-100);"
+    d="M10.2 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM10.2 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z"
+  />
 </svg>`
diff --git a/packages/ui/src/components/wui-loading-thumbnail/index.ts b/packages/ui/src/components/wui-loading-thumbnail/index.ts
@@ -1,17 +1,39 @@
 import { html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
 import styles from './styles.js'
 
 @customElement('wui-loading-thumbnail')
 export class WuiLoadingThumbnail extends LitElement {
   public static override styles = [resetStyles, styles]
 
+  // -- State & Properties -------------------------------- //
+  @property({ type: Number }) public radius = 36
+
   // -- Render -------------------------------------------- //
   public override render() {
+    return this.svgLoaderTemplate()
+  }
+
+  private svgLoaderTemplate() {
+    const radius = this.radius > 50 ? 50 : this.radius
+    const standardValue = 36
+    const radiusFactor = standardValue - radius
+    const dashArrayStart = 116 + radiusFactor
+    const dashArrayEnd = 245 + radiusFactor
+    const dashOffset = 360 + radiusFactor * 1.75
+
     return html`
       <svg viewBox="0 0 110 110" width="110" height="110">
-        <rect x="2" y="2" width="106" height="106" rx="36" />
+        <rect
+          x="2"
+          y="2"
+          width="106"
+          height="106"
+          rx=${radius}
+          stroke-dasharray="${dashArrayStart} ${dashArrayEnd}"
+          stroke-dashoffset=${dashOffset}
+        />
       </svg>
     `
   }

diff --git a/packages/ui/src/components/wui-loading-thumbnail/styles.ts b/packages/ui/src/components/wui-loading-thumbnail/styles.ts
@@ -17,8 +17,6 @@ export default css`
     fill: none;
     stroke: var(--wui-color-accent-100);
     stroke-width: 4px;
-    stroke-dasharray: 116, 245;
-    stroke-dashoffset: 360;
     stroke-linecap: round;
     animation: dash 1s linear infinite;
   }

diff --git a/packages/ui/src/composites/wui-wallet-image/index.ts b/packages/ui/src/composites/wui-wallet-image/index.ts
@@ -34,6 +34,10 @@ export class WuiWalletImage extends LitElement {
        --local-size: var(--wui-wallet-image-size-${this.size});
    `
 
+    if (this.walletIcon) {
+      this.dataset['walletIcon'] = this.walletIcon
+    }
+
     return html` ${this.templateVisual()}`
   }
 
@@ -43,7 +47,7 @@ export class WuiWalletImage extends LitElement {
       return html`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>`
     } else if (this.walletIcon) {
       return html`<wui-icon
-        data-parent-size="full"
+        data-parent-size="md"
         size="md"
         color="inherit"
         name=${this.walletIcon}

diff --git a/packages/ui/src/composites/wui-wallet-image/styles.ts b/packages/ui/src/composites/wui-wallet-image/styles.ts
@@ -5,7 +5,7 @@ export default css`
     position: relative;
     border-radius: inherit;
     overflow: hidden;
-    background: var(--wui-overlay-002);
+    background-color: var(--wui-overlay-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,6 +30,14 @@ export default css`
     border: 1px solid var(--wui-color-accent-010);
   }
 
+  :host([data-wallet-icon='allWallets']) {
+    background-color: var(--wui-all-wallets-bg-100);
+  }
+
+  :host([data-wallet-icon='allWallets'])::after {
+    border: 1px solid var(--wui-color-accent-010);
+  }
+
   wui-icon[data-parent-size='inherit'] {
     width: 75%;
     height: 75%;

diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
@@ -173,6 +173,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-100: var(--wui-icon-box-bg-success-base-100);
       --wui-icon-box-bg-inverse-100: var(--wui-icon-box-bg-inverse-base-100);
 
+      --wui-all-wallets-bg-100: var(--wui-all-wallets-bg-base-100);
+
       --wui-avatar-border: var(--wui-avatar-border-base);
 
       --wui-box-shadow-blue: rgba(71, 161, 255, 0.16);
@@ -317,6 +319,12 @@ function createRootStyles(themeVariables: ThemeVariables) {
         var(--wui-icon-box-bg-inverse-base-100)
       );
 
+      --wui-all-wallets-bg-100: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--wui-all-wallets-bg-base-100)
+      );
+
       --wui-avatar-border: color-mix(
         in srgb,
         var(--w3m-color-mix) var(--w3m-color-mix-strength),
@@ -367,6 +375,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-base-100: #1f3a28;
       --wui-icon-box-bg-inverse-base-100: #243240;
 
+      --wui-all-wallets-bg-base-100: #222b35;
+
       --wui-avatar-border-base: #252525;
 
       --wui-overlay-002: rgba(255, 255, 255, 0.02);
@@ -421,6 +431,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-base-100: #daf0e4;
       --wui-icon-box-bg-inverse-base-100: #dcecfc;
 
+      --wui-all-wallets-bg-base-100: #c1dfde;
+
       --wui-avatar-border-base: #f3f4f4;
 
       --wui-overlay-002: rgba(0, 0, 0, 0.02);