Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Updated tabs in AdminX Design System

Browse source 
refs. https://github.com/TryGhost/Team/issues/3151

Tabs were changing their widths which resulted in an unwanted visual effect.
This commit is contained in:
Peter Zimon 2023-05-25 14:44:51 +02:00
parent e6a28146e4
commit 5d1b752d89
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin-x-settings/src/admin-x-ds/global/TabView.tsx
View file

@ -29,9 +29,9 @@ const TabView: React.FC<TabViewProps> = ({tabs, defaultSelected}) => {
return (
<section>
<div className='flex gap-4 border-b border-grey-300'>
<div className='flex gap-5 border-b border-grey-300'>
{tabs.map(tab => (
<button key={tab.id} className={`-m-b-px cursor-pointer appearance-none border-b-[3px] py-1 text-sm transition-all ${selectedTab === tab.id ? 'border-black font-bold' : 'border-transparent hover:border-grey-500'}`} id={tab.id} type="button" onClick={handleTabChange}>{tab.title}</button>
<button key={tab.id} className={`-m-b-px cursor-pointer appearance-none border-b-[3px] py-1 text-sm transition-all after:invisible after:block after:h-px after:overflow-hidden after:font-bold after:text-transparent after:content-[attr(title)] ${selectedTab === tab.id ? 'border-black font-bold' : 'border-transparent hover:border-grey-500'}`} id={tab.id} title={tab.title} type="button" onClick={handleTabChange}>{tab.title}</button>
))}
</div>
{tabs.map(tab => (

4
ghost/admin-x-settings/src/components/settings/general/Users.tsx
View file

@ -32,8 +32,8 @@ const UsersList: React.FC<any> = ({users}) => {
if (!users || !users.length) {
return (
<div className='mt-2 text-grey-700'>
<p>No users found</p>
<div className='mt-2 py-10 text-center text-sm text-grey-700'>
No users found.
</div>
);
}