Compact picker (#60)

* feat: compact picker

- make c2c icon smaller
- replace styled-components with emotion

* bump version

Author: will-stone

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browserosaurus",
   "productName": "Browserosaurus",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "The browser prompter for macOS",
   "homepage": "http://wstone.io/browserosaurus/",
   "main": "src/main.js",
@@ -48,6 +48,7 @@
     "array-move": "^1.0.0",
     "electron-compile": "^6.4.2",
     "electron-store": "^1.3.0",
+    "emotion": "^9.2.5",
     "jsonpath": "^0.2.11",
     "lodash": "^4.17.4",
     "mousetrap": "^1.6.1",
@@ -57,9 +58,9 @@
     "react": "^16.2.0",
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.2.0",
+    "react-emotion": "^9.2.5",
     "react-transition-group": "^2.2.1",
     "semver": "^5.4.1",
-    "styled-components": "^3.2.0",
     "xml2js": "^0.4.19"
   },
   "config": {

src/components/ActivityIcon.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import { string, object } from 'prop-types'
 
-const ActivityIcon = ({ name, style, ...rest }) => {
+const ActivityIcon = ({ large, name, style, ...rest }) => {
   return (
     <img
       src={`../images/activity-icons/${name}.png`}
       alt=""
       style={{
         ...style,
-        width: 32,
-        height: 32,
+        width: large ? 48 : 32,
+        height: large ? 48 : 32,
         verticalAlign: 'middle'
       }}
       {...rest}

src/components/TitleBar.js

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
-const TitleBar = styled.div`
+const TitleBar = styled('div')`
   height: 2rem;
   -webkit-app-region: drag;
   text-align: center;

src/images/activity-icons/Copy To Clipboard.png

@@ -1,12 +1,13 @@
-import { MenuItem } from '@blueprintjs/core'
+import { Tooltip } from '@blueprintjs/core'
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'react-emotion'
 import ActivityIcon from '../../components/ActivityIcon'
 import Kbd from '../../components/Kbd'
 
-const StyledMenuItem = styled(MenuItem)`
-  padding: 1rem;
-  align-items: center;
+const StyledTile = styled('div')`
+  display: inline-block;
+  width: calc(100% / 3);
+  text-align: center;
 
   &:hover,
   &.is-active {
@@ -16,13 +17,32 @@ const StyledMenuItem = styled(MenuItem)`
 
 const Activity = ({ active, activity, defaultActivity, onClick }) => {
   return (
-    <StyledMenuItem
-      icon={<ActivityIcon name={activity.name} />}
-      text={activity.name}
-      onClick={onClick}
-      className={active && 'is-active'}
-      label={<Kbd isDefault={defaultActivity} hotKey={activity.hotKey} />}
-    />
+    <StyledTile onClick={onClick} className={active && 'is-active'}>
+      <Tooltip
+        content={activity.name}
+        position="bottom"
+        intent="primary"
+        rootElementTag="div"
+        className={css`
+          display: block;
+        `}
+      >
+        <div
+          className={css`
+            padding: 1rem;
+          `}
+        >
+          <ActivityIcon
+            name={activity.name}
+            style={{ marginBottom: '1rem' }}
+            large
+          />
+          <div>
+            <Kbd isDefault={defaultActivity} hotKey={activity.hotKey} />
+          </div>
+        </div>
+      </Tooltip>
+    </StyledTile>
   )
 }
 

src/picker/components/Activity.js

@@ -1,17 +1,11 @@
-import { Menu, Spinner, Text } from '@blueprintjs/core'
+import { Spinner, Text } from '@blueprintjs/core'
 import React, { Fragment } from 'react'
 import ReactDOM from 'react-dom'
 import EscapeToHide from '../utils/EscapeToHide'
 import UrlListener from '../utils/UrlListener'
 import WindowHeightUpdater from '../utils/WindowHeightUpdater'
 import WithActivities from '../utils/WithActivities'
 import Activity from './components/Activity.container'
-import styled from 'styled-components'
-
-const StyledMenu = styled(Menu)`
-  background-color: transparent !important;
-  padding: 0 !important;
-`
 
 ReactDOM.render(
   <EscapeToHide>
@@ -30,7 +24,7 @@ ReactDOM.render(
                 </div>
               ) : (
                 <Fragment>
-                  <StyledMenu>
+                  <div>
                     {activities
                       .filter(activity => activity.enabled)
                       .map((activity, index) => (
@@ -41,7 +35,7 @@ ReactDOM.render(
                           defaultActivity={index === 0}
                         />
                       ))}
-                  </StyledMenu>
+                  </div>
                   <WindowHeightUpdater />
                 </Fragment>
               )