@regantis-sdk/react-native-chat 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regantis-sdk/react-native-chat",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Regantis customer support chat SDK for React Native Android and iOS",
   "main": "index.js",
   "types": "index.d.ts",

package/src/RegantisChat.js

@@ -25,7 +25,8 @@ const { RegantisChatClient } = require('./client');
 
 const REGANTIS_LOGO_BLACK = require('../assets/regantis_logo_black.png');
 const REGANTIS_LOGO_WHITE = require('../assets/regantis_logo_white.png');
-const SOFT_GLOW = require('../assets/soft_glow.png');
+const WELCOME_BACKGROUND_LIGHT = require('../assets/welcome_background_light.png');
+const WELCOME_BACKGROUND_DARK = require('../assets/welcome_background_dark.png');
 
 const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '😐', '🤔', '😞', '😢', '😭', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
 
@@ -270,9 +271,6 @@ function makePalette(settings) {
     agentText: advanced ? settings.agent_text : (dark ? '#F5F6F7' : '#17181B'),
     danger: '#DF2917',
     heroBase: dark ? '#151B21' : '#EEF5FC',
-    heroGlowA: dark ? '#495398' : '#7689FF',
-    heroGlowB: dark ? '#227EA8' : '#60DED7',
-    heroGlowC: dark ? '#293038' : '#FFFFFF',
   };
 }
 
@@ -532,9 +530,6 @@ function RegantisChat(props) {
     palette.agentBubble,
     palette.agentText,
     palette.heroBase,
-    palette.heroGlowA,
-    palette.heroGlowB,
-    palette.heroGlowC,
   ]);
 
   const c = state.conversation || {};
@@ -795,9 +790,12 @@ function RegantisChat(props) {
     return (
       <View style={styles.screen}>
         <View style={styles.homeHero}>
-          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowA, { tintColor: palette.heroGlowA }]} resizeMode="stretch" />
-          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowB, { tintColor: palette.heroGlowB }]} resizeMode="stretch" />
-          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowC, { tintColor: palette.heroGlowC }]} resizeMode="stretch" />
+          <Image
+            pointerEvents="none"
+            source={palette.dark ? WELCOME_BACKGROUND_DARK : WELCOME_BACKGROUND_LIGHT}
+            style={styles.homeHeroBackground}
+            resizeMode="cover"
+          />
 
           <View style={styles.homeTop}>
             <View style={styles.homeTopLeft}>
@@ -1167,10 +1165,7 @@ function buildStyles(p) {
     errorText: { color: p.text, fontSize: 14, textAlign: 'center', marginBottom: 12 },
 
     homeHero: { position: 'relative', overflow: 'hidden', paddingHorizontal: 18, paddingTop: 24, paddingBottom: 28, backgroundColor: p.heroBase },
-    heroGlow: { position: 'absolute', opacity: p.dark ? 0.34 : 0.72 },
-    heroGlowA: { width: 390, height: 390, top: -235, left: -165 },
-    heroGlowB: { width: 360, height: 360, top: 20, right: -170, opacity: p.dark ? 0.26 : 0.62 },
-    heroGlowC: { width: 300, height: 300, right: -135, bottom: -185, opacity: p.dark ? 0.09 : 0.34 },
+    homeHeroBackground: { ...StyleSheet.absoluteFillObject, width: '100%', height: '100%' },
     homeTop: { minHeight: 42, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 },
     homeTopLeft: { flexDirection: 'row', alignItems: 'center', gap: 9 },
     homeBackIcon: { color: p.text, fontSize: 37, lineHeight: 38, marginTop: -5 },