diff --git a/.changeset/nasty-ears-act.md b/.changeset/nasty-ears-act.md new file mode 100644 index 000000000..10849f246 --- /dev/null +++ b/.changeset/nasty-ears-act.md @@ -0,0 +1,5 @@ +--- +"hub": patch +--- + +external links diff --git a/apps/hub/src/app/_components/link-item.tsx b/apps/hub/src/app/_components/link-item.tsx index 621d006ae..7bbc49fb3 100644 --- a/apps/hub/src/app/_components/link-item.tsx +++ b/apps/hub/src/app/_components/link-item.tsx @@ -1,5 +1,6 @@ import { ExternalIcon } from '@status-im/icons/20' import { Link } from '@status-im/status-network/components' +import { cx } from 'cva' import { usePathname } from 'next/navigation' type LinkItemProps = { @@ -11,6 +12,7 @@ type LinkItemProps = { } const LinkItem = (props: LinkItemProps) => { + const { id, label, icon: Icon, href, tag } = props const pathname = usePathname() const isActiveRoute = (href: string) => { @@ -20,31 +22,32 @@ const LinkItem = (props: LinkItemProps) => { return pathname === href } - const isExternal = props.href.startsWith('http') - const isActive = isActiveRoute(props.href) + const isExternal = href.startsWith('http') + const isActive = isActiveRoute(href) return ( -
  • +
  • -
    - - - {props.label} - - {!!props.tag && ( -
    - - {props.tag} - -
    - )} +
    +
    + + {label} +
    +
    + {!!tag && ( +
    + {tag} +
    + )} +
    {isExternal && } diff --git a/apps/hub/src/app/_components/sidebar.tsx b/apps/hub/src/app/_components/sidebar.tsx index e5c3a26ab..2b2195eed 100644 --- a/apps/hub/src/app/_components/sidebar.tsx +++ b/apps/hub/src/app/_components/sidebar.tsx @@ -2,54 +2,38 @@ import { BridgeIcon, - DepositIcon, + // DepositIcon, DiscoverIcon, DocsIcon, ExplorerIcon, GovernanceIcon, HomeIcon, KarmaIcon, - LaunchIcon, - MintIcon, StakeIcon, SubmitAppIcon, - SwapIcon, } from './icons' import { LinkItem } from './link-item' const NAV_LINKS = [ { id: 'dashboard', label: 'Home', icon: HomeIcon, href: '/dashboard' }, - { - id: 'deposit', - label: 'Deposit', - icon: DepositIcon, - href: 'https://example.com', - tag: 'Mainnet', - }, + // { + // id: 'deposit', + // label: 'Deposit', + // icon: DepositIcon, + // href: '/deposit', + // tag: 'Mainnet', + // }, { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: '/discover' }, { id: 'stake', label: 'Stake', icon: StakeIcon, href: '/stake' }, { id: 'karma', label: 'Karma', icon: KarmaIcon, href: '/karma' }, ] const TOKENS_LINKS = [ - { id: 'swap', label: 'Swap', icon: SwapIcon, href: 'https://example.com' }, - { - id: 'launch', - label: 'Launch', - icon: LaunchIcon, - href: 'https://example.com', - }, { id: 'bridge', label: 'Bridge', icon: BridgeIcon, - href: 'https://example.com', - }, - { - id: 'mint-usdz', - label: 'Mint USDZ', - icon: MintIcon, - href: 'https://example.com', + href: 'https://bridge.status.network/', }, ] @@ -58,7 +42,7 @@ const OTHER_LINKS = [ id: 'explorer', label: 'Explorer', icon: ExplorerIcon, - href: 'https://example.com', + href: 'https://sepoliascan.status.network/', }, { id: 'governance', @@ -70,9 +54,14 @@ const OTHER_LINKS = [ id: 'submit-app', label: 'Submit an app', icon: SubmitAppIcon, - href: '/submit-app', + href: 'https://statusnetwork.typeform.com/builder', + }, + { + id: 'docs', + label: 'Docs', + icon: DocsIcon, + href: 'https://docs.status.network/', }, - { id: 'docs', label: 'Docs', icon: DocsIcon, href: '/docs' }, ] type Props = { diff --git a/apps/hub/tailwind.config.ts b/apps/hub/tailwind.config.ts index 737e118d6..50c2f190f 100644 --- a/apps/hub/tailwind.config.ts +++ b/apps/hub/tailwind.config.ts @@ -87,6 +87,13 @@ export default { letterSpacing: '-0.024375rem', }, ], + 11: [ + '0.6875rem', + { + lineHeight: '0.9625rem', + letterSpacing: '-0.0034375rem', + }, + ], }, colors: {