Added new "white" theme
• Added: - new "white" theme which makes navigation bar white and sets appropriate styles for children
This commit is contained in:
parent
20f9e82959
commit
e40f7e6765
@ -120,13 +120,25 @@ class DisplayOptionsModal extends ImmutablePureComponent {
|
|||||||
</Text>
|
</Text>
|
||||||
<div className={[_s.d, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
|
<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
|
<ThemeBlock
|
||||||
title='Light'
|
title='Light'
|
||||||
value='light'
|
value='light'
|
||||||
checked={theme === 'light'}
|
checked={theme === 'light'}
|
||||||
onChange={this.handleOnThemeSelected}
|
onChange={this.handleOnThemeSelected}
|
||||||
style={{
|
style={{
|
||||||
borderColor: '#ececed',
|
borderColor: '#68D99F',
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
color: '#2d3436',
|
color: '#2d3436',
|
||||||
}}
|
}}
|
||||||
|
@ -171,7 +171,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
|
|||||||
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
|
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
|
||||||
|
|
||||||
<NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
|
<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(' ')} />
|
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
|
|||||||
backgroundColor='none'
|
backgroundColor='none'
|
||||||
icon='logo'
|
icon='logo'
|
||||||
title='Gab'
|
title='Gab'
|
||||||
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
|
iconClassName={[_s.mr5, _s.fillBrand].join(' ')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{
|
{
|
||||||
@ -64,8 +64,8 @@ class LoggedOutNavigationBar extends React.PureComponent {
|
|||||||
<Button
|
<Button
|
||||||
isNarrow
|
isNarrow
|
||||||
isOutline
|
isOutline
|
||||||
color='white'
|
color='brand'
|
||||||
backgroundColor='none'
|
backgroundColor='white'
|
||||||
href='/auth/sign_in'
|
href='/auth/sign_in'
|
||||||
className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
|
className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
|
||||||
>
|
>
|
||||||
@ -76,8 +76,8 @@ class LoggedOutNavigationBar extends React.PureComponent {
|
|||||||
|
|
||||||
<Button
|
<Button
|
||||||
isNarrow
|
isNarrow
|
||||||
color='brand'
|
color='white'
|
||||||
backgroundColor='white'
|
backgroundColor='brand'
|
||||||
href='/auth/sign_up'
|
href='/auth/sign_up'
|
||||||
className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
|
className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
|
||||||
>
|
>
|
||||||
|
@ -14,9 +14,10 @@ class PlaceholderLayout extends React.PureComponent {
|
|||||||
viewBox,
|
viewBox,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
|
const isLight = ['light', 'white'].indexOf(theme) > -1
|
||||||
const title = intl.formatMessage(messages.loading)
|
const title = intl.formatMessage(messages.loading)
|
||||||
const backgroundColor = theme !== 'light' ? '#555' : '#f3f3f3'
|
const backgroundColor = !isLight ? '#555' : '#f3f3f3'
|
||||||
const foregroundColor = theme !== 'light' ? '#888' : '#ecebeb'
|
const foregroundColor = !isLight ? '#888' : '#ecebeb'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContentLoader
|
<ContentLoader
|
||||||
|
@ -99,9 +99,11 @@ class Search extends React.PureComponent {
|
|||||||
searchInput: 1,
|
searchInput: 1,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const isLight = ['light', 'white'].indexOf(theme) > -1
|
||||||
|
|
||||||
const containerClasses = CX({
|
const containerClasses = CX({
|
||||||
d: 1,
|
d: 1,
|
||||||
searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
|
searchNavigation: (!highlighted && isInNav && isLight) || (isInNav && theme !== 'light'),
|
||||||
bgWhite: (highlighted && isInNav && theme === 'light'),
|
bgWhite: (highlighted && isInNav && theme === 'light'),
|
||||||
bgPrimary: !isInNav,
|
bgPrimary: !isInNav,
|
||||||
flexRow: 1,
|
flexRow: 1,
|
||||||
@ -109,7 +111,7 @@ class Search extends React.PureComponent {
|
|||||||
aiCenter: 1,
|
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 placeholder = !me ? 'Search Gab' : 'Search for people, groups or gabs'
|
||||||
const id = 'nav-search'
|
const id = 'nav-search'
|
||||||
|
|
||||||
|
@ -98,6 +98,7 @@ export const FONT_SIZES = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const THEMES = [
|
export const THEMES = [
|
||||||
|
'white',
|
||||||
'light',
|
'light',
|
||||||
'muted',
|
'muted',
|
||||||
'black',
|
'black',
|
||||||
|
@ -113,7 +113,7 @@ Display.propTypes = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Display.defaultProps = {
|
Display.defaultProps = {
|
||||||
theme: 'light',
|
theme: 'white',
|
||||||
radiusSmallDisabled: true,
|
radiusSmallDisabled: true,
|
||||||
radiusCircleDisabled: true,
|
radiusCircleDisabled: true,
|
||||||
fontSize: 'normal',
|
fontSize: 'normal',
|
||||||
|
@ -73,6 +73,17 @@
|
|||||||
--radius-small: 0 !important;
|
--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'] {
|
:root[theme='muted'] {
|
||||||
--solid_color_primary: #222 !important;
|
--solid_color_primary: #222 !important;
|
||||||
--solid_color_primary-opaque:rgba(34, 34, 34, .6) !important;
|
--solid_color_primary-opaque:rgba(34, 34, 34, .6) !important;
|
||||||
@ -1026,6 +1037,10 @@ pre {
|
|||||||
background-color: var(--navigation_background);
|
background-color: var(--navigation_background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root[theme='white'] .bgNavigation {
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.bgNavigationBlend {
|
.bgNavigationBlend {
|
||||||
background-color: var(--navigation_blend);
|
background-color: var(--navigation_blend);
|
||||||
}
|
}
|
||||||
@ -1072,6 +1087,15 @@ pre {
|
|||||||
background-color: var(--navigation_primary);
|
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 {
|
.searchNavigation {
|
||||||
background-color: var(--navigation_search);
|
background-color: var(--navigation_search);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user