refactor: better file naming

index.js

@@ -5,7 +5,7 @@ import { enableScreens } from 'react-native-screens';
 import { AppRegistry, YellowBox } from 'react-native';
 import { App } from './src/App';
 import { name as appName } from './app.json';
-import { enableAndroidFontFix } from './src/style/AndroidTextFix';
+import { enableAndroidFontFix } from './src/style/android_text_fix';
 
 require('react-native').unstable_enableLogBox();
 

src/App.tsx

@@ -1,9 +1,9 @@
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { MobileApplication } from '@Lib/application';
-import { ApplicationGroup } from '@Lib/applicationGroup';
-import { navigationRef } from '@Lib/NavigationService';
+import { ApplicationGroup } from '@Lib/application_group';
+import { navigationRef } from '@Lib/navigation_service';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import { StyleKit, StyleKitContext } from '@Style/StyleKit';
+import { StyleKit, StyleKitContext } from '@Style/stylekit';
 import { StyleKitTheme } from '@Style/Themes/styled-components';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StatusBar } from 'react-native';

src/AppStack.tsx

@@ -4,8 +4,8 @@ import {
   AppStateEventType,
   AppStateType,
   TabletModeChangeData,
-} from '@Lib/ApplicationState';
-import { useHasEditor, useIsLocked } from '@Lib/snjsHooks';
+} from '@Lib/application_state';
+import { useHasEditor, useIsLocked } from '@Lib/snjs_helper_hooks';
 import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -24,8 +24,8 @@ import {
 import { MainSideMenu } from '@Screens/SideMenu/MainSideMenu';
 import { NoteSideMenu } from '@Screens/SideMenu/NoteSideMenu';
 import { ICON_MENU } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
-import { getDefaultDrawerWidth } from '@Style/Util/getDefaultDrawerWidth';
+import { StyleKit } from '@Style/stylekit';
+import { getDefaultDrawerWidth } from '@Style/utils';
 import React, {
   useCallback,
   useContext,

src/ModalStack.tsx

@@ -22,7 +22,7 @@ import {
 import { ManagePrivileges } from '@Screens/Settings/ManagePrivileges';
 import { Settings } from '@Screens/Settings/Settings';
 import { ICON_CHECKMARK, ICON_CLOSE } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import React, { useContext } from 'react';
 import { Platform } from 'react-native';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';

src/lib/alert_service.ts

@@ -1,7 +1,7 @@
 import { MODAL_BLOCKING_ALERT } from '@Screens/screens';
 import { Alert, AlertButton } from 'react-native';
 import { ButtonType, DismissBlockingDialog, SNAlertService } from 'snjs';
-import { goBack, navigate } from './NavigationService';
+import { goBack, navigate } from './navigation_service';
 
 export class AlertService implements SNAlertService {
   blockingDialog(

src/lib/application.ts

@@ -9,18 +9,18 @@ import {
   SNComponentManager,
 } from 'snjs';
 import { DeinitSource } from 'snjs/dist/@types/types';
-import { AlertService } from './AlertService';
-import { ApplicationState } from './ApplicationState';
-import { BackupsService } from './BackupsService';
-import { ComponentGroup } from './componentGroup';
-import ComponentManager from './ComponentManager';
-import { EditorGroup } from './EditorGroup';
-import { InstallationService } from './InstallationService';
+import { AlertService } from './alert_service';
+import { ApplicationState } from './application_state';
+import { BackupsService } from './backups_service';
+import { ComponentGroup } from './component_group';
+import { ComponentManager } from './component_manager';
+import { EditorGroup } from './editor_group';
+import { InstallationService } from './installation_service';
 import { MobileDeviceInterface } from './interface';
-import { push } from './NavigationService';
-import { PreferencesManager } from './PreferencesManager';
-import { ReviewService } from './reviewService';
-import { SNReactNativeCrypto } from './SNReactNativeCrypto';
+import { push } from './navigation_service';
+import { PreferencesManager } from './preferences_manager';
+import { SNReactNativeCrypto } from './react_native_crypto';
+import { ReviewService } from './review_service';
 
 type MobileServices = {
   applicationState: ApplicationState;

src/lib/application_group.ts

@@ -4,12 +4,12 @@ import {
   SNApplicationGroup,
 } from 'snjs';
 import { MobileApplication } from './application';
-import { ApplicationState } from './ApplicationState';
-import { BackupsService } from './BackupsService';
-import { InstallationService } from './InstallationService';
+import { ApplicationState } from './application_state';
+import { BackupsService } from './backups_service';
+import { InstallationService } from './installation_service';
 import { MobileDeviceInterface } from './interface';
-import { PreferencesManager } from './PreferencesManager';
-import { ReviewService } from './reviewService';
+import { PreferencesManager } from './preferences_manager';
+import { ReviewService } from './review_service';
 
 export class ApplicationGroup extends SNApplicationGroup {
   constructor() {

src/lib/application_state.ts

@@ -28,7 +28,7 @@ import {
   StorageValueModes,
 } from 'snjs';
 import { MobileApplication } from './application';
-import { Editor } from './Editor';
+import { Editor } from './editor';
 
 const pjson = require('../../package.json');
 const { PlatformConstants } = NativeModules;

src/lib/component_manager.ts

@@ -1,10 +1,10 @@
-import { MobileTheme } from '@Style/StyleKit';
-import { objectToCss } from '@Style/Util/CSSParser';
+import { objectToCss } from '@Style/css_parser';
+import { MobileTheme } from '@Style/stylekit';
 import { Base64 } from 'js-base64';
 import { SNAlertService, SNComponent, SNComponentManager } from 'snjs';
 import { PermissionDialog } from 'snjs/dist/@types/services/component_manager';
 
-export default class ComponentManager extends SNComponentManager {
+export class ComponentManager extends SNComponentManager {
   private mobileActiveTheme?: MobileTheme;
 
   async presentPermissionsDialog(dialog: PermissionDialog) {

src/lib/editor_group.ts

@@ -1,6 +1,6 @@
 import { removeFromArray } from 'snjs';
 import { MobileApplication } from './application';
-import { Editor } from './Editor';
+import { Editor } from './editor';
 
 type EditorGroupChangeCallback = (editor?: Editor) => void;
 

src/lib/snjs_helper_hooks.ts

@@ -9,7 +9,7 @@ import {
 } from '@Screens/screens';
 import React, { useCallback, useEffect } from 'react';
 import { ApplicationEvent, ButtonType, ProtectedAction, SNNote } from 'snjs';
-import { Editor } from './Editor';
+import { Editor } from './editor';
 
 export const useSignedIn = (
   signedInCallback?: () => void,

src/screens/Authenticate/Authenticate.tsx

@@ -3,14 +3,14 @@ import { IoniconsHeaderButton } from '@Components/IoniconsHeaderButton';
 import { SectionedAccessoryTableCell } from '@Components/SectionedAccessoryTableCell';
 import { SectionedTableCell } from '@Components/SectionedTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
-import { AppStateType, PasscodeKeyboardType } from '@Lib/ApplicationState';
+import { AppStateType, PasscodeKeyboardType } from '@Lib/application_state';
 import { MobileDeviceInterface } from '@Lib/interface';
 import { useFocusEffect } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_AUTHENTICATE } from '@Screens/screens';
 import { ICON_CLOSE } from '@Style/icons';
-import { StyleKit, StyleKitContext } from '@Style/StyleKit';
+import { StyleKit, StyleKitContext } from '@Style/stylekit';
 import React, {
   useCallback,
   useContext,

src/screens/Authenticate/AuthenticatePrivileges.tsx

@@ -2,11 +2,11 @@ import { ButtonCell } from '@Components/ButtonCell';
 import { SectionedAccessoryTableCell } from '@Components/SectionedAccessoryTableCell';
 import { SectionedTableCell } from '@Components/SectionedTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
-import { AppStateType, PasscodeKeyboardType } from '@Lib/ApplicationState';
+import { AppStateType, PasscodeKeyboardType } from '@Lib/application_state';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_AUTHENTICATE_PRIVILEGES } from '@Screens/screens';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, {
   useCallback,
   useContext,

src/screens/Compose/ComponentView.styled.ts

@@ -1,5 +1,5 @@
 import { ICON_LOCK } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/Ionicons';
 import WebView from 'react-native-webview';

src/screens/Compose/ComponentView.tsx

@@ -1,4 +1,4 @@
-import { PrefKey } from '@Lib/PreferencesManager';
+import { PrefKey } from '@Lib/preferences_manager';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import React, {
   useCallback,

src/screens/Compose/Compose.tsx

@@ -1,11 +1,11 @@
-import { AppStateEventType } from '@Lib/ApplicationState';
-import { Editor } from '@Lib/Editor';
+import { AppStateEventType } from '@Lib/application_state';
+import { Editor } from '@Lib/editor';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { AppStackNavigationProp } from '@Root/AppStack';
 import { SCREEN_COMPOSE } from '@Screens/screens';
 import { ICON_ALERT, ICON_LOCK } from '@Style/icons';
-import { StyleKit, StyleKitContext } from '@Style/StyleKit';
+import { StyleKit, StyleKitContext } from '@Style/stylekit';
 import { lighten } from '@Style/utils';
 import React, {
   useCallback,

src/screens/InputModal/PasscodeInputModal.tsx

@@ -5,11 +5,11 @@ import {
 } from '@Components/SectionedOptionsTableCell';
 import { SectionedTableCell } from '@Components/SectionedTableCell';
 import { TableSection } from '@Components/TableSection';
-import { PasscodeKeyboardType, UnlockTiming } from '@Lib/ApplicationState';
+import { PasscodeKeyboardType, UnlockTiming } from '@Lib/application_state';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_INPUT_MODAL_PASSCODE } from '@Screens/screens';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, { useContext, useMemo, useRef, useState } from 'react';
 import { Keyboard, KeyboardType, Platform, TextInput } from 'react-native';
 import { Container, Input } from './InputModal.styled';

src/screens/InputModal/TagInputModal.tsx

@@ -5,7 +5,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_INPUT_MODAL_TAG } from '@Screens/screens';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, {
   useCallback,
   useContext,

src/screens/NoteHistory/NoteHistory.tsx

@@ -5,7 +5,7 @@ import {
   SCREEN_NOTE_HISTORY,
   SCREEN_NOTE_HISTORY_PREVIEW,
 } from '@Screens/screens';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, { useContext, useState } from 'react';
 import { Dimensions, Platform } from 'react-native';
 import {

src/screens/NoteHistory/NoteHistoryPreview.tsx

@@ -3,7 +3,7 @@ import { ApplicationContext } from '@Root/ApplicationContext';
 import { AppStackNavigationProp } from '@Root/AppStack';
 import { SCREEN_NOTE_HISTORY_PREVIEW } from '@Screens/screens';
 import { ELIPSIS } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import { useCustomActionSheet } from '@Style/useCustomActionSheet';
 import React, { useCallback, useContext, useLayoutEffect } from 'react';
 import { YellowBox } from 'react-native';

src/screens/Notes/NoteCell.tsx

@@ -1,4 +1,4 @@
-import { useDeleteNoteWithPrivileges } from '@Lib/snjsHooks';
+import { useDeleteNoteWithPrivileges } from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import {
   CustomActionSheetOption,

src/screens/Notes/NoteList.tsx

@@ -1,8 +1,8 @@
-import { AppStateEventType } from '@Lib/ApplicationState';
-import { useSignedIn } from '@Lib/snjsHooks';
+import { AppStateEventType } from '@Lib/application_state';
+import { useSignedIn } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, {
   useCallback,
   useContext,

src/screens/Notes/Notes.tsx

@@ -1,12 +1,12 @@
-import { AppStateType } from '@Lib/ApplicationState';
-import { PrefKey } from '@Lib/PreferencesManager';
-import { useSignedIn, useSyncStatus } from '@Lib/snjsHooks';
+import { AppStateType } from '@Lib/application_state';
+import { PrefKey } from '@Lib/preferences_manager';
+import { useSignedIn, useSyncStatus } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { AppStackNavigationProp } from '@Root/AppStack';
 import { SCREEN_NOTES } from '@Screens/screens';
 import { ICON_ADD } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import FAB from 'react-native-fab';
 import { CollectionSort, ContentType, Platform, SNNote } from 'snjs';

src/screens/Notes/OfflineBanner.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import { SCREEN_SETTINGS } from '@Screens/screens';
 import { ICON_FORWARD, ICON_USER } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import React from 'react';
 import {
   BoldText,

src/screens/Root.tsx

@@ -2,8 +2,8 @@ import {
   AppStateEventType,
   AppStateType,
   TabletModeChangeData,
-} from '@Lib/ApplicationState';
-import { useHasEditor, useIsLocked } from '@Lib/snjsHooks';
+} from '@Lib/application_state';
+import { useHasEditor, useIsLocked } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { AppStackNavigationProp } from '@Root/AppStack';
@@ -12,7 +12,7 @@ import {
   SCREEN_COMPOSE,
   SCREEN_NOTES,
 } from '@Screens/screens';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import { hexToRGBA } from '@Style/utils';
 import React, {
   useCallback,

src/screens/Settings/Sections/AuthSection.tsx

@@ -4,7 +4,7 @@ import { SectionedTableCell } from '@Components/SectionedTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
 import { ApplicationContext } from '@Root/ApplicationContext';
-import { StyleKitContext } from '@Style/StyleKit';
+import { StyleKitContext } from '@Style/stylekit';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Keyboard } from 'react-native';
 import {

src/screens/Settings/Sections/CompanySection.tsx

@@ -1,7 +1,7 @@
 import { ButtonCell } from '@Components/ButtonCell';
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
-import { ApplicationState } from '@Lib/ApplicationState';
+import { ApplicationState } from '@Lib/application_state';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import React, { useContext } from 'react';
 import { Platform, Share } from 'react-native';

src/screens/Settings/Sections/EncryptionSection.tsx

@@ -1,6 +1,6 @@
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
-import { useIsLocked } from '@Lib/snjsHooks';
+import { useIsLocked } from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import React, { useContext, useMemo } from 'react';
 import { ContentType, StorageEncryptionPolicies } from 'snjs';

src/screens/Settings/Sections/OptionsSection.tsx

@@ -3,8 +3,8 @@ import { SectionedAccessoryTableCell } from '@Components/SectionedAccessoryTable
 import { SectionedOptionsTableCell } from '@Components/SectionedOptionsTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
-import { PrefKey } from '@Lib/PreferencesManager';
-import { useSignedIn } from '@Lib/snjsHooks';
+import { PrefKey } from '@Lib/preferences_manager';
+import { useSignedIn } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';

src/screens/Settings/Sections/PasscodeSection.tsx

@@ -5,7 +5,7 @@ import {
 } from '@Components/SectionedOptionsTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
-import { UnlockTiming } from '@Lib/ApplicationState';
+import { UnlockTiming } from '@Lib/application_state';
 import { MobileDeviceInterface } from '@Lib/interface';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';

src/screens/Settings/Sections/PreferencesSection.tsx

@@ -1,7 +1,7 @@
 import { SectionedAccessoryTableCell } from '@Components/SectionedAccessoryTableCell';
 import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
-import { PrefKey } from '@Lib/PreferencesManager';
+import { PrefKey } from '@Lib/preferences_manager';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import React, { useContext, useMemo, useState } from 'react';
 import { CollectionSort } from 'snjs';

src/screens/Settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { useSignedIn } from '@Lib/snjsHooks';
+import { useSignedIn } from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_SETTINGS } from '@Screens/screens';

src/screens/SideMenu/MainSideMenu.tsx

@@ -1,9 +1,9 @@
-import { AppStateType } from '@Lib/ApplicationState';
+import { AppStateType } from '@Lib/application_state';
 import { useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { SCREEN_SETTINGS } from '@Screens/screens';
 import { ICON_BRUSH, ICON_SETTINGS } from '@Style/icons';
-import { MobileTheme, StyleKit, StyleKitContext } from '@Style/StyleKit';
+import { MobileTheme, StyleKit, StyleKitContext } from '@Style/stylekit';
 import {
   CustomActionSheetOption,
   useCustomActionSheet,

src/screens/SideMenu/NoteSideMenu.tsx

@@ -1,5 +1,5 @@
-import { Editor } from '@Lib/Editor';
-import { useDeleteNoteWithPrivileges } from '@Lib/snjsHooks';
+import { Editor } from '@Lib/editor';
+import { useDeleteNoteWithPrivileges } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { AppStackNavigationProp } from '@Root/AppStack';
@@ -19,7 +19,7 @@ import {
   ICON_SHARE,
   ICON_TRASH,
 } from '@Style/icons';
-import { StyleKit } from '@Style/StyleKit';
+import { StyleKit } from '@Style/stylekit';
 import { useCustomActionSheet } from '@Style/useCustomActionSheet';
 import React, {
   useCallback,

src/screens/SideMenu/SideMenuHero.tsx

@@ -1,5 +1,5 @@
 import { Circle } from '@Components/Circle';
-import { useOutOfSync, useSignedIn } from '@Lib/snjsHooks';
+import { useOutOfSync, useSignedIn } from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { ViewProps } from 'react-native';

src/style/StyleKit.ts

@@ -1,6 +1,6 @@
 import { MobileApplication } from '@Lib/application';
-import ComponentManager from '@Lib/ComponentManager';
-import CSSParser from '@Style/Util/CSSParser';
+import { ComponentManager } from '@Lib/component_manager';
+import CSSParser from '@Style/css_parser';
 import {
   DARK_CONTENT,
   getColorLuminosity,

src/style/Util/getDefaultDrawerWidth.ts

@@ -1,16 +0,0 @@
-import { Platform, ScaledSize } from 'react-native';
-
-export const getDefaultDrawerWidth = ({ height, width }: ScaledSize) => {
-  /*
-   * Default drawer width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/guidelines/patterns/navigation-drawer.html
-   */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
-  const maxWidth = isTablet ? 320 : 280;
-
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
-};

src/style/utils.ts

@@ -1,11 +1,27 @@
+import { Platform, ScaledSize } from 'react-native';
 import { isNullOrUndefined } from 'snjs';
-import { MobileTheme } from './StyleKit';
+import { MobileTheme } from './stylekit';
 /* eslint-disable no-bitwise */
 export const LIGHT_MODE_KEY = 'light';
 export const DARK_MODE_KEY = 'dark';
 export const LIGHT_CONTENT = 'light-content';
 export const DARK_CONTENT = 'dark-content';
 
+export const getDefaultDrawerWidth = ({ height, width }: ScaledSize) => {
+  /*
+   * Default drawer width is screen width - header height
+   * with a max width of 280 on mobile and 320 on tablet
+   * https://material.io/guidelines/patterns/navigation-drawer.html
+   */
+  const smallerAxisSize = Math.min(height, width);
+  const isLandscape = width > height;
+  const isTablet = smallerAxisSize >= 600;
+  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
+  const maxWidth = isTablet ? 320 : 280;
+
+  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+};
+
 export function statusBarColorForTheme(theme: MobileTheme) {
   if (isNullOrUndefined(theme.mobileContent.luminosity)) {
     throw Error('Theme luminocity should not be null');