+ created by{' '}
@carbon_app
{' '}
@@ -43,8 +50,13 @@ const Footer = () => (
color: ${COLORS.GRAY};
}
+ nav {
+ display: flex;
+ align-items: center;
+ }
+
a {
- margin-right: 16px;
+ margin-right: 1rem;
}
a:last-child {
diff --git a/components/ListSetting.js b/components/ListSetting.js
index 727a214..a91d94c 100644
--- a/components/ListSetting.js
+++ b/components/ListSetting.js
@@ -33,7 +33,7 @@ class ListSetting extends React.Component {
key={item.id}
onClick={this.select.bind(null, item.id)}
>
- {this.props.children(item)}
+ {this.props.children(item, this.props.selected)}
{this.props.selected === item.id ?
: null}
+
+ )
+}
+
+function LoginButton({ isVisible, toggleVisibility }) {
+ const user = useAuth()
+
+ if (!firebase) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default managePopout(LoginButton)
diff --git a/components/MenuButton.js b/components/MenuButton.js
new file mode 100644
index 0000000..1449bcd
--- /dev/null
+++ b/components/MenuButton.js
@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Button from './Button'
+import { COLORS } from '../lib/constants'
+import * as Arrows from './svg/Arrows'
+
+const MenuButton = React.memo(({ name, select, selected, noArrows }) => {
+ return (
+
+
+
+
+ )
+})
+
+export default MenuButton
diff --git a/components/Page.js b/components/Page.js
index 6976a85..dbf884e 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -1,7 +1,9 @@
import React from 'react'
+import AuthContext from './AuthContext'
import Meta from './Meta'
import Header from './Header'
import Footer from './Footer'
+import Announcement from './Announcement'
class Page extends React.Component {
render() {
@@ -9,8 +11,11 @@ class Page extends React.Component {
return (
+
- {children}
+
+ {children}
+
diff --git a/components/RandomImage.js b/components/RandomImage.js
index 8d870f2..220deda 100644
--- a/components/RandomImage.js
+++ b/components/RandomImage.js
@@ -2,13 +2,13 @@ import React from 'react'
import Spinner from 'react-spinner'
import { useAsyncCallback } from '@dawnlabs/tacklebox'
-import ApiContext from './ApiContext'
+import { useAPI } from './ApiContext'
import PhotoCredit from './PhotoCredit'
function RandomImage(props) {
const cacheRef = React.useRef([])
const [cacheIndex, updateIndex] = React.useState(0)
- const api = React.useContext(ApiContext)
+ const api = useAPI()
const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
const image = cacheRef.current[cacheIndex]
diff --git a/components/Settings.js b/components/Settings.js
index a461576..5bac917 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -9,10 +9,10 @@ import Toggle from './Toggle'
import Popout, { managePopout } from './Popout'
import Button from './Button'
import Presets from './Presets'
+import MenuButton from './MenuButton'
import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util'
import SettingsIcon from './svg/Settings'
-import * as Arrows from './svg/Arrows'
const WindowSettings = React.memo(
({
@@ -182,7 +182,6 @@ const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
}}
/>