fix animation color

src/components/Loader/index.js

@@ -25,10 +25,11 @@ const SvgWrapper = styled.svg`
 
 const CircleWrapper = styled.circle`
     ${props => props.isRoute && css`
-        stroke: ${colors.GRAY_LIGHT};
+        stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT};
     `}
 
     ${props => props.isPath && css`
+        stroke-width: ${props.transparentRoute ? '2px' : '1px'};
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
         animation: ${DASH} 1.5s ease-in-out infinite, ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite;
@@ -42,7 +43,7 @@ const StyledParagraph = styled(Paragraph)`
 `;
 
 const Loader = ({
-    className, text, isWhiteText = false, isSmallText, size = 100, animationColor,
+    className, text, isWhiteText = false, isSmallText, size = 100, animationColor, transparentRoute,
 }) => (
     <Wrapper className={className} size={size}>
         <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph>
@@ -54,18 +55,19 @@ const Loader = ({
                 r="20"
                 fill="none"
                 stroke=""
-                strokeWidth="1"
                 strokeMiterlimit="10"
                 isRoute
+                transparentRoute={transparentRoute}
             />
             <CircleWrapper
+                animationColor={animationColor}
                 cx="50"
                 cy="50"
                 r="20"
                 fill="none"
-                strokeWidth="1"
                 strokeMiterlimit="10"
                 isPath
+                transparentRoute={transparentRoute}
             />
         </SvgWrapper>
     </Wrapper>
@@ -77,6 +79,7 @@ Loader.propTypes = {
     className: PropTypes.string,
     text: PropTypes.string,
     animationColor: PropTypes.string,
+    transparentRoute: PropTypes.bool,
     size: PropTypes.number,
 };
 

src/components/Notification/components/NotificationButton/index.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
-import { BLUE_COLOR } from 'config/animations';
+import { WHITE_COLOR } from 'config/animations';
 import { getPrimaryColor } from 'utils/notification';
 import Loader from 'components/Loader';
 import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -68,7 +68,7 @@ const NotificationButton = ({
     >
         {isLoading && (
             <LoaderContent type={type}>
-                <Loader animationColor={BLUE_COLOR} size={30} />
+                <Loader transparentRoute animationColor={WHITE_COLOR} size={30} />
             </LoaderContent>
         )}
         {icon && (

src/config/animations.js

@@ -49,18 +49,9 @@ export const GREEN_COLOR = keyframes`
     }
 `;
 
-export const BLUE_COLOR = keyframes`
+export const WHITE_COLOR = keyframes`
-    100%, 0% {
+    0%, 100% {
-        stroke: ${colors.WHITE};
+        stroke: white;
-    }
-    40% {
-        stroke: ${colors.BLUE_SECONDARY};
-    }
-    66% {
-        stroke: ${colors.WHITE};
-    }
-    80%, 90% {
-        stroke: ${colors.WHITE};
     }
 `;