Merge pull request #33 from NERC-EDS/dark-theme-fixes

updated dark theme style

Author: pautva

src/components/AnnouncementBanner.astro

@@ -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"
       >
         [email protected]
       </span>

src/components/CaseStudiesPreview.astro

@@ -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>
@@ -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

src/components/CoCreationMethodsList.astro

@@ -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">

src/components/CoDesignDefinition.astro

@@ -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>
@@ -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>
@@ -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>
@@ -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>

src/components/CommunityComponent.astro

@@ -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.
@@ -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>
@@ -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>
@@ -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"
@@ -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>

src/components/FAQ.astro

@@ -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 -->
@@ -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:[email protected]" class="text-blue-600">[email protected]</a>
               </p>
             </div>