Adjusts styles and plays with colors.

Author: skellock

src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
 import dogImage from './fun-dog.jpg'
-import { cssProps } from '../../../platform'
+import { cssProps, colors } from '../../../platform'
 import { css } from 'glamor'
 
 const ROOT = cssProps({
   width: 300,
   borderStyle: 'solid',
-  borderWidth: 1,
+  borderWidth: 2,
+  borderColor: colors.line,
+  borderRadius: 4,
 })
 
 export function FunDog() {

src/renderer/features/example-using-tabs/header/header.tsx

@@ -9,8 +9,9 @@ const ROOT = compose(
   cssProps({
     textAlign: 'center',
     paddingTop: spacing.verySmall,
-    backgroundColor: colors.headerBg,
-    fontSize: fontSizes.small,
+    backgroundColor: colors.navBackground,
+    color: colors.navLine,
+    fontSize: fontSizes.medium,
   }),
 )
 

src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx

@@ -23,11 +23,18 @@ const KEY_2 = `${commandOrControlKey}+2`
 const KEY_3 = `${commandOrControlKey}+3`
 
 const ROOT = compose(
+  styles.windowDrag,
   styles.row,
   cssProps({
     paddingLeft: spacing.medium,
     paddingRight: spacing.medium,
-    backgroundColor: colors.headerBg,
+    paddingTop: spacing.small,
+    backgroundColor: colors.navBackground,
+    justifyContent: 'center',
+    borderBottom: 1,
+    borderBottomColor: colors.line,
+    borderBottomStyle: 'solid',
+    boxShadow: `0px 2px 10px ${colors.navBackground}`,
   }),
 )
 
@@ -52,9 +59,9 @@ export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
     const { tab } = this.props
     return (
       <div {...css(ROOT)}>
-        <Tab onClick={this.changeTab1} active={tab === 'one'} text='Random Dog' />
-        <Tab onClick={this.changeTab2} active={tab === 'two'} text='Long Content' />
-        <Tab onClick={this.changeTab3} active={tab === 'three'} text='Empty' />
+        <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />
+        <Tab onClick={this.changeTab2} active={tab === 'two'} text='paragraphs' />
+        <Tab onClick={this.changeTab3} active={tab === 'three'} text='empty' />
       </div>
     )
   }

src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { SampleTabs, SampleTabType } from './sample-tabs'
 import { LongTab } from '../long-tab'
 import { DogTab } from '../dog-tab'
-import { Header } from '../header'
 import { styles, cssProps } from '../../../platform'
 import Store = require('electron-store')
 import { css } from 'glamor'
@@ -40,7 +39,6 @@ export class WelcomeScreen extends React.Component<{}, WelcomeScreenState> {
   render() {
     return (
       <div id='WelcomeScreen' {...css(styles.column, styles.flex1)}>
-        <Header />
         <SampleTabs tab={this.state.tab} onChangeTab={this.setTab} />
         <DogTab style={this.state.tab !== 'one' && HIDDEN} />
         <LongTab style={this.state.tab !== 'two' && HIDDEN} />

src/renderer/platform/components/tab/tab.tsx

@@ -14,28 +14,33 @@ const BASE = compose(
   styles.noWindowDrag,
   cssProps({
     cursor: 'pointer',
-    padding: spacing.small,
-    fontSize: fontSizes.default,
+    paddingTop: spacing.small,
+    paddingBottom: spacing.small,
+    paddingLeft: spacing.medium,
+    paddingRight: spacing.medium,
   }),
 )
 
 const ACTIVE = cssProps({
-  color: colors.primary,
-  borderBottom: colors.primary,
+  borderBottom: colors.line,
   borderBottomWidth: 2,
   borderBottomStyle: 'solid',
 })
 
+const BASE_TEXT = cssProps({ color: colors.navInactive, fontSize: fontSizes.mediumPlus })
+const ACTIVE_TEXT = cssProps({ color: colors.navActive })
+
 /**
  * A tab component that you click on.  Not the tab panel.
  */
 export function Tab(props: TabProps) {
   // work out the styles
   const styleProps = css(BASE, props.active && ACTIVE, props.style)
+  const textStyle = css(BASE_TEXT, props.active && ACTIVE_TEXT)
 
   return (
     <div {...styleProps} onClick={props.onClick}>
-      <Text text={props.text} />
+      <Text style={textStyle} text={props.text} />
     </div>
   )
 }

src/renderer/platform/components/text/text.test.js.md

@@ -9,15 +9,15 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-6etoft"=""
+      "data-css-f6nk39"=""
     />
 
 ## children have priority over text
 
 > Snapshot 1
 
     <p
-      "data-css-6etoft"=""
+      "data-css-f6nk39"=""
     >
       one
     </p>
@@ -27,7 +27,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-6etoft"=""
+      "data-css-f6nk39"=""
     >
       hi
     </p>
@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-6etoft"=""
+      "data-css-f6nk39"=""
     >
       hello
     </p>
@@ -47,7 +47,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-1sxkrsg"=""
+      "data-css-19csgvw"=""
     >
       one
     </p>

src/renderer/platform/components/text/text.test.js.snap

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
-import { fonts, fontSizes, cssProps } from '../..'
+import { colors, fonts, fontSizes, cssProps } from '../..'
 import { css } from 'glamor'
 
 export interface TextProps {
@@ -10,7 +10,8 @@ export interface TextProps {
 }
 
 const STYLE = cssProps({
-  fontSize: fontSizes.default,
+  color: colors.text,
+  fontSize: fontSizes.medium,
   fontFamily: fonts.default,
   padding: 0,
   margin: 0,

src/renderer/platform/components/text/text.tsx

@@ -2,15 +2,19 @@
  * Named colours.
  */
 const palette = {
-  blue: '#66d',
+  bluez: ['#2B3A45', '#56748A', '#9CD4FC', '#D2EBFD', '#EDF7FE'],
+  beige: ['#383330', '#585350', '#a8a3a0', '#d8d3d0', '#f8f3f0'],
+  mint: ['#385350', '#587370', '#a8c3c0', '#d8e3e0', '#f8ffff'],
+  purps: ['#503853', '#705873', '#c0a8c3', '#e0d8e3', '#fff8ff'],
+  grayscale: ['#1d1d1d', '#2d2d2d', '#333', '#666', '#888', '#aaa', '#ddd', '#e6e6e6', '#f0f0f0'],
   cherry: '#d44',
-  white: '#fff',
-  offWhite: '#f0f0f0',
-  neutral: '#999',
-  offBlack: '#222',
-  black: '#000',
 }
 
+/**
+ * The dominant color scale.
+ */
+const dominant = palette.beige
+
 /**
  * These are the various roles that colour plays in the system.
  */
@@ -24,20 +28,25 @@ export const colors = {
   /** 
    * The default dackground color.
    */
-  background: palette.white,
+  background: dominant[4],
 
-  /** 
-   * The header background color.
+  /**
+   * The background color navigation.
    */
-  headerBg: palette.white,
+  navBackground: dominant[2],
+  /** the line color of the nav */
+  navLine: dominant[1],
+  /** Navigation foreground when it isn't active. */
+  navInactive: dominant[3],
+  /** Navigation foreground when active. */
+  navActive: dominant[1],
 
-  /** 
-   * The predominant colour.
-   */
-  primary: palette.blue,
+  /** Normal reading text. */
+  text: palette.grayscale[2],
 
-  /**
-   * When something goes wrong.
-   */
+  /** When something goes wrong. */
   error: palette.cherry,
+
+  /** Subtle lines like dividers. */
+  line: dominant[1],
 }

src/renderer/platform/theme/colors.ts

@@ -1,4 +1,5 @@
 export const fontSizes = {
   small: 12,
-  default: 16,
+  medium: 15,
+  mediumPlus: 18,
 }