external links (#818)

* update external links

* Add changeset for external links update

* add soon flag

* fix tailwind config

* fix class

* u

* u

---------

Co-authored-by: Felicio <felicio@users.noreply.github.com>

Author: jkbktl

.changeset/nasty-ears-act.md

@@ -0,0 +1,5 @@
+---
+"hub": patch
+---
+
+external links

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 (
-    <li key={props.id}>
+    <li key={id}>
       <Link
-        href={props.href}
-        className={`flex items-center justify-between gap-2 rounded-16 p-4 transition-colors ${
+        href={href}
+        className={cx(
+          'flex items-center justify-between gap-2 rounded-16 p-4 transition-colors',
           isActive
             ? 'bg-customisation-purple-50/5 text-purple'
             : 'text-neutral-90 hover:bg-neutral-10 hover:text-neutral-100'
-        }`}
+        )}
       >
-        <div className="flex items-center gap-2">
-          <props.icon className="size-5" />
-          <span className="text-15 font-medium leading-[1.45] tracking-[-0.9%]">
-            {props.label}
-          </span>
-          {!!props.tag && (
-            <div className="inline-flex items-center gap-1 rounded-full bg-purple px-1.5 py-0.5">
-              <span className="text-11 font-medium leading-[1.42] tracking-[-0.5%] text-white-100">
-                {props.tag}
-              </span>
-            </div>
-          )}
+        <div className="flex flex-1 items-center justify-between">
+          <div className={cx('flex items-center gap-2')}>
+            <Icon className="size-5" />
+            <span className="text-15 font-medium">{label}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            {!!tag && (
+              <div className="inline-flex items-center gap-1 rounded-full bg-purple px-1.5 py-0.5">
+                <span className="text-11 text-white-100">{tag}</span>
+              </div>
+            )}
+          </div>
         </div>
         {isExternal && <ExternalIcon />}
       </Link>

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 = {

apps/hub/tailwind.config.ts

@@ -87,6 +87,13 @@ export default {
             letterSpacing: '-0.024375rem',
           },
         ],
+        11: [
+          '0.6875rem',
+          {
+            lineHeight: '0.9625rem',
+            letterSpacing: '-0.0034375rem',
+          },
+        ],
       },
 
       colors: {