refactor(SLB-301): styling

AmazeeLabs · May 3, 2024 · c3da87c · c3da87c
1 parent faf98ca
commit c3da87c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx
@@ -29,7 +29,7 @@ export const AccordionItemText = {
         textContent: {
           markup: `
           <p>Rösti is a kind of fried potato cake served as a main course or side dish.</p>
-          <p> As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti.[20] There are many variants in Switzerland and outside the borders.[21] This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p>
+          <p> As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti. There are many variants in Switzerland and outside the borders. This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p>
         ` as Markup,
         },
       },

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
@@ -21,8 +21,8 @@ const accordionTheme: CustomFlowbiteTheme['accordion'] = {
   root: {
     base: 'divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700',
     flush: {
-      off: 'border-b',
-      on: 'border-b',
+      off: 'border-b last:border-0',
+      on: 'border-b last:border-0',
     },
   },
   content: {
@@ -32,7 +32,7 @@ const accordionTheme: CustomFlowbiteTheme['accordion'] = {
     arrow: {
       base: 'h-0 w-0',
     },
-    base: 'flex w-full items-center justify-between p-5 text-left font-medium text-gray-500 dark:text-gray-400',
+    base: 'flex w-full items-center justify-between p-4 pl-1 text-left font-normal text-lg text-gray-500 dark:text-gray-400',
     flush: {
       off: 'hover:bg-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-800',
       on: 'bg-transparent dark:bg-transparent',
@@ -62,7 +62,7 @@ export function BlockAccordion(props: BlockAccordionFragment) {
                 {item.icon && <AccordionIcon icon={item.icon} />} {item.title}
               </span>
             </Accordion.Title>
-            <Accordion.Content>
+            <Accordion.Content className="space-y-2">
               {item.textContent?.markup && (
                 <Html
                   plugins={[unorderedItems]}