Added new "white" theme

• Added:
- new "white" theme which makes navigation bar white and sets appropriate styles for children
This commit is contained in:
mgabdev 2020-11-03 15:12:24 -06:00
parent 20f9e82959
commit e40f7e6765
8 changed files with 52 additions and 12 deletions

View File

@ -120,13 +120,25 @@ class DisplayOptionsModal extends ImmutablePureComponent {
</Text>
<div className={[_s.d, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
<ThemeBlock
title='White'
value='white'
checked={theme === 'white'}
onChange={this.handleOnThemeSelected}
style={{
borderColor: '#ececed',
backgroundColor: '#fff',
color: '#2d3436',
}}
/>
<ThemeBlock
title='Light'
value='light'
checked={theme === 'light'}
onChange={this.handleOnThemeSelected}
style={{
borderColor: '#ececed',
borderColor: '#68D99F',
backgroundColor: '#fff',
color: '#2d3436',
}}

View File

@ -171,7 +171,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
<NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
<NavigationBarButton attrTitle='Dark/Muted/Light Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />
<NavigationBarButton attrTitle='Dark/Muted/Light/White Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />

View File

@ -36,7 +36,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
backgroundColor='none'
icon='logo'
title='Gab'
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
iconClassName={[_s.mr5, _s.fillBrand].join(' ')}
/>
{
@ -64,8 +64,8 @@ class LoggedOutNavigationBar extends React.PureComponent {
<Button
isNarrow
isOutline
color='white'
backgroundColor='none'
color='brand'
backgroundColor='white'
href='/auth/sign_in'
className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
>
@ -76,8 +76,8 @@ class LoggedOutNavigationBar extends React.PureComponent {
<Button
isNarrow
color='brand'
backgroundColor='white'
color='white'
backgroundColor='brand'
href='/auth/sign_up'
className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
>

View File

@ -14,9 +14,10 @@ class PlaceholderLayout extends React.PureComponent {
viewBox,
} = this.props
const isLight = ['light', 'white'].indexOf(theme) > -1
const title = intl.formatMessage(messages.loading)
const backgroundColor = theme !== 'light' ? '#555' : '#f3f3f3'
const foregroundColor = theme !== 'light' ? '#888' : '#ecebeb'
const backgroundColor = !isLight ? '#555' : '#f3f3f3'
const foregroundColor = !isLight ? '#888' : '#ecebeb'
return (
<ContentLoader

View File

@ -99,9 +99,11 @@ class Search extends React.PureComponent {
searchInput: 1,
})
const isLight = ['light', 'white'].indexOf(theme) > -1
const containerClasses = CX({
d: 1,
searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
searchNavigation: (!highlighted && isInNav && isLight) || (isInNav && theme !== 'light'),
bgWhite: (highlighted && isInNav && theme === 'light'),
bgPrimary: !isInNav,
flexRow: 1,
@ -109,7 +111,7 @@ class Search extends React.PureComponent {
aiCenter: 1,
})
const prependIconColor = (highlighted || !isInNav) ? 'brand' : 'white'
const prependIconColor = (highlighted || !isInNav || theme === 'white') ? 'brand' : 'white'
const placeholder = !me ? 'Search Gab' : 'Search for people, groups or gabs'
const id = 'nav-search'

View File

@ -98,6 +98,7 @@ export const FONT_SIZES = {
}
export const THEMES = [
'white',
'light',
'muted',
'black',

View File

@ -113,7 +113,7 @@ Display.propTypes = {
}
Display.defaultProps = {
theme: 'light',
theme: 'white',
radiusSmallDisabled: true,
radiusCircleDisabled: true,
fontSize: 'normal',

View File

@ -73,6 +73,17 @@
--radius-small: 0 !important;
}
:root[theme='white'] {
--navigation_background: var(--color_white);
--navigation_blend: #aaa;
--navigation_blend--light: #f2f2f2;
--navigation_primary: var(--color_black);
--navigation_brand: var(--color_brand);
--navigation_search: #F0F2F5;
--color_input_placeholder: var(--color_black-opaquest);
}
:root[theme='muted'] {
--solid_color_primary: #222 !important;
--solid_color_primary-opaque:rgba(34, 34, 34, .6) !important;
@ -1026,6 +1037,10 @@ pre {
background-color: var(--navigation_background);
}
:root[theme='white'] .bgNavigation {
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.bgNavigationBlend {
background-color: var(--navigation_blend);
}
@ -1072,6 +1087,15 @@ pre {
background-color: var(--navigation_primary);
}
:root[theme='white'] .navigationUnderlineActive {
color: var(--color_brand) !important;
}
:root[theme='white'] .navigationUnderlineActive:after {
bottom: 0;
background-color: var(--color_brand);
}
.searchNavigation {
background-color: var(--navigation_search);
}