+
)
}
}
diff --git a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx
index 3023e17..ded7628 100644
--- a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx
+++ b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx
@@ -1,8 +1,8 @@
import * as React from 'react'
+import { CSSProperties } from 'react'
import { SampleTabs, SampleTabType } from './sample-tabs'
import { LongTab } from '../long-tab/long-tab'
import { DogTab } from '../dog-tab/dog-tab'
-import { Flex } from 'rebass'
import { Header } from '../header/header'
import * as Store from 'electron-store'
@@ -13,6 +13,12 @@ interface WelcomeScreenState {
tab: SampleTabType
}
+const style: CSSProperties = {
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column'
+}
+
export class WelcomeScreen extends React.Component<{}, WelcomeScreenState> {
state: WelcomeScreenState = {
tab: 'one'
@@ -34,12 +40,12 @@ export class WelcomeScreen extends React.Component<{}, WelcomeScreenState> {
render() {
return (
-
{props.children}
-
+
)
}
diff --git a/src/renderer/platform/components/index.ts b/src/renderer/platform/components/index.ts
index 53f5322..575f025 100644
--- a/src/renderer/platform/components/index.ts
+++ b/src/renderer/platform/components/index.ts
@@ -1,3 +1,4 @@
export * from './text/text'
export * from './scrollable-content/scrollable-content'
export * from './centered-content/centered-content'
+export * from './tab/tab'
diff --git a/src/renderer/platform/components/scrollable-content/scrollable-content.tsx b/src/renderer/platform/components/scrollable-content/scrollable-content.tsx
index 8981936..bdbc49d 100644
--- a/src/renderer/platform/components/scrollable-content/scrollable-content.tsx
+++ b/src/renderer/platform/components/scrollable-content/scrollable-content.tsx
@@ -1,16 +1,23 @@
import * as React from 'react'
-import { Flex } from 'rebass'
+import { CSSProperties } from 'react'
+import { spacing } from '../..'
export interface ScrollableContentProps {
children: React.ReactNode
}
-const style = { overflowY: 'scroll' }
+const style: CSSProperties = {
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column',
+ padding: spacing.medium,
+ overflowY: 'scroll'
+}
export function ScrollableContent(props: ScrollableContentProps) {
return (
-
{props.children}
-
+
)
}
diff --git a/src/renderer/platform/components/tab/tab.tsx b/src/renderer/platform/components/tab/tab.tsx
new file mode 100644
index 0000000..f10ee56
--- /dev/null
+++ b/src/renderer/platform/components/tab/tab.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { CSSProperties } from 'react'
+import { colors, spacing, fontSizes, Text } from '../..'
+
+export interface TabProps {
+ text: string
+ active?: boolean
+ style?: CSSProperties
+ onClick: () => void
+ first?: boolean
+}
+
+const ROOT_STYLE: CSSProperties = {
+ display: 'flex',
+ paddingTop: spacing.small,
+ paddingBottom: spacing.small,
+ marginLeft: spacing.small,
+ marginRight: spacing.small,
+ cursor: 'pointer',
+ WebkitAppRegion: 'no-drag',
+ fontSize: fontSizes.default
+}
+
+const ACTIVE_STYLE: CSSProperties = {
+ color: colors.primary,
+ borderBottom: colors.primary,
+ borderBottomWidth: 2,
+ borderBottomStyle: 'solid'
+}
+
+const FIRST_STYLE: CSSProperties = { marginLeft: 0 }
+
+export function Tab(props: TabProps) {
+ const style: CSSProperties = {
+ ...ROOT_STYLE,
+ ...props.active && ACTIVE_STYLE,
+ ...props.first && FIRST_STYLE,
+ ...props.style
+ }
+ return (
+
+
+ )
+}
diff --git a/src/renderer/platform/components/text/text.test.js.md b/src/renderer/platform/components/text/text.test.js.md
index 8059d07..763b029 100644
--- a/src/renderer/platform/components/text/text.test.js.md
+++ b/src/renderer/platform/components/text/text.test.js.md
@@ -9,9 +9,14 @@ Generated by [AVA](https://ava.li).
> Snapshot 1
## children have priority over text
@@ -19,9 +24,14 @@ Generated by [AVA](https://ava.li).
> Snapshot 1
one
@@ -31,9 +41,14 @@ Generated by [AVA](https://ava.li). > Snapshot 1hi
@@ -43,9 +58,14 @@ Generated by [AVA](https://ava.li). > Snapshot 1hello
@@ -55,11 +75,13 @@ Generated by [AVA](https://ava.li). > Snapshot 1
diff --git a/src/renderer/platform/components/text/text.test.js.snap b/src/renderer/platform/components/text/text.test.js.snap
index 2cc5b82..bf6cb17 100644
Binary files a/src/renderer/platform/components/text/text.test.js.snap and b/src/renderer/platform/components/text/text.test.js.snap differ
diff --git a/src/renderer/platform/components/text/text.tsx b/src/renderer/platform/components/text/text.tsx
index 7a3be6e..719720d 100644
--- a/src/renderer/platform/components/text/text.tsx
+++ b/src/renderer/platform/components/text/text.tsx
@@ -1,5 +1,6 @@
import * as React from 'react'
-import { Text } from 'rebass'
+import { CSSProperties } from 'react'
+import { fonts, fontSizes } from '../..'
export interface TextProps {
text?: string
@@ -7,11 +8,21 @@ export interface TextProps {
style?: any
}
+const ROOT_STYLE: CSSProperties = {
+ fontSize: fontSizes.default,
+ fontFamily: fonts.default,
+ padding: 0,
+ margin: 0
+}
+
export function Text(props: TextProps) {
- const { text, children, style, ...rest } = props
+ const style: CSSProperties = {
+ ...ROOT_STYLE,
+ ...props.style
+ }
return (
-
+ {props.children || props.text} +
) } diff --git a/src/renderer/platform/index.ts b/src/renderer/platform/index.ts index 5e2bb64..fa602f6 100644 --- a/src/renderer/platform/index.ts +++ b/src/renderer/platform/index.ts @@ -1,3 +1,6 @@ +export * from './theme/colors' +export * from './theme/spacing' +export * from './theme/fontSizes' +export * from './theme/fonts' export * from './utils' -export * from './theme/theme' export * from './components' diff --git a/src/renderer/platform/theme/colors.ts b/src/renderer/platform/theme/colors.ts new file mode 100644 index 0000000..86c444d --- /dev/null +++ b/src/renderer/platform/theme/colors.ts @@ -0,0 +1,5 @@ +export const colors = { + bg: '#fff', + headerBg: '#f0f0f0', + primary: '#66f' +} diff --git a/src/renderer/platform/theme/fontSizes.ts b/src/renderer/platform/theme/fontSizes.ts new file mode 100644 index 0000000..dd8875e --- /dev/null +++ b/src/renderer/platform/theme/fontSizes.ts @@ -0,0 +1,4 @@ +export const fontSizes = { + small: 12, + default: 16 +} diff --git a/src/renderer/platform/theme/fonts.ts b/src/renderer/platform/theme/fonts.ts new file mode 100644 index 0000000..387d25c --- /dev/null +++ b/src/renderer/platform/theme/fonts.ts @@ -0,0 +1,3 @@ +export const fonts = { + default: '-apple-system, "Helvetica Neue"' +} diff --git a/src/renderer/platform/theme/spacing.ts b/src/renderer/platform/theme/spacing.ts new file mode 100644 index 0000000..1adc960 --- /dev/null +++ b/src/renderer/platform/theme/spacing.ts @@ -0,0 +1,8 @@ +export const spacing = { + none: 0, + verySmall: 4, + small: 8, + medium: 16, + large: 32, + veryLarge: 64 +} diff --git a/src/renderer/platform/theme/theme.ts b/src/renderer/platform/theme/theme.ts deleted file mode 100644 index a459926..0000000 --- a/src/renderer/platform/theme/theme.ts +++ /dev/null @@ -1 +0,0 @@ -export const theme = {} diff --git a/src/renderer/platform/utils/keyboard/keyboard.ts b/src/renderer/platform/utils/keyboard/keyboard.ts index 15bcf7a..1b15d61 100644 --- a/src/renderer/platform/utils/keyboard/keyboard.ts +++ b/src/renderer/platform/utils/keyboard/keyboard.ts @@ -5,8 +5,10 @@ import * as Mousetrap from 'mousetrap' export type KeyboardCallback = (e: ExtendedKeyboardEvent, combo: string) => any export type KeyboardAction = 'keypress' | 'keydown' | 'keyup' -// only needs to happen once -Mousetrap.prototype.stopCallback = () => false +// only needs to happen once (if statement is for running in test mode -- not sure why) +if (Mousetrap.prototype) { + Mousetrap.prototype.stopCallback = () => false +} /** * Binds a keystroke to a function.