Refine groups UI - fixes #2938

static/css/add-group.css

@@ -0,0 +1,77 @@
+#add-group-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#add-group-screen.hidden {
+  display: none;
+}
+
+#add-group-screen h1 {
+  position: fixed;
+  top: 0;
+  line-height: 9.6rem;
+  margin: 0;
+  font-size: 1.6rem;
+  text-align: center;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: normal;
+  width: calc(100% - 18rem);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#add-group-screen h1 img {
+  vertical-align: middle;
+  margin-right: 0.3rem;
+}
+
+#add-group-form {
+  width: calc(100% - 4rem);
+  max-width: 48rem;
+  padding: 4rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  background-color: #597285;
+  border-radius: 0.5rem;
+}
+
+#add-group-title-input {
+  height: 3.2rem;
+  flex: 1;
+  margin: 0;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+#add-group-create-button {
+  height: 3.2rem;
+  font-size: 1.5rem;
+  margin: 0 0 0 1rem;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  background-color: #7f93a1;
+}
+
+#add-group-create-button:hover,
+#add-group-create-button:active {
+  background-color: #97aebf;
+}
+
+@media only screen and (max-width: 959px) {
+  #add-group-form {
+    flex-direction: column;
+  }
+
+  #add-group-title-input {
+    flex: none;
+  }
+
+  #add-group-create-button {
+    margin: 2rem auto 0 auto;
+    width: 9rem;
+  }
+}

static/css/add-thing.css

@@ -327,43 +327,3 @@
     width: 12rem;
   }
 }
-
-#add-group {
-  background-color: #597285;
-  width: 50%;
-  min-width: 28rem;
-  max-width: 65rem;
-  margin: 1rem auto;
-  padding: 1rem;
-  display: flex;
-  flex-direction: row;
-  border-radius: 0.5rem;
-  text-align: center;
-  flex-wrap: wrap;
-}
-
-#add-group-label {
-  flex-basis: 100%;
-  flex-grow: 1;
-}
-
-#add-group-title-input {
-  height: 1.75rem;
-  background-color: #d2d9de;
-  border: none;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  margin: 0.5rem 10px;
-  font-size: 1.6rem;
-  flex-grow: 1;
-  margin-top: 15px;
-}
-
-#add-group-add-button {
-  background-color: #7f93a1;
-  border: none;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  color: #fff;
-  margin-top: 15px;
-}