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>
 );