Skip to content

Commit

Permalink
fix: remove unecessary paddings / margings on home and team page (#2759)
Browse files Browse the repository at this point in the history 
* fix: remove unecessary paddings / margings on home and team page

* fix: fix broken views
  • Loading branch information
@CREDO23
CREDO23 authored Jul 19, 2024
1 parent dd315b3 commit f5e45af
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 71 deletions.
109 changes: 48 additions & 61 deletions apps/web/app/[locale]/page-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { useOrganizationTeams } from '@app/hooks';
import { clsxm } from '@app/utils';
import NoTeam from '@components/pages/main/no-team';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Card, Divider } from 'lib/components';
import { Breadcrumb, Card } from 'lib/components';
import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
import { Footer, MainLayout } from 'lib/layout';
import { MainLayout } from 'lib/layout';
import { IssuesView } from '@app/constants';
import { useNetworkState } from '@uidotdev/usehooks';
import Offline from '@components/pages/offline';
Expand Down Expand Up @@ -65,69 +65,56 @@ function MainPage() {
return (
<>
<div className="flex flex-col h-screen justify-between">
<div className="flex-grow">
<MainLayout className="h-auto" footerClassName={clsxm(' hidden')}>
<ChatwootWidget />
<div className="pt-3 h-[80vh]">
<ResizablePanelGroup direction="vertical">
{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
<ResizablePanel
defaultSize={50}
maxSize={48}
className={clsxm(
headerSize < 20 ? '!overflow-hidden' : '!overflow-visible',
'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
)}
onResize={(size) => setHeaderSize(size)}
>
<div className="bg-white sticky z-50 dark:bg-dark-high">
<div
className={clsxm(
'bg-white dark:bg-dark-high ',
!fullWidth && 'x-container'
)}
>
<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumb} className="text-sm" />
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs linkAll={false} />
</div>
{/* <div className="flex-grow "> */}
<MainLayout className="h-full" footerClassName={clsxm('')}>
<ChatwootWidget />
<div className=" h-full">
<ResizablePanelGroup direction="vertical">
{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
<ResizablePanel
defaultSize={30}
maxSize={48}
className={clsxm(
headerSize < 20 ? '!overflow-hidden ' : '!overflow-visible',
'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
)}
onResize={(size) => setHeaderSize(size)}
>
<div className="bg-white sticky z-50 dark:bg-dark-high">
<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumb} className="text-sm" />
</div>
<div className="mx-8-container mb-1">
<UnverifiedEmail />
<TeamInvitations />
<TeamOutstandingNotifications />
{isTeamMember ? (
<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
) : null}
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs linkAll={false} />
</div>
<TeamMemberHeader view={view} />
</div>
<div className="mx-8-container mb-1">
<UnverifiedEmail />
<TeamInvitations />
<TeamOutstandingNotifications />
{isTeamMember ? (
<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
) : null}
</div>
<TeamMemberHeader view={view} />
</div>
</ResizablePanel>
<ResizableHandle withHandle />

{/* </Container> */}
<ResizablePanel
defaultSize={55}
maxSize={95}
className="!overflow-y-scroll custom-scrollbar"
>
<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
</MainLayout>
</div>
<div className="bg-white dark:bg-transparent ">
<Divider />
<Footer
className={clsxm('justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
</div>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
{/* </Container> */}
<ResizablePanel
defaultSize={65}
maxSize={95}
className="!overflow-y-scroll custom-scrollbar"
>
<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
</MainLayout>
</div>
<Analytics />
</>
Expand Down
13 changes: 5 additions & 8 deletions apps/web/app/[locale]/profile/[memberId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, u
import { MainHeader, MainLayout } from 'lib/layout';
import Link from 'next/link';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl'
import { useTranslations } from 'next-intl';
import stc from 'string-to-color';

import { useRecoilValue, useSetRecoilState } from 'recoil';
Expand Down Expand Up @@ -105,15 +105,12 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
<MainLayout showTimer={profileIsAuthUser && isTrackingEnabled}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel
defaultSize={47}
maxSize={50}
defaultSize={30}
maxSize={48}
className={clsxm(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
onResize={(size) => setHeaderSize(size)}
>
<MainHeader
fullWidth={fullWidth}
className={clsxm(hookFilterType && ['pb-0'], 'pb-2', 'pt-20 sticky top-20 z-50')}
>
<MainHeader fullWidth={fullWidth} className={clsxm(hookFilterType && ['pb-0'], 'pb-2')}>
{/* Breadcrumb */}
<div className="flex items-center gap-8">
<Link href="/">
Expand Down Expand Up @@ -141,7 +138,7 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
</MainHeader>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={53} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
{hook.tab == 'worked' && canSeeActivity && (
<Container fullWidth={fullWidth} className="py-8">
<div className={clsxm('flex justify-start items-center gap-4 mt-3')}>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/lib/layout/main-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function MainLayout({
}: Props) {
const fullWidth = useRecoilValue(fullWidthState);
return (
<div className="w-full ">
<div className="w-full h-full">
<style jsx global>
{`
:root {
Expand Down Expand Up @@ -70,7 +70,7 @@ export function MainLayout({
<div className={clsxm('lg:flex-1 lg:w-full ', childrenClassName)}>{children}</div>
<Container
fullWidth={fullWidth}
className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
>
<Divider />
<Footer className="justify-between w-full px-0 mx-auto" />
Expand Down

0 comments on commit f5e45af

Please sign in to comment.