init

assets/styles/components/_wallets.scss

@@ -0,0 +1,138 @@
+.wallets {
+  &.field.is-grouped.is-grouped-multiline {
+    margin: -0.5rem;
+
+    > .control {
+      margin: 0;
+
+      &.control-with-select {
+        margin: 0.5rem;
+      }
+
+      &:not(.control-with-select) {
+        .button {
+          margin: 0.5rem;
+        }
+      }
+    }
+  }
+
+  .button {
+    width: 120px;
+    flex-direction: column;
+    height: auto;
+
+    &.is-black {
+      background-color: #559774;
+
+      &:hover {
+        background-color: #94febf;
+      }
+    }
+
+    &.is-background {
+      color: black;
+      background-color: #7ddaa9;
+
+      &:hover {
+        background-color: #94febf;
+      }
+    }
+
+    &:before {
+      content: '';
+      height: 64px;
+      width: 64px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      margin: 0.25rem 0;
+    }
+
+    &.is-metamask:before {
+      background-image: url('../img/metamask-fox.svg');
+    }
+
+    &.is-walletConnect:before {
+      background-image: url('../img/walletConnect.svg');
+    }
+
+    &.is-generic:before {
+      background-image: url('../img/ethereum.svg');
+    }
+  }
+
+  .control-with-select {
+    display: flex;
+    flex-direction: column;
+
+    .button {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-width: 0;
+
+      &:before {
+        height: 38px;
+      }
+    }
+
+    .select {
+      &.is-empty {
+        select {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+
+      select {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top-width: 0;
+        border-color: #559774;
+        background-color: #559774;
+        height: 1.929rem;
+        color: $primary-invert;
+
+        &:hover {
+          background-color: $primary;
+          border-color: $primary;
+        }
+
+        &:focus {
+          border-color: #559774;
+          box-shadow: none;
+        }
+      }
+
+      &:not(.is-multiple) {
+        height: 1.929rem;
+
+        &:not(.is-loading) {
+          &::after {
+            border-color: $primary-invert;
+          }
+        }
+      }
+    }
+  }
+
+  .network-select {
+    width: 120px;
+    overflow: hidden;
+  }
+
+  /*> .control:hover {
+    .button {
+      border-color: #cdcdcd;
+    }
+
+    &.control-with-select {
+      .button {
+        border-bottom-color: $black;
+      }
+
+      .select select {
+        border-color: #cdcdcd;
+      }
+    }*
+  }*/
+}