Merge pull request #2146 from StoDevX/duplicate-gradients

Fix duplicated gradients

Author: hawkrives

source/views/home/edit/row.android.js

@@ -68,19 +68,31 @@ export class EditHomeRow extends React.PureComponent<Props> {
 
   render() {
     const {item, isFirst, isLast} = this.props
+    const tint = item.gradient ? item.gradient[0] : item.tint
+
     return (
       <View style={styles.row}>
-        <MenuIcon icon={this.props.item.icon} tint={item.tint} />
+        <MenuIcon icon={this.props.item.icon} tint={tint} />
 
-        <Text style={[styles.text, {color: item.tint}]}>{item.title}</Text>
+        <Text style={[styles.text, {color: tint}]}>{item.title}</Text>
 
         <Switch
           onValueChange={this.onToggleSwitch}
           value={this.props.isEnabled}
         />
 
-        <ArrowIcon dir="up" disabled={isFirst} onPress={this.onMoveUp} />
-        <ArrowIcon dir="down" disabled={isLast} onPress={this.onMoveDown} />
+        <ArrowIcon
+          dir="up"
+          disabled={isFirst}
+          onPress={this.onMoveUp}
+          tint={tint}
+        />
+        <ArrowIcon
+          dir="down"
+          disabled={isLast}
+          onPress={this.onMoveDown}
+          tint={tint}
+        />
       </View>
     )
   }
@@ -90,8 +102,9 @@ type ArrowIconProps = {
   dir: 'up' | 'down',
   disabled: boolean,
   onPress: () => any,
+  tint: string,
 }
-const ArrowIcon = ({dir, disabled, onPress}: ArrowIconProps) => {
+const ArrowIcon = ({dir, disabled, onPress, tint}: ArrowIconProps) => {
   const icon = `md-arrow-${dir}`
   const size = 24
 
@@ -107,7 +120,7 @@ const ArrowIcon = ({dir, disabled, onPress}: ArrowIconProps) => {
 
   return (
     <Touchable borderless={true} onPress={onPress}>
-      <IonIcon name={icon} size={size} style={styles.icon} />
+      <IonIcon name={icon} size={size} style={[styles.icon, {color: tint}]} />
     </Touchable>
   )
 }

source/views/home/edit/row.ios.js

@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     fontSize: 18,
     color: c.black,
+    marginRight: 10,
   },
 })
 
@@ -161,11 +162,15 @@ export class EditHomeRow extends React.Component<Props, State> {
   render() {
     const width = this.props.width - ROW_HORIZONTAL_MARGIN * 2
 
+    const tint = this.props.data.gradient
+      ? this.props.data.gradient[0]
+      : this.props.data.tint
+
     return (
       <Animated.View style={[styles.row, this.state.style, {width}]}>
-        <MenuIcon icon={this.props.data.icon} tint={this.props.data.tint} />
+        <MenuIcon icon={this.props.data.icon} tint={tint} />
 
-        <Text style={[styles.text, {color: this.props.data.tint}]}>
+        <Text style={[styles.text, {color: tint}]}>
           {this.props.data.title}
         </Text>
 
@@ -174,7 +179,11 @@ export class EditHomeRow extends React.Component<Props, State> {
           value={this.props.isEnabled}
         />
 
-        <IonIcon name="ios-reorder" size={32} style={[styles.icon]} />
+        <IonIcon
+          name="ios-reorder"
+          size={32}
+          style={[styles.icon, {color: tint}]}
+        />
       </Animated.View>
     )
   }

source/views/views.js

@@ -110,15 +110,15 @@ export const allViews: ViewType[] = [
     title: 'Campus Dictionary',
     icon: 'open-book',
     tint: c.olive,
-    gradient: c.yellowToGoldLight,
+    gradient: c.pinkToHotpink,
   },
   {
     type: 'view',
     view: 'StudentOrgsView',
     title: 'Student Orgs',
     icon: 'globe',
     tint: c.periwinkle,
-    gradient: c.lightBlueToBlueDark,
+    gradient: c.tealToSeafoam,
   },
   {
     type: 'url',
@@ -127,15 +127,15 @@ export const allViews: ViewType[] = [
     title: 'Moodle',
     icon: 'graduation-cap',
     tint: c.cantaloupe,
-    gradient: c.yellowToGoldDark,
+    gradient: c.yellowToGoldLight,
   },
   {
     type: 'view',
     view: 'HelpView',
     title: 'Report A Problem',
     icon: 'help',
     tint: c.lavender,
-    gradient: c.purpleToIndigo,
+    gradient: c.seafoamToGrass,
   },
 ]