frontend: refactor message and remove small and title props

Title was never used, and small only in one place (Send) for the
noFeeTargets warning message.

Replaced small font in send View by using `<label>` element (most
other text elements use Label element on that page, so it shows
the smaller font size.

Tested by patching the api endpoint with:

```diff
diff --git a/frontends/web/src/api/account.ts b/frontends/web/src/api/account.ts
index cbef324..2d26f3347 100644
--- a/frontends/web/src/api/account.ts
+++ b/frontends/web/src/api/account.ts
@@ -20,6 +20,7 @@ import type { TDetailStatus } from './bitsurance';
 import type { SuccessResponse } from './response';
 import type { NonEmptyArray } from '@/utils/types';
 import { apiGet, apiPost } from '@/utils/request';
+// import { FeeTargets } from '@/routes/account/send/feetargets';

 export type NativeCoinCode = 'btc' | 'tbtc' | 'rbtc' | 'ltc' | 'tltc' | 'eth' | 'sepeth';

@@ -379,7 +380,7 @@ export type TFeeTargetList = {
 };

 export const getFeeTargetList = (code: AccountCode): Promise<TFeeTargetList> => {
-  return apiGet(`account/${code}/fee-targets`);
+  return apiGet(`account/${code}/fee-targets`).then(() => ({ defaultFeeTarget: 'custom', feeTargets: [] }));
 };
```

Author: thisconnect

frontends/web/src/components/message/message.module.css

@@ -18,24 +18,6 @@
     width: 100%;
 }
 
-.message .title {
-    margin: 0 0 var(--spacing-half) 0;
-}
-
-@media (max-width: 768px) {
-    .message {
-      --size-default: 14px
-    }
-    .message .title {
-        --size-subheader: 18px;
-    }
-}
-
-.message.small {
-    flex-shrink: 1;
-    font-size: var(--size-default);
-}
-
 .message img {
     margin-right: 4px;
     max-width: 30px;

frontends/web/src/components/message/message.tsx

@@ -52,8 +52,6 @@ const MessageIcon = ({ type, icon }: TMessageIconProps) => {
 type MessageProps = {
   className?: string;
   hidden?: boolean;
-  small?: boolean;
-  title?: string;
   type?: TMessageTypes;
   icon?: ReactNode;
   noIcon?: boolean;
@@ -63,8 +61,6 @@ type MessageProps = {
 export const Message = ({
   className = '',
   hidden,
-  small,
-  title,
   type = 'info',
   icon,
   noIcon = false,
@@ -76,16 +72,10 @@ export const Message = ({
   return (
     <div className={`
       ${styles[type] || ''}
-      ${small && styles.small || ''}
       ${className || ''}
     `.trim()}>
       {!noIcon && <MessageIcon type={type} icon={icon} />}
       <div className={styles.content}>
-        {title && (
-          <h2 className={`subTitle ${styles.title || ''}`}>
-            {title}
-          </h2>
-        )}
         {children}
       </div>
     </div>

frontends/web/src/routes/account/send/feetargets.tsx

@@ -193,8 +193,10 @@ export const FeeTargets = ({
         ) : (
           <div className={style.rowCustomFee}>
             { noFeeTargets ? (
-              <Message small type="warning">
-                {t('send.noFeeTargets')}
+              <Message type="warning">
+                <label>
+                  {t('send.noFeeTargets')}
+                </label>
               </Message>
             ) : null }
             <div className={style.column}>