fix(mobile-ui) ui fixes

react/features/base/ui/Tokens.js

@@ -37,6 +37,7 @@ export const colors = {
     surface13: '#495258',
     surface14: '#555555',
     surface15: '#474747',
+    surface16: '#131519',
 
     success04: '#189B55',
     success05: '#1EC26A',
@@ -72,6 +73,7 @@ export const colorMap = {
     ui13: 'surface14',
     ui14: 'surface15',
     ui15: 'surface12',
+    ui16: 'surface16',
 
     // Primary buttons
     action01: 'primary05',

react/features/conference/components/native/styles.js

@@ -1,5 +1,5 @@
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
-import { BoxModel, fixAndroidViewClipping } from '../../../base/styles';
+import { fixAndroidViewClipping } from '../../../base/styles';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
@@ -101,11 +101,11 @@ export default {
     lonelyMeetingContainer: {
         alignSelf: 'stretch',
         alignItems: 'center',
-        padding: BoxModel.padding * 2
+        padding: BaseTheme.spacing[3]
     },
 
     lonelyMessage: {
-        paddingVertical: 12
+        paddingVertical: BaseTheme.spacing[2]
     },
 
     pipButtonContainer: {

react/features/display-name/components/native/styles.js

@@ -1,22 +1,23 @@
 // @flow
 
-import { ColorPalette } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export default {
     displayNameBackdrop: {
         alignSelf: 'center',
-        backgroundColor: ColorPalette.darkBackground,
+        backgroundColor: BaseTheme.palette.ui16,
         borderRadius: 4,
-        paddingHorizontal: 16,
-        paddingVertical: 4
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1]
     },
 
     displayNamePadding: {
-        padding: 2
+        paddingHorizontal: BaseTheme.spacing[2],
+        paddingVertical: BaseTheme.spacing[1]
     },
 
     displayNameText: {
-        color: ColorPalette.white,
+        color: BaseTheme.palette.text01,
         fontSize: 14,
         fontWeight: 'bold'
     }

react/features/filmstrip/components/native/Thumbnail.js

@@ -226,9 +226,11 @@ class Thumbnail extends PureComponent<Props> {
                 style = { styles.thumbnailIndicatorContainer }>
                 { audioMuted && <AudioMutedIndicator /> }
                 { renderModeratorIndicator && <ModeratorIndicator />}
-                {renderDisplayName && <DisplayNameLabel
-                    contained = { true }
-                    participantId = { participantId } />}
+                {
+                    renderDisplayName && <DisplayNameLabel
+                        contained = { true }
+                        participantId = { participantId } />
+                }
             </Container>);
         }