[UX] #599 separate database preparation from settings

src/main/resources/static/css/app.css

@@ -358,6 +358,57 @@ body {
   padding: 1rem;
 }
 
+.back-link {
+  color: var(--rw-primary);
+  display: inline-block;
+  font-size: .86rem;
+  font-weight: 800;
+  margin-bottom: .6rem;
+  text-decoration: none;
+}
+
+.settings-database-link {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.settings-database-link h2,
+.settings-danger-zone h2 {
+  font-size: 1rem;
+  font-weight: 800;
+  margin: .3rem 0;
+}
+
+.settings-database-link p {
+  color: var(--rw-muted);
+  margin: 0;
+  max-width: 52rem;
+}
+
+.settings-danger-zone {
+  background: #fff8e8;
+  border-color: #e7d29c;
+}
+
+.settings-impact-list {
+  color: var(--rw-muted);
+  margin: .75rem 0 1rem;
+  padding-left: 1.25rem;
+}
+
+.settings-impact-list li + li {
+  margin-top: .3rem;
+}
+
+.settings-confirm-form {
+  align-items: end;
+  grid-template-columns: minmax(220px, 1fr) auto;
+  max-width: 46rem;
+}
+
 .content-band h2,
 .section-heading h2 {
   font-size: 1rem;
@@ -1587,6 +1638,10 @@ body {
 }
 
 @media (max-width: 640px) {
+  .settings-confirm-form {
+    grid-template-columns: 1fr;
+  }
+
   .effective-tabs {
     overflow-x: auto;
   }