Added spinner on first load

components/FetchedDataSectionList.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import WebDataManager from "../utils/WebDataManager";
-import {Container, H3, Tab, TabHeading, Tabs, Text} from "native-base";
+import {Container, H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base";
 import CustomHeader from "./CustomHeader";
 import {RefreshControl, SectionList, View} from "react-native";
 import CustomMaterialIcon from "./CustomMaterialIcon";
@@ -50,7 +50,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      * Get the translation for the header in the current language
      * @return {string}
      */
-    getHeaderTranslation() : string {
+    getHeaderTranslation(): string {
         return "Header";
     }
 
@@ -152,10 +152,11 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      * No need to be overridden, has good defaults.
      *
      * @param text
+     * @param isSpinner
      * @param icon
      * @return {*}
      */
-    getEmptyRenderItem(text: string, icon: string) {
+    getEmptyRenderItem(text: string, isSpinner: boolean, icon: string) {
         return (
             <View>
                 <View style={{
@@ -165,11 +166,14 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                     height: 100,
                     marginBottom: 20
                 }}>
-                    <CustomMaterialIcon
+                    {isSpinner ?
-                        icon={icon}
+                        <Spinner/>
-                        fontSize={100}
+                        :
-                        width={100}
+                        <CustomMaterialIcon
-                        color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
+                            icon={icon}
+                            fontSize={100}
+                            width={100}
+                            color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
                 </View>
 
                 <H3 style={{
@@ -209,6 +213,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                         text: this.state.refreshing ?
                             i18n.t('general.loading') :
                             i18n.t('general.networkError'),
+                        isSpinner: this.state.refreshing,
                         icon: this.state.refreshing ?
                             'refresh' :
                             'access-point-network-off'
@@ -256,7 +261,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                 }
                 renderItem={({item, section}) =>
                     isEmpty ?
-                        this.getEmptyRenderItem(item.text, item.icon) :
+                        this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
                         this.getRenderItem(item, section, dataset)
                 }
                 style={{minHeight: 300, width: '100%'}}

native-base-theme/variables/platform.js

@@ -2,295 +2,295 @@
 
 import color from "color";
 
-import { Platform, Dimensions, PixelRatio } from "react-native";
+import {Dimensions, PixelRatio, Platform} from "react-native";
 
 const deviceHeight = Dimensions.get("window").height;
 const deviceWidth = Dimensions.get("window").width;
 const platform = Platform.OS;
 const platformStyle = undefined;
 const isIphoneX =
-platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
+    platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
 
 export default {
-  platformStyle,
+    platformStyle,
-  platform,
+    platform,
 
-  //Accordion
+    //Accordion
-  headerStyle: "#edebed",
+    headerStyle: "#edebed",
-  iconStyle: "#000",
+    iconStyle: "#000",
-  contentStyle: "#f5f4f5",
+    contentStyle: "#f5f4f5",
-  expandedIconStyle: "#000",
+    expandedIconStyle: "#000",
-  accordionBorderColor: "#d3d3d3",
+    accordionBorderColor: "#d3d3d3",
 
-  // Android
+    // Android
-  androidRipple: true,
+    androidRipple: true,
-  androidRippleColor: "rgba(256, 256, 256, 0.3)",
+    androidRippleColor: "rgba(256, 256, 256, 0.3)",
-  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
+    androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
-  btnUppercaseAndroidText: true,
+    btnUppercaseAndroidText: true,
 
-  // Badge
+    // Badge
-  badgeBg: "#ED1727",
+    badgeBg: "#ED1727",
-  badgeColor: "#fff",
+    badgeColor: "#fff",
-  badgePadding: platform === "ios" ? 3 : 0,
+    badgePadding: platform === "ios" ? 3 : 0,
 
-  // Button
+    // Button
-  btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
+    btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
-  btnTextColor: '#fff',
+    btnTextColor: '#fff',
-  btnDisabledBg: "#b5b5b5",
+    btnDisabledBg: "#b5b5b5",
-  buttonPadding: 6,
+    buttonPadding: 6,
-  get btnPrimaryBg() {
+    get btnPrimaryBg() {
-    return this.brandPrimary;
+        return this.brandPrimary;
-  },
-  get btnPrimaryColor() {
-    return this.inverseTextColor;
-  },
-  get btnInfoBg() {
-    return this.brandInfo;
-  },
-  get btnInfoColor() {
-    return this.inverseTextColor;
-  },
-  get btnSuccessBg() {
-    return this.brandSuccess;
-  },
-  get btnSuccessColor() {
-    return this.inverseTextColor;
-  },
-  get btnDangerBg() {
-    return this.brandDanger;
-  },
-  get btnDangerColor() {
-    return this.inverseTextColor;
-  },
-  get btnWarningBg() {
-    return this.brandWarning;
-  },
-  get btnWarningColor() {
-    return this.inverseTextColor;
-  },
-  get btnTextSize() {
-    return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
-  },
-  get btnTextSizeLarge() {
-    return this.fontSizeBase * 1.5;
-  },
-  get btnTextSizeSmall() {
-    return this.fontSizeBase * 0.8;
-  },
-  get borderRadiusLarge() {
-    return this.fontSizeBase * 3.8;
-  },
-  get iconSizeLarge() {
-    return this.iconFontSize * 1.5;
-  },
-  get iconSizeSmall() {
-    return this.iconFontSize * 0.6;
-  },
-
-  // Card
-  cardDefaultBg: "#fff",
-  cardBorderColor: "#ccc",
-  cardBorderRadius: 2,
-  cardItemPadding: platform === "ios" ? 10 : 12,
-
-  // CheckBox
-  CheckboxRadius: platform === "ios" ? 13 : 0,
-  CheckboxBorderWidth: platform === "ios" ? 1 : 2,
-  CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
-  CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
-  CheckboxIconSize: platform === "ios" ? 21 : 16,
-  CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
-  CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-  checkboxBgColor: "#E4202D",
-  checkboxSize: 20,
-  checkboxTickColor: "#fff",
-
-  // Color
-  brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
-  brandInfo: "#62B1F6",
-  brandSuccess: "#5cb85c",
-  brandDanger: "#d9534f",
-  brandWarning: "#f0ad4e",
-  brandDark: "#000",
-  brandLight: "#f4f4f4",
-
-  //Container
-  containerBgColor: "#fff",
-
-  //Date Picker
-  datePickerTextColor: "#000",
-  datePickerBg: "transparent",
-
-  // Font
-  DefaultFontSize: 16,
-  fontFamily: platform === "ios" ? "System" : "Roboto",
-  fontSizeBase: 15,
-  get fontSizeH1() {
-    return this.fontSizeBase * 1.8;
-  },
-  get fontSizeH2() {
-    return this.fontSizeBase * 1.6;
-  },
-  get fontSizeH3() {
-    return this.fontSizeBase * 1.4;
-  },
-
-  // Footer
-  footerHeight: 55,
-  footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-  footerPaddingBottom: 0,
-
-  // FooterTab
-  tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-  tabBarTextSize: platform === "ios" ? 14 : 11,
-  activeTab: platform === "ios" ? "#007aff" : "#fff",
-  sTabBarActiveTextColor: "#007aff",
-  tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
-  tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
-
-  // Header
-  toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
-  toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
-  toolbarHeight: platform === "ios" ? 64 : 56,
-  toolbarSearchIconSize: platform === "ios" ? 20 : 23,
-  toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
-  searchBarHeight: platform === "ios" ? 30 : 40,
-  searchBarInputHeight: platform === "ios" ? 30 : 50,
-  toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
-  toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
-  iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
-  get statusBarColor() {
-    return color(this.toolbarDefaultBg)
-      .darken(0.2)
-      .hex();
-  },
-  get darkenHeader() {
-    return color(this.tabBgColor)
-      .darken(0.03)
-      .hex();
-  },
-
-  // Icon
-  iconFamily: "Ionicons",
-  iconFontSize: platform === "ios" ? 30 : 28,
-  iconHeaderSize: platform === "ios" ? 33 : 24,
-
-  // InputGroup
-  inputFontSize: 17,
-  inputBorderColor: "#D9D5DC",
-  inputSuccessBorderColor: "#2b8339",
-  inputErrorBorderColor: "#ed2f2f",
-  inputHeightBase: 50,
-  get inputColor() {
-    return this.textColor;
-  },
-  get inputColorPlaceholder() {
-    return "#575757";
-  },
-
-  // Line Height
-  btnLineHeight: 19,
-  lineHeightH1: 32,
-  lineHeightH2: 27,
-  lineHeightH3: 22,
-  lineHeight: platform === "ios" ? 20 : 24,
-  listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
-
-  // List
-  listBg: "transparent",
-  listBorderColor: "#c9c9c9",
-  listDividerBg: "#f4f4f4",
-  listBtnUnderlayColor: "#DDD",
-  listItemPadding: platform === "ios" ? 10 : 12,
-  listNoteColor: "#808080",
-  listNoteSize: 13,
-
-  // Progress Bar
-  defaultProgressColor: "#E4202D",
-  inverseProgressColor: "#1A191B",
-
-  // Radio Button
-  radioBtnSize: platform === "ios" ? 25 : 23,
-  radioSelectedColorAndroid: "#E4202D",
-  radioBtnLineHeight: platform === "ios" ? 29 : 24,
-  get radioColor() {
-    return this.brandPrimary;
-  },
-
-  // Segment
-  segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-  segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
-  segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
-
-  // Spinner
-  defaultSpinnerColor: "#45D56E",
-  inverseSpinnerColor: "#1A191B",
-
-  // Tab
-  tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
-  topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-  topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
-  topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
-  topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
-
-  // Tabs
-  tabBgColor: "#F8F8F8",
-  tabFontSize: 15,
-
-  // Text
-  textColor: "#000",
-  inverseTextColor: "#fff",
-  noteFontSize: 14,
-  get defaultTextColor() {
-    return this.textColor;
-  },
-
-  // Title
-  titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
-  titleFontSize: platform === "ios" ? 17 : 19,
-  subTitleFontSize: platform === "ios" ? 11 : 14,
-  subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
-  titleFontColor: platform === "ios" ? "#000" : "#FFF",
-
-
-  // CUSTOM
-  customMaterialIconColor: "#5d5d5d",
-  fetchedDataSectionListErrorText : "#898989",
-
-  // PROXIWASH
-  proxiwashFinishedColor: "rgba(54,165,22,0.31)",
-  proxiwashReadyColor: "transparent",
-  proxiwashRunningColor: "rgba(94,104,241,0.3)",
-  proxiwashBrokenColor: "rgba(162,162,162,0.31)",
-  proxiwashErrorColor: "rgba(204,7,0,0.31)",
-
-  // Other
-  borderRadiusBase: platform === "ios" ? 5 : 2,
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-  contentPadding: 10,
-  dropdownLinkColor: "#414142",
-  inputLineHeight: 24,
-  deviceWidth,
-  deviceHeight,
-  isIphoneX,
-  inputGroupRoundedBorderRadius: 30,
-
-  //iPhoneX SafeArea
-  Inset: {
-    portrait: {
-      topInset: 24,
-      leftInset: 0,
-      rightInset: 0,
-      bottomInset: 34
     },
-    landscape: {
+    get btnPrimaryColor() {
-      topInset: 0,
+        return this.inverseTextColor;
-      leftInset: 44,
+    },
-      rightInset: 44,
+    get btnInfoBg() {
-      bottomInset: 21
+        return this.brandInfo;
+    },
+    get btnInfoColor() {
+        return this.inverseTextColor;
+    },
+    get btnSuccessBg() {
+        return this.brandSuccess;
+    },
+    get btnSuccessColor() {
+        return this.inverseTextColor;
+    },
+    get btnDangerBg() {
+        return this.brandDanger;
+    },
+    get btnDangerColor() {
+        return this.inverseTextColor;
+    },
+    get btnWarningBg() {
+        return this.brandWarning;
+    },
+    get btnWarningColor() {
+        return this.inverseTextColor;
+    },
+    get btnTextSize() {
+        return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
+    },
+    get btnTextSizeLarge() {
+        return this.fontSizeBase * 1.5;
+    },
+    get btnTextSizeSmall() {
+        return this.fontSizeBase * 0.8;
+    },
+    get borderRadiusLarge() {
+        return this.fontSizeBase * 3.8;
+    },
+    get iconSizeLarge() {
+        return this.iconFontSize * 1.5;
+    },
+    get iconSizeSmall() {
+        return this.iconFontSize * 0.6;
+    },
+
+    // Card
+    cardDefaultBg: "#fff",
+    cardBorderColor: "#ccc",
+    cardBorderRadius: 2,
+    cardItemPadding: platform === "ios" ? 10 : 12,
+
+    // CheckBox
+    CheckboxRadius: platform === "ios" ? 13 : 0,
+    CheckboxBorderWidth: platform === "ios" ? 1 : 2,
+    CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
+    CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
+    CheckboxIconSize: platform === "ios" ? 21 : 16,
+    CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
+    CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
+    checkboxBgColor: "#E4202D",
+    checkboxSize: 20,
+    checkboxTickColor: "#fff",
+
+    // Color
+    brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
+    brandInfo: "#62B1F6",
+    brandSuccess: "#5cb85c",
+    brandDanger: "#d9534f",
+    brandWarning: "#f0ad4e",
+    brandDark: "#000",
+    brandLight: "#f4f4f4",
+
+    //Container
+    containerBgColor: "#fff",
+
+    //Date Picker
+    datePickerTextColor: "#000",
+    datePickerBg: "transparent",
+
+    // Font
+    DefaultFontSize: 16,
+    fontFamily: platform === "ios" ? "System" : "Roboto",
+    fontSizeBase: 15,
+    get fontSizeH1() {
+        return this.fontSizeBase * 1.8;
+    },
+    get fontSizeH2() {
+        return this.fontSizeBase * 1.6;
+    },
+    get fontSizeH3() {
+        return this.fontSizeBase * 1.4;
+    },
+
+    // Footer
+    footerHeight: 55,
+    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+    footerPaddingBottom: 0,
+
+    // FooterTab
+    tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
+    tabBarTextSize: platform === "ios" ? 14 : 11,
+    activeTab: platform === "ios" ? "#007aff" : "#fff",
+    sTabBarActiveTextColor: "#007aff",
+    tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
+    tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
+
+    // Header
+    toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
+    toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
+    toolbarHeight: platform === "ios" ? 64 : 56,
+    toolbarSearchIconSize: platform === "ios" ? 20 : 23,
+    toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
+    searchBarHeight: platform === "ios" ? 30 : 40,
+    searchBarInputHeight: platform === "ios" ? 30 : 50,
+    toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
+    toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
+    iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
+    get statusBarColor() {
+        return color(this.toolbarDefaultBg)
+            .darken(0.2)
+            .hex();
+    },
+    get darkenHeader() {
+        return color(this.tabBgColor)
+            .darken(0.03)
+            .hex();
+    },
+
+    // Icon
+    iconFamily: "Ionicons",
+    iconFontSize: platform === "ios" ? 30 : 28,
+    iconHeaderSize: platform === "ios" ? 33 : 24,
+
+    // InputGroup
+    inputFontSize: 17,
+    inputBorderColor: "#D9D5DC",
+    inputSuccessBorderColor: "#2b8339",
+    inputErrorBorderColor: "#ed2f2f",
+    inputHeightBase: 50,
+    get inputColor() {
+        return this.textColor;
+    },
+    get inputColorPlaceholder() {
+        return "#575757";
+    },
+
+    // Line Height
+    btnLineHeight: 19,
+    lineHeightH1: 32,
+    lineHeightH2: 27,
+    lineHeightH3: 22,
+    lineHeight: platform === "ios" ? 20 : 24,
+    listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
+
+    // List
+    listBg: "transparent",
+    listBorderColor: "#c9c9c9",
+    listDividerBg: "#f4f4f4",
+    listBtnUnderlayColor: "#DDD",
+    listItemPadding: platform === "ios" ? 10 : 12,
+    listNoteColor: "#808080",
+    listNoteSize: 13,
+
+    // Progress Bar
+    defaultProgressColor: "#E4202D",
+    inverseProgressColor: "#1A191B",
+
+    // Radio Button
+    radioBtnSize: platform === "ios" ? 25 : 23,
+    radioSelectedColorAndroid: "#E4202D",
+    radioBtnLineHeight: platform === "ios" ? 29 : 24,
+    get radioColor() {
+        return this.brandPrimary;
+    },
+
+    // Segment
+    segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+    segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
+    segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
+    segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
+    segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
+    segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
+
+    // Spinner
+    defaultSpinnerColor: "#e42612",
+    inverseSpinnerColor: "#1A191B",
+
+    // Tab
+    tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
+    topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
+    topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
+    topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
+    topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
+
+    // Tabs
+    tabBgColor: "#F8F8F8",
+    tabFontSize: 15,
+
+    // Text
+    textColor: "#000",
+    inverseTextColor: "#fff",
+    noteFontSize: 14,
+    get defaultTextColor() {
+        return this.textColor;
+    },
+
+    // Title
+    titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
+    titleFontSize: platform === "ios" ? 17 : 19,
+    subTitleFontSize: platform === "ios" ? 11 : 14,
+    subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
+    titleFontColor: platform === "ios" ? "#000" : "#FFF",
+
+
+    // CUSTOM
+    customMaterialIconColor: "#5d5d5d",
+    fetchedDataSectionListErrorText: "#898989",
+
+    // PROXIWASH
+    proxiwashFinishedColor: "rgba(54,165,22,0.31)",
+    proxiwashReadyColor: "transparent",
+    proxiwashRunningColor: "rgba(94,104,241,0.3)",
+    proxiwashBrokenColor: "rgba(162,162,162,0.31)",
+    proxiwashErrorColor: "rgba(204,7,0,0.31)",
+
+    // Other
+    borderRadiusBase: platform === "ios" ? 5 : 2,
+    borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+    contentPadding: 10,
+    dropdownLinkColor: "#414142",
+    inputLineHeight: 24,
+    deviceWidth,
+    deviceHeight,
+    isIphoneX,
+    inputGroupRoundedBorderRadius: 30,
+
+    //iPhoneX SafeArea
+    Inset: {
+        portrait: {
+            topInset: 24,
+            leftInset: 0,
+            rightInset: 0,
+            bottomInset: 34
+        },
+        landscape: {
+            topInset: 0,
+            leftInset: 44,
+            rightInset: 44,
+            bottomInset: 21
+        }
     }
-  }
 };

native-base-theme/variables/platformDark.js

@@ -2,7 +2,7 @@
 
 import color from "color";
 
-import { Platform, Dimensions, PixelRatio } from "react-native";
+import {Dimensions, PixelRatio, Platform} from "react-native";
 
 const deviceHeight = Dimensions.get("window").height;
 const deviceWidth = Dimensions.get("window").width;
@@ -226,7 +226,7 @@ export default {
     segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
 
     // Spinner
-    defaultSpinnerColor: "#45D56E",
+    defaultSpinnerColor: "#e42612",
     inverseSpinnerColor: "#1A191B",
 
     // Tab
@@ -258,7 +258,7 @@ export default {
 
     // CUSTOM
     customMaterialIconColor: "#b3b3b3",
-    fetchedDataSectionListErrorText : "#acacac",
+    fetchedDataSectionListErrorText: "#acacac",
 
     // PROXIWASH
     proxiwashFinishedColor: "rgba(17,149,32,0.53)",