Skip to content

Commit e65aa6a

Browse files
alcercualcercu
authored
Merge pull request #69 from kleros/refactor/site-refactor-and-fixes
Refactor/site refactor and fixes
2 parents 08c346d + f06a4bd commit e65aa6a

File tree

24 files changed

+250
-210
lines changed

24 files changed

+250
-210
lines changed

‎frontend/src/app/for-lawyers/components/Flowchart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
3232
"relative h-7 w-[100%-14px] bg-primary-blue",
3333
"flex items-center justify-center",
3434
//start-arrow
35-
"before:absolute before:left-0 before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
35+
"before:absolute before:-left-[1px] before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
3636
"before:border-b-transparent before:border-t-transparent",
3737
background === "primary"
3838
? "before:border-l-background-1"
@@ -60,7 +60,7 @@ interface IFlowchart {
6060

6161
const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
6262
return (
63-
<div className="flex w-full flex-wrap justify-center gap-4 md:justify-start">
63+
<div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
6464
{items.map((item) => (
6565
<FlowchartItem key={item.name} {...item} background={background} />
6666
))}

‎frontend/src/app/home/components/LearnPosts.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const LearnPosts: React.FC = async () => {
2323
<div className="mx-auto flex flex-wrap gap-4">
2424
{cards.map(({ icon, title, subtitle, link }) => (
2525
<CtaCard
26-
className="flex-grow xl:max-h-[378px] xl:max-w-[364px]"
26+
className="flex-grow xl:max-h-[364px] xl:max-w-[378px]"
2727
key={title}
2828
{...{ icon, title, description: subtitle, arrowLink: link }}
2929
/>

‎frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import { Reports } from "./ReportCard";
1010
interface IDropdownContainer
1111
extends Pick<Report, "yearDropdownLabel" | "monthDropdownLabel"> {
1212
reports: Reports;
13-
setReportUrl: (url?: string) => void;
13+
setSelectedReport: (report?: Reports[number]) => void;
1414
}
1515

1616
type IProcessedReports = Record<number, Array<string>>;
1717

1818
const DropdownContainer: React.FC<IDropdownContainer> = ({
1919
reports,
20-
setReportUrl,
20+
setSelectedReport,
2121
yearDropdownLabel,
2222
monthDropdownLabel,
2323
}) => {
@@ -75,8 +75,8 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
7575
(report) =>
7676
(isMonthInfo ? report.month === month : true) && report.year === year,
7777
);
78-
setReportUrl(selectedReport?.url);
79-
}, [isMonthInfo, month, year, reports, setReportUrl]);
78+
setSelectedReport(selectedReport);
79+
}, [isMonthInfo, month, year, reports, setSelectedReport]);
8080

8181
return (
8282
<div

‎frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ import clsx from "clsx";
66
import Image from "next/image";
77

88
import Button from "@/components/Button";
9-
import CustomLink from "@/components/CustomLink";
109
import { Report } from "@/queries/cooperative/report-section";
1110

1211
import DropdownContainer from "./DropdownContainer";
1312

1413
export type Reports = {
15-
url: string;
14+
file: { url: string };
1615
month?: string;
1716
year: number;
1817
}[];
@@ -29,7 +28,35 @@ const ReportCard: React.FC<IReportCard> = ({
2928
monthDropdownLabel,
3029
downloadButtonText,
3130
}) => {
32-
const [reportUrl, setReportUrl] = useState<string>();
31+
const [selectedReport, setSelectedReport] = useState<Reports[number]>();
32+
33+
const handleDownload = () => {
34+
if (!selectedReport || !selectedReport.file.url) return;
35+
fetch(selectedReport.file.url)
36+
.then((response) => response.blob())
37+
.then((blob) => {
38+
const url = window.URL.createObjectURL(new Blob([blob]));
39+
const link = document.createElement("a");
40+
link.href = url;
41+
42+
const contentType = blob.type;
43+
44+
const extension = contentType.split("/")[1] || "octet-stream";
45+
const fileExtension = extension === "json" ? "json" : extension;
46+
47+
link.download = `${selectedReport.month ? selectedReport.month + "-" : ""}${selectedReport.year}.${fileExtension}`;
48+
49+
document.body.appendChild(link);
50+
51+
link.click();
52+
53+
document.body.removeChild(link);
54+
window.URL.revokeObjectURL(url);
55+
})
56+
.catch((error) => {
57+
console.error("Error fetching the file:", error);
58+
});
59+
};
3360

3461
return (
3562
<div
@@ -47,21 +74,20 @@ const ReportCard: React.FC<IReportCard> = ({
4774
<DropdownContainer
4875
{...{
4976
reports,
50-
setReportUrl,
77+
setSelectedReport,
5178
yearDropdownLabel,
5279
monthDropdownLabel,
5380
}}
5481
/>
5582

56-
<CustomLink href={reportUrl ?? ""}>
57-
<Button
58-
variant="primary"
59-
className="text-background-1"
60-
disabled={typeof reportUrl === "undefined"}
61-
>
62-
{downloadButtonText}
63-
</Button>
64-
</CustomLink>
83+
<Button
84+
variant="primary"
85+
className="text-background-1"
86+
disabled={typeof selectedReport === "undefined"}
87+
onClick={handleDownload}
88+
>
89+
{downloadButtonText}
90+
</Button>
6591
</div>
6692

6793
<div

‎frontend/src/components/CtaCard.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,11 @@ const CtaCard: React.FC<ICtaCard> = ({
4545
<h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
4646
{title}
4747
</h2>
48-
<p className="text-base text-secondary-text lg:text-lg">{description}</p>
48+
<p className="mb-6 text-base text-secondary-text lg:text-lg">
49+
{description}
50+
</p>
4951
{typeof arrowLink !== "undefined" ? (
50-
<div className="mt-6 w-full">
52+
<div className="mt-auto w-full">
5153
<Divider />
5254
<ExternalLink
5355
text={arrowLink.text}

‎frontend/src/components/ExternalLink.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
1616
return (
1717
<CustomLink
1818
href={url}
19-
className={clsx("block hover:brightness-[1.2]", className)}
19+
className={clsx(
20+
"flex items-center gap-4 hover:brightness-[1.2]",
21+
className,
22+
)}
2023
>
2124
<span className="text-center text-primary-blue md:text-lg">{text}</span>
2225
<Image

‎frontend/src/components/ForBuilders/Hero.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ interface IHero {
1414

1515
const Hero: React.FC<IHero> = ({ heroData }) => {
1616
return (
17-
<div className="relative px-6 pb-12 pt-32">
17+
<div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
1818
<div className="space-y-6">
19-
<h1 className="w-min text-3xl">{heroData.title}</h1>
20-
<p className="text-lg">{heroData.subtitle}</p>
19+
<h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
20+
{heroData.title}
21+
</h1>
22+
<p className="max-w-[685px] text-lg">{heroData.subtitle}</p>
2123
<div>
2224
<CustomLink href={heroData.button.link.url}>
2325
<Button variant="secondary">
@@ -34,7 +36,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
3436
width="24"
3537
height="24"
3638
alt="Arrow link image"
37-
className="inline"
39+
className="inline h-4 w-4 lg:h-6 lg:w-6"
3840
/>
3941
</CustomLink>
4042
))}
@@ -43,10 +45,9 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
4345
<Image
4446
src={heroData.background.url}
4547
alt="Hero Image Background"
46-
width="1440"
47-
height="835"
48+
fill
4849
priority
49-
className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
50+
className="absolute left-0 top-0 z-[-1] h-full object-cover"
5051
/>
5152
</div>
5253
);

‎frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ interface IHeader {
1010

1111
const Header: React.FC<IHeader> = ({ useCasesData }) => {
1212
return (
13-
<div className="mb-16">
14-
<h2 className="mb-6 text-xl text-primary-purple">
13+
<div className="mb-12 lg:mb-16">
14+
<h2 className="mb-6 text-lg text-primary-purple lg:text-2xl">
1515
{useCasesData.useCaseTitle}
1616
</h2>
17-
<p className="mb-12 text-lg text-secondary-text">
17+
<p className="mb-12 text-secondary-text lg:mb-16 lg:text-xl">
1818
{useCasesData.useCaseDescription}
1919
</p>
2020
<Image

‎frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ interface IHeader {
99
const Header: React.FC<IHeader> = ({ useCasesData }) => {
1010
return (
1111
<div>
12-
<h2 className="mb-6 text-xl text-primary-text">
12+
<h2 className="mb-6 text-lg text-primary-text lg:text-xl">
1313
{useCasesData.keyChallenges.title}
1414
</h2>
15-
<p className="mb-12 text-lg text-secondary-text">
15+
<p className="mb-12 text-secondary-text lg:text-lg">
1616
{useCasesData.keyChallenges.description}
1717
</p>
1818
</div>

‎frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import React from "react";
22

3-
import clsx from "clsx";
4-
import Image from "next/image";
5-
6-
import CustomLink from "@/components/CustomLink";
7-
import Card from "@/components/Navbar/AppsDropdownContent/Card";
83
import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
94

10-
const hoverEffect = clsx(
11-
"hover:scale-[1.03] transform transition duration-100",
12-
);
5+
import SafeSnap from "./SafeSnap";
136

147
interface IHowKlerosSolvesIt {
158
useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
@@ -18,45 +11,10 @@ interface IHowKlerosSolvesIt {
1811
const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
1912
return (
2013
<div>
21-
<h2 className="mb-6 text-xl text-primary-purple">
14+
<h2 className="mb-8 text-lg text-primary-purple lg:text-xl">
2215
{useCasesData.solutionSections.header}
2316
</h2>
24-
<div className="rounded-2xl border border-stroke bg-background-2 p-6">
25-
<h2 className="mb-4 text-xl">{useCasesData.solutionSections.title}</h2>
26-
<div className="mb-8 text-lg text-secondary-text">
27-
{useCasesData.solutionSections.description}
28-
</div>
29-
<div className="mb-4 text-secondary-text">
30-
{useCasesData.solutionSections.solutionHeader}
31-
</div>
32-
<div className="mb-6">
33-
<Card
34-
key={useCasesData.solutionSections?.solution?.solution_name}
35-
solution={useCasesData.solutionSections.solution}
36-
variant="small"
37-
/>
38-
</div>
39-
<div className="mb-4 text-secondary-text">
40-
{useCasesData.solutionSections.partnersHeader}
41-
</div>
42-
<div className="flex flex-row gap-x-6 rounded-2xl border border-stroke p-4">
43-
{useCasesData.solutionSections.partners.map((partner) => (
44-
<CustomLink
45-
key={partner?.name}
46-
href={partner?.url}
47-
className={clsx(hoverEffect, "cursor-pointer")}
48-
>
49-
<Image
50-
key={partner?.name}
51-
src={partner?.icon_svg?.url}
52-
alt={partner?.name}
53-
width={64}
54-
height={64}
55-
/>
56-
</CustomLink>
57-
))}
58-
</div>
59-
</div>
17+
<SafeSnap {...{ useCasesData }} />
6018
</div>
6119
);
6220
};

0 commit comments

Comments
 (0)