[Gekidou] Avoid technical debt (#5795)

* Apply Status bar color

* useIsTablet hook instead of useSplitView in combination with the constant

* Constants clean up

app/utils/images/index.ts

@@ -50,7 +50,7 @@ export function getViewPortWidth(isReplyPost: boolean, tabletOffset = false) {
     let portraitPostWidth = Math.min(width, height) - VIEWPORT_IMAGE_OFFSET;
 
     if (tabletOffset) {
-        portraitPostWidth -= View.TABLET.SIDEBAR_WIDTH;
+        portraitPostWidth -= View.TABLET_SIDEBAR_WIDTH;
     }
 
     if (isReplyPost) {

app/utils/supported_server/index.ts

@@ -4,7 +4,7 @@
 import {IntlShape} from 'react-intl';
 import {Alert, AlertButton} from 'react-native';
 
-import ViewTypes from '@constants/view';
+import {SupportedServer} from '@constants';
 import {tryOpenURL} from '@utils/url';
 
 export function unsupportedServer(isSystemAdmin: boolean, intl: IntlShape) {
@@ -20,7 +20,7 @@ function unsupportedServerAdminAlert(intl: IntlShape) {
     const message = intl.formatMessage({
         id: 'mobile.server_upgrade.alert_description',
         defaultMessage: 'This server version is unsupported and users will be exposed to compatibility issues that cause crashes or severe bugs breaking core functionality of the app. Upgrading to server version {serverVersion} or later is required.',
-    }, {serverVersion: ViewTypes.RequiredServer.FULL_VERSION});
+    }, {serverVersion: SupportedServer.FULL_VERSION});
 
     const cancel: AlertButton = {
         text: intl.formatMessage({id: 'mobile.server_upgrade.dismiss', defaultMessage: 'Dismiss'}),

app/utils/theme/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {StyleSheet} from 'react-native';
+import {StatusBar, StyleSheet} from 'react-native';
 import tinyColor from 'tinycolor2';
 
 import {Preferences, Screens} from '@constants';
@@ -104,6 +104,9 @@ export function setNavigatorStyles(componentId: string, theme: Theme) {
             leftButtonColor: theme.sidebarHeaderTextColor,
             rightButtonColor: theme.sidebarHeaderTextColor,
         },
+        statusBar: {
+            backgroundColor: theme.sidebarBg,
+        },
         layout: {
             componentBackgroundColor: theme.centerChannelBg,
         },
@@ -114,6 +117,8 @@ export function setNavigatorStyles(componentId: string, theme: Theme) {
             color: theme.sidebarHeaderTextColor,
         };
     }
+    const isDark = tinyColor(theme.sidebarBg).isDark();
+    StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');
 
     mergeNavigationOptions(componentId, options);
 }

app/utils/user/index.ts

@@ -4,7 +4,7 @@
 import moment from 'moment-timezone';
 import {Alert} from 'react-native';
 
-import {General, Preferences} from '@constants';
+import {Permissions, Preferences} from '@constants';
 import {CustomStatusDuration} from '@constants/custom_status';
 import {UserModel} from '@database/models/server';
 import {DEFAULT_LOCALE, getLocalizedMessage, t} from '@i18n';
@@ -87,11 +87,11 @@ export function isRoleInRoles(roles: string, role: string): boolean {
 }
 
 export function isGuest(roles: string): boolean {
-    return isRoleInRoles(roles, General.SYSTEM_GUEST_ROLE);
+    return isRoleInRoles(roles, Permissions.SYSTEM_GUEST_ROLE);
 }
 
 export function isSystemAdmin(roles: string): boolean {
-    return isRoleInRoles(roles, General.SYSTEM_ADMIN_ROLE);
+    return isRoleInRoles(roles, Permissions.SYSTEM_ADMIN_ROLE);
 }
 
 export const getUsersByUsername = (users: UserModel[]) => {