add the svg icon without the black fill and adjust the related compon…

…ents
AlexsLemonade · Sep 18, 2023 · 6200cf5 · 6200cf5
1 parent 2ae9bd6
commit 6200cf5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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