Skip to content

Commit

Permalink
Merge pull request #26 from Vizzuality/bugfix/small-changes-design
Browse files Browse the repository at this point in the history 
Small changes UI
  • Loading branch information
@andresgnlez
andresgnlez authored Sep 30, 2024
2 parents 7a6020f + 796436b commit f6e63c8
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 55 deletions.
4 changes: 2 additions & 2 deletions src/containers/case-detail/sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ export default function CaseDetailSidebar() {
<Media greaterThanOrEqual="md">
{(className: string, renderChildren: boolean) =>
renderChildren ? (
<Button asChild variant="ghost" className="border border-grey-900">
<Link href="/cases">Close detail</Link>
<Button asChild variant="secondary" className="border border-grey-900 text-white">
<Link href="/cases">Back</Link>
</Button>
) : (
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/containers/cases/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Header() {
const { id } = useParams();

return (
<header className="flex items-center justify-between border-b border-b-grey-400 px-4 py-2 md:px-[60px] md:py-4">
<header className="flex items-center justify-between border-b border-b-grey-400 px-4 py-2 md:px-[60px] md:py-5">
<AppLogo variant="secondary" />
<Media greaterThanOrEqual="md">{!id && <CaseFilters />}</Media>
<AppMenu />
Expand Down
2 changes: 1 addition & 1 deletion src/containers/cases/total/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function CaseStudiesTotal({

return (
<div className={className}>
<div className="space-y-4 bg-white py-8">
<div className="space-y-4 bg-white py-7">
<h4 className="text-[length:inherit] font-bold">Case studies</h4>
<p className="text-lg text-gray-600">{totalCaseStudies} case studies</p>
</div>
Expand Down
135 changes: 84 additions & 51 deletions src/containers/home/thematic-areas/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { PropsWithChildren } from 'react';
import { PropsWithChildren, useState } from 'react';

import { cn } from '@/lib/utils';

Expand All @@ -15,6 +15,7 @@ import {
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Separator } from '@/components/ui/separator';
import Wrapper from '@/components/ui/wrapper';

const IconBackground = ({
Expand Down Expand Up @@ -68,59 +69,91 @@ const THEMATIC_AREAS = [
];

export default function ThematicAreas() {
const [openAccordionItem, setOpenAccordionItem] = useState<string | null>(null);
return (
<Wrapper className="space-y-10 md:space-y-20">
<div className="grid grid-cols-12">
<div className="col-span-12 space-y-9 lg:col-span-6">
<h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
<p className="leading-9 md:text-lg">
The more4nature activities are focused on three key thematic areas in environmental
protection:
</p>
<>
<Wrapper className="space-y-10 md:space-y-20">
<div className="grid grid-cols-12">
<div className="col-span-12 space-y-9 lg:col-span-6">
<h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
<p className="leading-9 md:text-lg">
The more4nature activities are focused on three key thematic areas in environmental
protection:
</p>
</div>
</div>
</div>
<Media lessThan="lg">
<ul className="space-y-10 divide-y divide-grey-800/20">
{THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
<li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
<div
className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url(${imageURL})`,
}}
/>
<div className="flex items-center space-x-5">
{icon}
<span className="text-lg">{name}</span>
</div>
<p>{description}</p>
</li>
))}
</ul>
</Media>
<Media lessThan="lg">
<ul className="space-y-10 divide-y divide-grey-800/20">
{THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
<li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
<div
className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url(${imageURL})`,
}}
/>
<div className="flex items-center space-x-5">
{icon}
<span className="text-lg">{name}</span>
</div>
<p>{description}</p>
</li>
))}
</ul>
</Media>
<Media greaterThanOrEqual="lg">
<Accordion
type="single"
collapsible
className="flex w-full flex-col"
onValueChange={(v) => setOpenAccordionItem(v || null)}
>
{THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => {
const isFadedAccordionItem = openAccordionItem && name !== openAccordionItem;
const isOpenAccordionItem = openAccordionItem && name === openAccordionItem;
return (
<div
key={name}
className="flex h-full w-full flex-1 flex-row-reverse border-b-grey-800/30 last-of-type:border-b"
>
<AccordionItem
key={name}
value={name}
className={cn({
'peer w-full px-14 py-10': true,
'border-t-2': isOpenAccordionItem,
})}
>
<AccordionTrigger>
<div className="flex flex-1 items-center space-x-5">
{icon}
<span className="text-left text-4xl">{name}</span>
</div>
</AccordionTrigger>
<AccordionContent className="leading-9">{description}</AccordionContent>
</AccordionItem>
<div
className={cn({
'relative flex w-[395px] border-t border-t-grey-800/30 bg-cover bg-center bg-no-repeat transition-opacity duration-300':
true,
'bg-gray-400 opacity-40 bg-blend-multiply': isFadedAccordionItem,
'border-t-2 border-t-grey-800': isOpenAccordionItem,
})}
style={{
backgroundImage: isFadedAccordionItem
? `linear-gradient(0deg, rgba(36, 59, 74, 0.20) 0%, rgba(36, 59, 74, 0.20) 100%), url(${imageURL})`
: `url(${imageURL})`,
}}
/>
</div>
);
})}
</Accordion>
</Media>
</Wrapper>
<Media greaterThanOrEqual="lg">
<Accordion type="single" collapsible className="flex w-full flex-col">
{THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
<div key={name} className="flex h-full w-full flex-1 flex-row-reverse">
<AccordionItem key={name} value={name} className="peer w-full px-14 py-10">
<AccordionTrigger>
<div className="flex flex-1 items-center space-x-5">
{icon}
<span className="text-left text-4xl">{name}</span>
</div>
</AccordionTrigger>
<AccordionContent className="leading-9">{description}</AccordionContent>
</AccordionItem>
<div
className="flex w-[395px] bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url(${imageURL})`,
}}
/>
</div>
))}
</Accordion>
<Separator className="mb-16 mt-12 bg-grey-800/30" />
</Media>
</Wrapper>
</>
);
}

0 comments on commit f6e63c8

Please sign in to comment.