Browse Source

feat(ui): use pink gradient for icon business (#25906)

Changing the color of the gradient for IconBusiness from purple to pink to be more dark-mode friendly
Stephen Cefali 3 years ago
parent
commit
7510916b25
1 changed files with 12 additions and 6 deletions
  1. 12 6
      static/app/icons/iconBusiness.tsx

+ 12 - 6
static/app/icons/iconBusiness.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
+import {keyframes, withTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Theme} from 'app/utils/theme';
+
 import SvgIcon from './svgIcon';
 
 type WrappedProps = {
   forwardRef: React.Ref<SVGSVGElement>;
+  theme: Theme;
 } & Props;
 
-const IconBusinessComponent = function IconBusinessComponent({
+function IconBusinessComponent({
   gradient = false,
   withShine = false,
   forwardRef,
+  theme,
   ...props
 }: WrappedProps) {
   return (
@@ -24,8 +28,8 @@ const IconBusinessComponent = function IconBusinessComponent({
         />
       </mask>
       <linearGradient id="icon-power-features-gradient">
-        <stop offset="0%" stopColor="#EA5BC2" />
-        <stop offset="100%" stopColor="#6148CE" />
+        <stop offset="0%" stopColor={theme.pink100} />
+        <stop offset="100%" stopColor={theme.pink300} />
       </linearGradient>
       <linearGradient id="icon-power-features-shine" gradientTransform="rotate(35)">
         <stop offset="0%" stopColor="rgba(255, 255, 255, 0)" />
@@ -46,7 +50,9 @@ const IconBusinessComponent = function IconBusinessComponent({
       )}
     </SvgIcon>
   );
-};
+}
+
+const ThemedIconBusiness = withTheme(IconBusinessComponent);
 
 type Props = {
   /**
@@ -61,7 +67,7 @@ type Props = {
 } & React.ComponentProps<typeof SvgIcon>;
 
 const IconBusiness = React.forwardRef((props: Props, ref: React.Ref<SVGSVGElement>) => (
-  <IconBusinessComponent {...props} forwardRef={ref} />
+  <ThemedIconBusiness {...props} forwardRef={ref} />
 ));
 
 IconBusiness.displayName = 'IconBusiness';