diff --git a/packages/ui/package.json b/packages/ui/package.json index c7ca619..aef4c87 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -50,11 +50,10 @@ "@sveltejs/package": "^2.3.2", "@sveltejs/vite-plugin-svelte": "^3.0.1", "@tsconfig/svelte": "^5.0.2", - "@types/qrcode": "^1.5.5", "@wagmi/core": "2.0.1", + "@castlenine/svelte-qrcode": "^2.2.0", "postcss": "^8.4.40", "postcss-preset-env": "^9.3.0", - "qrcode": "^1.5.3", "sass": "^1.77.8", "svelte": "^4.2.9", "svelte-check": "^3.6.3", diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte index fff9f06..f6f2fbd 100644 --- a/packages/ui/src/components/AccountModal.svelte +++ b/packages/ui/src/components/AccountModal.svelte @@ -71,7 +71,7 @@ - {balance ? `${balance.substring(0, 7)} ${symbol}` : 0} diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte index e1a9c1c..a8eb949 100644 --- a/packages/ui/src/components/Common/Modal.svelte +++ b/packages/ui/src/components/Common/Modal.svelte @@ -1,11 +1,11 @@ @@ -61,8 +83,7 @@ aria-labelledby="fcl__dialog-title" on:click|self={close} use:restoreStyles - inert={isOpen ? undefined : true} - style:inline-size={`min(${inlineSize || 240}px, 100%)`} + class="fcl__el" >
@@ -95,6 +116,11 @@
+ {#if !customTrigger} @@ -103,33 +129,27 @@ diff --git a/packages/ui/src/components/ConnectModal/skeletonQr.svg b/packages/ui/src/components/ConnectModal/skeletonQr.svg new file mode 100644 index 0000000..6635ac5 --- /dev/null +++ b/packages/ui/src/components/ConnectModal/skeletonQr.svg @@ -0,0 +1 @@ + diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css index 2dd3af4..10eb89a 100644 --- a/packages/ui/src/styles/index.css +++ b/packages/ui/src/styles/index.css @@ -141,12 +141,13 @@ button.fcl__btn-primary svg, margin: 0; padding-block-start: 1.25em; padding-block-end: 0.25em; + color: var(--fcl-text-primary-color); } -.fcl__subhead { - opacity: 0.7; /* hacky... _/(:/)\_ */ - font-size: 0.9em; - font-weight: 400; +.fcl__text-secondary { + color: var(--fcl-text-secondary-color, hsl(0, 0%, 70%)); + font-size: var(--fcl-text-secondary-size, 0.85rem); + font-weight: var(--fcl-text-secondary-weight, 400); text-align: center; margin: 0; /* padding-bottom: 1.25em; */ @@ -226,7 +227,7 @@ button.fcl__btn-primary svg, border: 1px solid hsla(0, 0%, 100%, 0%); border-radius: 50%; background: transparent; - color: var(--fcl-text-color); + color: var(--fcl-text-primary-color); transition: background-color 140ms ease-in, @@ -261,4 +262,23 @@ button.fcl__btn-primary svg, .mt-1 { margin-top: 1em; } + + &::-webkit-scrollbar { + inline-size: 0.5em; + } + + &::-webkit-scrollbar-track { + background: var(--fcl-body-background); + } + &::-webkit-scrollbar-thumb { + background: var(--fcl-text-color, #222429); + border: 0.2em solid transparent; + border-radius: calc(var(--fcl-border-radius, 50em) / 8); + &:hover { + background-color: var(--fcl-btn-hover-background, #2f3139); + } + } + &::-webkit-scrollbar-button { + background: var(--fcl-body-background); + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2332835..10b2815 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -225,6 +225,9 @@ importers: packages/ui: devDependencies: + '@castlenine/svelte-qrcode': + specifier: ^2.2.0 + version: 2.2.0(svelte@4.2.9) '@fractl-ui/types': specifier: workspace:^ version: link:../types @@ -240,9 +243,6 @@ importers: '@tsconfig/svelte': specifier: ^5.0.2 version: 5.0.2 - '@types/qrcode': - specifier: ^1.5.5 - version: 1.5.5 '@wagmi/core': specifier: 2.0.1 version: 2.0.1(react@18.2.0)(typescript@5.3.3)(viem@2.0.1(typescript@5.3.3)) @@ -252,9 +252,6 @@ importers: postcss-preset-env: specifier: ^9.3.0 version: 9.6.0(postcss@8.4.40) - qrcode: - specifier: ^1.5.3 - version: 1.5.3 sass: specifier: ^1.77.8 version: 1.77.8 @@ -365,6 +362,11 @@ packages: resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==} engines: {node: '>=6.9.0'} + '@castlenine/svelte-qrcode@2.2.0': + resolution: {integrity: sha512-0PbzjH86AQOPFomHD7FDxSzWlQC8MOfyvOfHS0kmRXNA2nz5+oOL9kjpE+7IywejCGIXFN3sZrBpvx9i6xsdeA==} + peerDependencies: + svelte: '>=3.54.0' + '@changesets/apply-release-plan@7.0.4': resolution: {integrity: sha512-HLFwhKWayKinWAul0Vj+76jVx1Pc2v55MGPVjZ924Y/ROeSsBMFutv9heHmCUj48lJyRfOTJG5+ar+29FUky/A==} @@ -2007,9 +2009,6 @@ packages: '@types/pug@2.0.10': resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==} - '@types/qrcode@1.5.5': - resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==} - '@types/semver@7.5.8': resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} @@ -5010,6 +5009,10 @@ snapshots: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + '@castlenine/svelte-qrcode@2.2.0(svelte@4.2.9)': + dependencies: + svelte: 4.2.9 + '@changesets/apply-release-plan@7.0.4': dependencies: '@babel/runtime': 7.25.0 @@ -7040,10 +7043,6 @@ snapshots: '@types/pug@2.0.10': {} - '@types/qrcode@1.5.5': - dependencies: - '@types/node': 22.0.0 - '@types/semver@7.5.8': {} '@types/trusted-types@2.0.7': {}