bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'tabs-outline' into 'develop'

Browse source 
Add outline in some places

See merge request soapbox-pub/soapbox-fe!1451
This commit is contained in:
marcin mikołajczak 2022-05-26 15:00:12 +00:00
commit 8d31554f0a
5 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/account.tsx
View file

@ -26,7 +26,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
};
return (
<button className='w-4 h-4 flex-none' onClick={handleClick}>
<button className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2' onClick={handleClick}>
<img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
</button>
);

2
app/soapbox/components/ui/card/card.tsx
View file

@ -63,7 +63,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
return (
<Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp>

4
app/soapbox/components/ui/menu/menu.css
View file

@ -4,6 +4,10 @@
z-index: 1003;
}
[data-reach-menu-button] {
@apply focus:ring-primary-500 focus:ring-2 focus:ring-offset-2;
}
div:focus[data-reach-menu-list] {
outline: none;
}

3
app/soapbox/components/ui/tabs/tabs.css
View file

@ -13,7 +13,8 @@
[data-reach-tab] {
@apply flex-1 flex justify-center items-center
py-4 px-1 text-center font-medium text-sm text-gray-500
dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
focus:ring-primary-500 focus:ring-2;
}
[data-reach-tab][data-selected] {

4
app/styles/components/dropdown-menu.scss
View file

@ -44,8 +44,10 @@
}
&__item {
@apply focus-within:ring-primary-500 focus-within:ring-2;
a {
@apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
@apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 focus:hover:bg-slate-800 cursor-pointer;
> .svg-icon:first-child {
@apply h-5 w-5 mr-2.5 transition-none;