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', },