From e555dddcc004da34cee25022f3f5a304a6fa986f Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Sat, 16 Dec 2017 04:35:21 -0600
Subject: [PATCH] WHHHEEEEEE OVERENGINEERING!!!

---
 packages/gallery/src/interface/allImages.js       |  1 -
 .../interface/components/albumPhotoTemplate.js    |  9 ++++-----
 .../src/interface/components/albumTemplate.js     |  5 ++---
 .../gallery/src/interface/components/appbar.js    | 15 ++++++++-------
 packages/gallery/src/interface/styles.js          |  4 ++++
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js
index 5b11c22..a162878 100644
--- a/packages/gallery/src/interface/allImages.js
+++ b/packages/gallery/src/interface/allImages.js
@@ -4,7 +4,6 @@ import { prop, computed, container } from 'frptools';
 import {
 	subscribeToRender,
 	defineView,
-	subscribeToRender,
 	nodeParentWithType,
 	defineElement as el
 } from '../utils/domvm.js';
diff --git a/packages/gallery/src/interface/components/albumPhotoTemplate.js b/packages/gallery/src/interface/components/albumPhotoTemplate.js
index fb54b48..1daf916 100644
--- a/packages/gallery/src/interface/components/albumPhotoTemplate.js
+++ b/packages/gallery/src/interface/components/albumPhotoTemplate.js
@@ -8,7 +8,7 @@ import {
 	subscribeToRender
 } from '../../utils/domvm.js';
 import { injectStyle, styled } from '../../services/style.js';
-import { DEFAULT_TRANSITION, CSS_FULL_SIZE, IMAGE_MARGIN } from '../styles.js';
+import { DEFAULT_TRANSITION, CSS_FULL_SIZE, IMAGE_MARGIN, CLICKABLE } from '../styles.js';
 import { Icon } from './icon.js';
 import { AttachmentImageView } from './attachmentImage.js';
 
@@ -32,7 +32,7 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 				onmouseenter: [hover, true],
 				onmouseleave: [hover, false],
 				css: {
-					cursor: selectMode ? 'pointer' : 'zoom-in'
+					cursor: selectMode ? CLICKABLE.cursor : 'zoom-in'
 				},
 				_data: doc
 			},
@@ -89,7 +89,7 @@ const image = styled('img', CSS_FULL_SIZE, DEFAULT_TRANSITION, {
 	zIndex: 0
 });
 
-const photoSelectButton = styled(DEFAULT_TRANSITION, {
+const photoSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, {
 	position: 'absolute',
 	top: '4%',
 	left: '4%',
@@ -98,8 +98,7 @@ const photoSelectButton = styled(DEFAULT_TRANSITION, {
 	borderRadius: '50%',
 	padding: '2px',
 	backgroundColor: 'transparent',
-	opacity: 0,
-	cursor: 'pointer'
+	opacity: 0
 });
 
 const photoOverlay = styled(CSS_FULL_SIZE, DEFAULT_TRANSITION, {
diff --git a/packages/gallery/src/interface/components/albumTemplate.js b/packages/gallery/src/interface/components/albumTemplate.js
index 79fa225..ab1b7ea 100644
--- a/packages/gallery/src/interface/components/albumTemplate.js
+++ b/packages/gallery/src/interface/components/albumTemplate.js
@@ -5,7 +5,7 @@ import {
 	patchNodeStyle
 } from '../../utils/domvm.js';
 import { injectStyle, styled } from '../../services/style.js';
-import { DEFAULT_TRANSITION } from '../styles.js';
+import { DEFAULT_TRANSITION, CLICKABLE } from '../styles.js';
 import { Icon } from './icon.js';
 import { AlbumPhotoTemplate } from './albumPhotoTemplate.js';
 import { extractID } from '../../utils/conversion.js';
@@ -71,8 +71,7 @@ const albumContent = styled({
 	userSelect: 'none'
 });
 
-const albumSelectButton = styled(DEFAULT_TRANSITION, {
+const albumSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, {
 	paddingLeft: '0.5em',
-	cursor: 'pointer',
 	opacity: 0
 });
diff --git a/packages/gallery/src/interface/components/appbar.js b/packages/gallery/src/interface/components/appbar.js
index 8befd88..8f1b78a 100644
--- a/packages/gallery/src/interface/components/appbar.js
+++ b/packages/gallery/src/interface/components/appbar.js
@@ -4,6 +4,7 @@ import { Icon } from './icon.js';
 import { defineElement as el, subscribeToRender } from '../../utils/domvm.js';
 import { injectStyle, styled } from '../../services/style.js';
 import { pick } from '../../utils/conversion.js';
+import { CLICKABLE } from '../styles.js';
 
 let seq = 0;
 const getSeq = pick('_seq');
@@ -63,10 +64,7 @@ export function AppBarView(vm, params, key, opts) {
 							[
 								Icon({
 									name: 'arrow_left',
-									size: 0.75,
-									attrs: {
-										onclick: popState
-									}
+									size: 0.75
 								})
 							]
 					  )
@@ -86,9 +84,12 @@ const header = styled({
 	alignItems: 'center'
 });
 
-const backButtonContainer = styled({
-	marginRight: '1em'
-});
+const backButtonContainer = styled(
+	{
+		marginRight: '1em'
+	},
+	CLICKABLE
+);
 
 const headerRight = styled({
 	display: 'flex',
diff --git a/packages/gallery/src/interface/styles.js b/packages/gallery/src/interface/styles.js
index 9331ce2..d556e79 100644
--- a/packages/gallery/src/interface/styles.js
+++ b/packages/gallery/src/interface/styles.js
@@ -9,3 +9,7 @@ export const DEFAULT_TRANSITION = {
 	transition:
 		'transform 0.135s cubic-bezier(0, 0, 0.2, 1), opacity 0.135s cubic-bezier(0, 0, 0.2, 1)'
 };
+
+export const CLICKABLE = {
+	cursor: 'pointer'
+};