feat(icons to use accessible teal): all icons to use accessible teal

ZopaPublic · Jan 27, 2023 · fbbee19 · fbbee19
1 parent a1f5423
commit fbbee19
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/src/components/atoms/Icon/Icon.md b/src/components/atoms/Icon/Icon.md
@@ -26,7 +26,7 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 <>
   <Icon variant={faCoffee} className="mr-6" />
-  <Icon variant={faCoffee} color={colors.brandDecorative} className="mr-6" />
+  <Icon variant={faCoffee} color={colors.brand} className="mr-6" />
   <Icon variant={faCoffee} pulse className="mr-6" />
   <Icon variant={faCoffee} spin className="mr-6" />
   <Icon variant={faCoffee} rotation={180} />

diff --git a/src/components/atoms/List/List/README.md b/src/components/atoms/List/List/README.md
@@ -6,7 +6,7 @@ Use this component to render a HTML unordered or ordered list of elements with o
 
 ```tsx static
 <List>
-  <List.Item icon={<Icon variant={faCoffee} color={colors.brandDecorative} />}>
+  <List.Item icon={<Icon variant={faCoffee} color={colors.brand} />}>
     <Text as="p">Item One</Text>
   </List.Item>
 </List>
@@ -24,7 +24,7 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 <>
   <List>
-    <List.Item icon={<Icon variant={faCoffee} color={colors.brandDecorative} />}>
+    <List.Item icon={<Icon variant={faCoffee} color={colors.brand} />}>
       <Text as="p" color={colors.greyDark}>
         Item
       </Text>

diff --git a/src/components/molecules/Help/Help.tsx b/src/components/molecules/Help/Help.tsx
@@ -95,7 +95,7 @@ const Help = ({
             <Card.Content>
               <FlexRow>
                 <FlexColCenter xs={3} align="center">
-                  <Icon variant={faPhone} color={colors.brandDecorative} size="3x" />
+                  <Icon variant={faPhone} color={colors.brand} size="3x" />
                 </FlexColCenter>
                 <FlexCol xs={9}>
                   <Card.Heading>{HelpLineDetails[helpLine].telephone.label}</Card.Heading>
@@ -117,7 +117,7 @@ const Help = ({
             <Card.Content>
               <FlexRow>
                 <FlexColCenter xs={3} align="center">
-                  <Icon variant={faEnvelope} color={colors.brandDecorative} size="3x" />
+                  <Icon variant={faEnvelope} color={colors.brand} size="3x" />
                 </FlexColCenter>
                 <FlexCol xs={9}>
                   <Card.Heading>contactus@zopa.com</Card.Heading>

diff --git a/src/components/organisms/Card/README.md b/src/components/organisms/Card/README.md
@@ -315,7 +315,7 @@ import { faPiggyBank, faChevronRight } from '@fortawesome/free-solid-svg-icons';
     <FlexCol xs={6}>
       <Card styling="action" layout="horizontal">
         <Card.LineItem>
-          <Icon variant={faPiggyBank} color={colors.brandDecorative} size="2x" className="ml-4" />
+          <Icon variant={faPiggyBank} color={colors.brand} size="2x" className="ml-4" />
         </Card.LineItem>
         <Card.Content className="py-6 pl-1">
           <Card.Heading className="mb-1">Card with additional line item</Card.Heading>

diff --git a/src/components/organisms/Carousel/CarouselSlideIcon/CarouselSlideIcon.tsx b/src/components/organisms/Carousel/CarouselSlideIcon/CarouselSlideIcon.tsx
@@ -5,6 +5,6 @@ import Icon, { IconProps } from '../../../atoms/Icon/Icon';
 
 const StyledIcon = styled(Icon).attrs<IconProps>({ className: 'm-4' })``;
 
-const SlideIcon = (props: IconProps) => <StyledIcon color={colors.brandDecorative} size="lg" {...props} />;
+const SlideIcon = (props: IconProps) => <StyledIcon color={colors.brand} size="lg" {...props} />;
 
 export default SlideIcon;
diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -272,7 +272,7 @@ library.add(fas);
 export const zopaTheme: AppTheme = {
   alert: {
     brand: {
-      icon: colors.brandDecorative,
+      icon: colors.brand,
       background: colors.brandLight,
       border: 'none',
       text: colors.greyDarkest,
@@ -346,7 +346,7 @@ export const zopaTheme: AppTheme = {
       headingSize: typography.sizes.heading.h6,
       textSize: typography.sizes.text.small,
       boxShadowStyle: 'none',
-      borderStyle: `1px solid ${colors.brandDecorative}`,
+      borderStyle: `1px solid ${colors.brand}`,
       backgroundStyle: `${colors.brandLight};`,
       borderRadius: '12px',
     },