Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refact: settings page #2161

Merged
merged 9 commits into from
Feb 5, 2024
Merged

Refact: settings page #2161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
979386e
fix: fonts
Cedric921 Jan 30, 2024
aa30d20
fix: delete commented codes
Cedric921 Feb 4, 2024
1a3f72e
fix: fonts
Cedric921 Jan 30, 2024
04b3ebe
fix: delete commented codes
Cedric921 Feb 4, 2024
b48fff3
feat: make scrollable LeftSide Setting Menu
Cedric921 Feb 4, 2024
e9ba6c5
refact: Add Scroll to SideMenu of Personal Setting Page
Cedric921 Feb 4, 2024
6fc12e9
fix: navbar width
Cedric921 Feb 4, 2024
42b9c68
fix: personnnal settings accordion
Cedric921 Feb 4, 2024
ca9538e
fix: accordion styles
Cedric921 Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions apps/web/app/[locale]/settings/personal/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading