refactor(ui): Use Chip-component

.env.example

@@ -1,4 +1,3 @@
 STOCK_SERVICE_HOST=http://localhost:7070
-STOCK_SERVICE_WS_HOST=localhost:7070
 POCKETBASE_URL=
 MAIL_SERVICE_HOST=http://localhost:8050

src/components/Stocks/StockPrice.component.tsx

@@ -1,18 +1,24 @@
+import {TrendingDown, TrendingUp} from '@mui/icons-material';
+import {Chip} from '@mui/material';
 import React from 'react';
 
-import {LabelBadge, type TLabelBadgeProps} from '@/components/Base';
+import {type TLabelBadgeProps} from '@/components/Base';
 import {Formatter} from '@/services';
 
 export type TStockPriceProps = {
   price: number;
   trend?: 'up' | 'down';
   currency?: string;
+  withIcon?: boolean;
 } & Pick<TLabelBadgeProps, 'boxProps'>;
 
-export const StockPrice: React.FC<TStockPriceProps> = ({price, trend, currency = 'EUR', boxProps}) => {
+export const StockPrice: React.FC<TStockPriceProps> = ({price, trend, withIcon = false, currency = 'EUR'}) => {
   return (
-    <LabelBadge color={trend ? (trend === 'up' ? 'success' : 'error') : 'primary'} {...boxProps}>
-      {Formatter.formatBalance(price, currency)}
-    </LabelBadge>
+    <Chip
+      variant="outlined"
+      icon={trend && withIcon ? trend === 'up' ? <TrendingUp /> : <TrendingDown /> : undefined}
+      color={trend ? (trend === 'up' ? 'success' : 'error') : 'primary'}
+      label={Formatter.formatBalance(price, currency)}
+    />
   );
 };

src/style/theme/Base.ts

@@ -52,7 +52,7 @@ export const components: Components<Theme> = {
             },
             style: {
               borderColor: colors.grey![200],
-              backgroundColor: colors.grey![100],
+              // backgroundColor: colors.grey![100],
               [`& .${chipClasses.label}`]: {
                 color: colors.grey![500],
               },
@@ -61,7 +61,7 @@ export const components: Components<Theme> = {
               },
               ...theme.applyStyles('dark', {
                 borderColor: colors.grey![700],
-                backgroundColor: colors.grey![800],
+                // backgroundColor: colors.grey![800],
                 [`& .${chipClasses.label}`]: {
                   color: colors.grey![300],
                 },