SOV-931: use Paragraph component for vertical tabs (#73)

* fix: use Paragraph component for vertical tabs

* fix: review comments

Author: creed-victor

.changeset/fast-sloths-press.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+SOV-931: use Paragraph component for vertical tabs

.prettierignore

@@ -1,3 +1,4 @@
+.changeset/
 build/
 node_modules/
 package-lock.json

packages/ui/src/1_atoms/Paragraph/Paragraph.module.css

@@ -1,5 +1,5 @@
 .paragraph {
-  @apply text-white m-0;
+  @apply m-0;
 
   /* SIZES ================================================================== */
   &.tiny {

packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css

@@ -4,12 +4,8 @@
   &.active, &:hover {
     @apply text-opacity-100;
   }
-
-  & p {
-    @apply text-base;
-  }
 
-  & small {
-    @apply block text-xs mt-2;
+  & .info {
+    @apply block mt-2;
   }
 }

packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Paragraph, ParagraphSize } from '../../../1_atoms';
 import { applyDataAttr } from '../../../utils';
 import { VerticalTabsItemButtonProps } from '../VerticalTabs.types';
 import styles from './VerticalTabItem.module.css';
@@ -22,8 +23,8 @@ export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
       data-active={active}
       onClick={onClick}
     >
-      <p className={styles.label}>{label}</p>
-      {infoText && <small className={styles.info}>{infoText}</small>}
+      <Paragraph size={ParagraphSize.base}>{label}</Paragraph>
+      {infoText && <Paragraph className={styles.info}>{infoText}</Paragraph>}
     </button>
   );
 };