diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx index 2173c9084..2125c8f7a 100644 --- a/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx +++ b/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; + import { ResponseParticipant } from '@morak/apitype'; import { ReactComponent as People } from '@/assets/icons/people.svg'; @@ -12,24 +14,34 @@ type ChattingHeaderProps = { }; export function ChattingHeader({ title, participants }: ChattingHeaderProps) { + const [participantsShown, setParticipantsShown] = useState(false); + return (
- {title} -
+

{title}

+
+
); } diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts b/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts index fbeaf47fa..fb49a6093 100644 --- a/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts +++ b/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts @@ -33,7 +33,7 @@ export const header = style({ justifyContent: 'space-between', alignItems: 'center', gap: '1.6rem', - padding: '2.4rem 1.6rem', + padding: '1.6rem', background: vars.color.grayscale50, }); @@ -50,6 +50,8 @@ export const notParticipated = style([ }, ]); +const shown = style({}); + export const participants = style([ sansRegular16, { @@ -57,20 +59,29 @@ export const participants = style([ alignItems: 'center', gap: '0.4rem', height: '100%', + padding: '0.8rem', position: 'relative', + selectors: { + [` ${shown}&`]: { + background: vars.color.grayscale100, + borderRadius: '0.8rem', + }, + }, }, ]); export const popover = style({ display: 'none', - top: '3rem', + top: '4rem', selectors: { - [`${participants}:hover &, ${participants}:active &`]: { + [`${participants}:hover &, ${participants}:active &, ${shown}&`]: { display: 'flex', }, }, }); +export { shown }; + export const submitButton = style({ height: '4.8rem', });