Skip to content

Commit

Permalink
Merge pull request #2161 from ever-co/refact/settings
Browse files Browse the repository at this point in the history 
Refact: settings page
  • Loading branch information
@evereq
evereq authored Feb 5, 2024
2 parents eea0be4 + ca9538e commit 402764a
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 25 deletions.
21 changes: 12 additions & 9 deletions apps/web/app/[locale]/settings/personal/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,13 @@ const Personal = () => {
{!user ? (
<SettingsPersonalSkeleton />
) : (
<MainLayout className="items-start pb-1">
<div className="pt-12 pb-4 bg-white dark:bg-dark--theme">
<MainLayout
className="items-start pb-1 h-screen "
childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start"
>
<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
<Container fullWidth={fullWidth}>
<div className="flex items-center gap-8">
<div className="flex flex-row items-center justify-start gap-8">
<Link href="/">
<ArrowLeft className="w-6 h-6" />
</Link>
Expand All @@ -42,18 +45,18 @@ const Personal = () => {
</Container>
</div>

<Container fullWidth={fullWidth} className="mb-10">
<div className="flex flex-col w-full sm:flex-row">
<LeftSideSettingMenu />
<div className="flex flex-col w-full mr-[20px] lg:mr-0">
<Container fullWidth={fullWidth} className="mb-10 flex-1">
<div className="flex flex-col w-full h-full lg:flex-row">
<LeftSideSettingMenu className="h-[72vh] pb-4" />
<div className="flex flex-col flex-1 h-[72vh] sm:mr-[20px] lg:mr-0 overflow-y-scroll">
<Link href={'/settings/team'} className="w-full">
<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
Go to Team settings
</button>
</Link>
<Accordian
title={t('pages.settingsPersonal.HEADING_TITLE')}
className=" max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
id="general"
>
{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">
Expand All @@ -64,7 +67,7 @@ const Personal = () => {
</Accordian>
<Accordian
title={t('pages.settings.DANDER_ZONE')}
className="p-4 mt-4 dark:bg-dark--theme"
className="p-4 mt-4 md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] dark:bg-dark--theme"
isDanger={true}
id="danger-zone"
>
Expand Down
31 changes: 17 additions & 14 deletions apps/web/app/[locale]/settings/team/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,13 @@ const Team = () => {
{!user ? (
<SettingsTeamSkeleton />
) : (
<MainLayout className="items-start pb-1 max-h-s">
<div className="pt-12 pb-4 bg-white dark:bg-dark--theme">
<Container>
<div className="flex items-center gap-8">
<MainLayout
className="items-start pb-1 h-screen "
childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start"
>
<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
<Container fullWidth={fullWidth}>
<div className="flex flex-row items-center justify-start gap-8">
<Link href="/">
<ArrowLeft className="w-6 h-6" />
</Link>
Expand All @@ -50,11 +53,11 @@ const Team = () => {
</Container>
</div>

<Container fullWidth={fullWidth} className="mb-10">
<div className="flex flex-col w-full lg:flex-row">
<LeftSideSettingMenu />
<Container fullWidth={fullWidth} className="mb-10 flex-1">
<div className="flex flex-col w-full h-full lg:flex-row">
<LeftSideSettingMenu className="h-[72vh] pb-4" />
{isTeamMember ? (
<div className="flex flex-col w-full sm:mr-[20px] lg:mr-0">
<div className="flex flex-col flex-1 h-[72vh] sm:mr-[20px] lg:mr-0 overflow-y-scroll">
<Link href={'/settings/personal'} className="w-full">
<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
Go to Personnal settings
Expand All @@ -63,7 +66,7 @@ const Team = () => {
{/* General Settings */}
<Accordian
title={t('pages.settingsTeam.HEADING_TITLE')}
className="max-w-[66vw] p-4 mt-8 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-8 dark:bg-dark--theme"
id="general-settings"
>
<div className="flex flex-col">
Expand All @@ -76,7 +79,7 @@ const Team = () => {
{isTeamManager ? (
<Accordian
title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
className="max-w-[66vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
id="invitations"
>
<InvitationSetting />
Expand All @@ -89,7 +92,7 @@ const Team = () => {
{isTeamManager ? (
<Accordian
title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
className="max-w-[66vw] p-4 mt-4 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-4 dark:bg-dark--theme"
id="member"
>
<MemberSetting />
Expand All @@ -101,7 +104,7 @@ const Team = () => {
{isTeamManager && (
<Accordian
title={t('pages.settingsTeam.INTEGRATIONS')}
className="max-w-[66vw] p-4 mt-4 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-4 dark:bg-dark--theme"
id="integrations"
>
<IntegrationSetting />
Expand All @@ -111,7 +114,7 @@ const Team = () => {
{/* Issues Settings */}
<Accordian
title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
className="max-w-[66vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
id="issues-settings"
>
<IssuesSettings />
Expand All @@ -129,7 +132,7 @@ const Team = () => {
{/* Danger Zone */}
<Accordian
title={t('pages.settings.DANDER_ZONE')}
className="max-w-[66vw] p-4 mt-4 dark:bg-dark--theme"
className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-4 dark:bg-dark--theme"
isDanger={true}
id="danger-zones"
>
Expand Down
5 changes: 3 additions & 2 deletions apps/web/lib/settings/left-side-setting-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useRecoilState } from 'recoil';
import Link from 'next/link';
import { clsxm } from '@app/utils';

export const LeftSideSettingMenu = () => {
export const LeftSideSettingMenu = ({ className}: { className?: string}) => {
const t = useTranslations();
const { PersonalAccordianData, TeamAccordianData } = useLeftSettingData();
const pathname = usePathname();
Expand Down Expand Up @@ -65,7 +66,7 @@ export const LeftSideSettingMenu = () => {

return (
<>
<div className="hidden lg:block lg:w-[320px] mt-[36px] sm:mr-[56px] mx-auto">
<div className={clsxm("hidden lg:block lg:w-[320px] mt-[36px] sm:mr-[56px] mx-auto h-full overflow-y-auto", className)}>
<Text className="text-4xl font-normal mb-[40px] text-center sm:text-left">{t('common.SETTINGS')}</Text>
<div className="flex sm:block">
<SidebarAccordian
Expand Down

0 comments on commit 402764a

Please sign in to comment.