From 830306d4b5b6f6ee434be77d03adec8ecd0655ce Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 6 May 2019 14:33:57 -0700
Subject: [PATCH] Address styling feedbacks

---
 package-lock.json                             | 80 ++++---------------
 .../draggable-seed.component.js               |  4 +-
 .../confirm-seed-phrase/index.scss            | 33 +++++---
 3 files changed, 38 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3c0b204de30..99aac3d53c43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9876,13 +9876,13 @@
               },
               "dependencies": {
                 "ethereumjs-util": {
-                  "version": "6.1.0",
-                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz",
-                  "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==",
+                  "version": "5.2.0",
+                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+                  "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
                   "requires": {
                     "bn.js": "^4.11.0",
                     "create-hash": "^1.1.2",
-                    "ethjs-util": "0.1.6",
+                    "ethjs-util": "^0.1.3",
                     "keccak": "^1.0.2",
                     "rlp": "^2.0.0",
                     "safe-buffer": "^5.1.1",
@@ -9890,15 +9890,6 @@
                   }
                 }
               }
-            },
-            "ethjs-util": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
-              "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==",
-              "requires": {
-                "is-hex-prefixed": "1.0.0",
-                "strip-hex-prefix": "1.0.0"
-              }
             }
           }
         },
@@ -9991,13 +9982,13 @@
               },
               "dependencies": {
                 "ethereumjs-util": {
-                  "version": "6.1.0",
-                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz",
-                  "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==",
+                  "version": "5.2.0",
+                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+                  "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
                   "requires": {
                     "bn.js": "^4.11.0",
                     "create-hash": "^1.1.2",
-                    "ethjs-util": "0.1.6",
+                    "ethjs-util": "^0.1.3",
                     "keccak": "^1.0.2",
                     "rlp": "^2.0.0",
                     "safe-buffer": "^5.1.1",
@@ -10005,15 +9996,6 @@
                   }
                 }
               }
-            },
-            "ethjs-util": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
-              "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==",
-              "requires": {
-                "is-hex-prefixed": "1.0.0",
-                "strip-hex-prefix": "1.0.0"
-              }
             }
           }
         },
@@ -10196,14 +10178,14 @@
               },
               "dependencies": {
                 "ethereumjs-util": {
-                  "version": "6.1.0",
-                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz",
-                  "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==",
+                  "version": "5.2.0",
+                  "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+                  "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
                   "dev": true,
                   "requires": {
                     "bn.js": "^4.11.0",
                     "create-hash": "^1.1.2",
-                    "ethjs-util": "0.1.6",
+                    "ethjs-util": "^0.1.3",
                     "keccak": "^1.0.2",
                     "rlp": "^2.0.0",
                     "safe-buffer": "^5.1.1",
@@ -10211,16 +10193,6 @@
                   }
                 }
               }
-            },
-            "ethjs-util": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
-              "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==",
-              "dev": true,
-              "requires": {
-                "is-hex-prefixed": "1.0.0",
-                "strip-hex-prefix": "1.0.0"
-              }
             }
           }
         },
@@ -29920,16 +29892,6 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
     },
-    "ping-pong-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/ping-pong-stream/-/ping-pong-stream-1.0.0.tgz",
-      "integrity": "sha1-TF6wm6atsCGInawNyr+45XcGhUo=",
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "readable-stream": "^2.1.5",
-        "tape": "^4.6.2"
-      }
-    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -39078,29 +39040,19 @@
           },
           "dependencies": {
             "ethereumjs-util": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz",
-              "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==",
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+              "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
               "dev": true,
               "requires": {
                 "bn.js": "^4.11.0",
                 "create-hash": "^1.1.2",
-                "ethjs-util": "0.1.6",
+                "ethjs-util": "^0.1.3",
                 "keccak": "^1.0.2",
                 "rlp": "^2.0.0",
                 "safe-buffer": "^5.1.1",
                 "secp256k1": "^3.0.1"
               }
-            },
-            "ethjs-util": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
-              "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==",
-              "dev": true,
-              "requires": {
-                "is-hex-prefixed": "1.0.0",
-                "strip-hex-prefix": "1.0.0"
-              }
             }
           }
         },
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
index dd51c7e743dc..97dbd2a4be3b 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
@@ -52,8 +52,8 @@ class DraggableSeed extends Component {
     return connectDropTarget(connectDragSource(
       <div
         key={index}
-        className={classnames('confirm-seed-phrase__seed-word', className, {
-          'confirm-seed-phrase__seed-word--selected': selected,
+        className={classnames('btn-secondary confirm-seed-phrase__seed-word', className, {
+          'confirm-seed-phrase__seed-word--selected btn-primary': selected,
           'confirm-seed-phrase__seed-word--dragging': isDragging,
           'confirm-seed-phrase__seed-word--empty': !word,
           'confirm-seed-phrase__seed-word--active-drop': !isOver && canDrop,
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index 7810acdeb946..4db3be28a7a5 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -8,15 +8,16 @@
   }
 
   &__seed-word {
-    display: inline-block;
-    color: #5B5D67;
-    background-color: #E7E7E7;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
     padding: 8px 18px;
     width: 128px;
-    height: 37px;
+    height: 41px;
     margin: 4px;
     text-align: center;
-    border: 1px solid transparent;
+    border-radius: 4px;
     cursor: move;
 
     &--shuffled {
@@ -25,18 +26,24 @@
     }
 
     &--selected {
-      background-color: #85D1CC;
       color: $white;
-      cursor: default;
     }
 
     &--dragging {
-      opacity: .5;
+      margin: 0;
     }
 
     &--empty {
       background-color: transparent;
+      border-color: transparent;
       cursor: default;
+
+      &:hover,
+      &:active {
+        background-color: transparent;
+        border-color: transparent;
+        cursor: default;
+      }
     }
 
     &--hidden {
@@ -44,9 +51,9 @@
     }
 
     &--drop-hover {
-      background-color: $Blue-000;
-      border: 1px dashed $Blue-400;
-      //box-sizing: border-box;
+      background-color: transparent;
+      border-color: transparent;
+      color: transparent;
     }
 
     @media screen and (max-width: 575px) {
@@ -71,12 +78,12 @@
     }
 
     &__selected-seed {
-      display: block;
+      display: inline-flex;
     }
 
     &--dragging {
       .confirm-seed-phrase__selected-seed-words__pending-seed {
-        display: block;
+        display: inline-flex;
       }
 
       .confirm-seed-phrase__selected-seed-words__selected-seed {