Style the Malicious script warning (#518)

api3dao · Dec 9, 2024 · b796a86 · b796a86
1 parent c28134c
commit b796a86
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 30 deletions.
diff --git a/src/pages/proposal-commons/proposal-details/proposal-details.module.scss b/src/pages/proposal-commons/proposal-details/proposal-details.module.scss
@@ -170,18 +170,53 @@
 .malicious {
   display: flex;
   align-items: flex-start;
-  background: $pink-color;
-  padding: 1.5rem 1.8rem;
-  border-radius: 3px;
-  margin-bottom: $space-xxl;
+  gap: 8px;
+  background: $color-action-error-10;
+  padding: 16px;
+  border-top: 1px solid $color-action-error-600;
+  border-bottom: 1px solid $color-action-error-600;
+  margin: 72px 0;
+
+  .warningText {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .warningTitle {
+    @include font-body-10;
+  }
+
+  .warningSubtitle {
+    @include font-body-12;
+  }
 
   svg {
-    display: none;
-    margin-top: 0.2ch;
-    margin-right: 0.5ch;
+    color: $color-action-error-600;
+    width: 18px;
+    height: 18px;
+  }
+
+  @media (min-width: $md) {
+    padding: 24px 32px;
+    margin: 64px 0;
+    justify-content: center;
+
+    .warningText {
+      flex-direction: row;
+      gap: 6px;
+    }
+
+    .warningTitle {
+      @include font-body-7;
+    }
+
+    .warningSubtitle {
+      @include font-body-9;
+    }
 
-    @media (min-width: $min-md) {
-      display: inline;
+    svg {
+      width: 22px;
+      height: 22px;
     }
   }
 }
diff --git a/src/pages/proposal-commons/proposal-details/proposal-details.tsx b/src/pages/proposal-commons/proposal-details/proposal-details.tsx
@@ -1,5 +1,5 @@
 import { BigNumber, utils } from 'ethers';
-import { ComponentProps, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useEnsName, Address } from 'wagmi';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -24,6 +24,7 @@ import { canVoteSelector } from '../../../logic/proposals/selectors';
 import NotFoundPage from '../../not-found';
 import { handleTransactionError, images, messages, useScrollToTop } from '../../../utils';
 import ExternalLink from '../../../components/external-link';
+import { ErrorCircleFillIcon } from '../../../components/icons';
 
 interface ProposalDescriptionProps {
   description: string;
@@ -158,10 +159,11 @@ const ProposalDetailsContent = (props: ProposalDetailsProps) => {
 
       {isMalicious && (
         <div className={styles.malicious}>
-          <WarningIcon aria-hidden />
-          <p>
-            <b>This proposal is potentially malicious.</b> A suspicious EVM script has been detected.
-          </p>
+          <ErrorCircleFillIcon />
+          <div className={styles.warningText}>
+            <div className={styles.warningTitle}>This proposal is potentially malicious.</div>
+            <div className={styles.warningSubtitle}>A suspicious EVM script has been detected.</div>
+          </div>
         </div>
       )}
 
@@ -262,22 +264,6 @@ const ProposalDetailsContent = (props: ProposalDetailsProps) => {
 
 export default ProposalDetailsPage;
 
-// TODO Move into ~/components/icons folder
-function WarningIcon(props: ComponentProps<'svg'>) {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12 20.7188C7.18594 20.7188 3.28125 16.8141 3.28125 12C3.28125 7.18594 7.18594 3.28125 12 3.28125C16.8141 3.28125 20.7188 7.18594 20.7188 12C20.7188 16.8141 16.8141 20.7188 12 20.7188Z"
-        fill="currentColor"
-      />
-      <path
-        d="M10.875 16.125C10.875 16.4234 10.9935 16.7095 11.2045 16.9205C11.4155 17.1315 11.7016 17.25 12 17.25C12.2984 17.25 12.5845 17.1315 12.7955 16.9205C13.0065 16.7095 13.125 16.4234 13.125 16.125C13.125 15.8266 13.0065 15.5405 12.7955 15.3295C12.5845 15.1185 12.2984 15 12 15C11.7016 15 11.4155 15.1185 11.2045 15.3295C10.9935 15.5405 10.875 15.8266 10.875 16.125ZM11.4375 13.5H12.5625C12.6656 13.5 12.75 13.4156 12.75 13.3125V6.9375C12.75 6.83437 12.6656 6.75 12.5625 6.75H11.4375C11.3344 6.75 11.25 6.83437 11.25 6.9375V13.3125C11.25 13.4156 11.3344 13.5 11.4375 13.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 function EnsName(props: { address: Address }) {
   const { address } = props;
   const { data } = useEnsName({ address });