set colours with constants

#69
yalla-coop · Oct 5, 2019 · d842d4f · d842d4f
1 parent 8220b52
commit d842d4f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 36 deletions.
diff --git a/src/components/Legend/index.js b/src/components/Legend/index.js
@@ -6,23 +6,14 @@ import {
   AnimateCircle,
   UseText,
 } from './Legend.styles';
-
-const colors = [
-  'A1:#ff80cc',
-  'A3:#9eebcf',
-  'B1:#96ccff',
-  'B2:#fbf1a9',
-  'B8:#ffb700',
-  'D1:#a463f2',
-  'D2:#ff6300',
-  'other:#fff',
-];
+import { useClassColor } from '../../constants/colors';
+import { useClassEnum } from '../../constants/rentalRecords';
 
 const createLegend = open => {
   if (open) {
-    return colors.map(color => (
-      <AnimateCircle color={color.split(':')[1]}>
-        <UseText>{color.split(':')[0]}</UseText>
+    return useClassEnum.map(useClass => (
+      <AnimateCircle color={useClassColor[useClass]}>
+        <UseText>{useClass}</UseText>
       </AnimateCircle>
     ));
   }

diff --git a/src/components/MapMarkers/MapMarkers.styles.js b/src/components/MapMarkers/MapMarkers.styles.js
@@ -1,15 +1,5 @@
 import styled from 'styled-components';
-
-const useClassColor = {
-  A1: '#ff80cc',
-  A3: '#9eebcf',
-  B1: '#96ccff',
-  B2: '#fbf1a9',
-  B8: '#ffb700',
-  D1: '#a463f2',
-  D2: '#ff6300',
-  Other: '#fff',
-};
+import { useClassColor } from '../../constants/colors';
 
 const PopupLabel = styled.div.attrs({
   className: 'b mb1',

diff --git a/src/components/MarkerIcon.js b/src/components/MarkerIcon.js
@@ -1,17 +1,7 @@
 import React from 'react';
+import { useClassColor } from '../constants/colors';
 
 export default ({ useClass }) => {
-  const useClassColor = {
-    A1: '#ff80cc',
-    A3: '#9eebcf',
-    B1: '#96ccff',
-    B2: '#fbf1a9',
-    B8: '#ffb700',
-    D1: '#a463f2',
-    D2: '#ff6300',
-    Other: '#fff',
-  };
-
   return (
     <svg
       width="80px"

diff --git a/src/constants/colors.js b/src/constants/colors.js
@@ -0,0 +1,39 @@
+export const appColors = {
+  BLACK: '#000',
+  NEAR_BLACK: '#111',
+  DARK_GRAY: '#333',
+  MID_GRAY: '#555',
+  GRAY: '#777',
+  LIGHT_GRAY: '#aaa',
+  WHITE: '#f4f4f4',
+  DARK_RED: '#e7040f',
+  RED: '#ff4136',
+  LIGHT_RED: '#ff725c',
+  ORANGE: '#ff6300',
+  GOLD: '#ffb700',
+  YELLOW: '#ffd700',
+  LIGHT_YELLOW: '#fbf1a9',
+  PURPLE: '#5e2ca5',
+  LIGHT_PURPLE: '#a463f2',
+  DARK_PINK: '#d5008f',
+  PINK: '#ff41b4',
+  LIGHT_PINK: '#ff80cc',
+  DARK_GREEN: '#137752',
+  GREEN: '#19a974',
+  LIGHT_GREEN: '#9eebcf',
+  NAVY: '#001b44',
+  DARK_BLUE: '#00449e',
+  BLUE: '#357edd',
+  LIGHT_BLUE: '#96ccff',
+};
+
+export const useClassColor = {
+  A1: appColors.LIGHT_PINK,
+  A3: appColors.LIGHT_GREEN,
+  B1: appColors.LIGHT_BLUE,
+  B2: appColors.LIGHT_YELLOW,
+  B8: appColors.GOLD,
+  D1: appColors.LIGHT_PURPLE,
+  D2: appColors.ORANGE,
+  Other: appColors.WHITE,
+};