diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx index bdbc84b..fb79c33 100644 --- a/src/frontend/apps/desk/src/app/page.tsx +++ b/src/frontend/apps/desk/src/app/page.tsx @@ -1,13 +1,12 @@ 'use client'; -import { Button, Field, Input } from '@openfun/cunningham-react'; -import { useState } from 'react'; +import { Button } from '@openfun/cunningham-react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; -import { Box } from '@/components'; +import { Box, StyledLink } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Panel, useCreateTeam } from '@/features'; +import { Panel } from '@/features'; const StyledButton = styled(Button)` width: fit-content; @@ -15,8 +14,6 @@ const StyledButton = styled(Button)` export default function Home() { const { t } = useTranslation(); - const { mutate: createTeam } = useCreateTeam(); - const [teamName, setTeamName] = useState(''); const { colorsTokens } = useCunninghamTheme(); return ( @@ -29,21 +26,9 @@ export default function Home() { $width="100%" $gap="5rem" > - {t('Create a new team')} - - setTeamName(e.target.value)} - /> - - + + {t('Create a new team')} + ); diff --git a/src/frontend/apps/desk/src/app/teams/create/page.tsx b/src/frontend/apps/desk/src/app/teams/create/page.tsx new file mode 100644 index 0000000..eb946a2 --- /dev/null +++ b/src/frontend/apps/desk/src/app/teams/create/page.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { Button, Field, Input } from '@openfun/cunningham-react'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useCreateTeam } from '@/features'; + +export default function Page() { + const { t } = useTranslation(); + const { mutate: createTeam } = useCreateTeam(); + const [teamName, setTeamName] = useState(''); + + return ( + + setTeamName(e.target.value)} + /> + + + ); +} diff --git a/src/frontend/apps/desk/src/app/teams/layout.tsx b/src/frontend/apps/desk/src/app/teams/layout.tsx new file mode 100644 index 0000000..187115c --- /dev/null +++ b/src/frontend/apps/desk/src/app/teams/layout.tsx @@ -0,0 +1,27 @@ +'use client'; + +import { PropsWithChildren } from 'react'; + +import { Box } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; +import { Panel } from '@/features'; + +export default function Layout({ children }: PropsWithChildren) { + const { colorsTokens } = useCunninghamTheme(); + + return ( + + + + {children} + + + ); +} diff --git a/src/frontend/apps/desk/src/components/Link.tsx b/src/frontend/apps/desk/src/components/Link.tsx new file mode 100644 index 0000000..8081db2 --- /dev/null +++ b/src/frontend/apps/desk/src/components/Link.tsx @@ -0,0 +1,11 @@ +import Link from 'next/link'; +import styled from 'styled-components'; + +export const StyledLink = styled(Link)` + text-decoration: none; + color: #ffffff33; + &[aria-current='page'] { + color: #ffffff; + } + display: flex; +`; diff --git a/src/frontend/apps/desk/src/components/index.ts b/src/frontend/apps/desk/src/components/index.ts index 0a50680..c0ed256 100644 --- a/src/frontend/apps/desk/src/components/index.ts +++ b/src/frontend/apps/desk/src/components/index.ts @@ -1,2 +1,3 @@ export * from './Box'; export * from './Text'; +export * from './Link'; diff --git a/src/frontend/apps/desk/src/features/menu/Menu.tsx b/src/frontend/apps/desk/src/features/menu/Menu.tsx index de94f4d..18a36da 100644 --- a/src/frontend/apps/desk/src/features/menu/Menu.tsx +++ b/src/frontend/apps/desk/src/features/menu/Menu.tsx @@ -21,7 +21,6 @@ export const Menu = () => { className="m-0 p-0" $background={colorsTokens()['primary-800']} $height="100%" - $width="3.75rem" $justify="space-between" > diff --git a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx index 6fb641c..67be865 100644 --- a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx +++ b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx @@ -1,24 +1,14 @@ import { Button } from '@openfun/cunningham-react'; -import Link from 'next/link'; import { usePathname } from 'next/navigation'; import React, { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import styled from 'styled-components'; -import { Box } from '@/components/'; +import { Box, StyledLink } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; import { SVGComponent } from '@/types/components'; import { Tooltip } from './Tooltip'; -const StyledLink = styled(Link)` - text-decoration: none; - color: #ffffff33; - &[aria-current='page'] { - color: #ffffff; - } -`; - interface MenuItemProps { Icon: SVGComponent; label: string; @@ -29,7 +19,7 @@ const MenuItem = ({ Icon, label, href }: MenuItemProps) => { const { t } = useTranslation(); const pathname = usePathname(); const { colorsTokens } = useCunninghamTheme(); - const buttonRef = useRef(null); + const parentRef = useRef(null); const [isTooltipOpen, setIsTooltipOpen] = useState(false); const isActive = pathname === href; @@ -51,9 +41,10 @@ const MenuItem = ({ Icon, label, href }: MenuItemProps) => { setIsTooltipOpen(true)} onMouseOut={() => setIsTooltipOpen(false)} + style={{ display: 'block' }} > { {isTooltipOpen && ( ; + parentRef: React.MutableRefObject; textColor: CSSProperties['color']; backgroundColor: CSSProperties['color']; label: string; } export const Tooltip = ({ - buttonRef, + parentRef, backgroundColor, textColor, label, @@ -23,7 +23,7 @@ export const Tooltip = ({ }, []); return ( - ''} borderless> + ''} borderless> + diff --git a/src/frontend/apps/desk/src/features/teams/assets/icon-sort.svg b/src/frontend/apps/desk/src/features/teams/assets/icon-sort.svg index cfa94cb..ac4565d 100644 --- a/src/frontend/apps/desk/src/features/teams/assets/icon-sort.svg +++ b/src/frontend/apps/desk/src/features/teams/assets/icon-sort.svg @@ -1,14 +1,8 @@ - + diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx index f33ba63..fe65ce4 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx @@ -1,41 +1,75 @@ import { Button } from '@openfun/cunningham-react'; -import Image from 'next/image'; -import React from 'react'; +import React, { CSSProperties } from 'react'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; -import { Box } from '@/components'; +import { Box, StyledLink } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; -import { default as IconAdd } from '../assets/icon-add.svg?url'; -import { default as IconSort } from '../assets/icon-sort.svg?url'; +import { TeamsOrdering } from '../api/useTeams'; +import IconAdd from '../assets/icon-add.svg'; +import IconSort from '../assets/icon-sort.svg'; import { useTeamStore } from '../store/useTeamsStore'; +const ButtonSort = styled(Button)<{ + $background: CSSProperties['background']; + $color: CSSProperties['color']; +}>` + &.c__button { + svg { + background-color: transparent; + transition: all 0.3s; + } + + &.c__button--active svg { + background-color: ${({ $background }) => $background}; + border-radius: 10rem; + color: ${({ $color }) => $color}; + } + } +`; + export const PanelActions = () => { const { t } = useTranslation(); - const changeOrdering = useTeamStore((state) => state.changeOrdering); + const { changeOrdering, ordering } = useTeamStore(); + const { colorsTokens } = useCunninghamTheme(); return ( button { + & button { padding: 0; + + svg { + padding: 0.1rem; + } } `} > - } + icon={ + + } color="tertiary" className="c__button-no-bg p-0 m-0" onClick={changeOrdering} + active={ordering === TeamsOrdering.BY_CREATED_ON} + $background={colorsTokens()['primary-200']} + $color={colorsTokens()['primary-600']} /> - } - color="tertiary" - className="c__button-no-bg p-0 m-0" - /> + + + } + color="tertiary" + className="c__button-no-bg p-0 m-0" + /> + ); };