fix: Update warning message style (#2938)

* fix: Update warning message style * fix: Format
decentraland · Oct 4, 2023 · 95f389c · 95f389c · vercel · Oct 4, 2023
1 parent 499a164
commit 95f389c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.css b/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.css
@@ -178,3 +178,13 @@
 .WorldListPage .worlds-storage {
   margin-bottom: 24px;
 }
+
+.WorldListPage .insufficient-storage-message {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background-color: var(--dark-two);
+  border-radius: 10px;
+  padding: 22px;
+  margin-bottom: 24px;
+}
diff --git a/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.tsx b/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.tsx
@@ -12,9 +12,7 @@ import {
   Dropdown,
   Empty,
   Icon as DCLIcon,
-  Popup,
-  Message,
-  MessageContent
+  Popup
 } from 'decentraland-ui'
 import { config } from 'config'
 import { isDevelopment } from 'lib/environment'
@@ -287,28 +285,27 @@ const WorldListPage: React.FC<Props> = props => {
       return null
     }
 
-    let warning = false
-    let error = false
     let messageContent: ReactNode
 
     if (dclWorldsStatus.status === DCLWorldsStatus.TO_BE_BLOCKED) {
-      warning = true
       messageContent = t('worlds_list_page.worlds_warning_message.to_be_blocked', {
         toBeBlockedAt: dclWorldsStatus.toBeBlockedAt.toLocaleDateString(),
         b: (text: string) => <b>{text}</b>
       })
     } else {
-      error = true
       messageContent = t('worlds_list_page.worlds_warning_message.blocked', {
         blockedAt: dclWorldsStatus.blockedAt.toLocaleDateString(),
         b: (text: string) => <b>{text}</b>
       })
     }
 
     return (
-      <Message warning={warning} error={error}>
-        <MessageContent>{messageContent}</MessageContent>
-      </Message>
+      <div className="insufficient-storage-message">
+        <div>
+          <Icon name="alert-warning" />
+        </div>
+        <div>{messageContent}</div>
+      </div>
     )
   }