More improvements to form controls with bootstrap 5

src/settings/RealTimeUpdatesSettings.tsx

@@ -4,6 +4,7 @@ import ToggleSwitch from '../utils/ToggleSwitch';
 import { SimpleCard } from '../utils/SimpleCard';
 import { FormText } from '../utils/forms/FormText';
 import { Settings } from './reducers/settings';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 
 interface RealTimeUpdatesProps {
   settings: Settings;
@@ -25,10 +26,11 @@ const RealTimeUpdatesSettings = (
         </FormText>
       </ToggleSwitch>
     </FormGroup>
-    <div>
-      <label className={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}>
-        Real-time updates frequency (in minutes):
-      </label>
+    <LabeledFormGroup
+      noMargin
+      label="Real-time updates frequency (in minutes):"
+      labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
+    >
       <Input
         type="number"
         min={0}
@@ -47,7 +49,7 @@ const RealTimeUpdatesSettings = (
           {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
         </FormText>
       )}
-    </div>
+    </LabeledFormGroup>
   </SimpleCard>
 );
 

src/settings/ShortUrlCreationSettings.tsx

@@ -5,6 +5,7 @@ import ToggleSwitch from '../utils/ToggleSwitch';
 import { DropdownBtn } from '../utils/DropdownBtn';
 import { FormText } from '../utils/forms/FormText';
 import { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 
 interface ShortUrlCreationProps {
   settings: Settings;
@@ -50,8 +51,7 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           </FormText>
         </ToggleSwitch>
       </FormGroup>
-      <div>
-        <label className="form-label">Tag suggestions search mode:</label>
+      <LabeledFormGroup noMargin label="Tag suggestions search mode:">
         <DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>
           <DropdownItem
             active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'}
@@ -67,7 +67,7 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           </DropdownItem>
         </DropdownBtn>
         <FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText>
-      </div>
+      </LabeledFormGroup>
     </SimpleCard>
   );
 };

src/settings/ShortUrlsListSettings.tsx

@@ -3,6 +3,7 @@ import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings as ShortUrlsSettings } from './reducers/settings';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 
 interface ShortUrlsListProps {
   settings: Settings;
@@ -13,11 +14,12 @@ export const ShortUrlsListSettings: FC<ShortUrlsListProps> = (
   { settings: { shortUrlsList }, setShortUrlsListSettings },
 ) => (
   <SimpleCard title="Short URLs list" className="h-100">
-    <label className="form-label">Default ordering for short URLs list:</label>
-    <OrderingDropdown
-      items={SHORT_URLS_ORDERABLE_FIELDS}
-      order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
-      onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
-    />
+    <LabeledFormGroup noMargin label="Default ordering for short URLs list:">
+      <OrderingDropdown
+        items={SHORT_URLS_ORDERABLE_FIELDS}
+        order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
+        onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
+      />
+    </LabeledFormGroup>
   </SimpleCard>
 );

src/settings/TagsSettings.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import { TagsModeDropdown } from '../tags/TagsModeDropdown';
 import { capitalize } from '../utils/utils';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
 import { FormText } from '../utils/forms/FormText';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';
 
 interface TagsProps {
@@ -15,22 +15,20 @@ interface TagsProps {
 
 export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
   <SimpleCard title="Tags" className="h-100">
-    <FormGroup>
-      <label className="form-label">Default display mode when managing tags:</label>
+    <LabeledFormGroup label="Default display mode when managing tags:">
       <TagsModeDropdown
         mode={tags?.defaultMode ?? 'cards'}
         renderTitle={(tagsMode) => capitalize(tagsMode)}
         onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
       />
       <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
-    </FormGroup>
-    <div>
-      <label className="form-label">Default ordering for tags list:</label>
+    </LabeledFormGroup>
+    <LabeledFormGroup noMargin label="Default ordering for tags list:">
       <OrderingDropdown
         items={TAGS_ORDERABLE_FIELDS}
         order={tags?.defaultOrdering ?? {}}
         onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
       />
-    </div>
+    </LabeledFormGroup>
   </SimpleCard>
 );

src/settings/VisitsSettings.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
 import { Settings, VisitsSettings as VisitsSettingsConfig } from './reducers/settings';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 
 interface VisitsProps {
   settings: Settings;
@@ -10,11 +11,12 @@ interface VisitsProps {
 
 export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
   <SimpleCard title="Visits" className="h-100">
-    <label className="form-label">Default interval to load on visits sections:</label>
-    <DateIntervalSelector
-      allText="All visits"
-      active={settings.visits?.defaultInterval ?? 'last30Days'}
-      onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
-    />
+    <LabeledFormGroup noMargin label="Default interval to load on visits sections:">
+      <DateIntervalSelector
+        allText="All visits"
+        active={settings.visits?.defaultInterval ?? 'last30Days'}
+        onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
+      />
+    </LabeledFormGroup>
   </SimpleCard>
 );