diff --git a/.changeset/soft-vans-suffer.md b/.changeset/soft-vans-suffer.md
new file mode 100644
index 000000000..0fb95c79e
--- /dev/null
+++ b/.changeset/soft-vans-suffer.md
@@ -0,0 +1,6 @@
+---
+"@status-im/status-network": patch
+"hub": patch
+---
+
+feedback actions
diff --git a/apps/hub/src/app/_components/top-bar.tsx b/apps/hub/src/app/_components/top-bar.tsx
index 48c3bc580..e349e25fa 100644
--- a/apps/hub/src/app/_components/top-bar.tsx
+++ b/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) {
{/* Share Feedback */}
-
+
{/* Connect Wallet Button */}
diff --git a/packages/status-network/src/components/feedback-popover/dropdown-icon.tsx b/packages/status-network/src/components/feedback-popover/dropdown-icon.tsx
new file mode 100644
index 000000000..c4154a52a
--- /dev/null
+++ b/packages/status-network/src/components/feedback-popover/dropdown-icon.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+const DropdownIcon = (props: SVGProps
) => {
+ return (
+
+ )
+}
+
+export { DropdownIcon }
diff --git a/packages/status-network/src/components/feedback-popover/index.tsx b/packages/status-network/src/components/feedback-popover/index.tsx
new file mode 100644
index 000000000..1afa5d255
--- /dev/null
+++ b/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 (
+
+
+
+
+ {FEEDBACK_LINKS.map(({ label, href }) => (
+ {
+ window.open(href, '_blank', 'noopener,noreferrer')
+ }}
+ />
+ ))}
+
+
+ )
+}
+
+export { FeedbackPopover }
diff --git a/packages/status-network/src/components/index.ts b/packages/status-network/src/components/index.ts
index e1bccf778..942c792e6 100644
--- a/packages/status-network/src/components/index.ts
+++ b/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'
diff --git a/packages/status-network/tailwind.config.ts b/packages/status-network/tailwind.config.ts
index 73a3e96e0..4eb3aaf28 100644
--- a/packages/status-network/tailwind.config.ts
+++ b/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',
},