public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

/settings sidebar doesn't match figma designs fix (#4705) 

Co-authored-by: Guest <guest@pop-os.localdomain>
Co-authored-by: root <root@pop-os.localdomain>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
pull/4719/head
Harsh Singh 2022-09-27 14:54:09 +05:30 committed by GitHub
parent f9ef883f3d
commit 5da735c418
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/v2/core/layouts/SettingsLayout.tsx
View File

@ -120,31 +120,33 @@ const SettingsSidebarContainer = ({ className = "" }) => {
<div className="desktop-only pt-4" /> <div className="desktop-only pt-4" />
<div> <div>
<VerticalTabItem <VerticalTabItem
name="Settings" name="Back"
href="/" href="/"
icon={Icon.FiArrowLeft} icon={Icon.FiArrowLeft}
textClassNames="text-md font-medium leading-none text-black" textClassNames="text-md font-medium leading-none text-black"
className="my-6"
/> />
</div> </div>
{tabsWithPermissions.map((tab) => { {tabsWithPermissions.map((tab) => {
return tab.name !== "teams" ? ( return tab.name !== "teams" ? (
<React.Fragment key={tab.href}> <React.Fragment key={tab.href}>
<div> <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
<div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900"> <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 text-sm font-medium leading-none text-gray-600 hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
{tab && tab.icon && ( {tab && tab.icon && (
<tab.icon className="mr-[12px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" /> <tab.icon className="mr-[12px] h-[16px] w-[16px] stroke-[2px] md:mt-0" />
)} )}
<p>{t(tab.name)}</p> <p className="text-sm font-medium leading-5">{t(tab.name)}</p>
</div> </div>
</div> </div>
<div className="mt-2"> <div className="my-3">
{tab.children?.map((child) => ( {tab.children?.map((child, index) => (
<VerticalTabItem <VerticalTabItem
key={child.href} key={child.href}
name={t(child.name)} name={t(child.name)}
isExternalLink={child.isExternalLink} isExternalLink={child.isExternalLink}
href={child.href || "/"} href={child.href || "/"}
textClassNames="px-3 text-gray-900 font-medium text-sm" textClassNames="px-3 text-gray-900 font-medium text-sm"
className={`my-0.5 h-7 ${tab.children && index === tab.children?.length - 1 && "!mb-3"}`}
disableChevron disableChevron
/> />
))} ))}
@ -152,12 +154,12 @@ const SettingsSidebarContainer = ({ className = "" }) => {
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment key={tab.href}> <React.Fragment key={tab.href}>
<div> <div className={`${!tab.children?.length ? "mb-3" : ""}`}>
<div className="group mt-2 flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900"> <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
{tab && tab.icon && ( {tab && tab.icon && (
<tab.icon className="mr-[12px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" /> <tab.icon className="mr-[12px] h-[16px] w-[16px] stroke-[2px] md:mt-0" />
)} )}
<p>{t(tab.name)}</p> <p className="text-sm font-medium leading-5">{t(tab.name)}</p>
</div> </div>
{teams && {teams &&
teamMenuState && teamMenuState &&
@ -197,7 +199,7 @@ const SettingsSidebarContainer = ({ className = "" }) => {
</div> </div>
<img <img
src={getPlaceholderAvatar(team.logo, team?.name as string)} src={getPlaceholderAvatar(team.logo, team?.name as string)}
className="mt-2 ml-[12px] mr-[8px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" className="mr-[8px] h-[16px] w-[16px] self-start rounded-full stroke-[2px] md:mt-0"
alt={team.name || "Team logo"} alt={team.name || "Team logo"}
/> />
<p>{team.name}</p> <p>{team.name}</p>

6
packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
View File

@ -50,14 +50,12 @@ const VerticalTabItem = function ({
"group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900", "group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
props.disabled && "pointer-events-none !opacity-30", props.disabled && "pointer-events-none !opacity-30",
(isChild || !props.icon) && "ml-7 mr-5 w-auto", (isChild || !props.icon) && "ml-7 mr-5 w-auto",
!info ? "h-9" : "h-14", !info ? "h-6" : "h-14",
props.className props.className
)} )}
data-testid={`vertical-tab-${name}`} data-testid={`vertical-tab-${name}`}
aria-current={isCurrent ? "page" : undefined}> aria-current={isCurrent ? "page" : undefined}>
{props.icon && ( {props.icon && <props.icon className="mr-[10px] h-[16px] w-[16px] stroke-[2px] md:mt-0" />}
<props.icon className="mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
)}
<div> <div>
<span className="flex items-center space-x-2"> <span className="flex items-center space-x-2">
<Skeleton as="p">{t(name)}</Skeleton> <Skeleton as="p">{t(name)}</Skeleton>