Merge pull request #258 from sos-lapsikyla/felix/facelift

Mobile app slim facelift

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
+    <background android:drawable="@mipmap/ic_launcher_background"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
+    <background android:drawable="@mipmap/ic_launcher_background"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>

e2e/changePasswordTest.spec.ts

@@ -31,7 +31,7 @@ describe('changePassword', () => {
     await element(by.id('tabs.settings')).tap();
 
     await scrollDownAndTap(
-      'main.settings.account.password.button',
+      'main.settings.account.password.change',
       'main.settings.index.view',
     );
 

e2e/hideInactiveMentorsTest.spec.ts

@@ -37,6 +37,9 @@ describe('Hide inactive mentors', () => {
   });
   beforeEach(async () => {
     await APIDeleteAccounts();
+    await device.reloadReactNative();
+  });
+  afterEach(async () => {
     await forceLogout();
   });
 

e2e/logoutTest.spec.ts

@@ -10,7 +10,7 @@ import {
   signIn,
 } from './helpers';
 
-describe('Delete', () => {
+describe('Logout', () => {
   beforeAll(async () => {
     await device.launchApp();
   });

ios/ylitse/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,116 +1,116 @@
 {
   "images" : [
-	{
-      "size" : "20x20",
-      "idiom": "iphone",
-	  "filename" : "[email protected]",
-      "scale": "2x"
-    },
-	{
-      "size" : "20x20",
-      "idiom": "iphone",
-	  "filename" : "[email protected]",
-      "scale": "3x"
-    },
-	{
-      "size" : "20x20",
-      "idiom": "ipad",
-	  "filename" : "uusi-20.png",
-      "scale": "1x"
+    {
+      "filename" : "Icon-App-20x20@2x 1.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "size" : "20x20",
-      "idiom": "ipad",
-	  "filename" : "[email protected]",
-      "scale": "2x"
+      "filename" : "Icon-App-20x20@3x.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
-      "size" : "29x29",
+      "filename" : "Icon-App-29x29@2x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
+      "filename" : "Icon-App-29x29@3x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
-      "size" : "40x40",
+      "filename" : "Icon-App-40x40@2x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "size" : "40x40",
+      "filename" : "Icon-App-40x40@3x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
     },
     {
-      "size" : "60x60",
+      "filename" : "Icon-App-60x60@2x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
-      "size" : "60x60",
+      "filename" : "Icon-App-60x60@3x.png",
       "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "size" : "29x29",
+      "filename" : "Icon-App-29x29@1x.png",
       "idiom" : "ipad",
-      "filename" : "uusi-29.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
+      "filename" : "Icon-App-29x29@2x 1.png",
       "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "size" : "40x40",
+      "filename" : "Icon-App-40x40@1x.png",
       "idiom" : "ipad",
-      "filename" : "uusi-40.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "40x40"
     },
     {
-      "size" : "40x40",
+      "filename" : "Icon-App-40x40@2x 1.png",
       "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "size" : "76x76",
+      "filename" : "Icon-App-76x76@1x.png",
       "idiom" : "ipad",
-      "filename" : "uusi-76.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "76x76"
     },
     {
-      "size" : "76x76",
+      "filename" : "Icon-App-76x76@2x.png",
       "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "76x76"
     },
     {
-      "size" : "83.5x83.5",
+      "filename" : "Icon-App-83.5x83.5@2x.png",
       "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "83.5x83.5"
     },
     {
-      "size" : "1024x1024",
+      "filename" : "ylitse_vahemman_paddingia.png",
       "idiom" : "ios-marketing",
-      "filename" : "uusi-1024.png",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }

package.json

@@ -47,7 +47,7 @@
     "@react-native-community/eslint-config": "3.2.0",
     "@tsconfig/react-native": "2.0.3",
     "@types/jest": "29.5.0",
-    "@types/react": "18.0.33",
+    "@types/react": "18.2.0",
     "@types/react-redux": "7.1.25",
     "@types/react-test-renderer": "18.0.0",
     "@typescript-eslint/eslint-plugin": "5.57.1",

src/App.tsx

@@ -1,22 +1,18 @@
 import 'react-native-gesture-handler';
 
 import React from 'react';
-import RN from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import * as ReactRedux from 'react-redux';
 
 import Screens from './Screens';
 import * as state from './state';
 
 const App: React.FC = () => (
-  <RN.View style={styles.root}>
+  <SafeAreaProvider>
     <ReactRedux.Provider store={state.store}>
       <Screens />
     </ReactRedux.Provider>
-  </RN.View>
+  </SafeAreaProvider>
 );
 
-const styles = RN.StyleSheet.create({
-  root: { flex: 1 },
-});
-
 export default App;

src/Screens/Main/BuddyList/Button.tsx

@@ -10,7 +10,7 @@ import { getMentorByUserId } from '../../../state/reducers/mentors';
 
 import Card from '../../components/Card';
 import fonts from '../../components/fonts';
-import getBuddyColor from '../../components/getBuddyColor';
+import colors from '../../components/colors';
 
 type Props = {
   buddyId: string;
@@ -21,7 +21,6 @@ type Props = {
 const Button = ({ style, buddyId, name, onPress, ...viewProps }: Props) => {
   const onPressBuddy = () => onPress(buddyId);
   const hasNewMessages = useSelector(hasUnseen(buddyId));
-  const color = getBuddyColor(buddyId);
   const mentor = useSelector(getMentorByUserId(buddyId));
   const lastMessage = useSelector(getLastMessageByBuddyId(buddyId));
 
@@ -44,7 +43,7 @@ const Button = ({ style, buddyId, name, onPress, ...viewProps }: Props) => {
             {lastMessage}
           </RN.Text>
         </RN.View>
-        <RN.View style={[styles.blob, { backgroundColor: color }]}>
+        <RN.View style={[styles.blob]}>
           {hasNewMessages ? (
             <RN.View
               style={styles.newMessage}
@@ -54,10 +53,13 @@ const Button = ({ style, buddyId, name, onPress, ...viewProps }: Props) => {
           {mentor?.is_vacationing ? (
             <RN.Image
               source={require('../../images/umbrella-beach.svg')}
-              style={styles.vacationIcon}
+              style={[styles.icon, styles.vacationIcon]}
             />
           ) : (
-            <RN.Image source={require('../../images/balloon.svg')} />
+            <RN.Image
+              source={require('../../images/balloon.svg')}
+              style={styles.icon}
+            />
           )}
         </RN.View>
       </RN.TouchableOpacity>
@@ -96,6 +98,7 @@ const styles = RN.StyleSheet.create({
     justifyContent: 'center',
     alignSelf: 'stretch',
     minHeight: 80,
+    backgroundColor: colors.purplePale,
   },
   newMessage: {
     zIndex: 2,
@@ -107,6 +110,9 @@ const styles = RN.StyleSheet.create({
     right: 16,
     backgroundColor: 'yellow',
   },
+  icon: {
+    tintColor: colors.purple,
+  },
   vacationIcon: {
     width: 48,
     height: 48,

src/Screens/Main/BuddyList/FolderItem.tsx

@@ -31,11 +31,11 @@ export default FolderItem;
 const styles = RN.StyleSheet.create({
   button: {
     padding: 16,
-    backgroundColor: colors.lightestGray,
     paddingHorizontal: 32,
   },
   text: {
     ...fonts.largeBold,
+    color: colors.purple,
   },
   dot: {
     zIndex: 2,

src/Screens/Main/BuddyList/Title.tsx

@@ -65,7 +65,7 @@ const styles = RN.StyleSheet.create({
     ...fonts.titleLarge,
     ...textShadow,
     textAlign: 'center',
-    color: colors.deepBlue,
+    color: colors.darkestBlue,
   },
   kebabIconHighlight: {
     height: 32,
@@ -74,7 +74,7 @@ const styles = RN.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  kebabIcon: { tintColor: colors.deepBlue },
+  kebabIcon: { tintColor: colors.darkestBlue },
   dot: {
     zIndex: 2,
     borderRadius: 8,

src/Screens/Main/BuddyList/index.tsx

@@ -99,7 +99,7 @@ export default ({ navigation }: Props) => {
       />
       {isDropdownOpen && (
         <DropDown
-          style={[styles.dropdown, { top: height - 8 }]}
+          style={[styles.dropdown, { top: height - 16 }]}
           items={dropdownItems}
           testID={'main.chat.menu'}
           tintColor={colors.black}