Skip to content

Commit 5586be6

Browse files
dnywhdnywh
authored
fix(studio): legal page buttons (supabase#42149)
* basics * adjustments * format * rabbit * format
1 parent 191f450 commit 5586be6

File tree

7 files changed

+154
-140
lines changed

7 files changed

+154
-140
lines changed

‎apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,21 @@ interface CustomDocumentProps {
1515
export const CustomDocument = ({ doc }: CustomDocumentProps) => {
1616
return (
1717
<ScaffoldContainer id={doc.id}>
18-
<ScaffoldSection>
19-
<ScaffoldSectionDetail className="sticky top-12 flex flex-col gap-y-8">
18+
<ScaffoldSection className="py-12">
19+
<ScaffoldSectionDetail>
2020
<p className="text-base m-0">{doc.name}</p>
21-
<p className="text-sm text-foreground-light m-0">{doc.description}</p>
21+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
22+
<p>{doc.description}</p>
23+
</div>
2224
</ScaffoldSectionDetail>
23-
<ScaffoldSectionContent className="flex items-center justify-center h-full">
24-
<Button asChild type="default" iconRight={<ExternalLink />}>
25-
<a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
26-
{doc.action.text}
27-
</a>
28-
</Button>
25+
<ScaffoldSectionContent>
26+
<div className="@lg:flex items-center justify-center h-full">
27+
<Button asChild type="default" iconRight={<ExternalLink />}>
28+
<a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
29+
{doc.action.text}
30+
</a>
31+
</Button>
32+
</div>
2933
</ScaffoldSectionContent>
3034
</ScaffoldSection>
3135
</ScaffoldContainer>

‎apps/studio/components/interfaces/Organization/Documents/DPA.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ export const DPA = () => {
3737

3838
return (
3939
<>
40-
<ScaffoldSection>
41-
<ScaffoldSectionDetail className="sticky space-y-6 top-12">
42-
<p className="text-base m-0">Data Processing Addendum (DPA)</p>
43-
<div className="space-y-2 text-sm text-foreground-light m-0">
40+
<ScaffoldSection className="py-12">
41+
<ScaffoldSectionDetail>
42+
<h4 className="mb-5">Data Processing Addendum (DPA)</h4>
43+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
4444
<p>
4545
All organizations can sign our Data Processing Addendum ("DPA") as part of their GDPR
4646
compliance.
@@ -62,18 +62,20 @@ export const DPA = () => {
6262
</p>
6363
</div>
6464
</ScaffoldSectionDetail>
65-
<ScaffoldSectionContent className="flex items-center justify-center h-full">
66-
<Button
67-
onClick={() => {
68-
setIsOpen(true)
69-
sendEvent({
70-
action: 'dpa_request_button_clicked',
71-
})
72-
}}
73-
type="default"
74-
>
75-
Request DPA
76-
</Button>
65+
<ScaffoldSectionContent>
66+
<div className="@lg:flex items-center justify-center h-full">
67+
<Button
68+
onClick={() => {
69+
setIsOpen(true)
70+
sendEvent({
71+
action: 'dpa_request_button_clicked',
72+
})
73+
}}
74+
type="default"
75+
>
76+
Request DPA
77+
</Button>
78+
</div>
7779
</ScaffoldSectionContent>
7880
</ScaffoldSection>
7981

‎apps/studio/components/interfaces/Organization/Documents/Documents.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { SupportLink } from 'components/interfaces/Support/SupportLink'
2-
import { ScaffoldContainer, ScaffoldDivider, ScaffoldSection } from 'components/layouts/Scaffold'
2+
import {
3+
ScaffoldContainer,
4+
ScaffoldDivider,
5+
ScaffoldSection,
6+
ScaffoldSectionDetail,
7+
} from 'components/layouts/Scaffold'
38
import { InlineLinkClassName } from 'components/ui/InlineLink'
49
import { useCustomContent } from 'hooks/custom-content/useCustomContent'
510
import { Fragment } from 'react'
@@ -57,11 +62,13 @@ export const Documents = () => {
5762
<ScaffoldDivider />
5863

5964
<ScaffoldContainer>
60-
<ScaffoldSection>
61-
<p className="sticky space-y-6 top-12 text-sm text-foreground-light m-0 whitespace-nowrap">
62-
<SupportLink className={InlineLinkClassName}>Submit a support request</SupportLink> if
63-
you require additional documents for financial or tax reasons, such as a W-9 form.
64-
</p>
65+
<ScaffoldSection className="py-12">
66+
<ScaffoldSectionDetail className="col-span-full">
67+
<p className="text-sm text-foreground-light m-0">
68+
<SupportLink className={InlineLinkClassName}>Submit a support request</SupportLink> if
69+
you require additional documents for financial or tax reasons, such as a W-9 form.
70+
</p>
71+
</ScaffoldSectionDetail>
6572
</ScaffoldSection>
6673
</ScaffoldContainer>
6774
</>

‎apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,45 +14,43 @@ export const HIPAA = () => {
1414
const { mutate: sendEvent } = useSendEventMutation()
1515

1616
return (
17-
<>
18-
<ScaffoldSection>
19-
<ScaffoldSectionDetail className="sticky space-y-6 top-12">
20-
<p className="text-base m-0">HIPAA</p>
21-
<div className="space-y-2 text-sm text-foreground-light m-0">
22-
<p>
23-
This is only for HIPAA requests. Please ignore this if you already have HIPAA enabled.
24-
</p>
25-
<p>
26-
Organizations on the Team Plan or above are eligible for a paid HIPAA compliance
27-
add-on. You can submit a request here and we will get back to you on the pricing and
28-
process for your use case.
29-
</p>
30-
<p>
31-
Organizations on the Free or Pro Plan can also submit a request for HIPAA. Note that
32-
you are still required to upgrade to the Team Plan after your request is approved.
33-
</p>
34-
</div>
35-
</ScaffoldSectionDetail>
36-
<ScaffoldSectionContent>
37-
<div className="flex items-center justify-center h-full">
38-
<Button asChild type="default" iconRight={<ExternalLink />}>
39-
<a
40-
href="https://forms.supabase.com/hipaa2"
41-
target="_blank"
42-
rel="noreferrer noopener"
43-
onClick={() =>
44-
sendEvent({
45-
action: 'hipaa_request_button_clicked',
46-
groups: { organization: organization?.slug ?? 'Unknown' },
47-
})
48-
}
49-
>
50-
Request HIPAA
51-
</a>
52-
</Button>
53-
</div>
54-
</ScaffoldSectionContent>
55-
</ScaffoldSection>
56-
</>
17+
<ScaffoldSection className="py-12">
18+
<ScaffoldSectionDetail>
19+
<h4 className="mb-5">HIPAA</h4>
20+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
21+
<p>
22+
This is only for HIPAA requests. Please ignore this if you already have HIPAA enabled.
23+
</p>
24+
<p>
25+
Organizations on the Team Plan or above are eligible for a paid HIPAA compliance add-on.
26+
You can submit a request here and we will get back to you on the pricing and process for
27+
your use case.
28+
</p>
29+
<p>
30+
Organizations on the Free or Pro Plan can also submit a request for HIPAA. Note that you
31+
are still required to upgrade to the Team Plan after your request is approved.
32+
</p>
33+
</div>
34+
</ScaffoldSectionDetail>
35+
<ScaffoldSectionContent>
36+
<div className="@lg:flex items-center justify-center h-full">
37+
<Button asChild type="default" iconRight={<ExternalLink />}>
38+
<a
39+
href="https://forms.supabase.com/hipaa2"
40+
target="_blank"
41+
rel="noreferrer noopener"
42+
onClick={() =>
43+
sendEvent({
44+
action: 'hipaa_request_button_clicked',
45+
groups: { organization: organization?.slug ?? 'Unknown' },
46+
})
47+
}
48+
>
49+
Request HIPAA
50+
</a>
51+
</Button>
52+
</div>
53+
</ScaffoldSectionContent>
54+
</ScaffoldSection>
5755
)
5856
}

‎apps/studio/components/interfaces/Organization/Documents/SOC2.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,30 +56,32 @@ export const SOC2 = () => {
5656
}
5757

5858
return (
59-
<ScaffoldSection>
60-
<ScaffoldSectionDetail className="sticky space-y-6 top-12">
61-
<p className="text-base m-0">SOC2 Type 2</p>
62-
<div className="space-y-2 text-sm text-foreground-light m-0">
59+
<ScaffoldSection className="py-12">
60+
<ScaffoldSectionDetail>
61+
<h4 className="mb-5">SOC2 Type 2</h4>
62+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
6363
<p>
6464
Organizations on Team Plan or above have access to our most recent SOC2 Type 2 report.
6565
</p>
6666
</div>
6767
</ScaffoldSectionDetail>
6868
<ScaffoldSectionContent>
6969
{isLoadingPermissions || isLoadingEntitlement ? (
70-
<div className="flex items-center justify-center h-full">
70+
<div className="@lg:flex items-center justify-center h-full">
7171
<ShimmeringLoader className="w-24" />
7272
</div>
7373
) : !canReadSubscriptions ? (
7474
<NoPermission resourceText="access our SOC2 Type 2 report" />
7575
) : !hasAccessToSoc2Report ? (
76-
<div className="flex items-center justify-center h-full">
77-
<Link href={`/org/${slug}/billing?panel=subscriptionPlan&source=soc2`}>
78-
<Button type="default">Upgrade to Team</Button>
79-
</Link>
76+
<div className="@lg:flex items-center justify-center h-full">
77+
<Button asChild type="default">
78+
<Link href={`/org/${slug}/billing?panel=subscriptionPlan&source=soc2`}>
79+
Upgrade to Team
80+
</Link>
81+
</Button>
8082
</div>
8183
) : (
82-
<div className="flex items-center justify-center h-full">
84+
<div className="@lg:flex items-center justify-center h-full">
8385
<Button
8486
type="default"
8587
icon={<Download />}

‎apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -54,46 +54,45 @@ export const SecurityQuestionnaire = () => {
5454
}
5555

5656
return (
57-
<>
58-
<ScaffoldSection>
59-
<ScaffoldSectionDetail className="sticky space-y-6 top-12">
60-
<p className="text-base m-0">Standard Security Questionnaire</p>
61-
<div className="space-y-2 text-sm text-foreground-light m-0">
62-
<p>
63-
Organizations on Team Plan or above have access to our standard security
64-
questionnaire.
65-
</p>
57+
<ScaffoldSection className="py-12">
58+
<ScaffoldSectionDetail>
59+
<h4 className="mb-5">Standard Security Questionnaire</h4>
60+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
61+
<p>
62+
Organizations on Team Plan or above have access to our standard security questionnaire.
63+
</p>
64+
</div>
65+
</ScaffoldSectionDetail>
66+
<ScaffoldSectionContent>
67+
{isLoadingPermissions || isLoadingEntitlement ? (
68+
<div className="@lg:flex items-center justify-center h-full">
69+
<ShimmeringLoader className="w-24" />
6670
</div>
67-
</ScaffoldSectionDetail>
68-
<ScaffoldSectionContent>
69-
{isLoadingPermissions || isLoadingEntitlement ? (
70-
<div className="flex items-center justify-center h-full">
71-
<ShimmeringLoader className="w-24" />
72-
</div>
73-
) : !canReadSubscriptions ? (
74-
<NoPermission resourceText="access our security questionnaire" />
75-
) : !hasAccessToQuestionnaire ? (
76-
<div className="flex items-center justify-center h-full">
71+
) : !canReadSubscriptions ? (
72+
<NoPermission resourceText="access our security questionnaire" />
73+
) : !hasAccessToQuestionnaire ? (
74+
<div className="@lg:flex items-center justify-center h-full">
75+
<Button asChild type="default">
7776
<Link
7877
href={`/org/${slug}/billing?panel=subscriptionPlan&source=securityQuestionnaire`}
7978
>
80-
<Button type="default">Upgrade to Team</Button>
79+
Upgrade to Team
8180
</Link>
82-
</div>
83-
) : (
84-
<div className="flex items-center justify-center h-full">
85-
<Button
86-
type="default"
87-
icon={<Download />}
88-
onClick={handleDownloadClick}
89-
disabled={!slug}
90-
>
91-
Download Questionnaire
92-
</Button>
93-
</div>
94-
)}
95-
</ScaffoldSectionContent>
96-
</ScaffoldSection>
97-
</>
81+
</Button>
82+
</div>
83+
) : (
84+
<div className="@lg:flex items-center justify-center h-full">
85+
<Button
86+
type="default"
87+
icon={<Download />}
88+
onClick={handleDownloadClick}
89+
disabled={!slug}
90+
>
91+
Download Questionnaire
92+
</Button>
93+
</div>
94+
)}
95+
</ScaffoldSectionContent>
96+
</ScaffoldSection>
9897
)
9998
}

‎apps/studio/components/interfaces/Organization/Documents/TIA.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ExternalLink } from 'lucide-react'
1+
import { Download } from 'lucide-react'
22

33
import {
44
ScaffoldSection,
@@ -14,34 +14,36 @@ export const TIA = () => {
1414
const { mutate: sendEvent } = useSendEventMutation()
1515

1616
return (
17-
<ScaffoldSection>
18-
<ScaffoldSectionDetail className="sticky space-y-6 top-12">
19-
<p className="text-base m-0">Transfer Impact Assessment (TIA)</p>
20-
<div className="space-y-2 text-sm text-foreground-light m-0">
17+
<ScaffoldSection className="py-12">
18+
<ScaffoldSectionDetail>
19+
<h4 className="mb-5">Transfer Impact Assessment (TIA)</h4>
20+
<div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
2121
<p>
2222
All organizations can access and use our TIA as part of their GDPR-compliant data
2323
transfer process.
2424
</p>
2525
</div>
2626
</ScaffoldSectionDetail>
27-
<ScaffoldSectionContent className="flex items-center justify-center h-full">
28-
<Button asChild type="default" iconRight={<ExternalLink />}>
29-
<a
30-
href="https://supabase.com/downloads/docs/Supabase+TIA+250314.pdf"
31-
target="_blank"
32-
rel="noreferrer noopener"
33-
download={true}
34-
onClick={() =>
35-
sendEvent({
36-
action: 'document_view_button_clicked',
37-
properties: { documentName: 'TIA' },
38-
groups: { organization: organization?.slug ?? 'Unknown' },
39-
})
40-
}
41-
>
42-
View TIA
43-
</a>
44-
</Button>
27+
<ScaffoldSectionContent>
28+
<div className="@lg:flex items-center justify-center h-full">
29+
<Button asChild type="default" iconRight={<Download />}>
30+
<a
31+
href="https://supabase.com/downloads/docs/Supabase+TIA+250314.pdf"
32+
target="_blank"
33+
rel="noreferrer noopener"
34+
download={true}
35+
onClick={() =>
36+
sendEvent({
37+
action: 'document_view_button_clicked',
38+
properties: { documentName: 'TIA' },
39+
groups: { organization: organization?.slug ?? 'Unknown' },
40+
})
41+
}
42+
>
43+
Download TIA
44+
</a>
45+
</Button>
46+
</div>
4547
</ScaffoldSectionContent>
4648
</ScaffoldSection>
4749
)

0 commit comments

Comments
 (0)