feat(ui): update knowledge accordion styles

mateusfg7 · Mar 1, 2024 · 70f55fd · 70f55fd
1 parent 3e33cf2
commit 70f55fd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/app/about/sections/knowledge/accordion.tsx b/src/app/about/sections/knowledge/accordion.tsx
@@ -14,7 +14,7 @@ export const AccordionItem = React.forwardRef(
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => (
     <Accordion.Item
-      className="mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10"
+      className="mt-px border-b border-neutral-200 first:mt-0 last:border-none focus-within:relative focus-within:z-10 dark:border-neutral-800"
       {...props}
       ref={forwardedRef}
     >
@@ -33,7 +33,7 @@ export const AccordionTrigger = React.forwardRef(
   ) => (
     <Accordion.Header className="flex">
       <Accordion.Trigger
-        className="group flex flex-1 cursor-default items-center justify-between bg-neutral-200 p-4 py-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-300 dark:bg-neutral-950 hover:dark:bg-neutral-800 md:p-7"
+        className="group flex flex-1 cursor-default items-center justify-between py-7 text-lg leading-none outline-none transition-colors hover:cursor-pointer hover:text-neutral-900 hover:underline dark:hover:text-neutral-300"
         {...props}
         ref={forwardedRef}
       >
@@ -57,11 +57,11 @@ export const AccordionContent = React.forwardRef(
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => (
     <Accordion.Content
-      className="overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
+      className="overflow-hidden text-neutral-900 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown dark:text-neutral-300"
       {...props}
       ref={forwardedRef}
     >
-      <div className="p-4 py-7 md:p-7">{children}</div>
+      <div className="pb-7">{children}</div>
     </Accordion.Content>
   )
 )

diff --git a/src/app/about/sections/knowledge/index.tsx b/src/app/about/sections/knowledge/index.tsx
@@ -2,7 +2,7 @@
 
 import * as Accordion from '@radix-ui/react-accordion'
 import { TbTools } from 'react-icons/tb'
-import { ClosedCaptioning } from '@phosphor-icons/react/dist/ssr'
+import { Brain, ClosedCaptioning } from '@phosphor-icons/react/dist/ssr'
 
 import { knowledgeCategories } from './knowledge-categories'
 import {
@@ -14,9 +14,17 @@ import {
 
 export function Knowledge() {
   return (
-    <div>
+    <div className="space-y-3">
+      <div className="flex items-center justify-center gap-1 text-xl font-medium md:justify-start">
+        <Brain
+          size="1em"
+          className="text-neutral-600 dark:text-neutral-400"
+          weight="duotone"
+        />
+        <span>Knowledge</span>
+      </div>
       <Accordion.Root
-        className="z-0 w-full overflow-hidden rounded-3xl border border-neutral-200 bg-neutral-200/30 dark:border-neutral-950 dark:bg-neutral-950/30"
+        className="z-0 w-full hover:text-neutral-500 dark:hover:text-neutral-400"
         type="single"
         collapsible
       >