diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json index 372e543ab..4b25375f7 100644 --- a/apps/web/package-lock.json +++ b/apps/web/package-lock.json @@ -35,6 +35,7 @@ "localforage": "^1.10.0", "localforage-driver-memory": "^1.0.5", "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git", + "mac-scrollbar": "^0.10.3", "marked": "^4.1.0", "phone": "^3.1.14", "platform": "^1.3.6", @@ -48,8 +49,9 @@ "react-qrcode-logo": "^2.2.1", "react-scripts": "^5.0.1", "react-scroll-sync": "^0.9.0", + "react-scrollbars-custom": "^4.1.1", "react-toggle": "^4.1.2", - "react-virtuoso": "2.4.0", + "react-virtuoso": "^3.0.0", "showdown": "github:thecodrr/showdown", "timeago.js": "^4.0.2", "w3c-keyname": "^2.2.6", @@ -6064,6 +6066,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/cnbuilder": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-3.1.0.tgz", + "integrity": "sha512-9sxWwwprkPNTVQnx92WYPEWCmyZRqbf9VWUYABU4rl0mLL17VAV2MvvOApkMA6bQVXRLJ8jN//8Yp6drElpLWA==", + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + } + }, "node_modules/co": { "version": "4.6.0", "license": "MIT", @@ -11844,6 +11863,11 @@ "node": ">=10" } }, + "node_modules/mac-scrollbar": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/mac-scrollbar/-/mac-scrollbar-0.10.3.tgz", + "integrity": "sha512-+dCARf54JUqeAWhjZE+cMBA9kLLIx1V7LRm3Fh27hAVX9J8ZqpSgXkfioFV218tivVFmusv/xHB1+6SgX0HZgg==" + }, "node_modules/magic-string": { "version": "0.25.9", "license": "MIT", @@ -14487,7 +14511,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -14595,7 +14618,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -14605,6 +14627,19 @@ "react": "17.0.2" } }, + "node_modules/react-draggable": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz", + "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-dropzone": { "version": "11.7.1", "license": "MIT", @@ -14784,6 +14819,23 @@ "react-dom": "0.14.x || 15.x || 16.x || 17.x" } }, + "node_modules/react-scrollbars-custom": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.1.1.tgz", + "integrity": "sha512-FOI1EMrdN5qziwvFAuH4saOo0+ggxeTuKLPpy6nezNdLUnDW1vCHGq0VSSfTSRstDgfXgwff5TMP9NeJ8NiFOQ==", + "dependencies": { + "cnbuilder": "^3.1.0", + "react-draggable": "^4.4.5", + "zoom-level": "^2.5.0" + }, + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-toggle": { "version": "4.1.3", "license": "MIT", @@ -14797,9 +14849,9 @@ } }, "node_modules/react-virtuoso": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.4.0.tgz", - "integrity": "sha512-hjo+ERHcZU5XOnpXMVEhm6mSiPi6oz8xbwKjWTfozbUGPaVAT+9wzU202Y50NOHVXekBVCGL02W2++PKi8z2Tw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-3.0.0.tgz", + "integrity": "sha512-k/W613Ga1IR37hxe+pfme9gqxB0PANjPJwN7pvg778YtgZ5C3DE2j7vMUjydU5xuVyUsM3uOw2KsMSK2oS0LqQ==", "dependencies": { "@virtuoso.dev/react-urx": "^0.2.12", "@virtuoso.dev/urx": "^0.2.12" @@ -14808,7 +14860,8 @@ "node": ">=10" }, "peerDependencies": { - "react": ">=16" + "react": ">=16 || >=17 || >= 18", + "react-dom": ">=16 || >=17 || >= 18" } }, "node_modules/read-cache": { @@ -15427,7 +15480,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -16885,7 +16937,6 @@ }, "node_modules/typescript": { "version": "4.8.2", - "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -18044,6 +18095,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zoom-level": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-2.5.0.tgz", + "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg==", + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + } + }, "node_modules/zustand": { "version": "3.7.2", "license": "MIT", @@ -19164,10 +19224,12 @@ } }, "@csstools/postcss-unset-value": { - "version": "1.0.2" + "version": "1.0.2", + "requires": {} }, "@csstools/selector-specificity": { - "version": "2.0.2" + "version": "2.0.2", + "requires": {} }, "@develar/schema-utils": { "version": "2.6.5", @@ -19189,7 +19251,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -20838,10 +20901,12 @@ } }, "acorn-import-assertions": { - "version": "1.8.0" + "version": "1.8.0", + "requires": {} }, "acorn-jsx": { - "version": "5.3.2" + "version": "5.3.2", + "requires": {} }, "acorn-node": { "version": "1.8.2", @@ -21157,7 +21222,8 @@ } }, "ajv-keywords": { - "version": "3.5.2" + "version": "3.5.2", + "requires": {} }, "json-schema-traverse": { "version": "0.4.1" @@ -21206,7 +21272,8 @@ } }, "babel-plugin-named-asset-import": { - "version": "0.3.8" + "version": "0.3.8", + "requires": {} }, "babel-plugin-polyfill-corejs2": { "version": "0.3.2", @@ -21640,6 +21707,16 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + }, + "cnbuilder": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-3.1.0.tgz", + "integrity": "sha512-9sxWwwprkPNTVQnx92WYPEWCmyZRqbf9VWUYABU4rl0mLL17VAV2MvvOApkMA6bQVXRLJ8jN//8Yp6drElpLWA==" + }, "co": { "version": "4.6.0" }, @@ -21882,7 +21959,8 @@ } }, "css-declaration-sorter": { - "version": "6.3.0" + "version": "6.3.0", + "requires": {} }, "css-has-pseudo": { "version": "3.0.4", @@ -21943,7 +22021,8 @@ } }, "css-prefers-color-scheme": { - "version": "6.0.3" + "version": "6.0.3", + "requires": {} }, "css-select": { "version": "4.3.0", @@ -22027,7 +22106,8 @@ } }, "cssnano-utils": { - "version": "3.1.0" + "version": "3.1.0", + "requires": {} }, "csso": { "version": "4.2.0", @@ -23074,7 +23154,8 @@ } }, "eslint-plugin-react-hooks": { - "version": "4.6.0" + "version": "4.6.0", + "requires": {} }, "eslint-plugin-testing-library": { "version": "5.6.0", @@ -23517,7 +23598,8 @@ } }, "ajv-keywords": { - "version": "3.5.2" + "version": "3.5.2", + "requires": {} }, "cosmiconfig": { "version": "6.0.0", @@ -23794,7 +23876,8 @@ } }, "goober": { - "version": "2.1.11" + "version": "2.1.11", + "requires": {} }, "got": { "version": "9.6.0", @@ -24015,7 +24098,8 @@ } }, "icss-utils": { - "version": "5.1.0" + "version": "5.1.0", + "requires": {} }, "idb": { "version": "7.0.2" @@ -24584,7 +24668,8 @@ } }, "jest-pnp-resolver": { - "version": "1.2.2" + "version": "1.2.2", + "requires": {} }, "jest-regex-util": { "version": "27.5.1" @@ -25099,7 +25184,8 @@ } }, "localforage-driver-commons": { - "version": "1.0.3" + "version": "1.0.3", + "requires": {} }, "localforage-driver-memory": { "version": "1.0.5", @@ -25186,6 +25272,11 @@ "yallist": "^4.0.0" } }, + "mac-scrollbar": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/mac-scrollbar/-/mac-scrollbar-0.10.3.tgz", + "integrity": "sha512-+dCARf54JUqeAWhjZE+cMBA9kLLIx1V7LRm3Fh27hAVX9J8ZqpSgXkfioFV218tivVFmusv/xHB1+6SgX0HZgg==" + }, "magic-string": { "version": "0.25.9", "requires": { @@ -25918,7 +26009,8 @@ } }, "postcss-browser-comments": { - "version": "4.0.0" + "version": "4.0.0", + "requires": {} }, "postcss-calc": { "version": "8.2.4", @@ -25992,16 +26084,20 @@ } }, "postcss-discard-comments": { - "version": "5.1.2" + "version": "5.1.2", + "requires": {} }, "postcss-discard-duplicates": { - "version": "5.1.0" + "version": "5.1.0", + "requires": {} }, "postcss-discard-empty": { - "version": "5.1.1" + "version": "5.1.1", + "requires": {} }, "postcss-discard-overridden": { - "version": "5.1.0" + "version": "5.1.0", + "requires": {} }, "postcss-double-position-gradients": { "version": "3.1.2", @@ -26017,7 +26113,8 @@ } }, "postcss-flexbugs-fixes": { - "version": "5.0.2" + "version": "5.0.2", + "requires": {} }, "postcss-focus-visible": { "version": "6.0.4", @@ -26032,10 +26129,12 @@ } }, "postcss-font-variant": { - "version": "5.0.0" + "version": "5.0.0", + "requires": {} }, "postcss-gap-properties": { - "version": "3.0.5" + "version": "3.0.5", + "requires": {} }, "postcss-image-set-function": { "version": "4.0.7", @@ -26052,7 +26151,8 @@ } }, "postcss-initial": { - "version": "4.0.1" + "version": "4.0.1", + "requires": {} }, "postcss-js": { "version": "4.0.0", @@ -26096,10 +26196,12 @@ } }, "postcss-logical": { - "version": "5.0.4" + "version": "5.0.4", + "requires": {} }, "postcss-media-minmax": { - "version": "5.0.0" + "version": "5.0.0", + "requires": {} }, "postcss-merge-longhand": { "version": "5.1.6", @@ -26146,7 +26248,8 @@ } }, "postcss-modules-extract-imports": { - "version": "3.0.0" + "version": "3.0.0", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -26190,7 +26293,8 @@ } }, "postcss-normalize-charset": { - "version": "5.1.0" + "version": "5.1.0", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -26264,7 +26368,8 @@ } }, "postcss-page-break": { - "version": "3.0.4" + "version": "3.0.4", + "requires": {} }, "postcss-place": { "version": "7.0.5", @@ -26346,7 +26451,8 @@ } }, "postcss-replace-overflow-wrap": { - "version": "4.0.0" + "version": "4.0.0", + "requires": {} }, "postcss-selector-not": { "version": "6.0.1", @@ -26625,7 +26731,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -26702,13 +26807,21 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "scheduler": "^0.20.2" } }, + "react-draggable": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz", + "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==", + "requires": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + } + }, "react-dropzone": { "version": "11.7.1", "requires": { @@ -26733,7 +26846,8 @@ "version": "3.0.4" }, "react-loading-skeleton": { - "version": "3.1.0" + "version": "3.1.0", + "requires": {} }, "react-modal": { "version": "3.15.1", @@ -26821,6 +26935,16 @@ "prop-types": "^15.5.7" } }, + "react-scrollbars-custom": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.1.1.tgz", + "integrity": "sha512-FOI1EMrdN5qziwvFAuH4saOo0+ggxeTuKLPpy6nezNdLUnDW1vCHGq0VSSfTSRstDgfXgwff5TMP9NeJ8NiFOQ==", + "requires": { + "cnbuilder": "^3.1.0", + "react-draggable": "^4.4.5", + "zoom-level": "^2.5.0" + } + }, "react-toggle": { "version": "4.1.3", "requires": { @@ -26828,9 +26952,9 @@ } }, "react-virtuoso": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.4.0.tgz", - "integrity": "sha512-hjo+ERHcZU5XOnpXMVEhm6mSiPi6oz8xbwKjWTfozbUGPaVAT+9wzU202Y50NOHVXekBVCGL02W2++PKi8z2Tw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-3.0.0.tgz", + "integrity": "sha512-k/W613Ga1IR37hxe+pfme9gqxB0PANjPJwN7pvg778YtgZ5C3DE2j7vMUjydU5xuVyUsM3uOw2KsMSK2oS0LqQ==", "requires": { "@virtuoso.dev/react-urx": "^0.2.12", "@virtuoso.dev/urx": "^0.2.12" @@ -27213,7 +27337,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -27237,7 +27360,8 @@ } }, "ajv-keywords": { - "version": "3.5.2" + "version": "3.5.2", + "requires": {} }, "json-schema-traverse": { "version": "0.4.1" @@ -27671,7 +27795,8 @@ "version": "3.1.1" }, "style-loader": { - "version": "3.3.1" + "version": "3.3.1", + "requires": {} }, "style-value-types": { "version": "4.1.4", @@ -28173,8 +28298,7 @@ } }, "typescript": { - "version": "4.8.2", - "dev": true + "version": "4.8.2" }, "unbox-primitive": { "version": "1.0.2", @@ -28544,7 +28668,8 @@ } }, "ws": { - "version": "8.8.1" + "version": "8.8.1", + "requires": {} } } }, @@ -28840,7 +28965,8 @@ } }, "wouter": { - "version": "2.7.5" + "version": "2.7.5", + "requires": {} }, "wrap-ansi": { "version": "7.0.0", @@ -28863,7 +28989,8 @@ } }, "ws": { - "version": "7.5.9" + "version": "7.5.9", + "requires": {} }, "xdg-basedir": { "version": "4.0.0", @@ -28916,8 +29043,14 @@ "yocto-queue": { "version": "0.1.0" }, + "zoom-level": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-2.5.0.tgz", + "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg==" + }, "zustand": { - "version": "3.7.2" + "version": "3.7.2", + "requires": {} } } } diff --git a/apps/web/package.json b/apps/web/package.json index 071247d74..68adb2850 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -41,12 +41,12 @@ "localforage": "^1.10.0", "localforage-driver-memory": "^1.0.5", "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git", + "mac-scrollbar": "^0.10.3", "marked": "^4.1.0", "phone": "^3.1.14", "platform": "^1.3.6", "print-js": "^1.6.0", "qclone": "^1.0.4", - "rc-scrollbars": "^1.1.3", "react-dropzone": "^11.4.2", "react-hot-toast": "^2.2.0", "react-loading-skeleton": "^3.1.0", @@ -55,7 +55,7 @@ "react-scripts": "^5.0.1", "react-scroll-sync": "^0.9.0", "react-toggle": "^4.1.2", - "react-virtuoso": "2.4.0", + "react-virtuoso": "^3.0.0", "showdown": "github:thecodrr/showdown", "timeago.js": "^4.0.2", "w3c-keyname": "^2.2.6", @@ -67,13 +67,13 @@ "@playwright/test": "^1.26.0", "@types/file-saver": "^2.0.5", "@types/hookrouter": "^2.2.5", + "@types/marked": "^4.0.7", "@types/node-fetch": "^2.5.10", "@types/platform": "^1.3.4", "@types/quill": "^2.0.5", "@types/react": "17.0.2", "@types/react-dom": "17.0.2", "@types/react-modal": "^3.13.1", - "@types/marked": "^4.0.7", "buffer": "^6.0.3", "chalk": "^4.1.0", "dotenv": "^10.0.0", diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 0d0e1f45a..12492aa88 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -147,6 +147,25 @@ textarea, --sash-hover-size: 4px; } -.rc-scrollbars-view:hover ~ .rc-scrollbars-track { - opacity: 1 !important; +.route#settings, +#mainRouteContainer { + overflow: hidden; +} + +.ms-track:hover, +.ms-track:active { + background: var(--bgSecondary) !important; + border-width: 0px !important; +} + +.ms-track { + border-width: 0px !important; +} + +.ms-active .ms-thumb { + filter: brightness(80%); +} + +.ms-thumb { + background: var(--bgSecondaryText) !important; } diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js index 35c3ba9a6..2163f25b0 100644 --- a/apps/web/src/components/menu/index.js +++ b/apps/web/src/components/menu/index.js @@ -215,13 +215,10 @@ function MenuContainer({ title, children }) { return ( . */ -import React, { PropsWithChildren, useRef } from "react"; -import { Box } from "@theme-ui/components"; -import { Scrollbars } from "rc-scrollbars"; +import React, { PropsWithChildren } from "react"; +import { MacScrollbar } from "mac-scrollbar"; +import "mac-scrollbar/dist/mac-scrollbar.css"; type ScrollContainerProps = { style?: React.CSSProperties; @@ -28,61 +28,23 @@ type ScrollContainerProps = { const ScrollContainer = ({ children, - style, forwardedRef, ...props }: PropsWithChildren) => { - const ref = useRef(); - return ( - { - if (!sRef) return; - forwardedRef && forwardedRef((sRef.view as HTMLDivElement) || null); - ref.current = sRef; + ref={(div) => { + forwardedRef && forwardedRef(div as HTMLDivElement); }} - style={{ ...style, overflowY: "hidden" }} - renderView={({ style, ...props }) => ( - { - if ( - !ref.current || - !ref.current.thumbVertical || - !ref.current.thumbHorizontal - ) - return; - const { - thumbHorizontal, - thumbVertical, - getThumbHorizontalWidth, - getThumbVerticalHeight - } = ref.current; - - const height = `${getThumbVerticalHeight()}px`; - const width = `${getThumbHorizontalWidth()}px`; - if (height !== thumbVertical.style.height) - thumbVertical.style.height = height; - else if (thumbHorizontal.style.width !== width) - thumbHorizontal.style.width = width; - }} - /> - )} - renderThumbVertical={({ style, ...props }) => ( - - )} + style={{ + position: "relative", + height: "100%" + }} + minThumbSize={40} > {children} - + ); }; export default ScrollContainer; @@ -90,55 +52,16 @@ export default ScrollContainer; type FlexScrollContainerProps = { className?: string; style?: React.CSSProperties; - viewStyle?: React.CSSProperties; }; export function FlexScrollContainer({ children, - className, style, - viewStyle + className }: PropsWithChildren) { return ( - ( - - )} - renderThumbVertical={({ style, ...props }) => ( - - )} - > + {children} - + ); } diff --git a/apps/web/src/views/settings.js b/apps/web/src/views/settings.js index ae734ddbe..909de8edb 100644 --- a/apps/web/src/views/settings.js +++ b/apps/web/src/views/settings.js @@ -47,7 +47,7 @@ import { createBackup, importBackup, verifyAccount } from "../common"; import { db } from "../common/db"; import { usePersistentState } from "../hooks/use-persistent-state"; import dayjs from "dayjs"; -import ScrollContainer from "../components/scroll-container"; +import { FlexScrollContainer } from "../components/scroll-container"; import { showToast } from "../utils/toast"; import { hardNavigate, hashNavigate } from "../navigation"; import { appVersion } from "../utils/version"; @@ -175,7 +175,7 @@ function Settings() { ); return ( - + {isLoggedIn ? ( @@ -530,7 +530,7 @@ function Settings() { ); }} /> - {isLoggedIn && ( + {!isLoggedIn && ( <>