From 1090356c0556637c4292758ed751933e03112d4d Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Sat, 28 Sep 2019 12:06:51 -0700
Subject: [PATCH] improve background select (#873)

---
 components/BackgroundSelect.js | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 0b30059..4c09326 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -63,15 +63,16 @@ class BackgroundSelect extends React.PureComponent {
         >
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
-              <div
-                role="button"
-                tabIndex={0}
+              <Button
                 key={tab}
-                className={`picker-tab capitalize ${mode === tab ? 'active' : ''}`}
+                padding="8px 0"
+                center
+                className="capitalize"
                 onClick={this.selectTab.bind(null, tab)}
+                background={mode === tab ? COLORS.BLACK : COLORS.DARK_GRAY}
               >
                 {tab}
-              </div>
+              </Button>
             ))}
           </div>
           <div className="picker-tabs-contents">
@@ -134,23 +135,13 @@ class BackgroundSelect extends React.PureComponent {
               border-bottom: 2px solid ${COLORS.SECONDARY};
             }
 
-            .picker-tab {
-              user-select: none;
-              cursor: pointer;
-              background: ${COLORS.DARK_GRAY};
-              width: 50%;
-              text-align: center;
-              padding: 8px 0;
+            .picker-tabs :global(button) {
               border-right: 1px solid ${COLORS.SECONDARY};
             }
 
-            .picker-tab:last-child {
+            .picker-tabs :global(button:last-child) {
               border-right: none;
             }
-
-            .picker-tab.active {
-              background: none;
-            }
           `}
         </style>
       </div>