Fixed form labels

src/settings/RealTimeUpdatesSettings.tsx

@@ -25,8 +25,8 @@ const RealTimeUpdatesSettings = (
         </FormText>
       </ToggleSwitch>
     </FormGroup>
-    <FormGroup className="mb-0">
-      <label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}>
+    <div>
+      <label className={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}>
         Real-time updates frequency (in minutes):
       </label>
       <Input
@@ -47,7 +47,7 @@ const RealTimeUpdatesSettings = (
           {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
         </FormText>
       )}
-    </FormGroup>
+    </div>
   </SimpleCard>
 );
 

src/settings/ShortUrlCreationSettings.tsx

@@ -50,8 +50,8 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           </FormText>
         </ToggleSwitch>
       </FormGroup>
-      <FormGroup className="mb-0">
-        <label>Tag suggestions search mode:</label>
+      <div>
+        <label className="form-label">Tag suggestions search mode:</label>
         <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>
-      </FormGroup>
+      </div>
     </SimpleCard>
   );
 };

src/settings/ShortUrlsListSettings.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FormGroup } from 'reactstrap';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
 import { SimpleCard } from '../utils/SimpleCard';
@@ -14,13 +13,11 @@ export const ShortUrlsListSettings: FC<ShortUrlsListProps> = (
   { settings: { shortUrlsList }, setShortUrlsListSettings },
 ) => (
   <SimpleCard title="Short URLs list" className="h-100">
-    <FormGroup className="mb-0">
-      <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 } })}
-      />
-    </FormGroup>
+    <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 } })}
+    />
   </SimpleCard>
 );

src/settings/TagsSettings.tsx

@@ -16,7 +16,7 @@ interface TagsProps {
 export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
   <SimpleCard title="Tags" className="h-100">
     <FormGroup>
-      <label>Default display mode when managing tags:</label>
+      <label className="form-label">Default display mode when managing tags:</label>
       <TagsModeDropdown
         mode={tags?.defaultMode ?? 'cards'}
         renderTitle={(tagsMode) => capitalize(tagsMode)}
@@ -24,13 +24,13 @@ export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSetting
       />
       <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
     </FormGroup>
-    <FormGroup className="mb-0">
-      <label>Default ordering for tags list:</label>
+    <div>
+      <label className="form-label">Default ordering for tags list:</label>
       <OrderingDropdown
         items={TAGS_ORDERABLE_FIELDS}
         order={tags?.defaultOrdering ?? {}}
         onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
       />
-    </FormGroup>
+    </div>
   </SimpleCard>
 );

src/settings/VisitsSettings.tsx

@@ -1,4 +1,3 @@
-import { FormGroup } from 'reactstrap';
 import { FC } from 'react';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
@@ -11,13 +10,11 @@ interface VisitsProps {
 
 export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
   <SimpleCard title="Visits" className="h-100">
-    <FormGroup className="mb-0">
-      <label>Default interval to load on visits sections:</label>
-      <DateIntervalSelector
-        allText="All visits"
-        active={settings.visits?.defaultInterval ?? 'last30Days'}
-        onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
-      />
-    </FormGroup>
+    <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 })}
+    />
   </SimpleCard>
 );

src/short-urls/helpers/QrCodeModal.tsx

@@ -3,7 +3,6 @@ import { Modal, FormGroup, ModalBody, ModalHeader, Row, Button } from 'reactstra
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
-import classNames from 'classnames';
 import { ShortUrlModalProps } from '../data';
 import { SelectedServer } from '../../servers/data';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
@@ -56,10 +55,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
       </ModalHeader>
       <ModalBody>
         <Row>
-          <FormGroup
-            className={classNames({ 'col-md-4': willRenderThreeControls, 'col-md-6': !willRenderThreeControls })}
-          >
-            <label className="mb-0">Size: {size}px</label>
+          <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+            <label>Size: {size}px</label>
             <input
               type="range"
               className="form-control-range"
@@ -71,8 +68,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
             />
           </FormGroup>
           {capabilities.marginIsSupported && (
-            <FormGroup className={willRenderThreeControls ? 'col-md-4' : 'col-md-6'}>
-              <label className="mb-0">Margin: {margin}px</label>
+            <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+              <label>Margin: {margin}px</label>
               <input
                 type="range"
                 className="form-control-range"

src/utils/forms/FormGroupContainer.tsx

@@ -15,13 +15,13 @@ export interface FormGroupContainerProps {
 }
 
 export const FormGroupContainer: FC<FormGroupContainerProps> = (
-  { children, value, onChange, id, type, required, placeholder, className, labelClassName },
+  { children, value, onChange, id, type, required, placeholder, className, labelClassName = '' },
 ) => {
   const forId = useRef<string>(id ?? uuid());
 
   return (
     <FormGroup className={className ?? ''}>
-      {children && <label htmlFor={forId.current} className={labelClassName ?? ''}>{children}:</label>}
+      <label htmlFor={forId.current} className={`form-label ${labelClassName}`}>{children}:</label>
       <input
         className="form-control"
         type={type ?? 'text'}