Skip to content

Commit afff7f7

Browse files
dnywhdnywh
authored
chore(studio): put focus on Discord in help menu (supabase#39893)
* basics * reorder * layout * assistant * cleanup * remove testing const * text color * restore sidebar manager * remove open prop * copy refinement
1 parent c4920c7 commit afff7f7

File tree

3 files changed

+91
-100
lines changed

3 files changed

+91
-100
lines changed

‎apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
211211
<p className="text-xs text-foreground-light">
212212
Contact{' '}
213213
<SupportLink>
214-
<span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
214+
<span className="cursor-pointer text-brand-link transition-colors hover:text-brand-600">
215215
support
216216
</span>
217217
</SupportLink>{' '}
218218
or{' '}
219219
<a href={`${DOCS_URL}`} target="_blank" rel="noreferrer">
220-
<span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
220+
<span className="cursor-pointer text-brand-link transition-colors hover:text-brand-600">
221221
see docs
222222
</span>
223223
</a>

‎apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx‎

Lines changed: 89 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Activity, BookOpen, HelpCircle, Mail, MessageCircle, Wrench } from 'lucide-react'
1+
import { Activity, BookOpen, HelpCircle, Mail, Wrench } from 'lucide-react'
22
import Image from 'next/legacy/image'
33
import { useRouter } from 'next/router'
44
import SVG from 'react-inlinesvg'
55

6+
import { IS_PLATFORM } from 'common'
67
import { SupportLink } from 'components/interfaces/Support/SupportLink'
78
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
89
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -57,81 +58,91 @@ export const HelpPopover = () => {
5758
}}
5859
/>
5960
</PopoverTrigger_Shadcn_>
60-
<PopoverContent_Shadcn_ className="w-[400px] space-y-4 p-0 py-5" align="end" side="bottom">
61-
<div className="mb-5 px-5">
62-
<h5 className="text-foreground mb-2">Need help with your project?</h5>
63-
<p className="text-sm text-foreground-lighter">
64-
For issues with your project hosted on supabase.com or other hosted service inquiries.
65-
Response times are based on your billing plan, with paid plans prioritized.
66-
</p>
67-
</div>
68-
<div className="px-5">
69-
<ButtonGroup className="w-full">
70-
{projectRef && (
71-
<ButtonGroupItem
72-
size="tiny"
73-
icon={<AiIconAnimation allowHoverEffect size={14} />}
74-
onClick={() => {
75-
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
76-
snap.newChat({
77-
name: 'Support',
78-
initialInput: `I need help with my project`,
79-
suggestions: {
80-
title:
81-
'I can help you with your project, here are some example prompts to get you started:',
82-
prompts: [
83-
{
84-
label: 'Database Health',
85-
description: 'Summarise my database health and performance',
86-
},
87-
{
88-
label: 'Debug Logs',
89-
description: 'View and debug my edge function logs',
90-
},
91-
{
92-
label: 'RLS Setup',
93-
description: 'Implement row level security for my tables',
94-
},
95-
],
96-
},
97-
})
98-
}}
99-
>
100-
Supabase Assistant
61+
<PopoverContent_Shadcn_ className="w-[400px] space-y-5 p-0 py-5" align="end" side="bottom">
62+
<div className="flex flex-col gap-4">
63+
<div className="px-5 flex flex-col gap-1">
64+
<h5 className="text-foreground">Need help with your project?</h5>
65+
<p className="text-sm text-foreground-lighter text-balance">
66+
Start with our {projectRef ? 'Assistant, docs,' : 'docs'} or community.
67+
</p>
68+
</div>
69+
70+
<div className="px-5">
71+
<ButtonGroup className="w-full">
72+
{projectRef && (
73+
<ButtonGroupItem
74+
size="tiny"
75+
icon={<AiIconAnimation allowHoverEffect size={14} />}
76+
onClick={() => {
77+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
78+
snap.newChat({
79+
name: 'Support',
80+
initialInput: `I need help with my project`,
81+
suggestions: {
82+
title:
83+
'I can help you with your project, here are some example prompts to get you started:',
84+
prompts: [
85+
{
86+
label: 'Database Health',
87+
description: 'Summarise my database health and performance',
88+
},
89+
{
90+
label: 'Debug Logs',
91+
description: 'View and debug my edge function logs',
92+
},
93+
{
94+
label: 'RLS Setup',
95+
description: 'Implement row level security for my tables',
96+
},
97+
],
98+
},
99+
})
100+
}}
101+
>
102+
Supabase Assistant
103+
</ButtonGroupItem>
104+
)}
105+
<ButtonGroupItem size="tiny" icon={<BookOpen strokeWidth={1.5} size={14} />} asChild>
106+
<a href={`${DOCS_URL}/`} target="_blank" rel="noreferrer">
107+
Docs
108+
</a>
101109
</ButtonGroupItem>
102-
)}
103-
<ButtonGroupItem size="tiny" icon={<Wrench strokeWidth={1.5} size={14} />} asChild>
104-
<a
105-
href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
106-
target="_blank"
107-
rel="noreferrer"
108-
>
109-
Troubleshooting
110-
</a>
111-
</ButtonGroupItem>
112-
<ButtonGroupItem size="tiny" icon={<BookOpen strokeWidth={1.5} size={14} />} asChild>
113-
<a href={`${DOCS_URL}/`} target="_blank" rel="noreferrer">
114-
Docs
115-
</a>
116-
</ButtonGroupItem>
117-
<ButtonGroupItem size="tiny" icon={<Activity strokeWidth={1.5} size={14} />} asChild>
118-
<a href="https://status.supabase.com/" target="_blank" rel="noreferrer">
119-
Supabase Status
120-
</a>
121-
</ButtonGroupItem>
122-
<ButtonGroupItem size="tiny" icon={<Mail strokeWidth={1.5} size={14} />}>
123-
<SupportLink queryParams={{ projectRef }}>Contact Support</SupportLink>
124-
</ButtonGroupItem>
125-
</ButtonGroup>
110+
<ButtonGroupItem size="tiny" icon={<Wrench strokeWidth={1.5} size={14} />} asChild>
111+
<a
112+
href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
113+
target="_blank"
114+
rel="noreferrer"
115+
>
116+
Troubleshooting
117+
</a>
118+
</ButtonGroupItem>
119+
{IS_PLATFORM && (
120+
<>
121+
<ButtonGroupItem
122+
size="tiny"
123+
icon={<Activity strokeWidth={1.5} size={14} />}
124+
asChild
125+
>
126+
<a href="https://status.supabase.com/" target="_blank" rel="noreferrer">
127+
Supabase status
128+
</a>
129+
</ButtonGroupItem>
130+
131+
<ButtonGroupItem size="tiny" icon={<Mail strokeWidth={1.5} size={14} />}>
132+
<SupportLink queryParams={{ projectRef }}>Contact support</SupportLink>
133+
</ButtonGroupItem>
134+
</>
135+
)}
136+
</ButtonGroup>
137+
</div>
126138
</div>
127139
<Popover.Separator />
128-
<div className="mb-4 space-y-2">
129-
<div className="mb-4 px-5">
130-
<h5 className="mb-2">Reach out to the community</h5>
131-
132-
<p className="text-sm text-foreground-lighter">
133-
For other support, including questions on our client libraries, advice, or best
134-
practices.
140+
<div className="flex flex-col gap-4">
141+
<div className="px-5 flex flex-col gap-1">
142+
<h5 className="text-foreground">Community support</h5>
143+
<p className="text-sm text-foreground-lighter text-balance">
144+
Our Discord community can help with code-related issues. Many questions are answered
145+
in minutes.
135146
</p>
136147
</div>
137148
<div className="px-5">
@@ -143,41 +154,21 @@ export const HelpPopover = () => {
143154
href="https://discord.supabase.com"
144155
target="_blank"
145156
rel="noreferrer"
146-
className="dark block cursor-pointer"
157+
className="group dark block cursor-pointer"
147158
>
148159
<Image
149-
className="absolute left-0 top-0 opacity-50"
160+
className="absolute left-0 top-0 opacity-50 transition-opacity group-hover:opacity-40"
150161
src={`${router.basePath}/img/support/discord-bg-small.jpg`}
151162
layout="fill"
152163
objectFit="cover"
153-
alt="discord illustration header"
164+
alt="Discord illustration"
154165
/>
155166
<Button
156167
type="secondary"
168+
size="tiny"
157169
icon={<SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />}
158170
>
159-
<span style={{ color: '#404EED' }}>Join Discord server</span>
160-
</Button>
161-
</a>
162-
</div>
163-
</div>
164-
<div className="px-5">
165-
<div className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md">
166-
<a
167-
href="https://github.com/supabase/supabase/discussions"
168-
target="_blank"
169-
rel="noreferrer"
170-
className="block cursor-pointer"
171-
>
172-
<Image
173-
className="absolute left-0 top-0 opacity-50"
174-
src={`${router.basePath}/img/support/github-bg.jpg?v-1`}
175-
layout="fill"
176-
objectFit="cover"
177-
alt="discord illustration header"
178-
/>
179-
<Button type="secondary" icon={<MessageCircle />}>
180-
GitHub Discussions
171+
<span style={{ color: '#404EED' }}>Join us on Discord</span>
181172
</Button>
182173
</a>
183174
</div>

‎apps/studio/public/img/support/github-bg.jpg‎

-93.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)