Skip to content

Commit 062c190

Browse files
jkbktlfelicio
jkbktl
and
felicio
authored
feedback actions (#809)
* update links * update dropdown icon --------- Co-authored-by: Felicio <[email protected]>
1 parent dc07597 commit 062c190

File tree

6 files changed

+110
-5
lines changed

6 files changed

+110
-5
lines changed

‎.changeset/soft-vans-suffer.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@status-im/status-network": patch
3+
"hub": patch
4+
---
5+
6+
feedback actions

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client'
22

3-
import { Button, IconButton } from '@status-im/components'
3+
import { IconButton } from '@status-im/components'
44
import { SettingsIcon } from '@status-im/icons/20'
5-
import { Link } from '@status-im/status-network/components'
5+
import { FeedbackPopover, Link } from '@status-im/status-network/components'
66
import Image from 'next/image'
77

88
import { ConnectButton } from './connect-button'
@@ -82,9 +82,7 @@ export function TopBar({ onMenuToggle }: TopBarProps) {
8282
<div className="flex items-center gap-2">
8383
{/* Share Feedback */}
8484
<div className="hidden md:block">
85-
<Button variant="outline" size="32">
86-
Share feedback
87-
</Button>
85+
<FeedbackPopover />
8886
</div>
8987

9088
{/* Connect Wallet Button */}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { SVGProps } from 'react'
2+
3+
const DropdownIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="12"
8+
height="12"
9+
fill="none"
10+
aria-hidden={true}
11+
focusable={false}
12+
{...props}
13+
>
14+
<g stroke="currentColor" clipPath="url(#a)">
15+
<circle cx="6" cy="6" r="5" strokeWidth="1.2" />
16+
<path strokeWidth="1.1" d="M3.5 5 6 7.5 8.5 5" />
17+
</g>
18+
<defs>
19+
<clipPath id="a">
20+
<path fill="#fff" d="M0 0h12v12H0z" />
21+
</clipPath>
22+
</defs>
23+
</svg>
24+
)
25+
}
26+
27+
export { DropdownIcon }

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useState } from 'react'
2+
3+
import { DropdownMenu } from '@status-im/components'
4+
5+
import { DropdownIcon } from './dropdown-icon'
6+
7+
const FEEDBACK_LINKS = [
8+
{
9+
label: 'Contact us',
10+
href: 'https://statusnetwork.typeform.com/contact-us',
11+
},
12+
{
13+
label: 'Submit bug',
14+
href: 'https://github.com/status-im/status-web/issues/new?template=bug_report.md',
15+
},
16+
]
17+
18+
const FeedbackPopover = () => {
19+
const [isOpen, setIsOpen] = useState(false)
20+
21+
return (
22+
<DropdownMenu.Root onOpenChange={setIsOpen} open={isOpen}>
23+
<button
24+
type="button"
25+
className="flex cursor-pointer select-none items-center rounded-10 border border-neutral-70 hover:border-neutral-60"
26+
>
27+
<div className="flex items-center gap-1 px-2 py-[5px] text-15 font-500 text-white-100 transition">
28+
Share feedback
29+
<span className="text-neutral-50">
30+
<DropdownIcon />
31+
</span>
32+
</div>
33+
</button>
34+
35+
<DropdownMenu.Content
36+
collisionPadding={12}
37+
sideOffset={24}
38+
className="w-[256px]"
39+
style={{ zIndex: 100 }}
40+
>
41+
{FEEDBACK_LINKS.map(({ label, href }) => (
42+
<DropdownMenu.Item
43+
key={label}
44+
label={label}
45+
external
46+
onSelect={() => {
47+
window.open(href, '_blank', 'noopener,noreferrer')
48+
}}
49+
/>
50+
))}
51+
</DropdownMenu.Content>
52+
</DropdownMenu.Root>
53+
)
54+
}
55+
56+
export { FeedbackPopover }

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { Button } from './button'
22
export { ButtonLink } from './button-link'
33
export { GameCard } from './cards'
44
export { Divider } from './divider'
5+
export { FeedbackPopover } from './feedback-popover'
56
export { Footer } from './footer'
67
export { Link } from './link'
78
export { ShortenAddress } from './shorten-address'

‎packages/status-network/tailwind.config.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,30 @@ export default {
9090
sky: 'rgba(25, 146, 215, 1)',
9191
sea: 'rgba(61, 150, 165, 1)',
9292
yellow: 'rgba(246, 176, 60, 1)',
93+
'blue-50': 'rgba(42, 74, 245, 1)',
9394
neutral: {
95+
'2.5': 'rgba(250, 251, 252, 1)',
96+
'5': 'rgba(245, 246, 248, 1)',
9497
'10': 'rgba(240, 242, 245, 1)',
9598
'20': 'rgba(231, 234, 238, 1)',
9699
'30': 'rgba(220, 224, 229, 1)',
97100
'40': 'rgba(161, 171, 189, 1)',
98101
'50': 'rgba(100, 112, 132, 1)',
102+
'60': 'rgba(48, 61, 85, 1)',
103+
'70': 'rgba(32, 44, 66, 1)',
104+
'80': 'rgba(27, 39, 61, 1)',
99105
'80/5': 'rgba(27, 39, 61, 0.05)',
100106
'80/10': 'rgba(27, 39, 61, 0.10)',
107+
'80/20': 'rgba(27, 39, 61, 0.20)',
108+
'80/30': 'rgba(27, 39, 61, 0.30)',
109+
'80/40': 'rgba(27, 39, 61, 0.40)',
110+
'80/50': 'rgba(27, 39, 61, 0.50)',
101111
'80/60': 'rgba(27, 39, 61, 0.60)',
112+
'80/70': 'rgba(27, 39, 61, 0.70)',
113+
'80/90': 'rgba(27, 39, 61, 0.90)',
114+
'80/95': 'rgba(27, 39, 61, 0.95)',
115+
'90': 'rgba(19, 29, 47, 1)',
116+
'95': 'rgba(13, 22, 37, 1)',
102117
'100': 'rgba(9, 16, 28, 1)',
103118
},
104119
dark: {
@@ -128,6 +143,8 @@ export default {
128143
24: '24px',
129144
28: '28px',
130145
32: '32px',
146+
40: '40px',
147+
42: '42px',
131148
full: '9999px',
132149
},
133150

0 commit comments

Comments
 (0)