Merge branch 'frontend-use-message-component-for-status'

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 type { 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/app.module.css

@@ -0,0 +1,16 @@
+.appContent {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100vh;
+    min-width: 0;
+    /* mobile viewport bug fix */
+    max-height: -webkit-fill-available;
+}
+
+@media (max-width: 900px) {
+    .appContent {
+        position: absolute;
+        width: 100%;
+    }
+}

frontends/web/src/app.tsx

@@ -32,17 +32,15 @@ import { notifyUser } from './api/system';
 import { ConnectedApp } from './connected';
 import { Alert } from './components/alert/Alert';
 import { Aopp } from './components/aopp/aopp';
-import { Banner } from './components/banner/banner';
 import { Confirm } from './components/confirm/Confirm';
 import { KeystoreConnectPrompt } from './components/keystoreconnectprompt';
-import { MobileDataWarning } from './components/mobiledatawarning';
 import { Sidebar } from './components/sidebar/sidebar';
-import { Update } from './components/update/update';
 import { RouterWatcher } from './utils/route';
 import { Darkmode } from './components/darkmode/darkmode';
 import { AuthRequired } from './components/auth/authrequired';
 import { WCSigningRequest } from './components/wallet-connect/incoming-signing-request';
 import { Providers } from './contexts/providers';
+import styles from './app.module.css';
 
 export const App = () => {
   const { t } = useTranslation();
@@ -160,11 +158,7 @@ export const App = () => {
             deviceIDs={deviceIDs}
             devices={devices}
           />
-          <div className="appContent flex flex-column flex-1" style={{ minWidth: 0 }}>
-            <Update />
-            <Banner msgKey="bitbox01" />
-            <Banner msgKey="bitbox02" />
-            <MobileDataWarning />
+          <div className={styles.appContent}>
             <WCSigningRequest />
             <Aopp />
             <KeystoreConnectPrompt />

frontends/web/src/components/banner/banner.tsx

@@ -48,11 +48,11 @@ export const Banner = ({ msgKey }: TBannerProps) => {
     <Status
       dismissible={banner.dismissible ? `banner-${msgKey}-${banner.id}` : ''}
       type={banner.type ? banner.type : 'warning'}>
-      { message[i18n.resolvedLanguage] || message[(i18n.options.fallbackLng as string[])[0]] }
+      {message[i18n.resolvedLanguage] || message[(i18n.options.fallbackLng as string[])[0]]}
       &nbsp;
-      { link && (
+      {link && (
         <A href={link.href} className={style.link}>
-          { link.text || t('clickHere') }
+          {link.text || t('clickHere')}
         </A>
       )}
     </Status>

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

@@ -0,0 +1,24 @@
+.contentWrapper {
+    margin:  auto;
+    max-width: var(--content-width);
+    padding: 0 var(--space-default);
+    width: 100%;
+}
+
+.contentWrapper > div:first-child {
+    margin-top: var(--space-half);
+}
+
+.contentWrapper > div {
+    margin-bottom: var(--space-half);
+}
+
+.contentWrapper div:last-child {
+    margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+    .contentWrapper {
+        padding: 0 var(--space-half);
+    }
+}

frontends/web/src/components/contentwrapper/contentwrapper.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2023 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ReactNode } from 'react';
+import style from './contentwrapper.module.css';
+
+type TProps = {
+    className?: string
+    children: ReactNode
+  }
+
+export const ContentWrapper = (({ className = '', children }: TProps) => {
+  return (
+    <div className={`${className} ${style.contentWrapper}`}>{children}</div>
+  );
+});

frontends/web/src/components/globalbanners/globalbanners.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import { Banner } from '@/components/banner/banner';
+import { MobileDataWarning } from '@/components/mobiledatawarning';
+import { Update } from '@/components/update/update';
+
+export const GlobalBanners = () => {
+  return (
+    <>
+      <Update />
+      <Banner msgKey="bitbox01" />
+      <Banner msgKey="bitbox02" />
+      <MobileDataWarning />
+    </>
+
+  );
+};

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

@@ -14,6 +14,7 @@
 
 .content {
     padding-top: 2px;
+    width: 100%;
 }
 
 .message .title {
@@ -32,7 +33,7 @@
 }
 
 .message img {
-    margin-right: 12px;
+    margin-right: 4px;
     max-width: 30px;
 }
 

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

@@ -17,9 +17,9 @@
 
 import { ReactNode } from 'react';
 import { StatusInfo, StatusSuccess, StatusWarning, StatusError } from '@/components/icon';
+import { TMessageTypes } from '@/utils/types';
 import styles from './message.module.css';
 
-type TMessageTypes = 'success' | 'info' | 'warning' | 'error';
 type TMessageIconProps = { type: TMessageTypes };
 
 const MessageIcon = ({ type }: TMessageIconProps) => {
@@ -50,6 +50,7 @@ type MessageProps = {
   small?: boolean;
   title?: string;
   type?: TMessageTypes;
+  noIcon?: boolean;
   children: ReactNode;
 }
 
@@ -58,14 +59,15 @@ export const Message = ({
   small,
   title,
   type = 'info',
+  noIcon = false,
   children,
 }: MessageProps) => {
   if (hidden) {
     return null;
   }
   return (
     <div className={`${styles[type]} ${small ? styles.small : ''}`}>
-      <MessageIcon type={type} />
+      {!noIcon && <MessageIcon type={type} />}
       <div className={styles.content}>
         {title && (
           <h2 className={`subTitle ${styles.title}`}>{title}</h2>

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

@@ -1,81 +1,23 @@
+.content {
+    margin-right: var(--space-eight);
+}
+
 .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;
-}
-
-.close svg {
-    width: 18px;
-    height: 18px;
-}
-
-.withCloseBtn .status::before {
-    content: "";
-    float: right;
-    height: 18px;
-    padding-bottom: 2px;
-    padding-left: var(--space-default);
-    width: 18px;
+    margin-left: auto;
 }
 
-@media (max-width: 1199px) {
-    .container {
-        padding: calc(var(--space-half) * 1.5);
-    }
+.closeButton img {
+    width: 16px;
+    height: 16px;
 }