fix: block parent backdrop-filter for desktop UI

README.md

@@ -42,7 +42,7 @@
 
 ## How to start?
 
-Install [Node.js] which includes [Node Package Manager][npm]. Use `create-radix-dapp` package - paste following command into your terminal and it will walk you through all required steps!
+Install [Node.js] which includes [Node Package Manager][npm]. Use `create-radix-dapp` package - paste following command into your terminal and it will walk you through all required steps.
 
 ```bash
 npx create-radix-dapp@latest

packages/connect-button/.storybook/preview-head.html

@@ -1,3 +1,13 @@
 <script>
   window.global = window
 </script>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600"
+/>
+<style>
+  body,
+  html {
+    font-family: 'IBM Plex Sans';
+  }
+</style>

packages/connect-button/README.md

@@ -1,18 +1,6 @@
-# <img src="../../docs/radix-logo.png" alt="Radix Logo" width="35" height="35"> √ Connect Button
+# What is √ Connect Button?
 
-[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE)
-
-The √ Connect Button is a framework agnostic web component to help developers connect users and their Radix Wallet to their dApps.
-
-It appears as a consistent, Radix-branded UI element that helps users identify your dApp website as a Radix dApp. When used with [Radix dApp Toolkit](https://github.com/radixdlt/radix-dapp-toolkit) it is compatible with the Radix Wallet – and it automatically provides a consistent user experience for users to connect with their wallet and see the current status of the connection between dApp and Radix Wallet.
-
-- [ √ Connect Button](#--connect-button)
-- [Usage](#usage)
-  - [Getting started](#getting-started)
-  - [Setting properties programmatically](#setting-properties-programmatically)
-  - [Events](#events)
-- [Playground](#playground)
-- [License](#license)
+The **√ Connect Button** is a framework agnostic [custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) which appears as a consistent, Radix-branded UI that helps users identify your dApp website as a Radix dApp. It communicates with outer world through attributes and DOM events.
 
 # Usage
 
@@ -112,6 +100,9 @@ type ConnectButtonEvents = {
 
 You can play around with different settings using our storybook instance. Visit [connect-button-storybook.radixdlt.com](https://connect-button-storybook.radixdlt.com/) to easily experiment with Connect Button.
 
+> [!IMPORTANT]
+> Placing Connect Button inside container which uses `backdrop-filter` can cause troubles. Please check ["header with blur"](https://connect-button-storybook.radixdlt.com/?path=/docs/radix-header-with-blur--docs) section inside storybook to check for workaround solution
+
 # License
 
 The √ Connect Button binaries are licensed under the [Radix Software EULA](http://www.radixdlt.com/terms/genericEULA)

packages/connect-button/src/components/account/account.stories.ts

@@ -15,22 +15,6 @@ const accounts = [
     'Main',
     'account_tdx_21_12x4zx09f8962a9wesfqvxaue0qn6m39r3cpysrjd6dtqppzhrkjrsr',
   ],
-  [
-    'Saving',
-    'account_tdx_21_12xdjp5dq7haph4c75mst99mc26gkm8mys70v6qlyz0fz86f9ucy0ru',
-  ],
-  [
-    'Degen',
-    'account_tdx_21_1298kg54s9r9evc5tgglj2wrqsatuflwxg5s3m845uut6t3jtyh6cyy',
-  ],
-  [
-    'Gaming',
-    'account_tdx_21_12y78nedvqg9svp49fjs4f9y5kreweqxt6vszaprnfq8kjhralku6fz',
-  ],
-  [
-    'Trading',
-    'account_tdx_21_128pncqprt3gfew04aefqy549ecvfp0a99mxjpa6wcpl2n2ymqr8gj3',
-  ],
   [
     'Staking',
     'account_tdx_21_12yccemy8vx37qkctmpkgdtatxe8mdmwl9mndv5dx69mj7tg45d4q88',
@@ -39,31 +23,40 @@ const accounts = [
     'Professional',
     'account_tdx_21_129tr5q2g6eh7zxwzl6tj0ndq87zzuqynqt56xpe3v2pf5k9wp67ju6',
   ],
-  [
-    'Fun',
-    'account_tdx_21_12xgzze2krhmw95r07y4pccssgyjxzwgem86hndy8cujfzhkggdpt7s',
-  ],
   [
     'Travel',
     'account_tdx_21_129q44nllnywkm8pscgqfq5wkpcfxtq2xffyca745c3fau3swhkhrjw',
   ],
-  [
-    'Alpha',
-    'account_tdx_21_12yc8neefcqfum2u4r5xtgder57va8ahdjm3qr9eatyhmdec62ya6m4',
-  ],
-  [
-    'Beta',
-    'account_tdx_21_12yg7c2752f4uwy6ayljg3g5pvj36xxdy690hj7fpllsed53jsgczz4',
-  ],
   [
     'VeryLongAccountNameVeryLongAccountNameVeryLongAccountName',
     'account_tdx_21_129vzduy6q5ufxxekf66eqdjy2vrm6ezdl0sh5kjhgrped9p5k6t9nf',
   ],
 ]
 
-export const Primary: Story = {
+export const Single: Story = {
+  render: (args) => html`
+    <radix-account
+      address=${args.address}
+      appearanceId=${args.appearanceId}
+      label=${args.label}
+    ></radix-account>
+  `,
+  args: {
+    address:
+      'account_tdx_21_129tr5q2g6eh7zxwzl6tj0ndq87zzuqynqt56xpe3v2pf5k9wp67ju6',
+    label: 'Radix Account',
+    appearanceId: 0,
+  },
+}
+
+export const Multiple: Story = {
   render: () => html`
-    <div style="max-width: 500px">
+    <style>
+      div {
+        max-width: 500px;
+      }
+    </style>
+    <div>
       ${accounts.map(
         ([label, address], index) =>
           html` <radix-account

packages/connect-button/src/components/connect-button.ts

@@ -195,7 +195,6 @@ export class ConnectButton extends LitElement {
 
   private toggleParentBackdropFilter() {
     const OPACITY_TRANSITION_DURATION = 180
-    if (!this.isMobile) return
 
     if (!this.showPopoverMenu && this.parentElementWithBackdropFilter) {
       setTimeout(() => {

packages/connect-button/src/components/pages/sharing.ts

@@ -81,15 +81,15 @@ export class RadixSharingPage extends LitElement {
         <radix-themed-button
           class=${classMap({
             full: true,
-            disabled: this.accounts.length === 0,
+            disabled: this.accounts?.length === 0,
           })}
           @click=${this.onUpdateData}
         >
           <div
             class=${classMap({
               icon: true,
               'update-data': true,
-              disabled: this.accounts.length === 0,
+              disabled: this.accounts?.length === 0,
             })}
           ></div>
           Update Account Sharing