diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js index 239c4ab..b0ed0d8 100644 --- a/components/SnippetToolbar.js +++ b/components/SnippetToolbar.js @@ -1,9 +1,11 @@ import React from 'react' import { useAsyncCallback, useOnline } from '@dawnlabs/tacklebox' -import Button from './Button' -import { useAuth } from './AuthContext' +import Button from './Button' import Toolbar from './Toolbar' +import { useAuth } from './AuthContext' + +import { COLORS } from '../lib/constants' function ConfirmButton(props) { const [confirmed, setConfirmed] = React.useState(false) @@ -39,7 +41,7 @@ function DeleteButton(props) { large color="#fff" onClick={onClick} - style={{ color: '#ff5f56' }} + style={{ color: COLORS.RED }} > {loading ? 'Deleting...' : 'Delete'} diff --git a/components/TweetButton.js b/components/TweetButton.js index 6ec5fdf..c065944 100644 --- a/components/TweetButton.js +++ b/components/TweetButton.js @@ -4,6 +4,8 @@ import { useAsyncCallback, useOnline as useOnlineListener } from '@dawnlabs/tack import { useAPI } from './ApiContext' import Button from './Button' +import { COLORS } from '../lib/constants' + function TweetButton(props) { const api = useAPI() const online = useOnlineListener() @@ -25,7 +27,7 @@ function TweetButton(props) { padding="0 16px" margin="0 8px 0 0" onClick={onClick} - color="#57b5f9" + color={COLORS.BLUE} > {loading ? 'Loading...' : 'Tweet'} diff --git a/lib/api.js b/lib/api.js index e01eb61..425782a 100644 --- a/lib/api.js +++ b/lib/api.js @@ -73,7 +73,7 @@ const unsplash = { } } -function getSnippet(uid, { host } = {}) { +function getSnippet(uid = '', { host } = {}) { return client .get(`/snippets/${uid}`, host ? { baseURL: `https://${host}/api` } : undefined) .then(res => res.data) diff --git a/lib/constants.js b/lib/constants.js index 64d8521..57737d8 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -1013,7 +1013,8 @@ export const COLORS = { HOVER: '#1F1F1F', PURPLE: '#C198FB', DARK_PURPLE: '#55436F', - RED: 'red' + RED: '#ff5f56', + BLUE: '#57b5f9' } export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)