move blue/red colors into constants

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'}
     </ConfirmButton>

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'}
     </Button>

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)

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)