frontend: use Message component for Status

to improve consistency & aesthetics, we'd like to use our
revamped Message component for our Status component.

Please note that our Banner component uses Status. Therefore,
with this change, Banner will also use Message component.

Author: shonsirsha

frontends/web/src/api/banners.ts

@@ -15,8 +15,8 @@
  */
 
 import { apiGet } from '@/utils/request';
-import { statusType } from '@/components/status/status';
 import { subscribeEndpoint, TUnsubscribe } from './subscribe';
+import { TMessageTypes } from '@/utils/types';
 
 export type TBannerInfo = {
   id: string;
@@ -26,7 +26,7 @@ export type TBannerInfo = {
     text?: string;
   };
   dismissible?: boolean;
-  type?: statusType;
+  type?: TMessageTypes;
 }
 
 export const getBanner = (msgKey: string): Promise<TBannerInfo> => {

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

@@ -14,6 +14,7 @@
 
 .content {
     padding-top: 2px;
+    width: 100%;
 }
 
 .message .title {

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

@@ -18,8 +18,8 @@
 import { ReactNode } from 'react';
 import { StatusInfo, StatusSuccess, StatusWarning, StatusError } from '@/components/icon';
 import styles from './message.module.css';
+import { TMessageTypes } from '@/utils/types';
 
-type TMessageTypes = 'success' | 'info' | 'warning' | 'error';
 type TMessageIconProps = { type: TMessageTypes };
 
 const MessageIcon = ({ type }: TMessageIconProps) => {

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

@@ -1,81 +1,27 @@
+.content {
+    margin-right: var(--space-half);
+}
+
 .container {
-    margin: 0 auto;
-    position: relative;
-    padding: calc(var(--space-default) * 1.5);
+    align-items: flex-start;
+    display: flex;
     width: 100%;
 }
 .container.withCloseBtn {
     padding-right: 60px;
 }
 
-:global(.padded) .container {
-    max-width: var(--content-width);
-}
-
-.status {
-    font-size: var(--size-subheader);
-    max-width: 800px;
-    text-align: left;
-}
-
-.success {
-    background-color: var(--color-success);
-}
-
-.warning {
-    background-color: var(--color-warning);
-}
-
-.info {
-    background-color: var(--color-info);
-}
-
-.success,
-.warning,
-.info,
-.success label, /* also force label elements to use color white */
-.warning label,
-.info label {
-    color: var(--color-alt);
-}
-
-.close-success {
-    background: var(--color-darkgreen);
-}
-
-.close-warning {
-    background: var(--color-swissred);
-}
-
-.close-info {
-    background: var(--color-darkblue);
-}
-
-.close {
+.closeButton {
+    background-color: transparent;
     border: none;
-    line-height: .5;
-    padding: var(--space-half);
-    position: absolute;
-    top: 0;
-    right: 0;
+    margin-left: auto;
 }
 
-.close svg {
-    width: 18px;
-    height: 18px;
+.closeButton img {
+    width: 16px;
+    height: 16px;
 }
 
-.withCloseBtn .status::before {
-    content: "";
-    float: right;
-    height: 18px;
-    padding-bottom: 2px;
-    padding-left: var(--space-default);
-    width: 18px;
-}
-
-@media (max-width: 1199px) {
-    .container {
-        padding: calc(var(--space-half) * 1.5);
-    }
-}
+.messageWrapper {
+    margin-bottom: calc(var(--spacing-default) * -1);
+}

frontends/web/src/components/status/status.tsx

@@ -17,31 +17,35 @@
 
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { getConfig, setConfig } from '@/utils/config';
-import { CloseXWhite } from '@/components/icon';
+import { CloseXDark, CloseXWhite } from '@/components/icon';
+import { useDarkmode } from '@/hooks/darkmode';
+import { Message } from '@/components/message/message';
 import style from './status.module.css';
+import { TMessageTypes } from '@/utils/types';
 
-export type statusType = 'success' | 'warning' | 'info';
 
 type TPRops = {
-    hidden?: boolean;
-    type?: statusType;
-    // used as keyName in the config if dismissing the status should be persisted, so it is not
-    // shown again. Use an empty string if it should be dismissible without storing it in the
-    // config, so the status will be shown again the next time.
-    dismissible?: string;
-    className?: string;
-    children: ReactNode;
+  hidden?: boolean;
+  type?: TMessageTypes;
+  // used as keyName in the config if dismissing the status should be persisted, so it is not
+  // shown again. Use an empty string if it should be dismissible without storing it in the
+  // config, so the status will be shown again the next time.
+  dismissible?: string;
+  className?: string;
+  children: ReactNode;
 }
 
 export const Status = ({
   hidden,
   type = 'warning',
   dismissible,
-  className,
+  className = '',
   children,
 }: TPRops) => {
   const [show, setShow] = useState(dismissible ? false : true);
 
+  const { isDarkMode } = useDarkmode();
+
   const checkConfig = useCallback(async () => {
     if (dismissible) {
       const config = await getConfig();
@@ -70,16 +74,21 @@ export const Status = ({
   }
 
   return (
-    <div className={[style.container, style[type], className ? className : '', dismissible ? style.withCloseBtn : ''].join(' ')}>
-      <div className={style.status}>
-        {children}
-        <button
-          hidden={!dismissible}
-          className={`${style.close} ${style[`close-${type}`]}`}
-          onClick={dismiss}>
-          <CloseXWhite />
-        </button>
-      </div>
+    <div className={`${style.messageWrapper} ${className}`}>
+      <Message type={type}>
+        <div className={style.container}>
+          <div className={style.content}>
+            {children}
+          </div>
+          <button
+            hidden={!dismissible}
+            className={style.closeButton}
+            onClick={dismiss}
+          >
+            {isDarkMode ? <CloseXWhite /> : <CloseXDark />}
+          </button>
+        </div>
+      </Message>
     </div>
   );
 };

frontends/web/src/utils/types.ts

@@ -28,3 +28,4 @@ export type KeysOf<T> = Array<keyof T>;
 export type ObjectButNotFunction = object & { prototype?: never; };
 
 export type TDeviceNameError = undefined | 'tooShort' | 'tooLong' | 'invalidChars'
+export type TMessageTypes = 'success' | 'info' | 'warning' | 'error';