theme: change the orange color to yellow

Author: jamaljsr

app/src/__tests__/components/loop/ChannelBalance.spec.tsx

@@ -40,8 +40,8 @@ describe('ChannelBalance component', () => {
     const { el, remote, local } = render(0.52);
     expect(el.children.length).toBe(3);
     expect(width(local)).toBe('52%');
-    expect(bgColor(local)).toBe('rgb(246, 107, 28)');
-    expect(bgColor(remote)).toBe('rgb(246, 107, 28)');
+    expect(bgColor(local)).toBe('rgb(255, 249, 23)');
+    expect(bgColor(remote)).toBe('rgb(255, 249, 23)');
   });
 
   it('should display a bad balance', () => {

app/src/components/base/shared.tsx

@@ -30,8 +30,8 @@ export const Badge = styled.span`
   margin-left: 10px;
   font-family: ${props => props.theme.fonts.open.light};
   font-size: ${props => props.theme.sizes.xxs};
-  color: ${props => props.theme.colors.orange};
-  border: 1px solid ${props => props.theme.colors.orange};
+  color: ${props => props.theme.colors.pink};
+  border: 1px solid ${props => props.theme.colors.pink};
   border-radius: 4px;
   padding: 3px 5px 5px;
   text-transform: lowercase;

app/src/components/common/StatusDot.tsx

@@ -8,7 +8,7 @@ const Styled = {
       color: ${props => props.theme.colors.green};
     }
     &.warn {
-      color: ${props => props.theme.colors.orange};
+      color: ${props => props.theme.colors.yellow};
     }
     &.error {
       color: ${props => props.theme.colors.pink};

app/src/components/loop/processing/SwapProgress.tsx

@@ -48,7 +48,7 @@ const Styled = {
     height: 1px;
     width: ${props => props.pct}%;
     background-color: ${props =>
-      props.state === SUCCESS ? props.theme.colors.green : props.theme.colors.orange};
+      props.state === SUCCESS ? props.theme.colors.green : props.theme.colors.yellow};
     transition: all 1s;
   `,
 };

app/src/components/theme.tsx

@@ -35,7 +35,7 @@ export interface Theme {
     offWhite: string;
     pink: string;
     green: string;
-    orange: string;
+    yellow: string;
     purple: string;
     overlay: string;
     gradient: string;
@@ -75,7 +75,7 @@ const theme: Theme = {
     offWhite: '#f5f5f5',
     pink: '#f5406e',
     green: '#46E80E',
-    orange: '#f66b1c',
+    yellow: '#fff917',
     purple: '#57038d',
     overlay: 'rgba(245,245,245,0.04)',
     gradient: 'linear-gradient(325.53deg, #252F4A 0%, #46547B 100%);',

app/src/util/balances.ts

@@ -48,6 +48,6 @@ export const statusToColor = (level: BalanceStatus, active: boolean, theme: Them
   if (!active) return theme.colors.gray;
 
   if (level === BalanceStatus.danger) return theme.colors.pink;
-  if (level === BalanceStatus.warn) return theme.colors.orange;
+  if (level === BalanceStatus.warn) return theme.colors.yellow;
   return theme.colors.green;
 };