From 3c94312a9ff2b61c5778dd36728ec7ffdfddab9d Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Sat, 15 Apr 2023 11:01:40 -0500 Subject: [PATCH] styling pass --- package.json | 1 + pnpm-lock.yaml | 42 +++-------- src/components/Amount.tsx | 3 +- src/components/AmountEditable.tsx | 11 ++- src/components/AmountInput.tsx | 3 +- src/components/App.tsx | 16 ++-- src/components/BalanceBox.tsx | 42 ++++++++--- src/components/NavBar.tsx | 13 +--- src/components/layout/Button.tsx | 4 +- src/components/layout/Radio.tsx | 30 ++++++++ src/components/layout/index.tsx | 36 ++++++--- src/root.css | 3 +- src/routes/Receive.tsx | 33 +++++--- src/routes/Send.tsx | 121 +++++++++++++----------------- src/routes/Settings.tsx | 18 +++-- src/routes/[...404].tsx | 24 +++--- tailwind.config.cjs | 9 ++- 17 files changed, 230 insertions(+), 179 deletions(-) create mode 100644 src/components/layout/Radio.tsx diff --git a/package.json b/package.json index 0c14493..01eebd8 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@kobalte/core": "^0.8.2", + "@kobalte/tailwindcss": "^0.5.0", "@motionone/solid": "^10.16.0", "@mutinywallet/node-manager": "^0.2.4", "@nostr-dev-kit/ndk": "^0.0.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5fb7872..cdfc734 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ dependencies: '@kobalte/core': specifier: ^0.8.2 version: 0.8.2(solid-js@1.7.3) + '@kobalte/tailwindcss': + specifier: ^0.5.0 + version: 0.5.0(tailwindcss@3.3.1) '@motionone/solid': specifier: ^10.16.0 version: 10.16.0(solid-js@1.7.3) @@ -1536,6 +1539,14 @@ packages: solid-js: 1.7.3 dev: false + /@kobalte/tailwindcss@0.5.0(tailwindcss@3.3.1): + resolution: {integrity: sha512-qP2C6mS4FcINHdUBFhNHe2QPvdSvbpDW30b0BgtPVu9F1H1nud2j3DJBezXMDE0N72mrxtvmLRyel9eIUCPVVQ==} + peerDependencies: + tailwindcss: ^3.2.7 + dependencies: + tailwindcss: 3.3.1(postcss@8.4.21) + dev: false + /@kobalte/utils@0.6.1(solid-js@1.7.3): resolution: {integrity: sha512-YvBqe9t9j0iYFUHfKXSMLQKM3s5+nL72RvT9b75W+IOxUpSpN4rdaI8C2j97k3LsEt7qY4ktJdt8lPM1rr8JXw==} peerDependencies: @@ -2255,7 +2266,6 @@ packages: /any-promise@1.3.0: resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} - dev: true /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} @@ -2266,7 +2276,6 @@ packages: /arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} - dev: true /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} @@ -2470,7 +2479,6 @@ packages: /camelcase-css@2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - dev: true /caniuse-lite@1.0.30001478: resolution: {integrity: sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==} @@ -2546,7 +2554,6 @@ packages: /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} - dev: true /common-tags@1.8.2: resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==} @@ -2615,7 +2622,6 @@ packages: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true - dev: true /csstype@2.6.21: resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} @@ -2690,7 +2696,6 @@ packages: /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - dev: true /dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} @@ -2700,7 +2705,6 @@ packages: /dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - dev: true /doctrine@2.1.0: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} @@ -3551,7 +3555,6 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 - dev: true /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} @@ -3891,7 +3894,6 @@ packages: /jiti@1.18.2: resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==} hasBin: true - dev: true /joi@17.9.1: resolution: {integrity: sha512-FariIi9j6QODKATGBrEX7HZcja8Bsh3rfdGYy/Sb65sGlZWK/QWesU1ghk7aJWDj95knjXlQfSmzFSPPkLVsfw==} @@ -4000,11 +4002,9 @@ packages: /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} - dev: true /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - dev: true /locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} @@ -4115,7 +4115,6 @@ packages: any-promise: 1.3.0 object-assign: 4.1.1 thenify-all: 1.6.0 - dev: true /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} @@ -4180,12 +4179,10 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-hash@3.0.0: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} - dev: true /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} @@ -4299,12 +4296,10 @@ packages: /pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} - dev: true /pirates@4.0.5: resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==} engines: {node: '>= 6'} - dev: true /polka@1.0.0-next.22: resolution: {integrity: sha512-a7tsZy5gFbJr0aUltZS97xCkbPglXuD67AMvTyZX7BTDBH384FWf0ZQF6rPvdutSxnO1vUlXM2zSLf5tCKk5RA==} @@ -4323,7 +4318,6 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.2 - dev: true /postcss-js@4.0.1(postcss@8.4.21): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} @@ -4333,7 +4327,6 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.21 - dev: true /postcss-load-config@3.1.4(postcss@8.4.21): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} @@ -4350,7 +4343,6 @@ packages: lilconfig: 2.1.0 postcss: 8.4.21 yaml: 1.10.2 - dev: true /postcss-nested@6.0.0(postcss@8.4.21): resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} @@ -4360,7 +4352,6 @@ packages: dependencies: postcss: 8.4.21 postcss-selector-parser: 6.0.11 - dev: true /postcss-selector-parser@6.0.11: resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==} @@ -4368,11 +4359,9 @@ packages: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - dev: true /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true /postcss@8.4.21: resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} @@ -4429,7 +4418,6 @@ packages: /quick-lru@5.1.1: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} - dev: true /randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -4441,7 +4429,6 @@ packages: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: pify: 2.3.0 - dev: true /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} @@ -4918,7 +4905,6 @@ packages: mz: 2.7.0 pirates: 4.0.5 ts-interface-checker: 0.1.13 - dev: true /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} @@ -4969,7 +4955,6 @@ packages: sucrase: 3.32.0 transitivePeerDependencies: - ts-node - dev: true /temp-dir@2.0.0: resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==} @@ -5004,13 +4989,11 @@ packages: engines: {node: '>=0.8'} dependencies: thenify: 3.3.1 - dev: true /thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} dependencies: any-promise: 1.3.0 - dev: true /to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} @@ -5040,7 +5023,6 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - dev: true /tsconfig-paths@3.14.2: resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==} @@ -5199,7 +5181,6 @@ packages: /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - dev: true /utils-merge@1.0.1: resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} @@ -5620,7 +5601,6 @@ packages: /yaml@1.10.2: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} - dev: true /yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} diff --git a/src/components/Amount.tsx b/src/components/Amount.tsx index 35be955..1edd41a 100644 --- a/src/components/Amount.tsx +++ b/src/components/Amount.tsx @@ -13,7 +13,8 @@ export function Amount(props: { amountSats: bigint | number | undefined, showFia const [state, _] = useMegaStore() async function getPrice() { - return await state.node_manager?.get_bitcoin_price() + // return await state.node_manager?.get_bitcoin_price() + return 30000 } const [price] = createResource(getPrice) diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index 6a4fd9c..9fec7d6 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -18,7 +18,7 @@ function SingleDigitButton(props: { character: string, onClick: (c: string) => v ); } -export function AmountEditable(props: { amountSats: number | bigint, setAmountSats: (s: string) => void }) { +export function AmountEditable(props: { amountSats: string, setAmountSats: (s: string) => void, onSave?: () => void }) { const [isFullscreen, setIsFullscreen] = createSignal(false); function toggleFullscreen() { @@ -26,7 +26,7 @@ export function AmountEditable(props: { amountSats: number | bigint, setAmountSa } // TODO: validate this doesn't need to be reactive and can be "initialAmountSats" - const [displayAmount, setDisplayAmount] = createSignal(props.amountSats.toString() || "0"); + const [displayAmount, setDisplayAmount] = createSignal(props.amountSats || "0"); let inputRef!: HTMLInputElement; @@ -113,7 +113,8 @@ export function AmountEditable(props: { amountSats: number | bigint, setAmountSa const [state, _] = useMegaStore() async function getPrice() { - return await state.node_manager?.get_bitcoin_price() + // return await state.node_manager?.get_bitcoin_price() + return 30000 } const [price] = createResource(getPrice) @@ -130,6 +131,10 @@ export function AmountEditable(props: { amountSats: number | bigint, setAmountSa } else { props.setAmountSats(displayAmount()); toggleFullscreen(); + // This is so the parent can focus the next input if it wants to + if (props.onSave) { + props.onSave(); + } } } diff --git a/src/components/AmountInput.tsx b/src/components/AmountInput.tsx index b7e5ce6..df6b5cb 100644 --- a/src/components/AmountInput.tsx +++ b/src/components/AmountInput.tsx @@ -19,7 +19,8 @@ export function AmountInput(props: AmountInputProps) { const [state, _] = useMegaStore() async function getPrice() { - return await state.node_manager?.get_bitcoin_price() + // return await state.node_manager?.get_bitcoin_price() + return 30000 } const [activeCurrency, setActiveCurrency] = createSignal("sats") diff --git a/src/components/App.tsx b/src/components/App.tsx index b8da43e..b628793 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,26 +1,26 @@ import logo from '~/assets/icons/mutiny-logo.svg'; -import { NodeManagerGuard, SafeArea } from "~/components/layout"; +import { DefaultMain, NodeManagerGuard, SafeArea } from "~/components/layout"; import BalanceBox from "~/components/BalanceBox"; import NavBar from "~/components/NavBar"; // TODO: use this reload prompt for real import ReloadPrompt from "~/components/Reload"; import KitchenSink from './KitchenSink'; +import { Scan } from '~/assets/svg/Scan'; +import { A } from 'solid-start'; export default function App() { return ( -
-
- + +
+ logo +
- - {/* safety div */} -
-
+ diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx index 3c37c49..5f6f646 100644 --- a/src/components/BalanceBox.tsx +++ b/src/components/BalanceBox.tsx @@ -1,4 +1,4 @@ -import { createResource, Show, Suspense } from "solid-js"; +import { createResource, createSignal, Show, Suspense } from "solid-js"; import { Button, ButtonLink, FancyCard } from "~/components/layout"; import { useMegaStore } from "~/state/megaStore"; import { Amount } from "./Amount"; @@ -10,46 +10,68 @@ function prettyPrintAmount(n?: number | bigint): string { return n.toLocaleString() } +function SyncingIndicator() { + return ( +
Syncing
+ ) +} + export default function BalanceBox() { const [state, _] = useMegaStore(); - const fetchBalance = async () => { - console.log("Refetching balance"); + const fetchOnchainBalance = async () => { + console.log("Refetching onchain balance"); await state.node_manager?.sync(); const balance = await state.node_manager?.get_balance(); return balance }; - const [balance, { refetch: refetchBalance }] = createResource(fetchBalance); + // TODO: it's hacky to do these separately, but ln doesn't need the sync so I don't want to wait + const fetchLnBalance = async () => { + console.log("Refetching ln balance"); + const balance = await state.node_manager?.get_balance(); + return balance + }; + + const [onChainBalance, { refetch: refetchOnChainBalance }] = createResource(fetchOnchainBalance); + const [lnBalance, { refetch: refetchLnBalance }] = createResource(fetchLnBalance); + + function refetchBalance() { + refetchLnBalance(); + refetchOnChainBalance(); + } return ( <> }> - + + +
Send Receive
- + }> }> - +
+ +
- +
Unconfirmed Balance
- {prettyPrintAmount(balance()?.unconfirmed)} SATS + {prettyPrintAmount(onChainBalance()?.unconfirmed)} SATS
- ) diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index b41f382..2cb104c 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,5 +1,5 @@ import mutiny_m from '~/assets/icons/m.svg'; -import scan from '~/assets/icons/scan.svg'; +// import scan from '~/assets/icons/scan.svg'; import airplane from '~/assets/icons/airplane.svg'; import settings from '~/assets/icons/settings.svg'; @@ -8,21 +8,16 @@ import { A } from "solid-start"; type ActiveTab = 'home' | 'scan' | 'send' | 'settings' | 'none'; export default function NavBar(props: { activeTab: ActiveTab }) { - const activeStyle = 'h-full border-t-2 border-b-2 border-b-sidebar-gray flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-white/20 md:rounded-xl' - const inactiveStyle = "md:p-2 md:hover:bg-white/10 md:rounded-xl" + const activeStyle = 'h-full border-t-2 border-b-2 border-b-sidebar-gray flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-black md:rounded-lg' + const inactiveStyle = "md:p-2 md:hover:bg-white/5 md:rounded-lg md:active:bg-m-blue" return ( -