fix(ui): uniform-size checkboxes, vertically-aligned form labels, and fixes for other UI imperfections/inconsistencies (#737)

src/styles/globals.css

@@ -37,6 +37,78 @@ body {
   @apply relative top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center h-screen text-center text-gray-300;
 }
 
+.heading {
+  @apply text-2xl leading-8 text-gray-100;
+}
+
+.description {
+  @apply max-w-2xl mt-1 text-sm leading-5 text-gray-500;
+}
+
+.section {
+  @apply mt-6 mb-10 text-white;
+}
+
+.form-row {
+  @apply mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
+}
+
+.form-input {
+  @apply text-white sm:col-span-2;
+}
+
+.label-tip {
+  @apply block text-gray-500;
+}
+
+.actions {
+  @apply pt-5 mt-8 border-t border-gray-700;
+}
+
+input[type='checkbox'] {
+  @apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md;
+}
+
+.checkbox-label {
+  @apply block mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-1;
+}
+
+input[type='text'],
+input[type='password'],
+select {
+  @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5;
+}
+
+input.rounded-l-only,
+select.rounded-l-only {
+  @apply rounded-r-none;
+}
+
+input.rounded-r-only,
+select.rounded-r-only {
+  @apply rounded-l-none;
+}
+
+.protocol {
+  @apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm;
+}
+
+.text-label {
+  @apply block mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2;
+}
+
+.error {
+  @apply mt-2 text-sm text-red-500;
+}
+
+.group {
+  @apply mt-6 text-white;
+}
+
+.group-label {
+  @apply block mb-1 text-sm font-medium leading-6 text-gray-400;
+}
+
 /* Used for animating height */
 .extra-max-height {
   max-height: 100rem;