diff --git a/web/src/ui/rightpanel/RightPanel.css b/web/src/ui/rightpanel/RightPanel.css index 9f8c7b2..74f4fcd 100644 --- a/web/src/ui/rightpanel/RightPanel.css +++ b/web/src/ui/rightpanel/RightPanel.css @@ -11,14 +11,20 @@ div.right-panel { display: flex; align-items: center; vertical-align: center; - padding: 0 .25rem 0 .5rem; + padding: 0 .25rem; justify-content: space-between; - > div.panel-name { + div.left-side { + display: flex; + align-items: center; + } + + div.panel-name { + margin-left: .25rem; font-weight: bold; } - > button { + button { height: 2.5rem; width: 2.5rem; } diff --git a/web/src/ui/rightpanel/RightPanel.tsx b/web/src/ui/rightpanel/RightPanel.tsx index fe68933..3c32219 100644 --- a/web/src/ui/rightpanel/RightPanel.tsx +++ b/web/src/ui/rightpanel/RightPanel.tsx @@ -17,7 +17,8 @@ import { JSX, use } from "react" import type { UserID } from "@/api/types" import MainScreenContext from "../MainScreenContext.ts" import PinnedMessages from "./PinnedMessages.tsx" -import CloseButton from "@/icons/close.svg?react" +import BackIcon from "@/icons/back.svg?react" +import CloseIcon from "@/icons/close.svg?react" import "./RightPanel.css" export type RightPanelType = "pinned-messages" | "members" | "user" @@ -56,10 +57,20 @@ function renderRightPanelContent(props: RightPanelProps): JSX.Element | null { } const RightPanel = (props: RightPanelProps) => { + let backButton: JSX.Element | null = null + if (props.type === "user") { + backButton = + } return
-
{getTitle(props.type)}
- +
+ {backButton} +
{getTitle(props.type)}
+
+
{renderRightPanelContent(props)}