Changed 'create' page, grouping components and adding more explanations

src/short-urls/CreateShortUrl.scss

@@ -6,3 +6,8 @@
     display: block;
   }
 }
+
+.create-short-url .form-group:last-child,
+.create-short-url p:last-child {
+  margin-bottom: 0;
+}

src/short-urls/CreateShortUrl.tsx

@@ -1,6 +1,6 @@
 import { isEmpty, pipe, replace, trim } from 'ramda';
 import { FC, useState } from 'react';
-import { Button, FormGroup, Input } from 'reactstrap';
+import { Button, Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
 import { InputType } from 'reactstrap/lib/Input';
 import * as m from 'moment';
 import DateInput, { DateInputProps } from '../utils/DateInput';
@@ -101,7 +101,7 @@ const CreateShortUrl = (
   const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
 
   return (
-    <form onSubmit={save}>
+    <form className="create-short-url" onSubmit={save}>
       <FormGroup>
         <Input
           bsSize="lg"
@@ -120,12 +120,17 @@ const CreateShortUrl = (
       {!basicMode && (
         <>
           <div className="row">
-            <div className="col-sm-4">
+            <div className="col-sm-6 mb-3">
+              <Card>
+                <CardHeader>Customize the short URL</CardHeader>
+                <CardBody>
+                  <p>
+                    Use a custom slug for your marketing campaigns, change the domain or set a specific length for
+                    the auto-generated short code.
+                  </p>
                   {renderOptionalInput('customSlug', 'Custom slug', 'text', {
                     disabled: hasValue(shortUrlCreation.shortCodeLength),
                   })}
-            </div>
-            <div className="col-sm-4">
                   {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
                     min: 4,
                     disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug),
@@ -133,8 +138,6 @@ const CreateShortUrl = (
                       title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
                     },
                   })}
-            </div>
-            <div className="col-sm-4">
                   {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', {
                     disabled: disableDomain,
                     ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
@@ -147,25 +150,32 @@ const CreateShortUrl = (
                       />
                     </FormGroup>
                   )}
-            </div>
+                </CardBody>
+              </Card>
             </div>
 
-          <div className="row">
+            <div className="col-sm-6 mb-3">
-            <div className="col-sm-4">
+              <Card>
+                <CardHeader>Limit access to the short URL</CardHeader>
+                <CardBody>
+                  <p>Determine when and how many times your short URL can be accessed.</p>
                   {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-            </div>
-            <div className="col-sm-4">
                   {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
-            </div>
-            <div className="col-sm-4">
                   {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
+                </CardBody>
+              </Card>
             </div>
           </div>
 
-          <ForServerVersion minVersion="1.16.0">
+          <Card className="mb-3">
-            <div className="mb-4 row">
+            <CardHeader>Extra validations</CardHeader>
-              <div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
+            <CardBody>
+              <p>
+                Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
+                provided data.
+              </p>
               <ForServerVersion minVersion="2.4.0">
+                <p>
                   <Checkbox
                     inline
                     checked={shortUrlCreation.validateUrl}
@@ -173,9 +183,10 @@ const CreateShortUrl = (
                   >
                     Validate URL
                   </Checkbox>
+                </p>
               </ForServerVersion>
-              </div>
+              <ForServerVersion minVersion="1.16.0">
-              <div className="col-sm-6 text-center text-sm-right">
+                <p>
                   <Checkbox
                     inline
                     className="mr-2"
@@ -185,13 +196,14 @@ const CreateShortUrl = (
                     Use existing URL if found
                   </Checkbox>
                   <UseExistingIfFoundInfoIcon />
-              </div>
+                </p>
-            </div>
               </ForServerVersion>
+            </CardBody>
+          </Card>
         </>
       )}
 
-      <div className="text-right">
+      <div className="text-center">
         <Button
           outline
           color="primary"