[Gekidou] Add color to loading spinners (#5872)

* Add color to loading spinners

* Move style to stylesheet

app/components/loading/__snapshots__/index.test.tsx.snap

@@ -1,19 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loading  should match snapshot 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "flex": 1,
-        "justifyContent": "center",
-        "maxHeight": 40,
-        "padding": 20,
-      },
-      undefined,
-    ]
-  }
->
+<View>
   <View
     style={
       Array [

app/components/loading/index.tsx

@@ -8,28 +8,24 @@ import {StyleSheet, View, ViewStyle} from 'react-native';
 type LoadingProps = {
     containerStyle?: ViewStyle;
     style?: ViewStyle;
+    color?: string;
 }
 
-const Loading = ({containerStyle, style}: LoadingProps) => {
+const Loading = ({containerStyle, style, color}: LoadingProps) => {
     return (
-        <View style={[styles.container, containerStyle]}>
+        <View style={containerStyle}>
             <LottieView
                 source={require('./spinner.json')}
                 autoPlay={true}
                 loop={true}
                 style={[styles.lottie, style]}
+                colorFilters={color ? [{color, keypath: 'Shape Layer 1'}] : undefined}
             />
         </View>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        padding: 20,
-        maxHeight: 40,
-    },
     lottie: {
         height: 32,
         width: 32,

app/screens/channel/failed_channels/index.tsx

@@ -5,12 +5,14 @@ import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import React, {useCallback, useState} from 'react';
 import {useIntl} from 'react-intl';
+import {StyleSheet} from 'react-native';
 
 import {retryInitialChannel} from '@actions/remote/retry';
 import FailedAction from '@components/failed_action';
 import Loading from '@components/loading';
 import {MM_TABLES} from '@constants/database';
 import {useServerUrl} from '@context/server';
+import {useTheme} from '@context/theme';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
 import type TeamModel from '@typings/database/models/servers/team';
@@ -19,9 +21,18 @@ type FailedChannelsProps = {
     team: TeamModel;
 }
 
+const style = StyleSheet.create({
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
 const FailedChannels = ({team}: FailedChannelsProps) => {
     const intl = useIntl();
     const serverUrl = useServerUrl();
+    const theme = useTheme();
     const [loading, setLoading] = useState(false);
 
     const title = intl.formatMessage({id: 'failed_action.something_wrong', defaultMessage: 'Something went wrong'});
@@ -37,7 +48,12 @@ const FailedChannels = ({team}: FailedChannelsProps) => {
     }, []);
 
     if (loading) {
-        return <Loading/>;
+        return (
+            <Loading
+                containerStyle={style.loadingContainer}
+                color={theme.buttonBg}
+            />
+        );
     }
 
     return (

app/screens/channel/failed_teams/index.tsx

@@ -8,10 +8,12 @@ import {retryInitialTeamAndChannel} from '@actions/remote/retry';
 import FailedAction from '@components/failed_action';
 import Loading from '@components/loading';
 import {useServerUrl} from '@context/server';
+import {useTheme} from '@context/theme';
 
 const FailedTeams = () => {
     const intl = useIntl();
     const serverUrl = useServerUrl();
+    const theme = useTheme();
     const [loading, setLoading] = useState(false);
 
     const title = intl.formatMessage({id: 'failed_action.something_wrong', defaultMessage: 'Something went wrong'});
@@ -27,7 +29,16 @@ const FailedTeams = () => {
     }, []);
 
     if (loading) {
-        return <Loading/>;
+        return (
+            <Loading
+                containerStyle={{
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                color={theme.buttonBg}
+            />
+        );
     }
 
     return (

app/screens/login/form.tsx

@@ -64,7 +64,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         marginRight: 10,
         padding: 0,
         top: -2,
-        flex: undefined,
     },
     loginButton: {
         marginTop: 25,

app/screens/mfa/index.tsx

@@ -76,7 +76,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         marginRight: 10,
         padding: 0,
         top: -2,
-        flex: undefined,
     },
     proceedButton: {
         marginTop: 32,

app/screens/server/form.tsx

@@ -67,7 +67,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         marginRight: 10,
         padding: 0,
         top: -2,
-        flex: undefined,
     },
     loading: {
         height: 20,