From 6200cf54d39bd608d86978677815d97d26cfb2ef Mon Sep 17 00:00:00 2001
From: Nozomi Ichihara <31800566+nozomione@users.noreply.github.com>
Date: Mon, 18 Sep 2023 16:48:31 -0400
Subject: [PATCH] add the svg icon without the black fill and adjust the
 related components

---
 client/src/components/Icon.js        | 2 ++
 client/src/components/WarningCard.js | 3 ++-
 client/src/components/WarningText.js | 7 ++++++-
 client/src/images/warning-red.svg    | 3 +++
 4 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 client/src/images/warning-red.svg

diff --git a/client/src/components/Icon.js b/client/src/components/Icon.js
index 75cdc3b5..9f314fbb 100644
--- a/client/src/components/Icon.js
+++ b/client/src/components/Icon.js
@@ -21,6 +21,7 @@ import Search from '../images/search.svg'
 import Trashcan from '../images/trash-can.svg'
 import View from '../images/view.svg'
 import Warning from '../images/warning.svg'
+import WarningNoFill from '../images/warning-red.svg'
 import Twitter from '../images/twitter.svg'
 import Facebook from '../images/facebook.svg'
 import Instagram from '../images/instagram.svg'
@@ -47,6 +48,7 @@ export const SVGs = {
   Trashcan,
   View,
   Warning,
+  WarningNoFill,
   Twitter,
   Instagram,
   Facebook,
diff --git a/client/src/components/WarningCard.js b/client/src/components/WarningCard.js
index 040a565a..de140c78 100644
--- a/client/src/components/WarningCard.js
+++ b/client/src/components/WarningCard.js
@@ -8,12 +8,13 @@ export const WarningCard = ({ label, children }) => {
     <CardBandLarge
       align="center"
       elevation="small"
-      pad={{ top: 'large' }}
+      pad={{ top: 'xxlarge' }}
       width="100%"
     >
       <Box margin={{ bottom: 'medium' }}>
         <WarningText
           iconColor="error"
+          iconNoFill
           iconMargin="none"
           iconSize="24px"
           text={
diff --git a/client/src/components/WarningText.js b/client/src/components/WarningText.js
index 99ebb033..d931c9a2 100644
--- a/client/src/components/WarningText.js
+++ b/client/src/components/WarningText.js
@@ -8,6 +8,7 @@ export const WarningText = ({
   link = '',
   linkLable = '',
   iconColor = 'status-warning',
+  iconNoFill = false,
   iconMargin = { right: 'medium' },
   iconPad = { right: 'small' },
   iconSize = '16px',
@@ -21,7 +22,11 @@ export const WarningText = ({
       margin={{ top: 'small', bottom: 'medium' }}
     >
       <Box margin={iconMargin} pad={iconPad}>
-        <Icon color={iconColor} size={iconSize} name="Warning" />
+        <Icon
+          color={iconColor}
+          size={iconSize}
+          name={`Warning${iconNoFill ? 'NoFill' : ''}`}
+        />
       </Box>
       <Paragraph>
         {text} {lineBreak && <br />}
diff --git a/client/src/images/warning-red.svg b/client/src/images/warning-red.svg
new file mode 100644
index 00000000..7847b052
--- /dev/null
+++ b/client/src/images/warning-red.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 24L12 0L0 24H24ZM10.7143 20.3077V17.5385H13.2857V20.3077H10.7143ZM10.7143 15.6923H13.2857V10.1538H10.7143V15.6923Z" fill="#DB3B28"/>
+</svg>