diff --git a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx b/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx index 3e1366a6..dd8b53e4 100644 --- a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx +++ b/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx @@ -17,7 +17,7 @@ export const ShortUrlsFilterDropdown = ( const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] }); return ( - + Visits: Ignore visits from bots diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss index f5c40c27..451a2346 100644 --- a/src/utils/DropdownBtn.scss +++ b/src/utils/DropdownBtn.scss @@ -2,13 +2,17 @@ @import '../utils/mixins/vertical-align'; +.dropdown-btn__toggle.dropdown-btn__toggle { + text-align: left; + padding-right: 1.75rem; +} + .dropdown-btn__toggle.dropdown-btn__toggle, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover, .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle { - text-align: left; color: var(--input-text-color); background-color: var(--primary-color); border-color: var(--input-border-color); diff --git a/src/utils/DropdownBtn.tsx b/src/utils/DropdownBtn.tsx index 08e0ef4d..46e69421 100644 --- a/src/utils/DropdownBtn.tsx +++ b/src/utils/DropdownBtn.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import type { FC, PropsWithChildren } from 'react'; import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; import { useToggle } from './helpers/hooks'; @@ -9,14 +10,15 @@ export type DropdownBtnProps = PropsWithChildren<{ className?: string; dropdownClassName?: string; right?: boolean; + inline?: boolean; minWidth?: number; }>; export const DropdownBtn: FC = ( - { text, disabled = false, className = '', children, dropdownClassName, right = false, minWidth }, + { text, disabled = false, className, children, dropdownClassName, right = false, minWidth, inline }, ) => { const [isOpen, toggle] = useToggle(); - const toggleClasses = `dropdown-btn__toggle btn-block ${className}`; + const toggleClasses = classNames('dropdown-btn__toggle', className, { 'btn-block': !inline }); const style = { minWidth: minWidth && `${minWidth}px` }; return ( diff --git a/src/utils/ExportBtn.tsx b/src/utils/ExportBtn.tsx index 351083c1..feee65d9 100644 --- a/src/utils/ExportBtn.tsx +++ b/src/utils/ExportBtn.tsx @@ -5,10 +5,10 @@ import type { ButtonProps } from 'reactstrap'; import { Button } from 'reactstrap'; import { prettify } from './helpers/numbers'; -interface ExportBtnProps extends Omit { +type ExportBtnProps = Omit & { amount?: number; loading?: boolean; -} +}; export const ExportBtn: FC = ({ amount = 0, loading = false, ...rest }) => (