feedback actions

.changeset/soft-vans-suffer.md

@@ -0,0 +1,6 @@
+---
+"@status-im/status-network": patch
+"hub": patch
+---
+
+feedback actions

apps/hub/src/app/_components/top-bar.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { Button, IconButton } from '@status-im/components'
+import { IconButton } from '@status-im/components'
 import { SettingsIcon } from '@status-im/icons/20'
-import { Link } from '@status-im/status-network/components'
+import { FeedbackPopover, Link } from '@status-im/status-network/components'
 import Image from 'next/image'
 
 import { ConnectButton } from './connect-button'
@@ -82,9 +82,7 @@ export function TopBar({ onMenuToggle }: TopBarProps) {
         <div className="flex items-center gap-2">
           {/* Share Feedback */}
           <div className="hidden md:block">
-            <Button variant="outline" size="32">
-              Share feedback
-            </Button>
+            <FeedbackPopover />
           </div>
 
           {/* Connect Wallet Button */}

packages/status-network/src/components/feedback-popover/dropdown-icon.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+const DropdownIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      fill="none"
+      aria-hidden={true}
+      focusable={false}
+      {...props}
+    >
+      <g stroke="currentColor" clipPath="url(#a)">
+        <circle cx="6" cy="6" r="5" strokeWidth="1.2" />
+        <path strokeWidth="1.1" d="M3.5 5 6 7.5 8.5 5" />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h12v12H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export { DropdownIcon }

packages/status-network/src/components/feedback-popover/index.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+
+import { DropdownMenu } from '@status-im/components'
+
+import { DropdownIcon } from './dropdown-icon'
+
+const FEEDBACK_LINKS = [
+  {
+    label: 'Contact us',
+    href: 'https://statusnetwork.typeform.com/contact-us',
+  },
+  {
+    label: 'Submit bug',
+    href: 'https://github.com/status-im/status-web/issues/new?template=bug_report.md',
+  },
+]
+
+const FeedbackPopover = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <DropdownMenu.Root onOpenChange={setIsOpen} open={isOpen}>
+      <button
+        type="button"
+        className="flex cursor-pointer select-none items-center rounded-10 border border-neutral-70 hover:border-neutral-60"
+      >
+        <div className="flex items-center gap-1 px-2 py-[5px] text-15 font-500 text-white-100 transition">
+          Share feedback
+          <span className="text-neutral-50">
+            <DropdownIcon />
+          </span>
+        </div>
+      </button>
+
+      <DropdownMenu.Content
+        collisionPadding={12}
+        sideOffset={24}
+        className="w-[256px]"
+        style={{ zIndex: 100 }}
+      >
+        {FEEDBACK_LINKS.map(({ label, href }) => (
+          <DropdownMenu.Item
+            key={label}
+            label={label}
+            external
+            onSelect={() => {
+              window.open(href, '_blank', 'noopener,noreferrer')
+            }}
+          />
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+export { FeedbackPopover }

packages/status-network/src/components/index.ts

@@ -2,6 +2,7 @@ export { Button } from './button'
 export { ButtonLink } from './button-link'
 export { GameCard } from './cards'
 export { Divider } from './divider'
+export { FeedbackPopover } from './feedback-popover'
 export { Footer } from './footer'
 export { Link } from './link'
 export { ShortenAddress } from './shorten-address'

packages/status-network/tailwind.config.ts

@@ -90,15 +90,30 @@ export default {
       sky: 'rgba(25, 146, 215, 1)',
       sea: 'rgba(61, 150, 165, 1)',
       yellow: 'rgba(246, 176, 60, 1)',
+      'blue-50': 'rgba(42, 74, 245, 1)',
       neutral: {
+        '2.5': 'rgba(250, 251, 252, 1)',
+        '5': 'rgba(245, 246, 248, 1)',
         '10': 'rgba(240, 242, 245, 1)',
         '20': 'rgba(231, 234, 238, 1)',
         '30': 'rgba(220, 224, 229, 1)',
         '40': 'rgba(161, 171, 189, 1)',
         '50': 'rgba(100, 112, 132, 1)',
+        '60': 'rgba(48, 61, 85, 1)',
+        '70': 'rgba(32, 44, 66, 1)',
+        '80': 'rgba(27, 39, 61, 1)',
         '80/5': 'rgba(27, 39, 61, 0.05)',
         '80/10': 'rgba(27, 39, 61, 0.10)',
+        '80/20': 'rgba(27, 39, 61, 0.20)',
+        '80/30': 'rgba(27, 39, 61, 0.30)',
+        '80/40': 'rgba(27, 39, 61, 0.40)',
+        '80/50': 'rgba(27, 39, 61, 0.50)',
         '80/60': 'rgba(27, 39, 61, 0.60)',
+        '80/70': 'rgba(27, 39, 61, 0.70)',
+        '80/90': 'rgba(27, 39, 61, 0.90)',
+        '80/95': 'rgba(27, 39, 61, 0.95)',
+        '90': 'rgba(19, 29, 47, 1)',
+        '95': 'rgba(13, 22, 37, 1)',
         '100': 'rgba(9, 16, 28, 1)',
       },
       dark: {
@@ -128,6 +143,8 @@ export default {
       24: '24px',
       28: '28px',
       32: '32px',
+      40: '40px',
+      42: '42px',
       full: '9999px',
     },