Style touchups

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { CSSProperties } from 'react'
 import { Text, CenteredContent, spacing, cssProps } from '../../../platform'
 import { FunDog } from '../fun-dog'
 import { Logo } from '../logo'
@@ -7,11 +8,14 @@ const TEXT_STYLE = cssProps({
   paddingTop: spacing.medium,
   paddingBottom: spacing.medium,
 })
+export interface DogTabProps {
+  style?: CSSProperties | CSSProperties[] | null | false
+}
 
-export class DogTab extends React.PureComponent<{}, {}> {
+export class DogTab extends React.PureComponent<DogTabProps, {}> {
   render() {
     return (
-      <CenteredContent>
+      <CenteredContent style={this.props.style}>
         <FunDog />
         <Text style={TEXT_STYLE}>Wake up and smell the electrons.</Text>
         <Logo />

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/long-tab/long-tab.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react'
+import { CSSProperties } from 'react'
 import { Text, ScrollableContent, spacing, cssProps } from '../../../platform'
-import { css } from 'glamor'
 
 const PADDED = cssProps({
   paddingBottom: spacing.medium,
 })
 
-export class LongTab extends React.PureComponent<{}, {}> {
+export interface LongTabProps {
+  style?: CSSProperties | CSSProperties[] | null | false
+}
+
+export class LongTab extends React.PureComponent<LongTabProps, {}> {
   render() {
     return (
-      <ScrollableContent>
-        <Text {...css(PADDED)}>
+      <ScrollableContent style={this.props.style}>
+        <Text style={PADDED}>
           Lomo kombucha irony, keffiyeh man bun pitchfork helvetica organic godard brunch XOXO
           subway tile. Vexillologist gluten-free prism air plant godard raw denim tacos forage
           neutra kogi lyft beard. Direct trade retro ramps, pour-over slow-carb 8-bit hell of
@@ -22,7 +26,7 @@ export class LongTab extends React.PureComponent<{}, {}> {
           bicycle rights. Post-ironic selfies gochujang franzen master cleanse chicharrones ethical
           coloring book keytar 8-bit poutine fixie.
         </Text>
-        <Text {...css(PADDED)}>
+        <Text style={PADDED}>
           Shaman glossier listicle, tousled knausgaard vegan microdosing mumblecore meditation
           freegan taiyaki. Dreamcatcher occupy enamel pin edison bulb PBR&B +1 food truck try-hard
           forage pug iceland sartorial scenester. Yr brooklyn pinterest +1 sustainable. Narwhal
@@ -33,7 +37,7 @@ export class LongTab extends React.PureComponent<{}, {}> {
           VHS, brooklyn salvia lyft activated charcoal direct trade mlkshk unicorn williamsburg
           post-ironic banjo. Sriracha cray coloring book activated charcoal irony meditation.
         </Text>
-        <Text {...css(PADDED)}>
+        <Text style={PADDED}>
           Drinking vinegar 8-bit roof party leggings, master cleanse deep v slow-carb locavore
           hoodie. La croix thundercats trust fund synth, truffaut woke bitters twee craft beer next
           level mustache ramps yr hashtag. Portland 8-bit gentrify 3 wolf moon hexagon, 90's
@@ -49,7 +53,7 @@ export class LongTab extends React.PureComponent<{}, {}> {
           Listicle letterpress waistcoat actually, hell of typewriter normcore thundercats kale
           chips post-ironic helvetica pabst.
         </Text>
-        <Text {...css(PADDED)}>
+        <Text style={PADDED}>
           Chambray ethical vice williamsburg. Four loko chambray glossier seitan, stumptown fanny
           pack PBR&B normcore quinoa echo park. Direct trade taxidermy pok pok, unicorn you probably
           haven't heard of them letterpress leggings. Flannel kinfolk four loko taxidermy fanny pack
@@ -63,7 +67,7 @@ export class LongTab extends React.PureComponent<{}, {}> {
           master cleanse wayfarers. Mlkshk sriracha microdosing, chia post-ironic paleo chillwave
           PBR&B.
         </Text>
-        <Text {...css(PADDED)}>
+        <Text style={PADDED}>
           Ugh +1 narwhal, truffaut polaroid live-edge artisan tousled wayfarers taxidermy chia raw
           denim flannel. Vinyl polaroid franzen portland tilde edison bulb, you probably haven't
           heard of them hot chicken mlkshk. Prism blue bottle mustache, tattooed selvage franzen
@@ -76,7 +80,7 @@ export class LongTab extends React.PureComponent<{}, {}> {
           synth affogato pickled. Truffaut typewriter quinoa copper mug fanny pack glossier 8-bit,
           meditation vape jean shorts. Ennui church-key cliche af intelligentsia, fam fingerstache.
         </Text>
-        <Text {...css(PADDED)}>Oh. You need a little dummy text for your mockup? How quaint.</Text>
+        <Text style={PADDED}>Oh. You need a little dummy text for your mockup? How quaint.</Text>
         <Text>I bet you’re still using Bootstrap too…</Text>
       </ScrollableContent>
     )

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

@@ -22,12 +22,19 @@ const KEY_1 = `${commandOrControlKey}+1`
 const KEY_2 = `${commandOrControlKey}+2`
 const KEY_3 = `${commandOrControlKey}+3`
 
-const ROOT_STYLE = compose(
+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}`,
   }),
 )
 
@@ -51,10 +58,10 @@ export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
   render() {
     const { tab } = this.props
     return (
-      <div {...css(ROOT_STYLE)}>
-        <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' />
+      <div {...css(ROOT)}>
+        <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,11 +2,14 @@ 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 } from '../../../platform'
+import { styles, cssProps } from '../../../platform'
 import Store = require('electron-store')
 import { css } from 'glamor'
 
+const HIDDEN = cssProps({
+  display: 'none',
+})
+
 // a sample store
 const store = new Store()
 
@@ -36,10 +39,9 @@ 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} />
-        {this.state.tab === 'one' && <DogTab />}
-        {this.state.tab === 'two' && <LongTab />}
+        <DogTab style={this.state.tab !== 'one' && HIDDEN} />
+        <LongTab style={this.state.tab !== 'two' && HIDDEN} />
       </div>
     )
   }

src/renderer/platform/components/centered-content/centered-content.tsx

@@ -5,7 +5,7 @@ import { compose, css } from 'glamor'
 
 export interface CenteredContentProps {
   children: React.ReactNode
-  style?: CSSProperties | CSSProperties[]
+  style?: CSSProperties | CSSProperties[] | false | null
 }
 
 const BASE = compose(

src/renderer/platform/components/scrollable-content/scrollable-content.tsx

@@ -5,7 +5,7 @@ import { css, compose } from 'glamor'
 
 export interface ScrollableContentProps {
   children?: React.ReactNode
-  style?: CSSProperties | CSSProperties[]
+  style?: CSSProperties | CSSProperties[] | null | false
 }
 
 const ROOT = compose(

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.tsx

@@ -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/theme/colors.ts

@@ -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/fontSizes.ts

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

src/renderer/platform/utils/css-reset/css-reset.ts

@@ -10,7 +10,7 @@ import { css } from 'glamor'
 css.global('html, body', {
   userSelect: 'none',
   cursor: 'default',
-  WebkitFontSmoothing: 'subpixel-antialiased',
+  WebkitFontSmoothing: 'subpixel-antialiased', // none | antialiased | subpixel-antialiased
   textRendering: 'optimizeLegibility',
   font: 'caption',
 })