Added new "white" theme

• Added:
- new "white" theme which makes navigation bar white and sets appropriate styles for children

app/javascript/gabsocial/components/modal/display_options_modal.js

@@ -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',
               }}

app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js

@@ -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(' ')} />
                   

app/javascript/gabsocial/components/navigation_bar/logged_out_navigation_bar.js

@@ -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(' ')}
               >

app/javascript/gabsocial/components/placeholder/placeholder_layout.js

@@ -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

app/javascript/gabsocial/components/search.js

@@ -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'
       

app/javascript/gabsocial/constants.js

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

app/javascript/gabsocial/containers/display.js

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

app/javascript/styles/global.css

@@ -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);
 }