diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css index f4c67c7..9739e18 100644 --- a/web/src/ui/RoomView.css +++ b/web/src/ui/RoomView.css @@ -3,10 +3,22 @@ div.room-view { height: 100%; display: grid; grid-template: - "header" 2rem + "header" 3rem "messageview" 1fr "input" 2rem / 1fr; + + > div.room-header { + display: flex; + align-items: center; + gap: .5rem; + padding-left: 1rem; + border-bottom: 2px solid #ccc; + + > span.room-name { + font-weight: bold; + } + } } form.message-composer { diff --git a/web/src/ui/RoomView.tsx b/web/src/ui/RoomView.tsx index 5b91b18..35dec2b 100644 --- a/web/src/ui/RoomView.tsx +++ b/web/src/ui/RoomView.tsx @@ -14,6 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React, { use, useState } from "react" +import { getMediaURL } from "../api/media.ts" import { RoomStateStore } from "../api/statestore.ts" import { useNonNullEventAsState } from "../util/eventdispatcher.ts" import { ClientContext } from "./ClientContext.ts" @@ -38,9 +39,17 @@ const RoomView = ({ room }: RoomViewProps) => { } return
- {roomMeta.room_id} + + + {roomMeta.name ?? roomMeta.room_id} +
- +
{ const previewText = makePreviewText(room.preview_event) return
- +
{room.name}
diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css index 19fb4e9..9fb8722 100644 --- a/web/src/ui/roomlist/RoomList.css +++ b/web/src/ui/roomlist/RoomList.css @@ -15,13 +15,10 @@ div.room-list { } > div.room-entry-left { - height: 48px; - width: 48px; + height: 3rem; + width: 3rem; > img.room-avatar { - width: 40px; - height: 40px; - border-radius: 50%; padding: 4px; } } @@ -48,3 +45,10 @@ div.room-list { } } } + +img.avatar { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + object-fit: cover; +} diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index 0d89b73..4cf1795 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -15,13 +15,6 @@ div.timeline-event { width: 40px; height: 40px; margin-top: 2px; - - > img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; - } } > div.event-sender-and-time { diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx index fd3fac1..d36d310 100644 --- a/web/src/ui/timeline/TimelineEvent.tsx +++ b/web/src/ui/timeline/TimelineEvent.tsx @@ -69,7 +69,12 @@ const TimelineEvent = ({ room, evt }: TimelineEventProps) => { const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null return
- +
{memberEvtContent?.displayname ?? evt.sender}