Fixed links and some form styles

src/settings/RealTimeUpdatesSettings.tsx

@@ -2,6 +2,7 @@ import { FormGroup, Input } from 'reactstrap';
 import classNames from 'classnames';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { SimpleCard } from '../utils/SimpleCard';
+import { FormText } from '../utils/FormText';
 import { Settings } from './reducers/settings';
 
 interface RealTimeUpdatesProps {
@@ -19,9 +20,9 @@ const RealTimeUpdatesSettings = (
     <FormGroup>
       <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
         Enable or disable real-time updates.
-        <small className="form-text text-muted">
+        <FormText>
           Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
-        </small>
+        </FormText>
       </ToggleSwitch>
     </FormGroup>
     <FormGroup className="mb-0">
@@ -37,14 +38,14 @@ const RealTimeUpdatesSettings = (
         onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
       />
       {realTimeUpdates.enabled && (
-        <small className="form-text text-muted">
+        <FormText>
           {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
             <span>
               Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
             </span>
           )}
           {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-        </small>
+        </FormText>
       )}
     </FormGroup>
   </SimpleCard>

src/settings/ShortUrlCreationSettings.tsx

@@ -3,6 +3,7 @@ import { DropdownItem, FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { DropdownBtn } from '../utils/DropdownBtn';
+import { FormText } from '../utils/FormText';
 import { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings';
 
 interface ShortUrlCreationProps {
@@ -31,10 +32,10 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
         >
           Request validation on long URLs when creating new short URLs.
-          <small className="form-text text-muted">
+          <FormText>
             The initial state of the <b>Validate URL</b> checkbox will
             be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.
-          </small>
+          </FormText>
         </ToggleSwitch>
       </FormGroup>
       <FormGroup>
@@ -43,10 +44,10 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           onChange={(forwardQuery) => setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
         >
           Make all new short URLs forward their query params to the long URL.
-          <small className="form-text text-muted">
+          <FormText>
             The initial state of the <b>Forward query params on redirect</b> checkbox will
             be <b>{shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}</b>.
-          </small>
+          </FormText>
         </ToggleSwitch>
       </FormGroup>
       <FormGroup className="mb-0">
@@ -65,9 +66,7 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
             {tagFilteringModeText('includes')}
           </DropdownItem>
         </DropdownBtn>
-        <small className="form-text text-muted">
-          {tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}
-        </small>
+        <FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText>
       </FormGroup>
     </SimpleCard>
   );

src/settings/TagsSettings.tsx

@@ -5,6 +5,7 @@ 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/FormText';
 import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';
 
 interface TagsProps {
@@ -21,7 +22,7 @@ export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSetting
         renderTitle={(tagsMode) => capitalize(tagsMode)}
         onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
       />
-      <small className="form-text text-muted">Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</small>
+      <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
     </FormGroup>
     <FormGroup className="mb-0">
       <label>Default ordering for tags list:</label>