shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): add margin to ButtonWithDropdown component on movie/tv details page

Browse Source
This commit is contained in:
sct
2020-12-24 21:28:33 +09:00
parent d7b1c28406
commit 06fc98b6b9
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Common/ButtonWithDropdown/index.tsx
View File

@@ -14,7 +14,7 @@ const DropdownItem: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
...props ...props
}) => ( }) => (
<a <a
className="cursor-pointer flex items-center px-4 py-2 text-sm leading-5 text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:outline-none focus:border-indigo-700 focus:text-white" className="flex items-center px-4 py-2 text-sm leading-5 text-white bg-indigo-600 cursor-pointer hover:bg-indigo-500 hover:text-white focus:outline-none focus:border-indigo-700 focus:text-white"
{...props} {...props}
> >
{children} {children}
@@ -31,6 +31,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
text, text,
children, children,
dropdownIcon, dropdownIcon,
className,
...props ...props
}) => { }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@@ -38,22 +39,22 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
useClickOutside(buttonRef, () => setIsOpen(false)); useClickOutside(buttonRef, () => setIsOpen(false));
return ( return (
<span className="relative z-0 inline-flex shadow-sm rounded-md"> <span className="relative z-0 inline-flex rounded-md shadow-sm">
<button <button
type="button" type="button"
className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:ring-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:ring-blue transition ease-in-out duration-150 ${ className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:ring-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:ring-blue transition ease-in-out duration-150 ${
children ? 'rounded-l-md' : 'rounded-md' children ? 'rounded-l-md' : 'rounded-md'
}`} } ${className}`}
ref={buttonRef} ref={buttonRef}
{...props} {...props}
> >
{text} {text}
</button> </button>
<span className="-ml-px relative block"> <span className="relative block -ml-px">
{children && ( {children && (
<button <button
type="button" type="button"
className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:ring-blue transition ease-in-out duration-150" className="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-700 border border-indigo-600 rounded-r-md hover:bg-indigo-500 focus:z-10 focus:outline-none active:bg-indigo-700 focus:ring-blue"
aria-label="Expand" aria-label="Expand"
onClick={() => setIsOpen((state) => !state)} onClick={() => setIsOpen((state) => !state)}
> >
@@ -61,7 +62,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
dropdownIcon dropdownIcon
) : ( ) : (
<svg <svg
className="h-5 w-5" className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
@@ -84,8 +85,8 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<div className="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg"> <div className="absolute right-0 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
<div className="rounded-md bg-indigo-600 ring-1 ring-black ring-opacity-5"> <div className="bg-indigo-600 rounded-md ring-1 ring-black ring-opacity-5">
<div className="py-1">{children}</div> <div className="py-1">{children}</div>
</div> </div>
</div> </div>

1
src/components/MovieDetails/index.tsx
View File

@@ -351,6 +351,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</> </>
} }
onClick={() => setShowRequestModal(true)} onClick={() => setShowRequestModal(true)}
className="ml-2"
> >
{hasPermission(Permission.MANAGE_REQUESTS) && ( {hasPermission(Permission.MANAGE_REQUESTS) && (
<> <>

1
src/components/TvDetails/index.tsx
View File

@@ -357,6 +357,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
<FormattedMessage {...messages.requestmore} /> <FormattedMessage {...messages.requestmore} />
</> </>
} }
className="ml-2"
onClick={() => setShowRequestModal(true)} onClick={() => setShowRequestModal(true)}
> >
{hasPermission(Permission.MANAGE_REQUESTS) && {hasPermission(Permission.MANAGE_REQUESTS) &&