From 8dd283d57e3076976e84d53ddade044ba35742d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Jur=C4=8Do?=
 <62913177+peterjurco@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:32:34 +0100
Subject: [PATCH] Style the Malicious script warning (#518)

---
 .../proposal-details.module.scss              | 53 +++++++++++++++----
 .../proposal-details/proposal-details.tsx     | 28 +++-------
 2 files changed, 51 insertions(+), 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
index 6fabba12..664e8ab3 100644
--- 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
index 1c2cda1b..359da348 100644
--- 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 });