moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'icon-button-themes' into 'develop' 

IconButton: add themes

See merge request soapbox-pub/soapbox-fe!1729
This commit is contained in:
Alex Gleason 2022-08-13 14:09:21 +00:00
parent 34b7aad6dd 7615111eb0
commit 32b6c646cf
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/soapbox/components/ui/icon-button/icon-button.tsx
View File

@ -12,12 +12,14 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Text to display next ot the button. */ /** Text to display next ot the button. */
text?: string, text?: string,
/** Don't render a background behind the icon. */ /** Don't render a background behind the icon. */
transparent?: boolean transparent?: boolean,
/** Predefined styles to display for the button. */
theme?: 'seamless' | 'outlined',
} }
/** A clickable icon. */ /** A clickable icon. */
const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => { const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { src, className, iconClassName, text, transparent = false, ...filteredProps } = props; const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
return ( return (
<button <button
@ -25,6 +27,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
type='button' type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', { className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent, 'bg-white dark:bg-transparent': !transparent,
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'opacity-50': filteredProps.disabled, 'opacity-50': filteredProps.disabled,
}, className)} }, className)}
{...filteredProps} {...filteredProps}

9
app/soapbox/features/account/components/header.tsx
View File

@ -696,7 +696,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
// src={require('@tabler/icons/mail.svg')} // src={require('@tabler/icons/mail.svg')}
// onClick={onDirect} // onClick={onDirect}
// title={intl.formatMessage(messages.direct, { name: account.username })} // title={intl.formatMessage(messages.direct, { name: account.username })}
// className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500' // theme='outlined'
// className='px-2'
// iconClassName='w-4 h-4' // iconClassName='w-4 h-4'
// /> // />
// ); // );
@ -715,7 +716,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
src={require('@tabler/icons/upload.svg')} src={require('@tabler/icons/upload.svg')}
onClick={handleShare} onClick={handleShare}
title={intl.formatMessage(messages.share, { name: account.username })} title={intl.formatMessage(messages.share, { name: account.username })}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500' theme='outlined'
className='px-2'
iconClassName='w-4 h-4' iconClassName='w-4 h-4'
/> />
); );
@ -770,7 +772,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
<MenuButton <MenuButton
as={IconButton} as={IconButton}
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/dots.svg')}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500' theme='outlined'
className='px-2'
iconClassName='w-4 h-4' iconClassName='w-4 h-4'
children={null} children={null}
/> />

3
app/soapbox/features/ui/components/subscription-button.tsx
View File

@ -93,7 +93,8 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')} src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
onClick={handleToggle} onClick={handleToggle}
title={title} title={title}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500' theme='outlined'
className='px-2'
iconClassName='w-4 h-4' iconClassName='w-4 h-4'
/> />
); );