Skip to content

Commit

Permalink
fix: header colors and borders
Browse files Browse the repository at this point in the history
  • Loading branch information
tuliomir committed Sep 19, 2023
1 parent d610eb4 commit a7e98f2
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 38 deletions.
8 changes: 5 additions & 3 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import IconTabBar from './icon-font';
import { IS_MULTI_TOKEN, PRIMARY_COLOR, LOCK_TIMEOUT, PUSH_ACTION, INITIAL_TOKENS } from './constants';
import { IS_MULTI_TOKEN, LOCK_TIMEOUT, PUSH_ACTION, INITIAL_TOKENS } from './constants';
import { setSupportedBiometry } from './utils';
import {
lockScreen,
Expand Down Expand Up @@ -79,6 +79,7 @@ import UnregisterToken from './screens/UnregisterToken';
import ReceiveScreen from './screens/Receive';
import Settings from './screens/Settings';
import baseStyle from './styles/init';
import { COLORS, HathorTheme } from './styles/themes';

/**
* This Stack Navigator is exhibited when there is no wallet initialized on the local storage.
Expand Down Expand Up @@ -298,7 +299,7 @@ const TabNavigator = () => {
tabBarIcon: ({ focused }) => {
const { name } = route;
const iconName = tabBarIconMap[name];
const colorName = focused ? PRIMARY_COLOR : 'rgba(0, 0, 0, 0.5)';
const colorName = focused ? COLORS.primary : COLORS.textColorShadow;
return (<IconTabBar name={iconName} size={24} color={colorName} />);
},
tabBarStyle: {
Expand Down Expand Up @@ -712,9 +713,10 @@ const App = () => (
<Provider store={store}>
<SafeAreaView
edges={['top', 'right', 'left']}
style={{ flex: 1, backgroundColor: baseStyle.container.backgroundColor }}
style={{ flex: 1, backgroundColor: COLORS.backgroundColor }}
>
<NavigationContainer
theme={HathorTheme}
ref={navigationRef}
>
<RootStack />
Expand Down
4 changes: 3 additions & 1 deletion src/components/AmountTextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import { getAmountParsed, getIntegerAmount } from '../utils';
import { COLORS } from '../styles/themes';

class AmountTextInput extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -64,6 +65,7 @@ class AmountTextInput extends React.Component {
keyboardAppearance='dark'
keyboardType='numeric'
placeholder={placeholder}
placeholderTextColor={COLORS.midContrastDetail}
{...props}
/>
);
Expand All @@ -77,7 +79,7 @@ const style = StyleSheet.create({
fontSize: 32,
fontWeight: 'bold',
paddingVertical: 0,
color: 'black',
color: COLORS.textColor,
},
});

Expand Down
12 changes: 5 additions & 7 deletions src/components/HathorHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import SimpleButton from './SimpleButton';
import Logo from './Logo';
import chevronLeft from '../assets/icons/chevron-left.png';
import closeIcon from '../assets/icons/icCloseActive.png';
import baseStyle from '../styles/init';
import { HEADER_HEIGHT } from '../constants';
import { COLORS, STYLE } from '../styles/themes';

const HathorHeader = (props) => {
const renderBackButton = () => {
Expand Down Expand Up @@ -60,7 +59,7 @@ const HathorHeader = (props) => {

let extraStyle = {};
if (props.withBorder) {
extraStyle = { borderBottomWidth: 1 };
extraStyle = { borderBottomWidth: STYLE.borderWidth };
}

return (
Expand All @@ -76,12 +75,11 @@ const HathorHeader = (props) => {

const styles = StyleSheet.create({
wrapper: {
height: HEADER_HEIGHT,
height: STYLE.headerHeight,
flexDirection: 'row',
alignItems: 'center',
borderColor: '#eee',
alignItems: 'flex-end',
borderColor: COLORS.borderColor,
paddingHorizontal: 16,
backgroundColor: baseStyle.title.backgroundColor,
},
innerWrapper: {
flex: 1,
Expand Down
13 changes: 7 additions & 6 deletions src/components/SimpleInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from 'react-native';

import InputLabel from './InputLabel';
import { COLORS, STYLE } from '../styles/themes';

const SimpleInput = (props) => {
const getInputField = () => (
Expand Down Expand Up @@ -69,8 +70,8 @@ const SimpleInput = (props) => {

const styles = StyleSheet.create({
inputContainer: {
borderBottomWidth: 1,
borderColor: '#eee',
borderBottomWidth: STYLE.borderWidth,
borderColor: COLORS.borderColor,
paddingBottom: 8,
},
input: {
Expand All @@ -79,7 +80,7 @@ const styles = StyleSheet.create({
fontSize: 14,
},
text: {
color: 'black',
color: COLORS.textColor,
fontSize: 14,
},
label: {
Expand All @@ -88,11 +89,11 @@ const styles = StyleSheet.create({
auxiliarText: {
marginTop: 8,
fontSize: 12,
color: 'rgba(0, 0, 0, 0.5)',
color: COLORS.textColorShadow,
},
error: {
// TODO define better color. Maybe also change underline color to red?
color: 'red',
// TODO Maybe also change underline color to red?
color: COLORS.errorTextColor,
},
});

Expand Down
16 changes: 7 additions & 9 deletions src/screens/Settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,9 @@ import {
import OfflineBar from '../components/OfflineBar';
import Logo from '../components/Logo';
import { HathorList, ListItem, ListMenu } from '../components/HathorList';
import { IS_MULTI_TOKEN, PRIMARY_COLOR } from '../constants';
import { getLightBackground } from '../utils';
import { IS_MULTI_TOKEN } from '../constants';
import CopyClipboard from '../components/CopyClipboard';
import baseStyle from '../styles/init';
import { COLORS } from '../styles/themes';

/**
* selectedToken {Object} Select token config {name, symbol, uid}
Expand Down Expand Up @@ -52,14 +51,14 @@ export class Settings extends React.Component {
marginBottom: 24,
},
networkView: {
backgroundColor: getLightBackground(0.1),
backgroundColor: COLORS.primaryOpacity10,
margin: 8,
padding: 8,
borderRadius: 8,
alignItems: 'center',
},
networkText: {
color: PRIMARY_COLOR,
color: COLORS.primary,
fontSize: 16,
fontWeight: 'bold',
},
Expand All @@ -68,7 +67,6 @@ export class Settings extends React.Component {
width: 100,
marginTop: 16,
marginBottom: 16,
backgroundColor: baseStyle.title.backgroundColor,
},
logo: {
height: 22,
Expand All @@ -78,7 +76,7 @@ export class Settings extends React.Component {

render() {
return (
<View style={{ flex: 1, backgroundColor: baseStyle.container.backgroundColor }}>
<View style={{ flex: 1, backgroundColor: COLORS.lowContrastDetail }}>
<ScrollView contentContainerStyle={this.style.scrollView}>
<View style={this.style.logoView}>
<Logo
Expand All @@ -100,7 +98,7 @@ export class Settings extends React.Component {
<ListItem
text={(
<View style={{ flex: 1 }}>
<Text style={{ marginBottom: 8, color: 'rgba(0, 0, 0, 0.5)', fontSize: 12 }}>{t`Connected to`}</Text>
<Text style={{ marginBottom: 8, color: COLORS.textColorShadow, fontSize: 12 }}>{t`Connected to`}</Text>
<Text
style={{ fontSize: 12 }}
adjustsFontSizeToFit
Expand Down Expand Up @@ -148,7 +146,7 @@ export class Settings extends React.Component {
<ListItem
text={(
<View style={{ flex: 1 }}>
<Text style={{ marginBottom: 8, color: 'rgba(0, 0, 0, 0.5)', fontSize: 12 }}>
<Text style={{ marginBottom: 8, color: COLORS.textColorShadow, fontSize: 12 }}>
{t`Unique app identifier`}
</Text>

Expand Down
17 changes: 5 additions & 12 deletions src/styles/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/

import { Platform, StyleSheet } from 'react-native';
import { ANDROID_BG_COLOR, IOS_BG_COLOR, PRIMARY_COLOR } from '../constants';

/**
* TODO: Obtain color from the OS scheme
* @see: https://reactnavigation.org/docs/5.x/themes/#using-the-operating-system-preferences
* @type {string}
*/
const defaultBackgroundColor = (Platform.OS === 'ios') ? IOS_BG_COLOR : ANDROID_BG_COLOR;
import { StyleSheet } from 'react-native';
import { COLORS } from './themes';

const baseStyle = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: defaultBackgroundColor,
backgroundColor: COLORS.backgroundColor,
},
buttonView: {
flex: 1,
Expand All @@ -30,15 +23,15 @@ const baseStyle = StyleSheet.create({
fontWeight: 'bold',
fontSize: 20,
marginBottom: 16,
backgroundColor: defaultBackgroundColor,
backgroundColor: COLORS.backgroundColor,
},
text: {
fontSize: 16,
lineHeight: 24,
marginBottom: 24,
},
link: {
color: PRIMARY_COLOR,
color: COLORS.primary,
fontWeight: 'bold',
},
});
Expand Down
98 changes: 98 additions & 0 deletions src/styles/themes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/**
* Copyright (c) Hathor Labs and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import { DefaultTheme } from '@react-navigation/native';
import { Platform } from 'react-native';

import { _PRIMARY_COLOR as PRIMARY_COLOR } from '../config';

/**
* Light theme color scheme
* @type {{
* midContrastDetail: string,
* errorBgColor: string,
* backgroundColor: string,
* borderColor: string,
* lowContrastDetail: string,
* textColorShadow: string,
* positiveBalanceColor: string,
* textColor: string,
* errorTextColor: string,
* tabBarBackground: string,
* primaryOpacity30: string,
* textColorShadowLight: string,
* primaryOpacity10: string,
* errorTextShadow: string,
* primary: string}}
* @property {string} backgroundColor The main background color
* @property {string} lowContrastDetail Low contrast with background: separator lines, containers...
* @property {string} midContrastDetail Medium contrast with background: placeholders, ...
* @property {string} borderColor Defines borders
* @property {string} textColor Maximum contrast with the background color, for reading
* @property {string} textColorShadow Washed down version of the text
* @property {string} textColorShadowLight More washed down version of the text
* @property {string} tabBarBackground Specific for tab bar selectors
* @property {string} positiveBalanceColor Represents a positive feedback for the user
* @property {string} errorBgColor For containers with error feedbacks
* @property {string} errorTextColor For texts with error messages
* @property {string} errorTextShadow Washed down version of error texts
* @property {string} primary Primary color, as set on the application config file
* @property {string} primaryOpacity10 Primary color washed down to 10% opacity
* @property {string} primaryOpacity30 Primary color washed down to 30% opacity
*/
export const COLORS = {
backgroundColor: '#fff',
lowContrastDetail: '#f7f7f7',
midContrastDetail: '#9e9e9e',
borderColor: '#eee',
textColor: '#000',
textColorShadow: 'rgba(0, 0, 0, 0.5)',
textColorShadowLight: 'rgba(0, 0, 0, 0.3)',
tabBarBackground: '#333',
positiveBalanceColor: '#0DA0A0',
errorBgColor: '#DE3535',
errorTextColor: '#F00',
errorTextShadow: `rgba(255, 0, 0, 0.7)`,
primary: PRIMARY_COLOR,
primaryOpacity10: `${PRIMARY_COLOR}1A`,
primaryOpacity30: `${PRIMARY_COLOR}4D`,
};

/**
* @type {{borderWidth: (number), headerHeight: number}}
* @property {number} borderWidth Defines border visibility throughout the app
* @property {number} headerHeight Defines the height of the screen title, for calculation purposes
*/
export const STYLE = {
borderWidth: Platform.OS === 'ios' ? 1.5 : 1, // 1 is barely visible on iOS
headerHeight: 56,
};
/**
* Defines the default colors for the application.
* Can be updated and will reflect the changes in real time on the application.
* @see https://reactnavigation.org/docs/themes/
* @type {{
* dark: boolean,
* colors: {
* border: string,
* notification: string,
* background: string,
* text: string,
* card: string,
* primary: string}
* }}
*/
export const HathorTheme = {
...DefaultTheme,
dark: false,
colors: {
...DefaultTheme.colors,
background: COLORS.backgroundColor,
text: COLORS.textColor,
border: COLORS.borderColor,
},
};

0 comments on commit a7e98f2

Please sign in to comment.