From afc574aceb6c8848bd676c410f4a562a817ca876 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 27 May 2023 09:40:49 +0200
Subject: [PATCH] Fixed block and inline dropdown buttons

---
 src/short-urls/helpers/ShortUrlsFilterDropdown.tsx | 2 +-
 src/utils/DropdownBtn.scss                         | 6 +++++-
 src/utils/DropdownBtn.tsx                          | 6 ++++--
 src/utils/ExportBtn.tsx                            | 4 ++--
 src/visits/helpers/VisitsFilterDropdown.tsx        | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

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 (
-    <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
       <DropdownItem header>Visits:</DropdownItem>
       <DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>
 
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<DropdownBtnProps> = (
-  { 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<ButtonProps, 'outline' | 'color' | 'disabled'> {
+type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
   amount?: number;
   loading?: boolean;
-}
+};
 
 export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
   <Button {...rest} outline color="primary" disabled={loading}>
diff --git a/src/visits/helpers/VisitsFilterDropdown.tsx b/src/visits/helpers/VisitsFilterDropdown.tsx
index 195acba6..8abb66b4 100644
--- a/src/visits/helpers/VisitsFilterDropdown.tsx
+++ b/src/visits/helpers/VisitsFilterDropdown.tsx
@@ -22,7 +22,7 @@ export const VisitsFilterDropdown = (
   const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
 
   return (
-    <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
       <DropdownItem header>Bots:</DropdownItem>
       <DropdownItem active={excludeBots} onClick={onBotsClick}>Exclude potential bots</DropdownItem>