Skip to content

updated dark theme style #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 26, 2025
Merged

updated dark theme style #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/AnnouncementBanner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
and suggestions:
</p>
<span
class="group-hover:underline group-focus:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-sm"
class="group-hover:underline group-focus:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-sm text-gray-950"
>
ux@bgs.ac.uk
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/CaseStudiesPreview.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const { data, slug } = Astro.props.project;

<div class="mt-2">
<h3
class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-neutral-300 dark:group-hover:text-white"
class="text-xl font-semibold dark:text-neutral-300 dark:group-hover:text-white"
>
{data.title}
</h3>
Expand All @@ -48,7 +48,7 @@ const { data, slug } = Astro.props.project;
}
</div>
</div>
<p class="mt-3 text-gray-800 dark:text-neutral-200">
<p class="mt-3 dark:white">
{data.description}
</p>
<p
Expand Down
2 changes: 1 addition & 1 deletion src/components/CoCreationMethodsList.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const groupedMethods = coCreationMethods.reduce<Record<string, CoCreationMethod[
<h4 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">
{method.title}
</h4>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
{method.description}
</p>
<p class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-gray-800 dark:text-neutral-200">
Expand Down
8 changes: 4 additions & 4 deletions src/components/CoDesignDefinition.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<h3 class="text-lg font-semibold ">
Shared Ownership
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Everyone involved in the project, including users, stakeholders, and designers, shares responsibility for the design process and its outcomes.
</p>
</div>
Expand All @@ -39,7 +39,7 @@
<h3 class="text-lg font-semibold ">
Active Participation
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Users and stakeholders actively contribute their knowledge, experiences, and perspectives throughout the entire design process.
</p>
</div>
Expand All @@ -53,7 +53,7 @@
<h3 class="text-lg font-semibold ">
Open Communication
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Open and honest communication is essential, fostering a safe space for sharing ideas, feedback, and concerns.
</p>
</div>
Expand All @@ -67,7 +67,7 @@
<h3 class="text-lg font-semibold ">
Iterative Process
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Co-design is not a linear process; it involves continuous cycles of prototyping, testing, and refining solutions based on user feedback.
</p>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/components/CommunityComponent.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
<div class="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
<div class="lg:col-span-1">
<h2
class="font-bold text-2xl md:text-3xl text-gray-800 dark:text-neutral-200"
class="font-bold text-2xl md:text-3xl dark:text-neutral-200"
>
Contribute to the Co-Creation Toolkit
</h2>
<p class="mt-2 md:mt-4 text-gray-500 dark:text-neutral-500">
<p class="mt-2 md:mt-4 dark:text-neutral-500">
This toolkit is a collaborative effort, and we welcome your
contributions! Help us make environmental data tools and services better
for everyone.
Expand Down Expand Up @@ -54,10 +54,10 @@
d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
<h3 class="text-lg font-semibold dark:text-white">
Share Case Studies
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Share co-design applications in environmental data projects.
Inspire others with your real-world examples.
</p>
Expand All @@ -82,10 +82,10 @@
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg
>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
<h3 class="text-lg font-semibold dark:text-white">
Add Toolkit Resources
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Contribute templates, guides, or documents to help others use
co-design and UX best practices.
</p>
Expand All @@ -111,10 +111,10 @@
></path></svg
>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
<h3 class="text-lg font-semibold dark:text-white">
Suggest Improvements / Provide Feedback
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Be part of the EDS Co-Creation Toolkit community! Discuss, ask
questions, and suggest topics on our <a
href="https://github.com/pautva/co-creation-toolkit/discussions"
Expand Down Expand Up @@ -149,10 +149,10 @@
y2="16"></line><line x1="16" x2="16" y1="16" y2="16"></line></svg
>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
<h3 class="text-lg font-semibold dark:text-white">
Report Bugs
</h3>
<p class="mt-1 text-gray-600 dark:text-neutral-400">
<p class="mt-1 dark:text-neutral-400">
Found an issue? Let us know!
</p>
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/components/FAQ.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="md:col-span-2">
<div class="max-w-xs">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Frequently<br>Asked Questions</h2>
<p class="mt-1 hidden md:block text-gray-600 dark:text-neutral-400">Answers to the most frequently asked questions. If you have additional questions or want to learn more about how to contribute, please don't hesitate to reach out to us.</p>
<p class="mt-1 hidden md:block dark:text-neutral-400">Answers to the most frequently asked questions. If you have additional questions or want to learn more about how to contribute, please don't hesitate to reach out to us.</p>
</div>
</div>
<!-- End Col -->
Expand All @@ -14,78 +14,78 @@
<!-- Accordion -->
<div class="hs-accordion-group divide-y divide-gray-200 dark:divide-neutral-700">
<div class="hs-accordion pb-3 active" id="hs-basic-with-title-and-arrow-stretched-heading-one">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one">
Who is this toolkit for?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
This toolkit is designed for anyone involved in creating environmental data services and products, including researchers, developers, designers, and project managers.
</p>
</div>
</div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-two">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two">
What kind of resources are included in the toolkit?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
The toolkit includes a variety of resources, such as case studies showcasing successful UX in environmental data products, templates for UX deliverables, and links to external tools. We are actively seeking your input to understand your needs and ensure the toolkit is tailored to address them effectively.
</p>
</div>
</div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
How can this toolkit help me improve my environmental data products?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
The toolkit provides you with practical guidance and tools for conducting user research, designing user-centric interfaces, and evaluating the usability of your products.
</p>
</div>
</div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
How does focusing on users help when creating environmental data products and services?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
It helps to create data products and services that are relevant, easy to use, and tailored to specific needs. This leads to higher user engagement and better-informed decisions.
</p>
</div>
</div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-four">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four">
Is this toolkit only for experienced UX professionals?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-four" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
No, the toolkit is designed to be accessible to users with varying levels of UX experience. It includes resources for both beginners and experienced practitioners.
</p>
</div>
</div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-five">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start rounded-lg transition hover:text-gray-500 dark:text-neutral-200 dark:hover:text-neutral-400" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five">
How can I contribute to this toolkit?
<svg class="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
<svg class="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-five" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five">
<p class="text-gray-600 dark:text-neutral-400">
<p class="dark:text-neutral-400">
We encourage community contributions! You can share your own resources, case studies, or suggest improvements via our <a href="https://github.com/pautva/co-creation-toolkit" class="text-blue-600">GitHub repository</a>. You can also get in touch with us at <a href="mailto:ux@bgs.ac.uk" class="text-blue-600">ux@bgs.ac.uk</a>
</p>
</div>
Expand Down
Loading