Address styling feedbacks

MetaMask · May 6, 2019 · 830306d · 830306d
1 parent db00f9f
commit 830306d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
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
@@ -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
@@ -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,28 +26,34 @@
     }
 
     &--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 {
       display: none !important;
     }
 
     &--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 {