diff --git a/package.json b/package.json index 8a308b9192..f9c2c43552 100644 --- a/package.json +++ b/package.json @@ -65,8 +65,6 @@ "@ionic/core": "npm:voyager-ionic-core@8.4.0", "@ionic/react": "8.4.0", "@ionic/react-router": "8.4.0", - "@linaria/core": "^6.2.0", - "@linaria/react": "^6.2.1", "@mantine/hooks": "^7.14.0", "@reduxjs/toolkit": "^2.3.0", "capacitor-android-nav-mode": "^1.0.0", @@ -122,8 +120,6 @@ "virtua": "^0.37.0" }, "devDependencies": { - "@babel/preset-react": "^7.25.9", - "@babel/preset-typescript": "^7.26.0", "@capacitor/cli": "^6.1.2", "@eslint/js": "^9.14.0", "@ionic/cli": "^7.2.0", @@ -139,7 +135,6 @@ "@types/ua-parser-js": "^0.7.39", "@vitejs/plugin-legacy": "^5.4.3", "@vitejs/plugin-react": "^4.3.3", - "@wyw-in-js/vite": "^0.5.5", "babel-plugin-react-compiler": "0.0.0-experimental-19c7e06-20241113", "eslint": "^9.14.0", "eslint-config-prettier": "^9.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36d7756845..af1d8136d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,12 +70,6 @@ importers: '@ionic/react-router': specifier: 8.4.0 version: 8.4.0(react-dom@0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114))(react-router-dom@5.3.4(react@0.0.0-experimental-b01722d5-20241114))(react-router@5.3.4(react@0.0.0-experimental-b01722d5-20241114))(react@0.0.0-experimental-b01722d5-20241114) - '@linaria/core': - specifier: ^6.2.0 - version: 6.2.0 - '@linaria/react': - specifier: ^6.2.1 - version: 6.2.1(react@0.0.0-experimental-b01722d5-20241114) '@mantine/hooks': specifier: ^7.14.0 version: 7.14.0(react@0.0.0-experimental-b01722d5-20241114) @@ -236,12 +230,6 @@ importers: specifier: ^0.37.0 version: 0.37.0(react-dom@0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114))(react@0.0.0-experimental-b01722d5-20241114) devDependencies: - '@babel/preset-react': - specifier: ^7.25.9 - version: 7.25.9(@babel/core@7.26.0) - '@babel/preset-typescript': - specifier: ^7.26.0 - version: 7.26.0(@babel/core@7.26.0) '@capacitor/cli': specifier: ^6.1.2 version: 6.1.2 @@ -287,9 +275,6 @@ importers: '@vitejs/plugin-react': specifier: ^4.3.3 version: 4.3.3(vite@5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.28.1)(sass@1.81.0)(stylus@0.62.0)(terser@5.36.0)) - '@wyw-in-js/vite': - specifier: ^0.5.5 - version: 0.5.5(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.28.1)(sass@1.81.0)(stylus@0.62.0)(terser@5.36.0)) babel-plugin-react-compiler: specifier: 0.0.0-experimental-19c7e06-20241113 version: 0.0.0-experimental-19c7e06-20241113 @@ -536,18 +521,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-jsx@7.25.9': - resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-syntax-typescript@7.25.9': - resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-unicode-sets-regex@7.18.6': resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} @@ -782,18 +755,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-react-display-name@7.25.9': - resolution: {integrity: sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-transform-react-jsx-development@7.25.9': - resolution: {integrity: sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-react-jsx-self@7.25.9': resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==} engines: {node: '>=6.9.0'} @@ -806,18 +767,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-react-jsx@7.25.9': - resolution: {integrity: sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-transform-react-pure-annotations@7.25.9': - resolution: {integrity: sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-regenerator@7.25.9': resolution: {integrity: sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==} engines: {node: '>=6.9.0'} @@ -866,12 +815,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-typescript@7.25.9': - resolution: {integrity: sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-unicode-escapes@7.25.9': resolution: {integrity: sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==} engines: {node: '>=6.9.0'} @@ -907,18 +850,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0 - '@babel/preset-react@7.25.9': - resolution: {integrity: sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/preset-typescript@7.26.0': - resolution: {integrity: sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/runtime@7.24.7': resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==} engines: {node: '>=6.9.0'} @@ -1010,12 +941,6 @@ packages: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} - '@emotion/is-prop-valid@1.3.1': - resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==} - - '@emotion/memoize@0.9.0': - resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} - '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -1357,16 +1282,6 @@ packages: '@jridgewell/trace-mapping@0.3.9': resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} - '@linaria/core@6.2.0': - resolution: {integrity: sha512-Ee+cwfhzhRM5X9rFogah3npw0OSqy80sJe/hlWIJxQD1WR6Zsbf+y78IlBPEzi6PvgoOiqdYtFjSUeWFqNVIDw==} - engines: {node: '>=16.0.0'} - - '@linaria/react@6.2.1': - resolution: {integrity: sha512-wfNRpYw8VMjKGRWU4XrHhWW9i3L71GrpuquwbWOUCq1q5YtxEoC2/qnz3yT4SOADCsfyDRAWhRhZxeCaDvYsGQ==} - engines: {node: '>=16.0.0'} - peerDependencies: - react: '>=16' - '@mantine/hooks@7.14.0': resolution: {integrity: sha512-BJ577AoQ5KnvbuaG174TYAmL2UqcX9qh9aL0aOx+gqyMM6GWeBXUXWx1kcMCzaDbYZwfQptU476fpSjHdcLjMw==} peerDependencies: @@ -2051,24 +1966,6 @@ packages: '@vitest/utils@2.1.5': resolution: {integrity: sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==} - '@wyw-in-js/processor-utils@0.5.5': - resolution: {integrity: sha512-L3IcAfoowhM0fw9Cnv2CNzfjWNLKpYl2CFqam6NvwpiXNR1kXz/GpO0AOiKvCs5h4Ps5kWxE2e8knXLpk8q/2g==} - engines: {node: '>=16.0.0'} - - '@wyw-in-js/shared@0.5.5': - resolution: {integrity: sha512-Wnvp3RGfynHk81lrp/0fA+Yv5yuIr2Ej13N3lawQeqbK4KlMag3P9npyIljGrEiwK2Bv4byHuXsJFgLI0Fo8bw==} - engines: {node: '>=16.0.0'} - - '@wyw-in-js/transform@0.5.5': - resolution: {integrity: sha512-XMZjhS8poHpxfPg41rkc6eh3Mr2BZAFM7OzYN4jPZUicpJKv7uQAU2dLEqnyDcDllo04LbZIryb2fXwpr+pqPw==} - engines: {node: '>=16.0.0'} - - '@wyw-in-js/vite@0.5.5': - resolution: {integrity: sha512-JynvzqiehPl6ClvbzwaGGkJbPFa2xYdrHyiKnp6NPIJyTSakOSYPKuFEaTRW/25YohMC/+oUdDlMJG+q8GrY0g==} - engines: {node: '>=16.0.0'} - peerDependencies: - vite: '>=3.2.7' - '@xml-tools/parser@1.0.11': resolution: {integrity: sha512-aKqQ077XnR+oQtHJlrAflaZaL7qZsulWc/i/ZEooar5JiWj1eLt0+Wg28cpa+XLney107wXqneC+oG1IZvxkTA==} @@ -2235,12 +2132,6 @@ packages: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} - babel-merge@3.0.0: - resolution: {integrity: sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. - peerDependencies: - '@babel/core': ^7.0.0 - babel-plugin-polyfill-corejs2@0.4.12: resolution: {integrity: sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==} peerDependencies: @@ -2802,10 +2693,6 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} - deepmerge@2.2.1: - resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==} - engines: {node: '>=0.10.0'} - deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} @@ -3578,9 +3465,6 @@ packages: resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==} engines: {node: '>=10'} - html-element-attributes@1.3.1: - resolution: {integrity: sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==} - html-encoding-sniffer@4.0.0: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} @@ -3777,10 +3661,6 @@ packages: resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==} engines: {node: '>=0.10.0'} - is-extendable@1.0.1: - resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==} - engines: {node: '>=0.10.0'} - is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} @@ -3876,10 +3756,6 @@ packages: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} - is-plain-object@2.0.4: - resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==} - engines: {node: '>=0.10.0'} - is-potential-custom-element-name@1.0.1: resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} @@ -3979,10 +3855,6 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} - isobject@3.0.1: - resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==} - engines: {node: '>=0.10.0'} - issue-parser@7.0.1: resolution: {integrity: sha512-3YZcUUR2Wt1WsapF+S/WiA2WmlW0cWAoPccMqne7AxEBhCdFeTPjfv/Axb8V2gyCgY3nRw+ksZ3xSUX+R47iAg==} engines: {node: ^18.17 || >=20.6.1} @@ -4724,10 +4596,6 @@ packages: resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==} engines: {node: '>= 0.4'} - object.omit@3.0.0: - resolution: {integrity: sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==} - engines: {node: '>=0.10.0'} - object.values@1.2.0: resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==} engines: {node: '>= 0.4'} @@ -5127,9 +4995,6 @@ packages: peerDependencies: react: '>=16.13.1' - react-html-attributes@1.4.6: - resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==} - react-intersection-observer@9.13.1: resolution: {integrity: sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==} peerDependencies: @@ -5700,9 +5565,6 @@ packages: style-to-object@1.0.8: resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==} - stylis@4.3.4: - resolution: {integrity: sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==} - stylus@0.62.0: resolution: {integrity: sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==} hasBin: true @@ -5861,10 +5723,6 @@ packages: peerDependencies: typescript: '>=4.2.0' - ts-invariant@0.10.3: - resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} - engines: {node: '>=8'} - ts-node@10.9.2: resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==} hasBin: true @@ -6799,16 +6657,6 @@ snapshots: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.25.9 - - '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 @@ -7070,18 +6918,6 @@ snapshots: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.25.9 - - '@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0) - transitivePeerDependencies: - - supports-color - '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 @@ -7092,23 +6928,6 @@ snapshots: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-annotate-as-pure': 7.25.9 - '@babel/helper-module-imports': 7.25.9 - '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0) - '@babel/types': 7.26.0 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-annotate-as-pure': 7.25.9 - '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-transform-regenerator@7.25.9(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 @@ -7154,17 +6973,6 @@ snapshots: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 - '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-annotate-as-pure': 7.25.9 - '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.25.9 - '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 - '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0) - transitivePeerDependencies: - - supports-color - '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 @@ -7270,29 +7078,6 @@ snapshots: '@babel/types': 7.26.0 esutils: 2.0.3 - '@babel/preset-react@7.25.9(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.25.9 - '@babel/helper-validator-option': 7.25.9 - '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.0) - '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0) - '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.0) - '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.0) - transitivePeerDependencies: - - supports-color - - '@babel/preset-typescript@7.26.0(@babel/core@7.26.0)': - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.25.9 - '@babel/helper-validator-option': 7.25.9 - '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0) - '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) - '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0) - transitivePeerDependencies: - - supports-color - '@babel/runtime@7.24.7': dependencies: regenerator-runtime: 0.14.1 @@ -7403,12 +7188,6 @@ snapshots: dependencies: '@jridgewell/trace-mapping': 0.3.9 - '@emotion/is-prop-valid@1.3.1': - dependencies: - '@emotion/memoize': 0.9.0 - - '@emotion/memoize@0.9.0': {} - '@esbuild/aix-ppc64@0.21.5': optional: true @@ -7847,26 +7626,6 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@linaria/core@6.2.0': - dependencies: - '@wyw-in-js/processor-utils': 0.5.5 - transitivePeerDependencies: - - supports-color - - '@linaria/react@6.2.1(react@0.0.0-experimental-b01722d5-20241114)': - dependencies: - '@emotion/is-prop-valid': 1.3.1 - '@linaria/core': 6.2.0 - '@wyw-in-js/processor-utils': 0.5.5 - '@wyw-in-js/shared': 0.5.5 - minimatch: 9.0.5 - react: 0.0.0-experimental-b01722d5-20241114 - react-html-attributes: 1.4.6 - resolve: 1.22.8 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - '@mantine/hooks@7.14.0(react@0.0.0-experimental-b01722d5-20241114)': dependencies: react: 0.0.0-experimental-b01722d5-20241114 @@ -8630,51 +8389,6 @@ snapshots: loupe: 3.1.2 tinyrainbow: 1.2.0 - '@wyw-in-js/processor-utils@0.5.5': - dependencies: - '@babel/generator': 7.26.2 - '@wyw-in-js/shared': 0.5.5 - transitivePeerDependencies: - - supports-color - - '@wyw-in-js/shared@0.5.5': - dependencies: - debug: 4.3.7 - find-up: 5.0.0 - minimatch: 9.0.5 - transitivePeerDependencies: - - supports-color - - '@wyw-in-js/transform@0.5.5(typescript@5.6.3)': - dependencies: - '@babel/core': 7.26.0 - '@babel/generator': 7.26.2 - '@babel/helper-module-imports': 7.25.9 - '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) - '@babel/template': 7.25.9 - '@babel/traverse': 7.25.9 - '@babel/types': 7.26.0 - '@wyw-in-js/processor-utils': 0.5.5 - '@wyw-in-js/shared': 0.5.5 - babel-merge: 3.0.0(@babel/core@7.26.0) - cosmiconfig: 8.3.6(typescript@5.6.3) - happy-dom: 15.11.6 - source-map: 0.7.4 - stylis: 4.3.4 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - typescript - - '@wyw-in-js/vite@0.5.5(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.28.1)(sass@1.81.0)(stylus@0.62.0)(terser@5.36.0))': - dependencies: - '@wyw-in-js/shared': 0.5.5 - '@wyw-in-js/transform': 0.5.5(typescript@5.6.3) - vite: 5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.28.1)(sass@1.81.0)(stylus@0.62.0)(terser@5.36.0) - transitivePeerDependencies: - - supports-color - - typescript - '@xml-tools/parser@1.0.11': dependencies: chevrotain: 7.1.1 @@ -8852,12 +8566,6 @@ snapshots: dependencies: possible-typed-array-names: 1.0.0 - babel-merge@3.0.0(@babel/core@7.26.0): - dependencies: - '@babel/core': 7.26.0 - deepmerge: 2.2.1 - object.omit: 3.0.0 - babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.0): dependencies: '@babel/compat-data': 7.26.2 @@ -9436,8 +9144,6 @@ snapshots: deep-is@0.1.4: {} - deepmerge@2.2.1: {} - deepmerge@4.3.1: {} default-browser-id@5.0.0: {} @@ -10265,6 +9971,7 @@ snapshots: entities: 4.5.0 webidl-conversions: 7.0.0 whatwg-mimetype: 3.0.0 + optional: true hard-rejection@2.1.0: {} @@ -10460,8 +10167,6 @@ snapshots: dependencies: lru-cache: 6.0.0 - html-element-attributes@1.3.1: {} - html-encoding-sniffer@4.0.0: dependencies: whatwg-encoding: 3.1.1 @@ -10657,10 +10362,6 @@ snapshots: is-extendable@0.1.1: {} - is-extendable@1.0.1: - dependencies: - is-plain-object: 2.0.4 - is-extglob@2.1.1: {} is-finalizationregistry@1.0.2: @@ -10722,10 +10423,6 @@ snapshots: is-plain-obj@4.1.0: {} - is-plain-object@2.0.4: - dependencies: - isobject: 3.0.1 - is-potential-custom-element-name@1.0.1: {} is-regex@1.1.4: @@ -10805,8 +10502,6 @@ snapshots: isexe@2.0.0: {} - isobject@3.0.1: {} - issue-parser@7.0.1: dependencies: lodash.capitalize: 4.2.1 @@ -11731,10 +11426,6 @@ snapshots: es-abstract: 1.23.5 es-object-atoms: 1.0.0 - object.omit@3.0.0: - dependencies: - is-extendable: 1.0.1 - object.values@1.2.0: dependencies: call-bind: 1.0.7 @@ -12178,10 +11869,6 @@ snapshots: '@babel/runtime': 7.26.0 react: 0.0.0-experimental-b01722d5-20241114 - react-html-attributes@1.4.6: - dependencies: - html-element-attributes: 1.3.1 - react-intersection-observer@9.13.1(react-dom@0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114))(react@0.0.0-experimental-b01722d5-20241114): dependencies: react: 0.0.0-experimental-b01722d5-20241114 @@ -12712,7 +12399,8 @@ snapshots: source-map@0.6.1: {} - source-map@0.7.4: {} + source-map@0.7.4: + optional: true source-map@0.8.0-beta.0: dependencies: @@ -12869,8 +12557,6 @@ snapshots: dependencies: inline-style-parser: 0.2.4 - stylis@4.3.4: {} - stylus@0.62.0: dependencies: '@adobe/css-tools': 4.3.3 @@ -13039,10 +12725,6 @@ snapshots: dependencies: typescript: 5.6.3 - ts-invariant@0.10.3: - dependencies: - tslib: 2.8.1 - ts-node@10.9.2(@types/node@22.9.0)(typescript@5.6.3): dependencies: '@cspotcode/source-map-support': 0.8.1 @@ -13478,7 +13160,8 @@ snapshots: dependencies: iconv-lite: 0.6.3 - whatwg-mimetype@3.0.0: {} + whatwg-mimetype@3.0.0: + optional: true whatwg-mimetype@4.0.0: {} diff --git a/src/features/post/actions/ActionButton.tsx b/src/features/post/actions/ActionButton.tsx index 1040774fb5..0d604742ac 100644 --- a/src/features/post/actions/ActionButton.tsx +++ b/src/features/post/actions/ActionButton.tsx @@ -1,9 +1,9 @@ import { ButtonHTMLAttributes } from "react"; +import { cx } from "#/helpers/css"; + import styles from "./ActionButton.module.css"; -export function ActionButton( - props: Omit, "className">, -) { - return {children} - + ); } diff --git a/src/routes/TabBar.module.css b/src/routes/TabBar.module.css new file mode 100644 index 0000000000..2935656dd1 --- /dev/null +++ b/src/routes/TabBar.module.css @@ -0,0 +1,26 @@ +.tabBar { + @media (orientation: landscape) and (max-height: 450px) { + height: 36px; + + ion-badge { + inset-inline-start: calc(70% + 6px); + + &:global(.md) { + inset-inline-start: calc(75% + 6px); + } + } + + ion-tab-button { + flex-direction: row; + + > ion-label { + margin-bottom: 0; + } + + > ion-icon { + font-size: 22px !important; + margin-right: 5px; + } + } + } +} diff --git a/src/routes/TabBar.tsx b/src/routes/TabBar.tsx index e1a38f6795..7e7b0ff096 100644 --- a/src/routes/TabBar.tsx +++ b/src/routes/TabBar.tsx @@ -1,46 +1,24 @@ import { IonTabBar } from "@ionic/react"; -import { styled } from "@linaria/react"; import { ComponentProps, useRef } from "react"; +import styles from "./TabBar.module.css"; import InboxTabButton from "./tabs/buttons/InboxTabButton"; import PostsTabButton from "./tabs/buttons/PostsTabButton"; import ProfileTabButton from "./tabs/buttons/ProfileTabButton"; import SearchTabButton from "./tabs/buttons/SearchTabButton"; import SettingsTabButton from "./tabs/buttons/SettingsTabButton"; -const StyledIonTabBar = styled(IonTabBar)` - @media (orientation: landscape) and (max-height: 450px) { - height: 36px; - - ion-badge { - inset-inline-start: calc(70% + 6px); - - &.md { - inset-inline-start: calc(75% + 6px); - } - } - - ion-tab-button { - flex-direction: row; - - > ion-label { - margin-bottom: 0; - } - - > ion-icon { - font-size: 22px !important; - margin-right: 5px; - } - } - } -`; - /** * Ionic checks `isTabBar` for custom IonTabBar components. */ TabBar.isTabBar = true; -export default function TabBar(props: ComponentProps) { +export default function TabBar( + props: Omit< + ComponentProps, + "className" | "onClick" | "onTouchEnd" + >, +) { const longPressedRef = useRef(false); const resetLongPress = () => { @@ -52,8 +30,9 @@ export default function TabBar(props: ComponentProps) { }; return ( - { // stop keyboard closing when search input has text on search tab press up @@ -65,6 +44,6 @@ export default function TabBar(props: ComponentProps) { - + ); } diff --git a/src/routes/pages/inbox/ConversationPage.module.css b/src/routes/pages/inbox/ConversationPage.module.css index 1b957c2acf..f8dd067ab4 100644 --- a/src/routes/pages/inbox/ConversationPage.module.css +++ b/src/routes/pages/inbox/ConversationPage.module.css @@ -16,3 +16,12 @@ overflow: hidden; padding: 0 16px !important; } + +.footer { + background: var(--ion-background-color); +} + +.title { + padding-inline-start: 120px !important; + padding-inline-end: 120px; +} diff --git a/src/routes/pages/inbox/ConversationPage.tsx b/src/routes/pages/inbox/ConversationPage.tsx index 7eb3d60c63..01d5019983 100644 --- a/src/routes/pages/inbox/ConversationPage.tsx +++ b/src/routes/pages/inbox/ConversationPage.tsx @@ -7,7 +7,6 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { css } from "@linaria/core"; import { PrivateMessageView } from "lemmy-js-client"; import { useCallback, @@ -208,12 +207,7 @@ export default function ConversationPage() { - + {content} {them && ( - + findCurrentPage() ?.closest(".ion-page") - ?.querySelector(`.${SEARCH_EL_CLASSNAME}`) + ?.querySelector(`.${styles.searchbar}`) ?.setFocus(); export default function SearchPage() { @@ -59,13 +58,7 @@ export default function SearchPage() { autocapitalize="on" showCancelButton={search ? "always" : "focus"} showClearButton={search ? "always" : "never"} - className={cx( - SEARCH_EL_CLASSNAME, - css` - padding-top: 0 !important; - padding-bottom: 0 !important; - `, - )} + className={styles.searchbar} value={search} onIonInput={(e) => setSearch(e.detail.value ?? "")} enterkeyhint="search" diff --git a/src/routes/pages/settings/InstallAppPage.module.css b/src/routes/pages/settings/InstallAppPage.module.css new file mode 100644 index 0000000000..fe5ec067d6 --- /dev/null +++ b/src/routes/pages/settings/InstallAppPage.module.css @@ -0,0 +1,46 @@ +.container { + composes: ion-padding from global; + + line-height: 1.5; +} + +.badgeContainer { + display: grid; + grid-template-rows: 50px; + grid-template-columns: 1fr 1fr; + gap: 20px 0; + height: auto; + + a { + display: flex; + } + + @media (max-width: 360px) { + grid-template-columns: 1fr; + gap: 20px 0; + } + + @media (min-width: 800px) { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.badgeItem { + display: flex; + justify-content: center; + align-items: center; +} + +.badgeImg { + height: 45px; +} + +.h3 { + display: flex; + align-items: center; + gap: 8px; +} + +.installLink { + text-decoration: underline; +} diff --git a/src/routes/pages/settings/InstallAppPage.tsx b/src/routes/pages/settings/InstallAppPage.tsx index 209c3d027f..ef9ebea9aa 100644 --- a/src/routes/pages/settings/InstallAppPage.tsx +++ b/src/routes/pages/settings/InstallAppPage.tsx @@ -7,8 +7,6 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { css } from "@linaria/core"; -import { styled } from "@linaria/react"; import { addOutline, checkmarkCircleOutline, @@ -29,49 +27,9 @@ import { ua, } from "#/helpers/device"; +import styles from "./InstallAppPage.module.css"; import AppDetails from "./about/AppDetails"; -const Container = styled.div` - line-height: 1.5; -`; - -const BadgeContainer = styled.div` - display: grid; - grid-template-rows: 50px; - grid-template-columns: 1fr 1fr; - gap: 20px 0; - height: auto; - - a { - display: flex; - } - - @media (max-width: 360px) { - grid-template-columns: 1fr; - gap: 20px 0; - } - - @media (min-width: 800px) { - grid-template-columns: 1fr 1fr 1fr 1fr; - } -`; - -const BadgeItem = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -const BadgeImg = styled.img` - height: 45px; -`; - -const H3 = styled.h3` - display: flex; - align-items: center; - gap: 8px; -`; - const ANDROID_APP_BADGES = [ { src: "/badges/play.svg", @@ -109,17 +67,17 @@ export default function InstallAppPage() { const nativeBadges = ( <> {relevantBadges.map(({ src, href }) => ( - +
- + - +
))} ); const howToGetAppTitle = ( -

+

{showInstallwebAppDirections && ( )}{" "} How to get the App -

+ ); - const badges = {nativeBadges}; + const badges =
{nativeBadges}
; const badgesWithWeb = ( - +
{nativeBadges} - - + { @@ -151,8 +110,8 @@ export default function InstallAppPage() { } }} /> - - +
+ ); function renderGuidance() { @@ -251,11 +210,7 @@ export default function InstallAppPage() {
  1. Visit{" "} - + https://vger.app/settings/install {" "} from your phone or tablet. @@ -283,11 +238,11 @@ export default function InstallAppPage() { - +
    {renderGuidance()} - +
    ); diff --git a/src/routes/pages/settings/SettingsPage.module.css b/src/routes/pages/settings/SettingsPage.module.css new file mode 100644 index 0000000000..b0169311cc --- /dev/null +++ b/src/routes/pages/settings/SettingsPage.module.css @@ -0,0 +1,25 @@ +.iconBg { + width: 30px; + height: 30px; + + display: flex; + align-items: center; + justify-content: center; + + ion-icon { + width: 20px; + height: 20px; + + transform: scale(var(--sv-scale)); + } + + border-radius: 50%; + background-color: var(--sv-color); + color: white; +} + +.appIcon { + width: 30px; + height: 30px; + border-radius: 6px; +} diff --git a/src/routes/pages/settings/SettingsPage.tsx b/src/routes/pages/settings/SettingsPage.tsx index 50059af28d..f28eb1a682 100644 --- a/src/routes/pages/settings/SettingsPage.tsx +++ b/src/routes/pages/settings/SettingsPage.tsx @@ -9,7 +9,6 @@ import { IonToolbar, useIonModal, } from "@ionic/react"; -import { styled } from "@linaria/react"; import { useDocumentVisibility } from "@mantine/hooks"; import { apps, @@ -22,7 +21,7 @@ import { pricetag, reloadCircle, } from "ionicons/icons"; -import { useContext, useEffect, useRef } from "react"; +import React, { useContext, useEffect, useRef } from "react"; import { useSetActivePage } from "#/features/auth/AppContext"; import { userHandleSelector } from "#/features/auth/authSelectors"; @@ -39,36 +38,30 @@ import DatabaseErrorItem from "#/features/settings/root/DatabaseErrorItem"; import AppContent from "#/features/shared/AppContent"; import AppHeader from "#/features/shared/AppHeader"; import TipDialog from "#/features/tips/TipDialog"; +import { sv } from "#/helpers/css"; import { isAppleDeviceInstalledToHomescreen, isNative } from "#/helpers/device"; import { useAppDispatch, useAppSelector } from "#/store"; +import styles from "./SettingsPage.module.css"; import { UpdateContext } from "./update/UpdateContext"; -export const IconBg = styled.div<{ color: string; size?: string }>` - width: 30px; - height: 30px; - - display: flex; - align-items: center; - justify-content: center; - - ion-icon { - width: 20px; - height: 20px; - - transform: scale(${({ size }) => size || 1}); - } - - border-radius: 50%; - background-color: ${({ color }) => color}; - color: white; -`; +interface IconBgProps extends React.PropsWithChildren { + color: string; + size?: string; + slot?: string; +} -const AppIcon = styled.img` - width: 30px; - height: 30px; - border-radius: 6px; -`; +export function IconBg({ color, size, children, slot }: IconBgProps) { + return ( +
    + {children} +
    + ); +} export default function SettingsPage() { const databaseError = useAppSelector((state) => state.settings.databaseError); @@ -173,7 +166,11 @@ export default function SettingsPage() { {isNative() && ( - + App Icon )} diff --git a/src/routes/pages/settings/UpdateAppPage.module.css b/src/routes/pages/settings/UpdateAppPage.module.css new file mode 100644 index 0000000000..9eba84eec5 --- /dev/null +++ b/src/routes/pages/settings/UpdateAppPage.module.css @@ -0,0 +1,16 @@ +.upToDateText { + margin: auto; + text-align: center; + + padding: 5rem 1rem; + + color: var(--ion-color-medium); +} + +.container { + height: 100%; + width: 100%; + + display: flex; + flex-direction: column; +} diff --git a/src/routes/pages/settings/UpdateAppPage.tsx b/src/routes/pages/settings/UpdateAppPage.tsx index 06354df808..1ea9c92d68 100644 --- a/src/routes/pages/settings/UpdateAppPage.tsx +++ b/src/routes/pages/settings/UpdateAppPage.tsx @@ -14,7 +14,6 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { styled } from "@linaria/react"; import { useContext, useEffect, useRef, useState } from "react"; import { useSetActivePage } from "#/features/auth/AppContext"; @@ -24,26 +23,10 @@ import sharedStyles from "#/features/shared/shared.module.css"; import { ua } from "#/helpers/device"; import { unloadServiceWorkerAndRefresh } from "#/helpers/serviceWorker"; +import styles from "./UpdateAppPage.module.css"; import AppVersionInfo from "./about/AppVersionInfo"; import { UpdateContext } from "./update/UpdateContext"; -const UpToDateText = styled.div` - margin: auto; - text-align: center; - - padding: 5rem 1rem; - - color: var(--ion-color-medium); -`; - -const Container = styled.div` - height: 100%; - width: 100%; - - display: flex; - flex-direction: column; -`; - export default function UpdateAppPage() { const pageRef = useRef(null); @@ -104,7 +87,7 @@ export default function UpdateAppPage() { > - +
    @@ -136,20 +119,20 @@ export default function UpdateAppPage() { )} {status === "not-enabled" && ( - Not installed. +
    Not installed.
    )} {status === "error" && ( - +
    Error checking for updates.

    Are you connected to the internet? - +
    )} {status === "current" && ( - Voyager is up to date +
    Voyager is up to date
    )} - +
    ); diff --git a/src/routes/pages/settings/about/AppDetails.module.css b/src/routes/pages/settings/about/AppDetails.module.css new file mode 100644 index 0000000000..ec9a4986b2 --- /dev/null +++ b/src/routes/pages/settings/about/AppDetails.module.css @@ -0,0 +1,20 @@ +.container { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + font-size: 1.2rem; + margin: 32px 32px 48px; + + img { + width: 70px; + height: 70px; + border-radius: 16px; + } + + aside { + font-size: 0.9rem; + margin-top: 4px; + color: var(--ion-color-medium); + } +} diff --git a/src/routes/pages/settings/about/AppDetails.tsx b/src/routes/pages/settings/about/AppDetails.tsx index fb62e07ae1..b365414a3e 100644 --- a/src/routes/pages/settings/about/AppDetails.tsx +++ b/src/routes/pages/settings/about/AppDetails.tsx @@ -1,36 +1,14 @@ -import { styled } from "@linaria/react"; - +import styles from "./AppDetails.module.css"; import AppVersionInfo from "./AppVersionInfo"; -const AppContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 16px; - font-size: 1.2rem; - margin: 32px 32px 48px; - - img { - width: 70px; - height: 70px; - border-radius: 16px; - } - - aside { - font-size: 0.9rem; - margin-top: 4px; - color: var(--ion-color-medium); - } -`; - export default function AppDetails() { return ( - +
    Voyager
    - +
    ); } diff --git a/src/routes/pages/shared/CommunityPage.module.css b/src/routes/pages/shared/CommunityPage.module.css new file mode 100644 index 0000000000..2f47d51509 --- /dev/null +++ b/src/routes/pages/shared/CommunityPage.module.css @@ -0,0 +1,77 @@ +.feedContent { + :global(.ios) & { + --background: var( + --ion-toolbar-background, + var(--ion-background-color-step-50, #f7f7f7) + ); + } +} + +/* This isn't great... but it works +and I can't find a better solution 🤷‍♂️ */ +.fixedBg { + :global(.ios) & { + position: absolute; + inset: 0; + background: var( + --ion-toolbar-background, + var(--ion-background-color-step-50, #f7f7f7) + ); + z-index: -2; + } +} + +.toolbar { + :global(.ios) & { + /* Weird ionic glitch where adding + absolutely positioned searchbar to header misaligns buttons */ + ion-buttons { + margin: auto; + } + } +} + +.toolbarHideBorder { + --border-color: transparent; +} + +.headerSearchbar { + position: absolute; + inset: 0; + + padding-top: 5px !important; + + &:global(.md) { + padding-top: 0 !important; + padding-left: 0; + padding-right: 0; + + --box-shadow: none; + } +} + +.searchbarHide { + opacity: 0 !important; + z-index: -1 !important; + pointer-events: none !important; +} + +.headerContainer { + background: var( + --ion-toolbar-background, + var(--ion-background-color-step-50, #f7f7f7) + ); +} + +.communitySearchbar { + padding-top: 0; + + &:global(.md) { + padding-left: 0; + padding-right: 0; + + --box-shadow: none; + } + + min-height: 0; +} diff --git a/src/routes/pages/shared/CommunityPage.tsx b/src/routes/pages/shared/CommunityPage.tsx index f9b8bd9039..33809dfc81 100644 --- a/src/routes/pages/shared/CommunityPage.tsx +++ b/src/routes/pages/shared/CommunityPage.tsx @@ -5,8 +5,6 @@ import { IonSearchbar, IonToolbar, } from "@ionic/react"; -import { css } from "@linaria/core"; -import { styled } from "@linaria/react"; import { noop } from "es-toolkit"; import { createContext, useEffect, useRef, useState } from "react"; import { Redirect, useParams } from "react-router"; @@ -37,6 +35,7 @@ import AppHeader from "#/features/shared/AppHeader"; import { AppTitleHandle } from "#/features/shared/AppTitle"; import { CenteredSpinner } from "#/features/shared/CenteredSpinner"; import DocumentTitle from "#/features/shared/DocumentTitle"; +import { cx } from "#/helpers/css"; import { getRemoteHandleFromHandle } from "#/helpers/lemmy"; import { useBuildGeneralBrowseLink } from "#/helpers/routes"; import useClient from "#/helpers/useClient"; @@ -44,86 +43,8 @@ import { useOptimizedIonRouter } from "#/helpers/useOptimizedIonRouter"; import { LIMIT } from "#/services/lemmy"; import { useAppSelector } from "#/store"; +import styles from "./CommunityPage.module.css"; import FeedContent from "./FeedContent"; - -const StyledFeedContent = styled(FeedContent)` - .ios & { - --background: var( - --ion-toolbar-background, - var(--ion-background-color-step-50, #f7f7f7) - ); - } -`; - -// This isn't great... but it works -// and I can't find a better solution 🤷‍♂️ -const FixedBg = styled.div` - .ios & { - position: absolute; - inset: 0; - background: var( - --ion-toolbar-background, - var(--ion-background-color-step-50, #f7f7f7) - ); - z-index: -2; - } -`; - -const StyledIonToolbar = styled(IonToolbar)` - .ios & { - // Weird ionic glitch where adding - // absolutely positioned searchbar to header misaligns buttons - ion-buttons { - margin: auto; - } - } -`; - -const ionToolbarHideBorderCss = css` - --border-color: transparent; -`; - -const HeaderIonSearchbar = styled(IonSearchbar)` - position: absolute; - inset: 0; - - padding-top: 5px !important; - - &.md { - padding-top: 0 !important; - padding-left: 0; - padding-right: 0; - - --box-shadow: none; - } -`; - -const ionSearchbarHideCss = css` - opacity: 0 !important; - z-index: -1 !important; - pointer-events: none !important; -`; - -const HeaderContainer = styled.div` - background: var( - --ion-toolbar-background, - var(--ion-background-color-step-50, #f7f7f7) - ); -`; - -const CommunitySearchbar = styled(IonSearchbar)` - padding-top: 0; - - &.md { - padding-left: 0; - padding-right: 0; - - --box-shadow: none; - } - - min-height: 0; -`; - interface CommunityPageParams { community: string; actor: string; @@ -205,15 +126,16 @@ function CommunityPageContent({ community, actor }: CommunityPageParams) { }, [communityView]); const header = !searchOpen ? ( - - + { setSearchOpen(true); searchbarRef.current?.setFocus(); }} /> - + ) : undefined; if (community.includes("@") && community.split("@")[1] === actor) @@ -260,12 +182,13 @@ function CommunityPageContent({ community, actor }: CommunityPageParams) { - {!searchOpen && ( <> @@ -292,11 +215,14 @@ function CommunityPageContent({ community, actor }: CommunityPageParams) { )} - setSearchOpen(false)} - className={!searchOpen ? ionSearchbarHideCss : undefined} + className={cx( + styles.headerSearchbar, + !searchOpen ? styles.searchbarHide : undefined, + )} showCancelButton="always" showClearButton="never" autocapitalize="on" @@ -314,16 +240,16 @@ function CommunityPageContent({ community, actor }: CommunityPageParams) { ); }} /> - + - + {renderFeed()} {!showHiddenInCommunities && ( )} - - +
    + diff --git a/src/routes/pages/shared/emptyStateIconStyles.tsx b/src/routes/pages/shared/emptyStateIconStyles.tsx deleted file mode 100644 index eb879dd053..0000000000 --- a/src/routes/pages/shared/emptyStateIconStyles.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { css } from "@linaria/core"; - -export default css` - opacity: 0.1; - width: 300px; - height: 300px; - position: relative; - left: 50%; - transform: translateX(-50%); - - flex-shrink: 0; -`; diff --git a/src/routes/tabs/buttons/ProfileTabButton.module.css b/src/routes/tabs/buttons/ProfileTabButton.module.css new file mode 100644 index 0000000000..d7733f649c --- /dev/null +++ b/src/routes/tabs/buttons/ProfileTabButton.module.css @@ -0,0 +1,3 @@ +.profileLabel { + max-width: 20vw; +} diff --git a/src/routes/tabs/buttons/ProfileTabButton.tsx b/src/routes/tabs/buttons/ProfileTabButton.tsx index 8fb94b213a..53d5fd7cd8 100644 --- a/src/routes/tabs/buttons/ProfileTabButton.tsx +++ b/src/routes/tabs/buttons/ProfileTabButton.tsx @@ -1,5 +1,4 @@ import { IonIcon, IonLabel } from "@ionic/react"; -import { styled } from "@linaria/react"; import { personCircleOutline } from "ionicons/icons"; import { useContext } from "react"; @@ -12,12 +11,9 @@ import { getProfileTabLabel } from "#/features/settings/general/other/ProfileTab import { useOptimizedIonRouter } from "#/helpers/useOptimizedIonRouter"; import { useAppSelector } from "#/store"; +import styles from "./ProfileTabButton.module.css"; import SharedTabButton, { TabButtonProps } from "./shared"; -const ProfileLabel = styled(IonLabel)` - max-width: 20vw; -`; - function ProfileTabButton(props: TabButtonProps) { const router = useOptimizedIonRouter(); const { presentAccountSwitcher, presentLoginIfNeeded } = @@ -69,7 +65,7 @@ function ProfileTabButton(props: TabButtonProps) { onLongPressOverride={onLongPressOverride} >