Updates some random styles.

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

@@ -4,10 +4,13 @@ import { Text, CenteredContent, spacing, cssProps } from '../../../platform'
 import { FunDog } from '../fun-dog'
 import { Logo } from '../logo'
 
-const TEXT_STYLE = cssProps({
-  paddingTop: spacing.medium,
-  paddingBottom: spacing.medium,
+const TEXT_STYLE = cssProps({})
+
+const DOG_STYLE = cssProps({
+  marginTop: spacing.medium,
+  marginBottom: spacing.medium,
 })
+
 export interface DogTabProps {
   style?: CSSProperties | CSSProperties[] | null | false
 }
@@ -17,7 +20,7 @@ export class DogTab extends React.PureComponent<DogTabProps, {}> {
     return (
       <CenteredContent style={this.props.style}>
         <Text style={TEXT_STYLE}>Do a barrel roll.</Text>
-        <FunDog />
+        <FunDog style={DOG_STYLE} />
         <Logo />
       </CenteredContent>
     )

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

@@ -1,20 +1,30 @@
 import * as React from 'react'
+import { CSSProperties } from 'react'
 import dogImage from './fun-dog.jpg'
-import { cssProps, colors, SpinAnimation } from '../../../platform'
+import { colors, SpinAnimation } from '../../../platform'
 import { css } from 'glamor'
 
-const ROOT = cssProps({
-  width: 300,
+const IMAGE = css({
+  width: 400,
   borderStyle: 'solid',
   borderWidth: 2,
   borderColor: colors.line,
   borderRadius: 4,
+  transition: `all 150ms`,
+  '&:hover': {
+    borderColor: colors.sentiment.highlight,
+  },
 })
 
-export function FunDog() {
+export interface FunDogProps {
+  style?: CSSProperties | CSSProperties[] | null | false
+}
+
+export function FunDog(props: FunDogProps) {
+  const style = css(IMAGE, props.style)
   return (
     <SpinAnimation>
-      <img draggable={false} src={dogImage} {...css(ROOT)} />
+      <img draggable={false} src={dogImage} {...style} />
     </SpinAnimation>
   )
 }

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

@@ -1,14 +1,23 @@
 import * as React from 'react'
+import { CSSProperties } from 'react'
 import { cssProps, animations } from '../../../platform'
 import icon from './electron-icon.svg'
 import { css } from 'glamor'
 
-const ROOT = cssProps({
-  width: 80,
-  height: 80,
-  animation: `${animations.spin360} infinite 5s linear`,
-})
+const ROOT = css(
+  cssProps({
+    width: 80,
+    height: 80,
+    animation: `${animations.spin360} infinite 5s linear`,
+  }),
+)
 
-export function Logo() {
-  return <img draggable={false} src={icon} {...css(ROOT)} />
+export interface LogoProps {
+  style?: CSSProperties | CSSProperties[] | null | false
+}
+
+export function Logo(props: LogoProps) {
+  const style = css(ROOT, props.style)
+
+  return <img draggable={false} src={icon} {...style} />
 }

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

@@ -1,9 +1,14 @@
 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,
+  paddingBottom: spacing.large,
+})
+
+const ROOT = cssProps({
+  padding: spacing.large,
 })
 
 export interface LongTabProps {
@@ -12,8 +17,10 @@ export interface LongTabProps {
 
 export class LongTab extends React.PureComponent<LongTabProps, {}> {
   render() {
+    const root = css(ROOT, this.props.style)
+
     return (
-      <ScrollableContent style={this.props.style}>
+      <ScrollableContent style={root}>
         <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

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
 import { spacing, styles, cssProps } from '../..'
-import { css, compose } from 'glamor'
+import { compose } from 'glamor'
 
 export interface ScrollableContentProps {
   children?: React.ReactNode
@@ -11,12 +11,12 @@ export interface ScrollableContentProps {
 const ROOT = compose(
   styles.column,
   styles.flex1,
-  cssProps({ padding: spacing.medium, overflowY: 'scroll' }),
+  cssProps({ padding: spacing.small, overflowY: 'scroll' }),
 )
 
 export function ScrollableContent(props: ScrollableContentProps) {
   return (
-    <div {...css(ROOT, props.style)}>
+    <div {...compose(ROOT, props.style)}>
       {props.children}
     </div>
   )

src/renderer/platform/theme/colors.ts

@@ -29,9 +29,10 @@ const white = grayScale[grayScale.length - 1]
 // =--- colors with specific meaning ------>
 
 const sentiment = {
-  error: '#D44',
-  success: '#4D4',
-  warning: '#DD4',
+  error: 'cherry',
+  success: 'lime',
+  warning: 'orange',
+  highlight: secondaryScale[2],
 }
 
 // =--- special-use window chrome ------>