fix(colors): avoid hard coded colors in GradientIcon (#6424)

### Description

As the title - to avoid hard coded "muted" colors here, I am using a
semi transparent mask.

### Test plan

no visual changes

### Related issues

- Related to RET-1293

### Backwards compatibility

Y

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [ ] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/icons/GradientIcon.tsx

@@ -10,6 +10,15 @@ interface Props {
 }
 
 export default function GradientIcon({ radius = 50, borderWidth = 1, children }: Props) {
+  const gradientBackgroundStyles = [
+    styles.background,
+    {
+      borderRadius: radius,
+      height: radius - borderWidth * 2,
+      width: radius - borderWidth * 2,
+    },
+  ]
+
   return (
     <View
       style={[
@@ -31,19 +40,14 @@ export default function GradientIcon({ radius = 50, borderWidth = 1, children }:
         />
       )}
       <LinearGradient
-        colors={['#e8fbf2', '#fffaea']}
+        colors={[Colors.gradientBorderLeft, Colors.gradientBorderRight]}
         locations={[0.1085, 1]}
         useAngle={true}
         angle={90}
-        style={[
-          styles.background,
-          {
-            borderRadius: radius,
-            height: radius - borderWidth * 2,
-            width: radius - borderWidth * 2,
-          },
-        ]}
+        style={gradientBackgroundStyles}
       />
+      {/* Apply a semi-transparent white overlay to tone down the brand gradient. react-native-linear-gradient doesn't support semi-transparent gradients with different colors. */}
+      <View style={[gradientBackgroundStyles, styles.mask]} />
       {children}
     </View>
   )
@@ -59,4 +63,8 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  mask: {
+    backgroundColor: Colors.background,
+    opacity: 0.9,
+  },
 })