Refactor color dropdown to use key 'name' instead of 'text'

ui/src/dashboards/constants/gaugeColors.js

@@ -2,62 +2,62 @@ export const MAX_THRESHOLDS = 3
 export const GAUGE_COLORS = [
   {
     hex: '#BF3D5E',
-    text: 'Ruby',
+    name: 'ruby',
   },
   {
     hex: '#DC4E58',
-    text: 'Fire',
+    name: 'fire',
   },
   {
     hex: '#F95F53',
-    text: 'Curacao',
+    name: 'curacao',
   },
   {
     hex: '#F48D38',
-    text: 'Tiger',
+    name: 'tiger',
   },
   {
     hex: '#FFB94A',
-    text: 'Pineapple',
+    name: 'pineapple',
   },
   {
     hex: '#FFD255',
-    text: 'Thunder',
+    name: 'thunder',
   },
   {
     hex: '#7CE490',
-    text: 'Honeydew',
+    name: 'honeydew',
   },
   {
     hex: '#4ED8A0',
-    text: 'Rainforest',
+    name: 'rainforest',
   },
   {
     hex: '#32B08C',
-    text: 'Viridian',
+    name: 'viridian',
   },
   {
     hex: '#4591ED',
-    text: 'Ocean',
+    name: 'ocean',
   },
   {
     hex: '#22ADF6',
-    text: 'Pool',
+    name: 'pool',
   },
   {
     hex: '#00C9FF',
-    text: 'Laser',
+    name: 'laser',
   },
   {
     hex: '#513CC6',
-    text: 'Planet',
+    name: 'planet',
   },
   {
     hex: '#7A65F2',
-    text: 'Star',
+    name: 'star',
   },
   {
     hex: '#9394FF',
-    text: 'Comet',
+    name: 'comet',
   },
 ]

ui/src/shared/components/ColorDropdown.js

@@ -55,7 +55,7 @@ class ColorDropdown extends Component {
             style={{backgroundColor: selected.hex}}
           />
           <div className="color-dropdown--name">
-            {selected.text}
+            {selected.name}
           </div>
           <span className="caret" />
         </div>
@@ -65,7 +65,7 @@ class ColorDropdown extends Component {
                 {colors.map((color, i) =>
                   <div
                     className={
-                      color.text === selected.text
+                      color.name === selected.name
                         ? 'color-dropdown--item active'
                         : 'color-dropdown--item'
                     }
@@ -77,7 +77,7 @@ class ColorDropdown extends Component {
                       style={{backgroundColor: color.hex}}
                     />
                     <span className="color-dropdown--name">
-                      {color.text}
+                      {color.name}
                     </span>
                   </div>
                 )}
@@ -94,13 +94,13 @@ const {arrayOf, bool, func, shape, string} = PropTypes
 ColorDropdown.propTypes = {
   selected: shape({
     hex: string.isRequired,
-    text: string.isRequired,
+    name: string.isRequired,
   }).isRequired,
   onChoose: func.isRequired,
   colors: arrayOf(
     shape({
       hex: string.isRequired,
-      text: string.isRequired,
+      name: string.isRequired,
     })
   ).isRequired,
   disabled: bool,

ui/src/style/components/color-dropdown.scss

@@ -83,6 +83,7 @@ $color-dropdown--circle: 14px;
   white-space: nowrap;
   font-size: 13px;
   font-weight: 600;
+  text-transform: capitalize;
 }
 .color-dropdown .color-dropdown--menu .fancy-scroll--container .fancy-scroll--track-v .fancy-scroll--thumb-v {
   @include gradient-v($g9-mountain,$g7-graphite);