From 5aa7dc6646812ddca46c07a8ce01046d6e9acce2 Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Fri, 24 Aug 2018 11:07:30 +0200
Subject: [PATCH] Style react-select (WIP)

---
 src/js/components/Select/index.js             | 490 +++---------------
 .../Landing/components/InstallBridge/index.js |  85 +--
 2 files changed, 86 insertions(+), 489 deletions(-)

diff --git a/src/js/components/Select/index.js b/src/js/components/Select/index.js
index 589b184e..11d88069 100644
--- a/src/js/components/Select/index.js
+++ b/src/js/components/Select/index.js
@@ -1,432 +1,68 @@
 import React from 'react';
 import Select from 'react-select';
-import styled from 'styled-components';
+import colors from 'config/colors';
 
-const SelectWrapper = styled(Select)`
-    .Select {
-        position: relative;
-    }
-    .Select input::-webkit-contacts-auto-fill-button,
-    .Select input::-webkit-credentials-auto-fill-button {
-        display: none !important;
-    }
-    .Select input::-ms-clear {
-        display: none !important;
-    }
-    .Select input::-ms-reveal {
-        display: none !important;
-    }
-    .Select,
-    .Select div,
-    .Select input,
-    .Select span {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-    }
-    .Select.is-disabled .Select-arrow-zone {
-        cursor: default;
-        pointer-events: none;
-        opacity: 0.35;
-    }
-    .Select.is-disabled > .Select-control {
-        background-color: #f9f9f9;
-    }
-    .Select.is-disabled > .Select-control:hover {
-        box-shadow: none;
-    }
-    .Select.is-open > .Select-control {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        background: #fff;
-        border-color: #b3b3b3 #ccc #d9d9d9;
-    }
-    .Select.is-open > .Select-control .Select-arrow {
-        top: -2px;
-        border-color: transparent transparent #999;
-        border-width: 0 5px 5px;
-    }
-    .Select.is-searchable.is-open > .Select-control {
-        cursor: text;
-    }
-    .Select.is-searchable.is-focused:not(.is-open) > .Select-control {
-        cursor: text;
-    }
-    .Select.is-focused > .Select-control {
-        background: #fff;
-    }
-    .Select.is-focused:not(.is-open) > .Select-control {
-        border-color: #007eff;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
-        background: #fff;
-    }
-    .Select.has-value.is-clearable.Select--single > .Select-control .Select-value {
-        padding-right: 42px;
-    }
-    .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
-    .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
-        color: #333;
-    }
-    .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
-    .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
-        cursor: pointer;
-        text-decoration: none;
-    }
-    .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
-    .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
-    .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
-    .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
-        color: #007eff;
-        outline: none;
-        text-decoration: underline;
-    }
-    .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
-    .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
-        background: #fff;
-    }
-    .Select.has-value.is-pseudo-focused .Select-input {
-        opacity: 0;
-    }
-    .Select.is-open .Select-arrow,
-    .Select .Select-arrow-zone:hover > .Select-arrow {
-        border-top-color: #666;
-    }
-    .Select.Select--rtl {
-        direction: rtl;
-        text-align: right;
-    }
-    .Select-control {
-        background-color: #fff;
-        border-color: #d9d9d9 #ccc #b3b3b3;
-        border-radius: 4px;
-        border: 1px solid #ccc;
-        color: #333;
-        cursor: default;
-        display: table;
-        border-spacing: 0;
-        border-collapse: separate;
-        height: 36px;
-        outline: none;
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-    }
-    .Select-control:hover {
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
-    }
-    .Select-control .Select-input:focus {
-        outline: none;
-        background: #fff;
-    }
-    .Select-placeholder,
-    .Select--single > .Select-control .Select-value {
-        bottom: 0;
-        color: #aaa;
-        left: 0;
-        line-height: 34px;
-        padding-left: 10px;
-        padding-right: 10px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        }
-        .Select-input {
-        height: 34px;
-        padding-left: 10px;
-        padding-right: 10px;
-        vertical-align: middle;
-    }
-    .Select-input > input {
-        width: 100%;
-        background: none transparent;
-        border: 0 none;
-        box-shadow: none;
-        cursor: default;
-        display: inline-block;
-        font-family: inherit;
-        font-size: inherit;
-        margin: 0;
-        outline: none;
-        line-height: 17px;
-        /* For IE 8 compatibility */
-        padding: 8px 0 12px;
-        /* For IE 8 compatibility */
-        -webkit-appearance: none;
-    }
-    .is-focused .Select-input > input {
-        cursor: text;
-    }
-    .has-value.is-pseudo-focused .Select-input {
-        opacity: 0;
-    }
-    .Select-control:not(.is-searchable) > .Select-input {
-        outline: none;
-    }
-    .Select-loading-zone {
-        cursor: pointer;
-        display: table-cell;
-        position: relative;
-        text-align: center;
-        vertical-align: middle;
-        width: 16px;
-    }
-    .Select-loading {
-        -webkit-animation: Select-animation-spin 400ms infinite linear;
-        -o-animation: Select-animation-spin 400ms infinite linear;
-        animation: Select-animation-spin 400ms infinite linear;
-        width: 16px;
-        height: 16px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        border: 2px solid #ccc;
-        border-right-color: #333;
-        display: inline-block;
-        position: relative;
-        vertical-align: middle;
-    }
-    .Select-clear-zone {
-        -webkit-animation: Select-animation-fadeIn 200ms;
-        -o-animation: Select-animation-fadeIn 200ms;
-        animation: Select-animation-fadeIn 200ms;
-        color: #999;
-        cursor: pointer;
-        display: table-cell;
-        position: relative;
-        text-align: center;
-        vertical-align: middle;
-        width: 17px;
-    }
-    .Select-clear-zone:hover {
-        color: #D0021B;
-    }
-    .Select-clear {
-        display: inline-block;
-        font-size: 18px;
-        line-height: 1;
-    }
-    .Select--multi .Select-clear-zone {
-        width: 17px;
-    }
-    .Select-arrow-zone {
-        cursor: pointer;
-        display: table-cell;
-        position: relative;
-        text-align: center;
-        vertical-align: middle;
-        width: 25px;
-        padding-right: 5px;
-    }
-    .Select--rtl .Select-arrow-zone {
-        padding-right: 0;
-        padding-left: 5px;
-    }
-    .Select-arrow {
-        border-color: #999 transparent transparent;
-        border-style: solid;
-        border-width: 5px 5px 2.5px;
-        display: inline-block;
-        height: 0;
-        width: 0;
-        position: relative;
-    }
-    .Select-control > *:last-child {
-        padding-right: 5px;
-    }
-    .Select--multi .Select-multi-value-wrapper {
-        display: inline-block;
-    }
-    .Select .Select-aria-only {
-        position: absolute;
-        display: inline-block;
-        height: 1px;
-        width: 1px;
-        margin: -1px;
-        clip: rect(0, 0, 0, 0);
-        overflow: hidden;
-        float: left;
-    }
-    @-webkit-keyframes Select-animation-fadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    @keyframes Select-animation-fadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    .Select-menu-outer {
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
-        background-color: #fff;
-        border: 1px solid #ccc;
-        border-top-color: #e6e6e6;
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
-        box-sizing: border-box;
-        margin-top: -1px;
-        max-height: 200px;
-        position: absolute;
-        left: 0;
-        top: 100%;
-        width: 100%;
-        z-index: 1;
-        -webkit-overflow-scrolling: touch;
-    }
-    .Select-menu {
-        max-height: 198px;
-        overflow-y: auto;
-    }
-    .Select-option {
-        box-sizing: border-box;
-        background-color: #fff;
-        color: #666666;
-        cursor: pointer;
-        display: block;
-        padding: 8px 10px;
-    }
-    .Select-option:last-child {
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
-    }
-    .Select-option.is-selected {
-        background-color: #f5faff;
-        /* Fallback color for IE 8 */
-        background-color: rgba(0, 126, 255, 0.04);
-        color: #333;
-    }
-    .Select-option.is-focused {
-        background-color: #ebf5ff;
-        /* Fallback color for IE 8 */
-        background-color: rgba(0, 126, 255, 0.08);
-        color: #333;
-    }
-    .Select-option.is-disabled {
-        color: #cccccc;
-        cursor: default;
-    }
-    .Select-noresults {
-        box-sizing: border-box;
-        color: #999999;
-        cursor: default;
-        display: block;
-        padding: 8px 10px;
-    }
-    .Select--multi .Select-input {
-        vertical-align: middle;
-        margin-left: 10px;
-        padding: 0;
-    }
-    .Select--multi.Select--rtl .Select-input {
-        margin-left: 0;
-        margin-right: 10px;
-    }
-    .Select--multi.has-value .Select-input {
-        margin-left: 5px;
-    }
-    .Select--multi .Select-value {
-        background-color: #ebf5ff;
-        /* Fallback color for IE 8 */
-        background-color: rgba(0, 126, 255, 0.08);
-        border-radius: 2px;
-        border: 1px solid #c2e0ff;
-        /* Fallback color for IE 8 */
-        border: 1px solid rgba(0, 126, 255, 0.24);
-        color: #007eff;
-        display: inline-block;
-        font-size: 0.9em;
-        line-height: 1.4;
-        margin-left: 5px;
-        margin-top: 5px;
-        vertical-align: top;
-    }
-    .Select--multi .Select-value-icon,
-    .Select--multi .Select-value-label {
-        display: inline-block;
-        vertical-align: middle;
-    }
-    .Select--multi .Select-value-label {
-        border-bottom-right-radius: 2px;
-        border-top-right-radius: 2px;
-        cursor: default;
-        padding: 2px 5px;
-    }
-    .Select--multi a.Select-value-label {
-        color: #007eff;
-        cursor: pointer;
-        text-decoration: none;
-    }
-    .Select--multi a.Select-value-label:hover {
-        text-decoration: underline;
-    }
-    .Select--multi .Select-value-icon {
-    cursor: pointer;
-        border-bottom-left-radius: 2px;
-        border-top-left-radius: 2px;
-        border-right: 1px solid #c2e0ff;
-        /* Fallback color for IE 8 */
-        border-right: 1px solid rgba(0, 126, 255, 0.24);
-        padding: 1px 5px 3px;
-    }
-    .Select--multi .Select-value-icon:hover,
-    .Select--multi .Select-value-icon:focus {
-        background-color: #d8eafd;
-        /* Fallback color for IE 8 */
-        background-color: rgba(0, 113, 230, 0.08);
-        color: #0071e6;
-    }
-    .Select--multi .Select-value-icon:active {
-        background-color: #c2e0ff;
-        /* Fallback color for IE 8 */
-        background-color: rgba(0, 126, 255, 0.24);
-    }
-    .Select--multi.Select--rtl .Select-value {
-        margin-left: 0;
-        margin-right: 5px;
-    }
-    .Select--multi.Select--rtl .Select-value-icon {
-        border-right: none;
-        border-left: 1px solid #c2e0ff;
-        /* Fallback color for IE 8 */
-        border-left: 1px solid rgba(0, 126, 255, 0.24);
-    }
-    .Select--multi.is-disabled .Select-value {
-        background-color: #fcfcfc;
-        border: 1px solid #e3e3e3;
-        color: #333;
-    }
-    .Select--multi.is-disabled .Select-value-icon {
-        cursor: not-allowed;
-        border-right: 1px solid #e3e3e3;
-    }
-    .Select--multi.is-disabled .Select-value-icon:hover,
-    .Select--multi.is-disabled .Select-value-icon:focus,
-    .Select--multi.is-disabled .Select-value-icon:active {
-        background-color: #fcfcfc;
-    }
-    @keyframes Select-animation-spin {
-        to {
-            transform: rotate(1turn);
-        }
-    }
-    @-webkit-keyframes Select-animation-spin {
-        to {
-            -webkit-transform: rotate(1turn);
-        }
-    }
-`;
+// const SelectWrapper = styled(Select)`
+//     width: 200px;
+//     height: 40px;
+//     margin-right: 4px;
 
-const wrapper2 = styled(Select)`
-    @import "~react-select/dist/react-select.css";
-`;
+//     .Select-control {
+//         width: 200px;
+//         height: 40px;
+//         border: 1px solid ${colors.DIVIDER};
+//         border-radius: 0px 2px 2px 0px;
+//         background: ${colors.WHITE};
+//     }
 
-export default wrapper2;
+//     .Select-option {
+//         ${TRANSITION.HOVER};
+//         &.is-focused {
+//             background: ${colors.GRAY_LIGHT};
+//         }
+
+//         &.is-selected {
+//             background: ${colors.DIVIDER};
+//         }
+//     }
+// `;
+
+const styles = {
+    singleValue: base => ({
+        ...base,
+        color: colors.TEXT_SECONDARY,
+    }),
+    container: base => ({
+        ...base,
+        width: '180px',
+    }),
+    control: (base, state) => ({
+        ...base,
+        borderRadius: '2px',
+        // state.onHover: () => {
+        //     borderColor: colors.DIVIDER,
+        // },
+        borderColor: state.hover ? colors.DIVIDER : colors.DIVIDER,
+    }),
+    option: base => ({
+        ...base,
+        color: colors.TEXT_SECONDARY,
+    }),
+    indicatorSeparator: () => ({
+        display: 'none',
+    }),
+    dropdownIndicator: base => ({
+        ...base,
+        color: colors.TEXT_SECONDARY,
+        path: '',
+    }),
+};
+
+const SelectWrapper = props => (
+    <Select
+        styles={styles}
+        {...props}
+    />
+);
+
+export default SelectWrapper;
diff --git a/src/js/views/Landing/components/InstallBridge/index.js b/src/js/views/Landing/components/InstallBridge/index.js
index 0f2cca6f..b66f03a2 100644
--- a/src/js/views/Landing/components/InstallBridge/index.js
+++ b/src/js/views/Landing/components/InstallBridge/index.js
@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import installers from 'constants/bridge';
 import Select from 'components/Select';
 import Link from 'components/Link';
@@ -62,39 +62,12 @@ const LearnMoreText = styled.span`
     margin-right: 4px;
 `;
 
-const Row = styled.div`
-    margin: 24px 0px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+const SelectWrapper = styled(Select)`
+    margin-right: 10px;
 `;
 
-// const SelectWrapper = styled(Select)`
-//     width: 200px;
-//     height: 40px;
-//     margin-right: 4px;
-
-//     .Select-control {
-//         width: 200px;
-//         height: 40px;
-//         border: 1px solid ${colors.DIVIDER};
-//         border-radius: 0px 2px 2px 0px;
-//         background: ${colors.WHITE};
-//     }
-
-//     .Select-option {
-//         ${TRANSITION.HOVER};
-//         &.is-focused {
-//             background: ${colors.GRAY_LIGHT};
-//         }
-
-//         &.is-selected {
-//             background: ${colors.DIVIDER};
-//         }
-//     }
-// `;
-
 const DownloadBridgeWrapper = styled.div`
+    margin: 24px auto;
     display: flex;
     align-items: center;
 `;
@@ -121,6 +94,7 @@ export default class InstallBridge extends Component<Props, State> {
     }
 
     onChange(value: InstallTarget) {
+        console.warn(value);
         this.setState({
             target: value,
         });
@@ -143,38 +117,25 @@ export default class InstallBridge extends Component<Props, State> {
                 </TitleHeader>
 
                 <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
-                <Row>
-                    <DownloadBridgeWrapper>
-                        {/* <SelectWrapper
-                            name="installers"
-                            className="installers"
-                            searchable={false}
-                            clearable={false}
-                            value={this.state.target}
-                            onChange={this.onChange.bind(this)}
-                            options={installers}
-                        /> */}
-                        <Select
-                            searchable={false}
-                            clearable={false}
-                            value={this.state.target}
-                            onChange={this.onChange.bind(this)}
-                            options={installers}
+                <DownloadBridgeWrapper>
+                    <SelectWrapper
+                        isSearchable={false}
+                        isClearable={false}
+                        value={this.state.target}
+                        onChange={val => this.onChange(val)}
+                        options={installers}
+                    />
+                    <Link href={url}>
+                        <Button
+                            icon={{
+                                type: ICONS.DOWNLOAD,
+                                color: colors.WHITE,
+                                size: 30,
+                            }}
+                            text={`Download for ${label}`}
                         />
-                        <Link
-                            href={url}
-                        >
-                            <Button
-                                icon={{
-                                    type: ICONS.DOWNLOAD,
-                                    color: colors.WHITE,
-                                    size: 30,
-                                }}
-                                text={`Download fro ${label}`}
-                            />
-                        </Link>
-                    </DownloadBridgeWrapper>
-                </Row>
+                    </Link>
+                </DownloadBridgeWrapper>
 
                 <P>
                     <LearnMoreText>Learn more about latest version in</LearnMoreText>