diff --git a/src/index.scss b/src/index.scss
index f1cee307..c4f8b0b5 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,6 +19,13 @@ body,
color: var(--text-color);
}
+a {
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: underline;
+}
+
.bg-main {
background-color: $mainColor !important;
}
diff --git a/src/settings/RealTimeUpdatesSettings.tsx b/src/settings/RealTimeUpdatesSettings.tsx
index 8081b26f..d2e5a452 100644
--- a/src/settings/RealTimeUpdatesSettings.tsx
+++ b/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 = (
Enable or disable real-time updates.
-
+
Real-time updates are currently being {realTimeUpdates.enabled ? 'processed' : 'ignored'}.
-
+
@@ -37,14 +38,14 @@ const RealTimeUpdatesSettings = (
onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
/>
{realTimeUpdates.enabled && (
-
+
{realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
Updates will be reflected in the UI every {realTimeUpdates.interval} minute{realTimeUpdates.interval > 1 && 's'}.
)}
{!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-
+
)}
diff --git a/src/settings/ShortUrlCreationSettings.tsx b/src/settings/ShortUrlCreationSettings.tsx
index 5c3a1ebb..e3c093d9 100644
--- a/src/settings/ShortUrlCreationSettings.tsx
+++ b/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 = ({ settings,
onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
>
Request validation on long URLs when creating new short URLs.
-
+
The initial state of the Validate URL checkbox will
be {shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}.
-
+
@@ -43,10 +44,10 @@ export const ShortUrlCreationSettings: FC = ({ settings,
onChange={(forwardQuery) => setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
>
Make all new short URLs forward their query params to the long URL.
-
+
The initial state of the Forward query params on redirect checkbox will
be {shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}.
-
+
@@ -65,9 +66,7 @@ export const ShortUrlCreationSettings: FC = ({ settings,
{tagFilteringModeText('includes')}
-
- {tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}
-
+ {tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}
);
diff --git a/src/settings/TagsSettings.tsx b/src/settings/TagsSettings.tsx
index 7359fb2f..2291798a 100644
--- a/src/settings/TagsSettings.tsx
+++ b/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 = ({ settings: { tags }, setTagsSetting
renderTitle={(tagsMode) => capitalize(tagsMode)}
onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
/>
- Tags will be displayed as {tags?.defaultMode ?? 'cards'}.
+ Tags will be displayed as {tags?.defaultMode ?? 'cards'}.
diff --git a/src/tags/helpers/Tag.scss b/src/tags/helpers/Tag.scss
index 180ff07b..113f7f42 100644
--- a/src/tags/helpers/Tag.scss
+++ b/src/tags/helpers/Tag.scss
@@ -3,7 +3,7 @@
}
.tag--light-bg {
- color: #000;
+ color: #222 !important;
}
.tag:not(:last-child) {
diff --git a/src/utils/BooleanControl.tsx b/src/utils/BooleanControl.tsx
index 0b642dd0..5b0be1bc 100644
--- a/src/utils/BooleanControl.tsx
+++ b/src/utils/BooleanControl.tsx
@@ -20,15 +20,15 @@ const BooleanControl: FC = (
const { current: id } = useRef(uuid());
const onChecked = (e: ChangeEvent) => onChange(e.target.checked, e);
const typeClasses = {
- 'custom-switch': type === 'switch',
- 'custom-checkbox': type === 'checkbox',
+ 'form-switch': type === 'switch',
+ 'form-checkbox': type === 'checkbox',
};
const style = inline ? { display: 'inline-block' } : {};
return (
-
-
-
+
+
+
);
};
diff --git a/src/utils/FormText.tsx b/src/utils/FormText.tsx
new file mode 100644
index 00000000..ffe4044b
--- /dev/null
+++ b/src/utils/FormText.tsx
@@ -0,0 +1,3 @@
+import { FC } from 'react';
+
+export const FormText: FC = ({ children }) => {children};
diff --git a/src/utils/NavPills.scss b/src/utils/NavPills.scss
index 33b605ac..95fedcd0 100644
--- a/src/utils/NavPills.scss
+++ b/src/utils/NavPills.scss
@@ -6,13 +6,14 @@
z-index: 2;
}
-.nav-pills__nav-link {
+.nav-pills__nav-link.nav-pills__nav-link {
border-radius: 0 !important;
padding-bottom: calc(.5rem - 3px) !important;
- border-bottom: 3px solid transparent;
+ border-bottom: 3px solid transparent !important;
color: #5d6778;
font-weight: 700;
cursor: pointer;
+ text-decoration: none;
@media (min-width: $smMin) and (max-width: $mdMax) {
font-size: 89%;
@@ -24,7 +25,7 @@
}
.nav-pills__nav-link.active {
- border-color: $mainColor;
+ border-color: $mainColor !important;
background-color: var(--primary-color) !important;
color: $mainColor !important;
}
diff --git a/test/settings/ShortUrlCreationSettings.test.tsx b/test/settings/ShortUrlCreationSettings.test.tsx
index 033a51fa..6fc6642b 100644
--- a/test/settings/ShortUrlCreationSettings.test.tsx
+++ b/test/settings/ShortUrlCreationSettings.test.tsx
@@ -3,6 +3,7 @@ import { Mock } from 'ts-mockery';
import { DropdownItem } from 'reactstrap';
import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
+import { FormText } from '../../src/utils/FormText';
import ToggleSwitch from '../../src/utils/ToggleSwitch';
import { DropdownBtn } from '../../src/utils/DropdownBtn';
@@ -51,7 +52,7 @@ describe('', () => {
[ undefined, 'Validate URL checkbox will be unchecked' ],
])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => {
const wrapper = createWrapper(shortUrlCreation);
- const validateUrlText = wrapper.find('.form-text').first();
+ const validateUrlText = wrapper.find(FormText).first();
expect(validateUrlText.text()).toContain(expectedText);
});
@@ -62,7 +63,7 @@ describe('', () => {
[{}, 'Forward query params on redirect checkbox will be checked' ],
])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => {
const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation });
- const forwardQueryText = wrapper.find('.form-text').at(1);
+ const forwardQueryText = wrapper.find(FormText).at(1);
expect(forwardQueryText.text()).toContain(expectedText);
});
@@ -77,7 +78,7 @@ describe('', () => {
[ undefined, 'Suggest tags starting with input', 'starting with' ],
])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => {
const wrapper = createWrapper(shortUrlCreation);
- const hintText = wrapper.find('.form-text').last();
+ const hintText = wrapper.find(FormText).last();
const dropdown = wrapper.find(DropdownBtn);
expect(dropdown.prop('text')).toEqual(expectedText);
diff --git a/test/utils/Checkbox.test.tsx b/test/utils/Checkbox.test.tsx
index 444924f4..5b2350d7 100644
--- a/test/utils/Checkbox.test.tsx
+++ b/test/utils/Checkbox.test.tsx
@@ -63,7 +63,7 @@ describe('', () => {
it('allows setting inline rendering', () => {
const wrapped = createComponent({ inline: true });
- const control = wrapped.find('.custom-control');
+ const control = wrapped.find('.form-check');
expect(control.prop('style')).toEqual({ display: 'inline-block' });
});