Merge pull request #52 from SimformSolutionsPvtLtd/refactor/UNT-T23058_Improve_UI_of_Example_app_buttons

refactor: UNT-T23058: Improve UI of example app buttons

Author: mukesh-simform

assets/example.gif

@@ -1,5 +1,5 @@
-import React, {useCallback, useState} from 'react';
-import {StyleSheet, Text} from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import SpinnerButton from 'react-native-spinner-button';
 import styles from './styles/AppStyles';
 
@@ -20,9 +20,9 @@ const DefaultOrBallSpinnerButton: React.FC = () => {
       onPress={handleButtonPress}
       indicatorCount={10}
       gradientType={'linear'}
-      gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
-      gradientColoroffset={['0%', '29%', '67%', '100%']}
-      gradientColorAngle={90}
+      gradientColors={['#0186DA', '#B631A7']}
+      gradientColoroffset={['0%', '90%']}
+      gradientColorAngle={360}
       gradientRadialRadius={10}
       gradientButtonHeight={50}
       borderStyle={styles.borderStyle}>

example/App/DefaultOrBallSpinnerButton.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useState} from 'react';
-import {StyleSheet, Text} from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import SpinnerButton from 'react-native-spinner-button';
 import styles from './styles/AppStyles';
 
@@ -20,9 +20,9 @@ const PacmanSpinnerButton: React.FC = () => {
       spinnerType="PacmanIndicator"
       onPress={handleButtonPress}
       gradientType={'linear'}
-      gradientColors={['#893346', '#1aafb8', '#bf57c3', '#FF1361']}
-      gradientColoroffset={['0%', '29%', '67%', '100%']}
-      gradientColorAngle={90}
+      gradientColors={['#363553', '#903775', '#E8458B',]}
+      gradientColoroffset={['0%', '20%', '66%']}
+      gradientColorAngle={25}
       gradientRadialRadius={10}
       gradientButtonHeight={50}
       animateHeight={70}

example/App/PacmanSpinnerButton.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useState} from 'react';
-import {StyleSheet, Text} from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import SpinnerButton from 'react-native-spinner-button';
 import styles from './styles/AppStyles';
 
@@ -23,15 +23,15 @@ const SkypeSpinnerButton: React.FC = () => {
       }}
       onPress={handleButtonPress}
       gradientType={'Radial'}
-      gradientColors={['#44107A', '#FF1361', '#dead00', '#231557']}
-      gradientColoroffset={['0%', '29%', '67%', '100%']}
-      gradientColorAngle={90}
+      gradientColors={['#AAB6FB', '#30238B']}
+      gradientColoroffset={['0%', '100%']}
+      gradientColorAngle={0}
       gradientRadialRadius={10}
       gradientButtonHeight={50}
       radialRadiusx={'50%'}
       radialRadiusy={'50%'}
-      radialRadiusRX={'60%'}
-      radialRadiusRY={'40%'}>
+      radialRadiusRX={'50%'}
+      radialRadiusRY={'50%'}>
       <Text style={styles.buttonText}>Skype SpinnerButton</Text>
     </SpinnerButton>
   );