Align controls for proximity.

Author: RubenVerborgh

popup-app/components/IdpSelect.css

@@ -1,39 +1,25 @@
+.custom-idp {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin: 0 0 2em;
+}
+.custom-idp input {
+  flex-grow: 2;
+  margin-right: .5em;
+}
+
 .idp-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin: -.25em -.5em;
 }
-
 .idp {
   flex: 1 100%;
-
-  margin: .5em;
+  margin: .25em;
   padding: .75em .5em;
-
-  border: none;
   border-radius: 10px;
-  background-color: rgb(61, 109, 211);
-  color: #fff;
-  transition: background-color 0.4s;
-
-  cursor: pointer;
-}
-
-.idp:hover,
-.idp:focus {
-  background-color: rgb(55, 97, 188);
-  box-shadow: 1px 1px rgb(46, 80, 151);
-}
-
-.custom-idp {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  margin: .5em;
-}
-
-.custom-idp input {
-  flex-grow: 2;
 }
 
 @media all and (min-width: 500px) {

popup-app/index.css

@@ -1,3 +1,7 @@
+body {
+  margin: 20px;
+}
+
 body, button, input {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 11pt;
@@ -6,20 +10,25 @@ body, button, input {
 h1 {
   font-weight: normal;
   padding-bottom: 10px;
-  text-align: center;
 }
 
 p {
-  text-align: center;
+  margin: .75em 0;
 }
 
 button {
-  border: 1px solid grey;
-  border-radius: 2px;
-  padding: 4px;
-  margin-left: 4px;
+  font-weight: bold;
+  border: none;
+  border-radius: 7px;
+  background-color: rgb(61, 109, 211);
+  color: #fff;
+  transition: background-color 0.4s;
   cursor: pointer;
 }
+button:hover,
+button:focus {
+  background-color: rgb(55, 97, 188);
+}
 
 :focus {
   outline: none;