reorg

components/Badge/Badge.module.css

@@ -1,4 +1,4 @@
-.label {
+.badge {
   font-size: 0.75rem;
   color: rgba(var(--foreground-rgb), 0.6);
   border: 1px solid rgba(var(--foreground-rgb), 0.15);

components/Badge/Badge.tsx

@@ -0,0 +1,5 @@
+import styles from './Badge.module.css'
+
+export function Badge({ children }: { children: React.ReactNode }) {
+  return <span className={styles.badge}>{children}</span>
+}

components/Badge/index.tsx

@@ -0,0 +1 @@
+export * from './Badge'

components/Label/Label.tsx

@@ -1,5 +0,0 @@
-import styles from './Label.module.css'
-
-export function Label({ children }: { children: React.ReactNode }) {
-  return <span className={styles.label}>{children}</span>
-}

components/Label/index.tsx

@@ -1 +0,0 @@
-export * from './Label'

components/index.tsx

@@ -3,6 +3,6 @@ export * from './Footer'
 export * from './FormInline'
 export * from './Header'
 export * from './Input'
-export * from './Label'
+export * from './Badge'
 export * from './Select'
 export * from './TokenLogo'

features/prices/components/MarketData/MarketData.tsx

@@ -3,7 +3,7 @@
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import styles from './MarketData.module.css'
 import { usePrices } from '@/features/prices'
-import { Label } from '@/components'
+import { Badge } from '@/components'
 
 export function MarketData() {
   const { prices, isValidating, isLoading } = usePrices()
@@ -11,8 +11,8 @@ export function MarketData() {
   const feedbackClasses = isLoading
     ? 'isLoading'
     : isValidating
-    ? 'isValidating'
-    : ''
+      ? 'isValidating'
+      : ''
 
   return (
     <ul className={styles.marketData}>
@@ -27,7 +27,7 @@ export function MarketData() {
       <li>
         <p>
           1 Fet = {ratioFetToAsi} ASI
-          <Label>fixed</Label>
+          <Badge>fixed</Badge>
         </p>
         <p>
           <span className={`${styles.fiat} ${feedbackClasses}`}>
@@ -40,7 +40,7 @@ export function MarketData() {
           1 OCEAN ={' '}
           <span title={`${ratioOceanToAsi}`}>{ratioOceanToAsi.toFixed(6)}</span>{' '}
           ASI
-          <Label>fixed</Label>
+          <Badge>fixed</Badge>
         </p>
         <p>
           <span className={`${styles.fiat} ${feedbackClasses}`}>
@@ -53,7 +53,7 @@ export function MarketData() {
           1 AGIX ={' '}
           <span title={`${ratioAgixToAsi}`}>{ratioAgixToAsi.toFixed(5)}</span>{' '}
           ASI
-          <Label>fixed</Label>
+          <Badge>fixed</Badge>
         </p>
         <p>
           <span className={`${styles.fiat} ${feedbackClasses}`}>

features/strategies/styles/shared.module.css

@@ -14,6 +14,6 @@
   margin-bottom: 1.5rem;
   font-size: 1.2rem;
   color: rgb(var(--foreground-rgb-highlight));
-  min-height: 58px;
+  min-height: 66px;
   line-height: 1.75;
 }