fix: design adjustments to make Review form fit better (fixes #470)

web/css/review-form.css

@@ -3,7 +3,7 @@
 }
 
 .cards-container {
-  margin: 50px auto;
+  margin: 0px auto;
   height: var(--sentence-box-height);
   width: 50vw;
 }
@@ -36,14 +36,21 @@
   color: var(--dark-grey-color);
 }
 
-.card-review-footer {
-  margin-bottom: 50px;
+.card-review-buttons-section {
   text-align: center;
 }
 
-.card-review-footer .buttons {
+.card-review-buttons-section .buttons {
+  display: flex;
+  justify-content: center;
+}
+
+.review-footer {
+  margin-bottom: 50px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 
 .swipe {
@@ -57,7 +64,7 @@
   .card-sentence-box {
     width: var(--max-content-width);
   }
-  .card-review-footer {
+  .card-review-buttons-section {
     justify-content: space-between;
   }
 }

web/css/root.css

@@ -50,11 +50,11 @@ h2,
 h3,
 h4 {
   font-family: var(--second-font-family);
-  margin: 0.5em 0;
+  margin: 0.3em 0;
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 1.8rem;
 }
 
 h2 {
@@ -148,7 +148,7 @@ select {
 
 main {
   max-width: var(--max-content-width);
-  margin: 2rem auto 0 auto;
+  margin: 1.5rem auto 0 auto;
   padding-bottom: calc(var(--footer-height) + var(--footer-margin-top) + 50px);
 }
 

web/src/components/review-form.tsx

@@ -140,16 +140,9 @@ export default function SwipeReview(props: Props) {
         message="Reviewed sentences not submitted, are sure?"
       />
 
-      <p>Swipe right to approve the sentence. Swipe left to reject it. Swipe up to skip it.</p>
-      <p>
-        You have reviewed {reviewedSentencesCount} sentences. Do not forget to submit your review by
-        clicking on the &quot;Finish Review&quot; button below!
-      </p>
-
-      <SubmitButton submitText="Finish&nbsp;Review" pendingAction={false} />
-
       {message && <p>{message}</p>}
 
+      <p className="small">Swipe right to approve the sentence. Swipe left to reject it. Swipe up to skip it. <strong>Do not forget to submit your review!</strong></p>
       <section className="cards-container">
         {sentences.map((sentence, i) => (
           <TinderCard
@@ -170,7 +163,7 @@ export default function SwipeReview(props: Props) {
         ))}
       </section>
 
-      <section className="card-review-footer">
+      <section className="card-review-buttons-section">
         <div className="buttons">
           <button
             className="standalone secondary big"
@@ -191,9 +184,13 @@ export default function SwipeReview(props: Props) {
             Approve
           </button>
         </div>
+      </section>
+
+      <section className="review-footer">
         <p className="small">
           You can also use Keyboard Shortcuts: Y to Approve, N to Reject, S to Skip
         </p>
+        <SubmitButton submitText="Finish&nbsp;Review" pendingAction={false} />
       </section>
     </form>
   );