From 1fbeab4583817eeaa946c17099236401dbe7dde1 Mon Sep 17 00:00:00 2001
From: Ramona Beinstingel <75392103+rabeatwork@users.noreply.github.com>
Date: Thu, 8 Aug 2024 22:23:09 +0200
Subject: [PATCH] Communication: Improve the user interface (#9103)

---
 .../generate-competencies.component.html      |   8 +-
 .../student-exams.component.html              |   1 -
 .../quiz/manage/quiz-exercise.component.html  |   2 +-
 .../course-conversations.component.html       |  17 ++-
 .../course-conversations.component.scss       |  19 ++--
 .../course-conversations.component.ts         |  15 ++-
 .../course-wide-search.component.html         |  13 ++-
 .../conversation-header.component.html        |  27 ++---
 .../conversation-header.component.scss        |  20 ----
 .../conversation-messages.component.html      |  10 +-
 .../conversation-messages.component.scss      |  13 ++-
 .../conversation-messages.component.ts        |   2 +
 ...conversation-thread-sidebar.component.html |  13 ++-
 .../app/shared/metis/metis.component.scss     |   4 -
 .../app/shared/metis/post/post.component.html |  32 +++---
 .../posting-content.component.scss            |   1 +
 .../answer-post-header.component.html         |  51 +++++----
 .../post-header/post-header.component.html    |  42 ++++----
 .../posting-header.directive.ts               |   2 +-
 .../answer-post-reactions-bar.component.html  |  30 +++---
 .../post-reactions-bar.component.html         | 100 +++++++++---------
 .../posting-reactions-bar.component.scss      |  11 +-
 .../posting-thread.component.html             |   2 +-
 .../accordion-add-options.component.scss      |   4 +-
 .../conversation-options.component.html       |   4 +-
 .../conversation-options.component.scss       |   5 +
 .../sidebar-card-small.component.html         |   8 +-
 .../sidebar-card-small.component.scss         |  15 ---
 src/main/webapp/content/scss/global.scss      |   4 +
 .../pageobjects/course/CourseMessages.ts      |   4 +-
 .../course-conversations.component.spec.ts    |   2 +
 .../conversation-header.component.spec.ts     |   5 +
 .../answer-post-header.component.spec.ts      |   9 +-
 .../post-header/post-header.component.spec.ts |   5 +-
 .../sidebar-card-small.component.spec.ts      |   4 +-
 .../pageobjects/course/CourseMessagesPage.ts  |   4 +-
 36 files changed, 267 insertions(+), 241 deletions(-)

diff --git a/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.html b/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.html
index 8a8f417a406c..8e0bf4fd659e 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.html
+++ b/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.html
@@ -8,16 +8,14 @@ <h3 jhiTranslate="artemisApp.competency.generate.listTitle" class="mt-2"></h3>
     @if (isLoading) {
         <div class="d-flex flex-column align-items-center mb-1">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span jhiTranslate="loading" class="sr-only"></span>
             </div>
-            <span class="">{{ 'artemisApp.competency.generate.loading' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.competency.generate.loading"></span>
         </div>
     }
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
         @if (!competencies.length && !isLoading) {
-            <div class="mb-1">
-                {{ 'global.generic.emptyList' | artemisTranslate }}
-            </div>
+            <div class="mb-1" jhiTranslate="global.generic.emptyList"></div>
         }
         <div class="border-0" formArrayName="competencies">
             @for (competencies of competencies.controls; track competencies; let i = $index) {
diff --git a/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html b/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
index d1efb7f5c9b7..fd714d8f3f14 100644
--- a/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
+++ b/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
@@ -58,7 +58,6 @@ <h2>
                 <div class="flex-grow-1 flex-basis-10 position-relative">
                     <div class="position-absolute w-100 h-100 top-0">
                         <ngb-progressbar
-                            class=""
                             [value]="exercisePreparationStatus.finished!"
                             [max]="exercisePreparationStatus.overall ? exercisePreparationStatus.overall - exercisePreparationStatus.failed! : 0"
                             [animated]="true"
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
index cc6aacacc8aa..097f8d74b05a 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
@@ -78,7 +78,7 @@
                         <td>{{ quizExercise.maxPoints }}</td>
                         <td>{{ exerciseService.isIncludedInScore(quizExercise) }}</td>
                         <td class="text-end">
-                            <div class="">
+                            <div>
                                 <jhi-quiz-exercise-lifecycle-buttons
                                     [quizExercise]="quizExercise"
                                     (loadOne)="loadOne($event)"
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
index d66b3f8edaf2..a042cd0ee25d 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -1,5 +1,5 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <div class="input-group mb-1 rounded-2 p-2 me-2 module-bg" [hidden]="!isCodeOfConductAccepted">
+    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg" [hidden]="!isCodeOfConductAccepted">
         <!-- search bar -->
         <input
             #courseWideSearchInput
@@ -42,15 +42,24 @@
                     <jhi-course-conversations-code-of-conduct [course]="course!" />
                 </div>
             }
-            <div class="col pe-0 flex-grow-1 module-bg" [ngClass]="{ 'card-border': true }" style="min-width: 200px">
+            <div class="col flex-grow-1 module-bg rounded-3 scrollable-content" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }" style="min-width: 200px">
                 @if (activeConversation) {
                     <jhi-conversation-header (collapseSearch)="toggleChannelSearch()" />
-                    <jhi-conversation-messages (openThread)="postInThread = $event" [course]="course" [searchbarCollapsed]="channelSearchCollapsed" />
+                    <jhi-conversation-messages
+                        [contentHeightDev]="!isProduction || isTestServer"
+                        (openThread)="postInThread = $event"
+                        [course]="course"
+                        [searchbarCollapsed]="channelSearchCollapsed"
+                    />
                 } @else {
                     <jhi-course-wide-search (openThread)="postInThread = $event" [courseWideSearchConfig]="courseWideSearchConfig" />
                 }
             </div>
-            <div class="col d-flex flex-grow-1 justify-end px-0 card-border" style="max-width: min-content">
+            <div
+                class="col d-flex flex-grow-1 justify-end px-0 scrollable-content"
+                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"
+                style="max-width: min-content"
+            >
                 @if (!!postInThread) {
                     <jhi-conversation-thread-sidebar
                         [activeConversation]="activeConversation ?? postInThread.conversation!"
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss
index c4e9d7f54589..97b18eb9f998 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss
@@ -15,15 +15,20 @@
     max-height: calc(100vh - var(--header-height) - var(--communications-header-height));
 }
 
-.card-border {
-    --message-input-height: 175px;
-
-    border: 1px solid;
-    border-color: var(--bs-card-border-color);
-    border-radius: 0.25rem;
+.scrollable-content {
+    --message-input-height-dev: 193px;
+    --message-input-height-prod: 177px;
     overflow-y: auto;
     overflow-x: hidden;
-    max-height: calc(100vh - var(--header-height) - var(--message-input-height));
+    max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod));
+
+    &.content-height-dev {
+        max-height: calc(100vh - var(--header-height) - var(--message-input-height-dev));
+    }
+
+    @media (max-width: 768px) {
+        max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod)) !important;
+    }
 }
 
 .message-input {
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
index c367a1bcdfef..acca28f0068e 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
@@ -3,7 +3,7 @@ import { ConversationDTO } from 'app/entities/metis/conversation/conversation.mo
 import { Post } from 'app/entities/metis/post.model';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { EMPTY, Subject, from, take, takeUntil } from 'rxjs';
+import { EMPTY, Subject, Subscription, from, take, takeUntil } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { MetisConversationService } from 'app/shared/metis/metis-conversation.service';
 import { ChannelSubType, getAsChannelDTO } from 'app/entities/metis/conversation/channel.model';
@@ -20,6 +20,7 @@ import { defaultFirstLayerDialogOptions } from 'app/overview/course-conversation
 import { UserPublicInfoDTO } from 'app/core/user/user.model';
 import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component';
 import { ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component';
+import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 
 const DEFAULT_CHANNEL_GROUPS: AccordionGroups = {
     favoriteChannels: { entityData: [] },
@@ -79,13 +80,16 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     postInThread?: Post;
     activeConversation?: ConversationDTO = undefined;
     conversationsOfUser: ConversationDTO[] = [];
-    channelSearchCollapsed = false;
+    channelSearchCollapsed = true;
 
     conversationSelected = true;
     sidebarData: SidebarData;
     accordionConversationGroups: AccordionGroups;
     sidebarConversations: SidebarCardElement[] = [];
+    profileSubscription?: Subscription;
     isCollapsed = false;
+    isProduction = true;
+    isTestServer = false;
 
     readonly CHANNEL_TYPE_SHOW_ADD_OPTION = CHANNEL_TYPE_SHOW_ADD_OPTION;
     readonly CHANNEL_TYPE_ICON = CHANNEL_TYPE_ICON;
@@ -118,6 +122,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         private metisService: MetisService,
         private courseOverviewService: CourseOverviewService,
         private modalService: NgbModal,
+        private profileService: ProfileService,
     ) {}
 
     getAsChannel = getAsChannelDTO;
@@ -158,6 +163,11 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
                 this.isServiceSetUp = true;
             }
         });
+
+        this.profileSubscription = this.profileService.getProfileInfo()?.subscribe((profileInfo) => {
+            this.isProduction = profileInfo?.inProduction;
+            this.isTestServer = profileInfo.testServer ?? false;
+        });
     }
 
     subscribeToQueryParameter() {
@@ -186,6 +196,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.profileSubscription?.unsubscribe();
     }
 
     private subscribeToActiveConversation() {
diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
index 2a825b2bdff9..ce1e3506941d 100644
--- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
@@ -1,13 +1,13 @@
 <div class="mt-2 ms-2">
-    <div class="conversation-header">
-        <div class="d-flex justify-content-between">
-            <div>
+    <div class="d-flex justify-content-between">
+        <div>
+            <h4 class="d-inline-block rounded p-1 info">
                 @if (!courseWideSearchConfig.searchTerm) {
-                    <h3 class="conversation-name d-inline-block rounded p-1 info">All Messages</h3>
+                    All Messages
                 } @else {
-                    <h3 class="conversation-name d-inline-block rounded p-1 info">Search Results for "{{ courseWideSearchConfig.searchTerm }}"</h3>
+                    Search Results for "{{ courseWideSearchConfig.searchTerm }}"
                 }
-            </div>
+            </h4>
         </div>
     </div>
     @if (formGroup) {
@@ -86,7 +86,6 @@ <h3 class="conversation-name d-inline-block rounded p-1 info">Search Results for
             <div
                 id="scrollableDiv"
                 #container
-                class="body-bg"
                 [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0 }"
                 infinite-scroll
                 [scrollWindow]="false"
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
index db8ac0d2a6c0..ad47e0362fb6 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
@@ -1,8 +1,8 @@
 @if (activeConversation && course) {
-    <div class="conversation-header">
+    <div>
         <div class="d-flex justify-content-between flex-wrap">
             <div>
-                <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConversationDetailDialog($event, INFO)">
+                <h4 class="pointer d-inline-block rounded px-3 py-2 info" (click)="openConversationDetailDialog($event, INFO)">
                     @if (activeConversationAsChannel) {
                         <jhi-channel-icon
                             [isPublic]="activeConversationAsChannel.isPublic!"
@@ -14,7 +14,7 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
                         <jhi-group-chat-icon />
                     }
                     {{ conversationService.getConversationName(activeConversation, true) }}
-                </h3>
+                </h4>
             </div>
             @if (activeConversationAsChannel) {
                 @if (activeConversationAsChannel.tutorialGroupId && activeConversationAsChannel.tutorialGroupTitle) {
@@ -25,26 +25,29 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
                     </div>
                 }
             }
-            <div class="d-flex flex-wrap">
-                <div class="btn-toolbar p-2" role="toolbar">
+            <div class="d-flex flex-wrap gap-2 p-2">
+                <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group me-1" role="group">
-                        <button type="button" class="btn btn-outline-secondary search" (click)="toggleSearchBar()">
+                        <button type="button" class="btn btn-outline-secondary btn-sm search" (click)="toggleSearchBar()">
                             <fa-icon [icon]="faSearch" />
                         </button>
                     </div>
                 </div>
-                <div class="btn-toolbar p-2" role="toolbar">
+                <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group me-1" role="group">
                         @if (activeConversationAsChannel?.subTypeReferenceId) {
-                            <a class="btn btn-outline-secondary sub-type-reference" [routerLink]="channelSubTypeReferenceRouterLink">
-                                {{ channelSubTypeReferenceTranslationKey | artemisTranslate }}
+                            <a
+                                [jhiTranslate]="channelSubTypeReferenceTranslationKey ?? ''"
+                                class="btn btn-sm btn-outline-secondary sub-type-reference"
+                                [routerLink]="channelSubTypeReferenceRouterLink"
+                            >
                             </a>
                         }
-                        <button type="button" class="btn btn-outline-secondary members" (click)="openConversationDetailDialog($event, MEMBERS)">
+                        <button type="button" class="btn btn-sm btn-outline-secondary members" (click)="openConversationDetailDialog($event, MEMBERS)">
                             <fa-icon [icon]="faUserGroup" /> {{ activeConversation.numberOfMembers || 0 }}
                         </button>
                         @if (canAddUsers(activeConversation)) {
-                            <button type="button" class="btn btn-outline-secondary addUsers" (click)="openAddUsersDialog($event)">
+                            <button type="button" class="btn btn-sm btn-outline-secondary addUsers" (click)="openAddUsersDialog($event)">
                                 <fa-icon [icon]="faUserPlus" />
                             </button>
                         }
@@ -55,7 +58,7 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
         @if (activeConversationAsChannel) {
             @if (activeConversationAsChannel.topic && activeConversationAsChannel.topic.length > 0) {
                 <div class="text-body-secondary d-flex justify-content-between px-2">
-                    <span class="d-inline-block conversation-topic">{{ activeConversationAsChannel.topic }}</span>
+                    <span id="conversation-topic" class="d-inline-block mw-100">{{ activeConversationAsChannel.topic }}</span>
                 </div>
             }
         }
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
index d4db996d2ff5..e69de29bb2d1 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
@@ -1,20 +0,0 @@
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'src/main/webapp/content/scss/artemis-variables';
-
-.conversation-header {
-    .conversation-name {
-        margin: 0.1rem;
-        border-radius: 0.25rem;
-
-        &:hover {
-            background-color: var(--slightly-darker-body-bg);
-            cursor: pointer;
-        }
-    }
-
-    .conversation-topic {
-        max-width: 100%;
-    }
-}
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
index 9b89efeaed9f..37468268ca6e 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -1,5 +1,5 @@
 @if (course) {
-    <div class="row p-3 justify-content-center conversation-messages">
+    <div class="row p-3 pt-0 justify-content-center conversation-messages">
         <div class="justify-content-center">
             <div class="row justify-content-center p-0">
                 <!-- search bar -->
@@ -47,7 +47,7 @@
                     </div>
                 }
             </div>
-            <div class="row mt-3">
+            <div class="mt-3">
                 <!-- loading messages -->
                 @if (isFetchingPosts) {
                     <div class="envelope">
@@ -64,8 +64,7 @@
                 <div
                     id="scrollableDiv"
                     #container
-                    class="body-bg"
-                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0 }"
+                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0, 'content-height-dev': contentHeightDev }"
                     infinite-scroll
                     [scrollWindow]="false"
                     (scrolledUp)="fetchNextPage()"
@@ -73,7 +72,7 @@
                     <!-- list of all top level posts -->
                     <!-- answers are opened in the thread sidebar -->
                     @for (post of posts; track postsTrackByFn($index, post)) {
-                        <div class="pt-2">
+                        <div>
                             <jhi-posting-thread
                                 #postingThread
                                 [lastReadDate]="_activeConversation?.lastReadDate"
@@ -87,7 +86,6 @@
                             />
                         </div>
                     }
-                    <div class="mb-3"></div>
                 </div>
                 @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
                     <div>
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss
index 55ae2b5678a2..58d9f6d9f3f0 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss
@@ -34,13 +34,22 @@
         padding-top: 0.375rem !important;
     }
 
-    --message-input-height: 165px;
+    --message-input-height-prod: 171px;
+    --message-input-height-dev: 187px;
     --search-height: 52px;
     --channel-header-height: 52px;
 
     .posting-infinite-scroll-container {
-        max-height: calc(75vh - var(--message-input-height) - var(--search-height) - var(--channel-header-height));
+        max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
         overflow-y: auto;
+
+        &.content-height-dev {
+            max-height: calc(75vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+        }
+
+        @media (max-width: 768px) {
+            max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height)) !important;
+        }
     }
 
     .envelope {
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
index 8d4935089916..e4b11dd87612 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -52,6 +52,8 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     course?: Course;
     @Input()
     searchbarCollapsed = false;
+    @Input()
+    contentHeightDev: boolean = false;
 
     getAsChannel = getAsChannelDTO;
 
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html
index 9342eb2a03cc..7690217a158c 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html
@@ -6,13 +6,18 @@
         </div>
         <div class="card">
             <!-- header -->
-            <div class="card-header d-flex" [ngbTooltip]="'artemisApp.conversationsLayout.threadSideBar.close' | artemisTranslate" (click)="closePostThread.emit()">
+            <div class="card-header cursor-default d-flex">
                 <div class="row flex-grow-1">
                     <div class="col">
                         <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSideBar.label"></h5>
                     </div>
                     <div class="col-auto">
-                        <fa-icon [icon]="faXmark" />
+                        <fa-icon
+                            class="pointer"
+                            [ngbTooltip]="'artemisApp.conversationsLayout.threadSideBar.close' | artemisTranslate"
+                            [icon]="faXmark"
+                            (click)="closePostThread.emit()"
+                        />
                     </div>
                 </div>
             </div>
@@ -20,7 +25,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSi
             <div #scrollBody class="pt-0 scrollbar wrapper-scroll-y mx-1">
                 @if (post !== undefined) {
                     <div class="my-2">
-                        <div class="card-body body-bg">
+                        <div class="card-body">
                             <jhi-post
                                 [readOnlyMode]="readOnlyMode"
                                 [posting]="post"
@@ -31,7 +36,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSi
                                 [hasChannelModerationRights]="hasChannelModerationRights"
                             />
                         </div>
-                        <div class="message-input">
+                        <div class="message-input mx-3">
                             @if (!readOnlyMode) {
                                 <jhi-message-reply-inline-input
                                     [posting]="createdAnswerPost"
diff --git a/src/main/webapp/app/shared/metis/metis.component.scss b/src/main/webapp/app/shared/metis/metis.component.scss
index e179c167d658..8d493d24ba83 100644
--- a/src/main/webapp/app/shared/metis/metis.component.scss
+++ b/src/main/webapp/app/shared/metis/metis.component.scss
@@ -47,10 +47,6 @@
     animation: cssAnimation 5s forwards;
 }
 
-.highlight-pinned {
-    background-color: var(--metis-pinned-post-highlight-color);
-}
-
 @keyframes cssAnimation {
     0% {
         opacity: 1;
diff --git a/src/main/webapp/app/shared/metis/post/post.component.html b/src/main/webapp/app/shared/metis/post/post.component.html
index 4a11e6cd1127..e7b3e35be783 100644
--- a/src/main/webapp/app/shared/metis/post/post.component.html
+++ b/src/main/webapp/app/shared/metis/post/post.component.html
@@ -1,5 +1,5 @@
-<div class="row module-bg mb-1 pb-1 rounded-2" [ngClass]="{ 'mx-0': !isThreadSidebar, 'highlight-pinned': posting.displayPriority === DisplayPriority.PINNED }">
-    <div class="align-items-center">
+<div class="mb-3" [ngClass]="{ 'mx-0': !isThreadSidebar }">
+    <div>
         <jhi-post-header
             [previewMode]="previewMode"
             [readOnlyMode]="readOnlyMode"
@@ -10,7 +10,7 @@
             [lastReadDate]="lastReadDate"
         />
     </div>
-    <div class="row align-items-center">
+    <div class="align-items-center">
         <div class="col">
             <div class="mb-1">
                 @if (showAnnouncementIcon) {
@@ -66,22 +66,20 @@
     @if (displayInlineInput && !readOnlyMode) {
         <jhi-message-inline-input [posting]="posting" (isModalOpen)="displayInlineInput = false" />
     }
-    <div class="me-0 mt-2 row justify-content-between" [ngClass]="{ 'mb-2': previewMode }">
+    <div class="me-0 mt-2 justify-content-between" [ngClass]="{ 'mb-2': previewMode }">
         <!-- Post reactions -->
         @if (!previewMode) {
-            <div class="col-auto ps-3 pe-0">
-                <jhi-post-reactions-bar
-                    [lastReadDate]="lastReadDate"
-                    [readOnlyMode]="readOnlyMode"
-                    [posting]="posting"
-                    [(showAnswers)]="showAnswers"
-                    [sortedAnswerPosts]="sortedAnswerPosts"
-                    [isCommunicationPage]="isCommunicationPage"
-                    [isThreadSidebar]="isThreadSidebar"
-                    (openPostingCreateEditModal)="openCreateAnswerPostModal()"
-                    (openThread)="openThread.emit()"
-                />
-            </div>
+            <jhi-post-reactions-bar
+                [lastReadDate]="lastReadDate"
+                [readOnlyMode]="readOnlyMode"
+                [posting]="posting"
+                [(showAnswers)]="showAnswers"
+                [sortedAnswerPosts]="sortedAnswerPosts"
+                [isCommunicationPage]="isCommunicationPage"
+                [isThreadSidebar]="isThreadSidebar"
+                (openPostingCreateEditModal)="openCreateAnswerPostModal()"
+                (openThread)="openThread.emit()"
+            />
         }
     </div>
 </div>
diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss
index 59e68a3a7ba8..8510a7b1d6be 100644
--- a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss
+++ b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss
@@ -12,4 +12,5 @@
 
 .edited-text {
     color: var(--metis-gray);
+    font-size: smaller;
 }
diff --git a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html
index c32e075170c1..1091f92d71c8 100644
--- a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html
+++ b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html
@@ -1,24 +1,34 @@
-<div class="row justify-content-between my-1">
-    <div class="col-auto pe-0">
-        <span class="fs-x-small header-author-date">
-            <span ngbTooltip="{{ userAuthorityTooltip | artemisTranslate }}" class="badge fs-xx-small p-1 rounded-3" [ngClass]="'badge-' + userAuthority">{{
-                userRoleBadge | artemisTranslate
-            }}</span>
-            <span class="fs-small pe-1 fw-bold">
+<div class="d-flex justify-content-between">
+    <div id="header-author-date" class="d-flex align-items-center gap-2 flex-wrap">
+        @if (posting.author) {
+            <span
+                [jhiTranslate]="userRoleBadge"
+                ngbTooltip="{{ userAuthorityTooltip | artemisTranslate }}"
+                class="badge fs-xx-small rounded-3"
+                [ngClass]="'badge-' + userAuthority"
+                id="role-badge"
+            ></span>
+            <span class="fs-small fw-semibold">
                 {{ posting.author?.name }}
             </span>
-            <span class="px-1"> - </span>
-            @if (postingIsOfToday) {
-                <span class="today-flag">{{ todayFlag | artemisTranslate }}</span>
-            }
-            <span [disableTooltip]="postingIsOfToday" [ngbTooltip]="posting.creationDate | artemisDate: 'time'">
-                {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
-            </span>
+        }
+        <span>-</span>
+        @if (postingIsOfToday) {
+            <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-x-small"></span>
+        }
+        <span class="fs-x-small" [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
+            {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
         </span>
+        @if (!!isCommunicationPage && (!lastReadDate || (lastReadDate && posting.creationDate && posting.creationDate.isAfter(lastReadDate))) && !isAuthorOfPosting) {
+            <span jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></span>
+        }
+    </div>
+
+    <div class="d-flex gap-2">
         @if (mayEditOrDelete) {
             <fa-icon
                 size="xs"
-                class="ms-1 editIcon clickable icon"
+                class="editIcon clickable icon"
                 [ngbTooltip]="'artemisApp.metis.editPosting' | artemisTranslate"
                 [icon]="faPencilAlt"
                 (click)="openPostingCreateEditModal.emit()"
@@ -33,12 +43,7 @@
                 [confirmTooltip]="'artemisApp.metis.confirmDeleteAnswer' | artemisTranslate"
             />
         }
-        @if (!!isCommunicationPage && (!lastReadDate || (lastReadDate && posting.creationDate && posting.creationDate.isAfter(lastReadDate))) && !isAuthorOfPosting) {
-            <span class="badge bg-secondary hideAfter5Seconds">{{ 'global.generic.new' | artemisTranslate }}</span>
-        }
-    </div>
-    @if (!isAnswerOfAnnouncement) {
-        <div class="col-auto ps-0 mx-1">
+        @if (!isAnswerOfAnnouncement) {
             <div id="toggleElement" class="resolve" [ngClass]="isAtLeastTutorInCourse || isAuthorOfOriginalPost ? 'clickable' : ''" (click)="toggleResolvesPost()">
                 @if (posting.resolvesPost) {
                     <div>
@@ -60,6 +65,6 @@
                     }
                 }
             </div>
-        </div>
-    }
+        }
+    </div>
 </div>
diff --git a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html
index 883b22541646..07d683fc144f 100644
--- a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html
+++ b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html
@@ -1,21 +1,23 @@
-<div class="d-flex justify-content-between my-1">
-    <div class="align-items-center">
-        <span class="fs-x-small header-author-date">
-            @if (posting.author) {
-                <span ngbTooltip="{{ userAuthorityTooltip | artemisTranslate }}" class="badge fs-xx-small p-1 rounded-3" [ngClass]="'badge-' + userAuthority" id="role-badge">{{
-                    userRoleBadge | artemisTranslate
-                }}</span>
-                <span class="fs-small pe-1 fw-bold">
-                    {{ posting.author?.name }}
-                </span>
-            }
-            <span class="px-1"> - </span>
-            @if (postingIsOfToday) {
-                <span class="today-flag">{{ todayFlag | artemisTranslate }}</span>
-            }
-            <span [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
-                {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
+<div class="d-flex justify-content-between">
+    <div id="header-author-date" class="d-flex align-items-center gap-2 flex-wrap">
+        @if (posting.author) {
+            <span
+                [jhiTranslate]="userRoleBadge"
+                ngbTooltip="{{ userAuthorityTooltip | artemisTranslate }}"
+                class="badge fs-xx-small rounded-3"
+                [ngClass]="'badge-' + userAuthority"
+                id="role-badge"
+            ></span>
+            <span class="fs-small fw-semibold">
+                {{ posting.author?.name }}
             </span>
+        }
+        <span>-</span>
+        @if (postingIsOfToday) {
+            <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-x-small"></span>
+        }
+        <span class="fs-x-small" [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
+            {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
         </span>
         @if (posting.resolved) {
             <fa-icon
@@ -26,14 +28,14 @@
             />
         }
         @if (!!isCommunicationPage && (!lastReadDate || (lastReadDate && posting.creationDate && posting.creationDate.isAfter(lastReadDate))) && !isAuthorOfPosting) {
-            <span class="badge bg-secondary hideAfter5Seconds">{{ 'global.generic.new' | artemisTranslate }}</span>
+            <span jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></span>
         }
     </div>
-    <div class="mx-2 d-flex">
+    <div class="gap-1 d-flex">
         @if (mayEditOrDelete) {
             <fa-icon
                 size="xs"
-                class="ms-1 mx-2 allign-right editIcon clickable icon"
+                class="editIcon clickable icon"
                 [ngbTooltip]="'artemisApp.metis.editPosting' | artemisTranslate"
                 [icon]="faPencilAlt"
                 (click)="posting.title !== '' ? createEditModal.open() : isModalOpen.emit()"
diff --git a/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts b/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts
index 49f86b170744..1a3837ffae22 100644
--- a/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts
+++ b/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts
@@ -14,7 +14,7 @@ export abstract class PostingHeaderDirective<T extends Posting> implements OnIni
     isAtLeastTutorInCourse: boolean;
     isAuthorOfPosting: boolean;
     postingIsOfToday: boolean;
-    todayFlag: string | undefined;
+    todayFlag?: string;
     userAuthority: string;
     userRoleBadge: string;
     userAuthorityTooltip: string;
diff --git a/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html b/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
index ade048ec4986..8819002acd4d 100644
--- a/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
+++ b/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
@@ -1,6 +1,6 @@
-<div class="me-0 p-1 row">
+<div class="d-flex gap-2 fs-xx-small">
     @for (reactionMetaData of reactionMetaDataMap | keyvalue; track reactionMetaData) {
-        <div class="col-auto p-0">
+        <div>
             <button
                 [disabled]="isReadOnlyMode"
                 class="reaction-button clickable"
@@ -13,16 +13,18 @@
             </button>
         </div>
     }
-    <div class="col-auto px-0" [hidden]="isReadOnlyMode">
-        <fa-icon
-            [icon]="farSmile"
-            class="reaction-button me-0 text-secondary clickable"
-            [class.open-selector]="showReactionSelector"
-            (click)="showReactionSelector = !showReactionSelector"
-            cdkOverlayOrigin
-            #trigger="cdkOverlayOrigin"
-            [title]="'artemisApp.metis.chooseReaction' | artemisTranslate"
-        />
+    <div [hidden]="isReadOnlyMode">
+        <button class="reaction-button clickable px-2 fs-small">
+            <fa-icon
+                [icon]="farSmile"
+                [class.open-selector]="showReactionSelector"
+                class="reaction-button react text-secondary clickable"
+                (click)="showReactionSelector = !showReactionSelector"
+                cdkOverlayOrigin
+                #trigger="cdkOverlayOrigin"
+                [title]="'artemisApp.metis.chooseReaction' | artemisTranslate"
+            />
+        </button>
     </div>
     @if (!isReadOnlyMode) {
         <ng-template
@@ -45,10 +47,10 @@
     }
     <!-- add new answer to expanded discussion -->
     @if (isLastAnswer && !isThreadSidebar) {
-        <div class="col-auto p-0">
+        <div>
             <button class="reaction-button clickable reply-btn" (click)="openPostingCreateEditModal.emit()">
                 <jhi-emoji [emoji]="speechBalloonId" />
-                <span class="emoji-count">{{ 'artemisApp.metis.reply' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.metis.reply" class="emoji-count"></span>
             </button>
         </div>
     }
diff --git a/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html b/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
index 3f3ece732802..d3ead68a6c0c 100644
--- a/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
+++ b/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
@@ -1,33 +1,33 @@
-<div class="me-0 row">
+<div class="d-flex gap-2 fs-xx-small">
     @if (!isCommunicationPage) {
-        <!-- start discussion -->
-        @if (sortedAnswerPosts.length === 0) {
-            <div class="col-auto p-0">
+        @if (sortedAnswerPosts.length) {
+            <!-- collapse answers -->
+            @if (showAnswers) {
+                <div>
+                    <button class="reaction-button clickable collapse-answers-btn" [class.reaction-button--reacted]="showAnswers" (click)="showAnswersChange.emit(false)">
+                        <jhi-emoji [emoji]="closeCrossId" />
+                        <span jhiTranslate="artemisApp.metis.collapseAnswers" class="emoji-count"></span>
+                    </button>
+                </div>
+            } @else {
+                <!-- expand answers -->
+                <div>
+                    <button class="reaction-button clickable expand-answers-btn" (click)="showAnswersChange.emit(true)">
+                        <jhi-emoji [emoji]="speechBalloonId" />
+                        <span class="emoji-count">{{
+                            sortedAnswerPosts.length === 1
+                                ? ('artemisApp.metis.showSingleAnswer' | artemisTranslate)
+                                : ('artemisApp.metis.showMultipleAnswers' | artemisTranslate: { number: sortedAnswerPosts.length })
+                        }}</span>
+                    </button>
+                </div>
+            }
+        } @else {
+            <!-- start discussion -->
+            <div>
                 <button class="reaction-button clickable reply-btn" (click)="openPostingCreateEditModal.emit()" [disabled]="readOnlyMode">
                     <jhi-emoji [emoji]="speechBalloonId" />
-                    <span class="emoji-count">{{ 'artemisApp.metis.reply' | artemisTranslate }}</span>
-                </button>
-            </div>
-        }
-        <!-- expand answers -->
-        @if (!showAnswers && sortedAnswerPosts.length > 0) {
-            <div class="col-auto p-0">
-                <button class="reaction-button clickable expand-answers-btn" (click)="showAnswersChange.emit(true)">
-                    <jhi-emoji [emoji]="speechBalloonId" />
-                    <span class="emoji-count">{{
-                        sortedAnswerPosts.length === 1
-                            ? ('artemisApp.metis.showSingleAnswer' | artemisTranslate)
-                            : ('artemisApp.metis.showMultipleAnswers' | artemisTranslate: { number: sortedAnswerPosts.length })
-                    }}</span>
-                </button>
-            </div>
-        }
-        <!-- collapse answers -->
-        @if (showAnswers && sortedAnswerPosts.length > 0) {
-            <div class="col-auto p-0">
-                <button class="reaction-button clickable collapse-answers-btn" [class.reaction-button--reacted]="showAnswers" (click)="showAnswersChange.emit(false)">
-                    <jhi-emoji [emoji]="closeCrossId" />
-                    <span class="emoji-count">{{ 'artemisApp.metis.collapseAnswers' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.metis.reply" class="emoji-count"></span>
                 </button>
             </div>
         }
@@ -35,16 +35,16 @@
         @if (!isThreadSidebar) {
             <!-- start discussion -->
             @if (sortedAnswerPosts.length === 0) {
-                <div class="col-auto p-0">
+                <div>
                     <button class="reaction-button clickable reply-btn" (click)="openThread.emit()">
-                        <fa-icon [icon]="faArrowRight" />
-                        <span class="emoji-count px-2">{{ 'artemisApp.conversationsLayout.threadSideBar.reply' | artemisTranslate }} </span>
+                        <fa-icon class="fa-xs align-self-center" [icon]="faArrowRight" />
+                        <span jhiTranslate="artemisApp.conversationsLayout.threadSideBar.reply" class="emoji-count px-2"></span>
                     </button>
                 </div>
             }
             <!-- expand answers -->
-            @if (!showAnswers && sortedAnswerPosts.length > 0) {
-                <div class="col-auto p-0">
+            @if (!showAnswers && sortedAnswerPosts.length) {
+                <div>
                     <button class="reaction-button clickable expand-answers-btn" (click)="openThread.emit()">
                         <fa-icon [icon]="faArrowRight" />
                         <span class="emoji-count px-2">{{
@@ -58,7 +58,7 @@
         }
     }
     @for (reactionMetaData of reactionMetaDataMap | keyvalue; track reactionMetaData) {
-        <div class="col-auto p-0">
+        <div>
             <button
                 [disabled]="readOnlyMode"
                 class="reaction-button clickable"
@@ -68,20 +68,21 @@
                 [ngbTooltip]="reactionMetaData.value.reactingUsers | reactingUsersOnPosting | async"
             >
                 <jhi-emoji [emoji]="reactionMetaData.key" />
-                <span class="emoji-count" [class.reaction-count--reacted]="reactionMetaData.value.hasReacted">{{ reactionMetaData.value.count }}</span>
+                <span class="emoji-count ms-1" [class.reaction-count--reacted]="reactionMetaData.value.hasReacted">{{ reactionMetaData.value.count }}</span>
             </button>
         </div>
     }
-    <div class="col-auto px-0" [hidden]="readOnlyMode">
-        <fa-icon
-            [icon]="farSmile"
-            class="reaction-button react text-secondary clickable"
-            [class.open-selector]="showReactionSelector"
-            (click)="showReactionSelector = !showReactionSelector"
-            cdkOverlayOrigin
-            #trigger="cdkOverlayOrigin"
-            [title]="'artemisApp.metis.chooseReaction' | artemisTranslate"
-        />
+    <div [hidden]="readOnlyMode">
+        <button class="reaction-button clickable px-2 fs-small" (click)="showReactionSelector = !showReactionSelector">
+            <fa-icon
+                [icon]="farSmile"
+                class="reaction-button react text-secondary clickable"
+                [class.open-selector]="showReactionSelector"
+                cdkOverlayOrigin
+                #trigger="cdkOverlayOrigin"
+                [title]="'artemisApp.metis.chooseReaction' | artemisTranslate"
+            />
+        </button>
     </div>
     <ng-template
         cdkConnectedOverlay
@@ -100,8 +101,8 @@
             />
         }
     </ng-template>
-    <div class="col-auto p-0">
-        @if (displayPriority === DisplayPriority.PINNED || canPin) {
+    @if (displayPriority === DisplayPriority.PINNED || canPin) {
+        <div>
             <button
                 class="reaction-button pin"
                 [class.reaction-button--not-hoverable]="!canPin"
@@ -111,9 +112,12 @@
             >
                 <jhi-emoji [emoji]="pinEmojiId" [ngbTooltip]="pinTooltip | artemisTranslate" [placement]="'auto'" />
             </button>
-        }
+        </div>
+    }
+
+    <div>
         @if (getShowNewMessageIcon()) {
-            <span class="badge bg-secondary hideAfter5Seconds">{{ 'global.generic.new' | artemisTranslate }}</span>
+            <div jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></div>
         }
     </div>
 </div>
diff --git a/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.component.scss b/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.component.scss
index ba78cc5726b4..b408604ba70c 100644
--- a/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.component.scss
+++ b/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.component.scss
@@ -1,15 +1,11 @@
 @import 'src/main/webapp/app/shared/metis/metis.component';
 
 .reaction-button {
-    font-size: 16px;
-    line-height: 16px;
-    padding: 4px 6px;
     display: inline-flex;
     background: var(--reaction-button-default-color);
     border: none;
-    border-radius: 12px;
-    margin-right: 5px;
-    margin-bottom: 5px;
+    border-radius: 1rem;
+    align-items: center;
 
     &.open-selector {
         box-shadow: inset 0 0 0 1px var(--metis-gray);
@@ -17,12 +13,11 @@
     }
 
     .emoji-count {
-        font-size: 11px;
         color: var(--reaction-button-emoji-count-color);
         padding-left: 0.2em;
 
         &.reaction-count--reacted {
-            font-weight: bold;
+            font-weight: 600;
             color: var(--reaction-button-reacted-accent-color);
         }
     }
diff --git a/src/main/webapp/app/shared/metis/posting-thread/posting-thread.component.html b/src/main/webapp/app/shared/metis/posting-thread/posting-thread.component.html
index 3d5c3577bb40..99ea2b229876 100644
--- a/src/main/webapp/app/shared/metis/posting-thread/posting-thread.component.html
+++ b/src/main/webapp/app/shared/metis/posting-thread/posting-thread.component.html
@@ -1,4 +1,4 @@
-<div class="col-12 mx-0">
+<div class="mx-0">
     <jhi-post
         [readOnlyMode]="readOnlyMode"
         [lastReadDate]="lastReadDate"
diff --git a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss
index 2fe32f83bf4d..a9acacbbb52e 100644
--- a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss
+++ b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss
@@ -4,9 +4,9 @@
 
 .sidebar-button {
     border: 0;
-    border-radius: var(--bs-btn-border-radius);
 
     &:hover {
-        background-color: var(--metis-conversation-sidebar-button-background-hover);
+        background-color: var(--transparent);
+        color: var(--link-item-color);
     }
 }
diff --git a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html
index 7d712ea51d3f..39d52538a222 100644
--- a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html
+++ b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html
@@ -1,9 +1,9 @@
 <div class="option-buttons" (click)="$event.stopPropagation()">
-    <button class="favorite btn btn-sm btn-outline-secondary sidebar-button" (click)="onFavoriteClicked($event)" type="button">
+    <button class="favorite btn btn-outline-secondary sidebar-button px-0" (click)="onFavoriteClicked($event)" type="button">
         <fa-icon [icon]="conversation.isFavorite ? faHeartSolid : faHeartRegular" size="sm" />
     </button>
     <div ngbDropdown container="body" class="d-inline-block">
-        <button class="btn btn-sm btn-outline-secondary dropdown-toggle sidebar-button" type="button" ngbDropdownToggle>
+        <button class="btn btn-outline-secondary dropdown-toggle sidebar-button" type="button" ngbDropdownToggle>
             <fa-icon [icon]="faEllipsisVertical" size="sm" />
         </button>
         <div ngbDropdownMenu>
diff --git a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss
index e70e71d66bfa..b700d287dae9 100644
--- a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss
+++ b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss
@@ -1,6 +1,11 @@
 .option-buttons {
     .sidebar-button {
         border-width: 0;
+
+        &:hover {
+            background-color: var(--transparent);
+            color: var(--link-item-color);
+        }
     }
 
     .dropdown-toggle::after {
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html
index 5e949709c866..4ba959ab59fc 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html
+++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html
@@ -2,18 +2,18 @@
  operates differently over the MetisConversations service, it will get adjusted in a followup PR -->
 <div
     id="test-sidebar-card-small"
-    class="pointer rounded-3 col-12 border-start border-5 highlight-card bg-module padding-small"
+    class="d-flex justify-content-between rounded-3 border-start border-5 highlight-card bg-module align-items-end py-1"
     [ngClass]="!!this.sidebarItem.conversation?.hasUnreadMessage ? 'border-primary' : 'border-module'"
-    [routerLink]="itemSelected ? '../messages' : './messages'"
+    [routerLink]="itemSelected ? '../communication' : './communication'"
     [queryParams]="{ conversationId: sidebarItem?.id }"
     (click)="emitStoreAndRefresh(sidebarItem.id)"
     [routerLinkActive]="'bg-selected border-selected'"
 >
-    <div class="inline-block col-8">
+    <div class="w-75">
         <jhi-sidebar-card-item [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" />
     </div>
     @if (sidebarItem.conversation) {
-        <div class="inline-block pb-2">
+        <div>
             <jhi-conversation-options [conversation]="sidebarItem.conversation!" (onUpdateSidebar)="onUpdateSidebar.emit()" />
         </div>
     }
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss
index 05f2dbe9b661..97e8bdb01d29 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss
+++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss
@@ -13,18 +13,3 @@
         border-color: var(--sidebar-card-selected-bg) !important;
     }
 }
-
-.padding-small {
-    padding-bottom: 0.1rem;
-    padding-top: 0.5rem;
-    padding-left: 0.25rem;
-}
-
-.inline-block {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.padding-bottom {
-    padding-bottom: 0.4rem;
-}
diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss
index db1bc4996023..deb7b1cc03dc 100644
--- a/src/main/webapp/content/scss/global.scss
+++ b/src/main/webapp/content/scss/global.scss
@@ -52,6 +52,10 @@ a {
     cursor: pointer;
 }
 
+.cursor-default {
+    cursor: default !important;
+}
+
 a:not(.btn):not(.tab-link):hover {
     text-decoration: underline !important;
 }
diff --git a/src/test/cypress/support/pageobjects/course/CourseMessages.ts b/src/test/cypress/support/pageobjects/course/CourseMessages.ts
index 3150f5754a79..721464317634 100644
--- a/src/test/cypress/support/pageobjects/course/CourseMessages.ts
+++ b/src/test/cypress/support/pageobjects/course/CourseMessages.ts
@@ -100,11 +100,11 @@ export class CourseMessagesPage {
     }
 
     getName() {
-        return cy.get('h3.conversation-name');
+        return cy.get('h4.d-inline-block');
     }
 
     getTopic() {
-        return cy.get('.conversation-topic');
+        return cy.get('#conversation-topic');
     }
 
     editName(newName: string) {
diff --git a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
index 405c79ab1a7a..c67649159a60 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
@@ -42,6 +42,7 @@ import { SidebarAccordionComponent } from 'app/shared/sidebar/sidebar-accordion/
 import { GroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component';
 import { ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component';
+import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 
 const examples: (ConversationDTO | undefined)[] = [undefined, generateOneToOneChatDTO({}), generateExampleGroupChatDTO({}), generateExampleChannelDTO({})];
 
@@ -98,6 +99,7 @@ examples.forEach((activeConversation) => {
                     MockProvider(NgbModal),
                     MockProvider(MetisConversationService),
                     MockProvider(SidebarEventService),
+                    MockProvider(ProfileService),
                 ],
                 imports: [FormsModule, ReactiveFormsModule, FontAwesomeModule, NgbModule, NgbCollapseMocksModule, NgbTooltipMocksModule],
             }).compileComponents();
diff --git a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
index 3b1016c3cb5b..5af6ce680ba9 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
@@ -25,6 +25,9 @@ import { CourseExerciseDetailsComponent } from 'app/overview/exercise-details/co
 import { ExamDetailComponent } from 'app/exam/manage/exams/exam-detail.component';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { MockMetisService } from '../../../../../helpers/mocks/service/mock-metis-service.service';
+import { MetisModule } from 'app/shared/metis/metis.module';
+import { MockTranslateService } from '../../../../../helpers/mocks/service/mock-translate.service';
+import { TranslateService } from '@ngx-translate/core';
 
 const examples: ConversationDTO[] = [
     generateOneToOneChatDTO({}),
@@ -57,11 +60,13 @@ examples.forEach((activeConversation) => {
                         { path: 'courses/:courseId/exams/:examId', component: ExamDetailComponent },
                     ]),
                 ],
+                imports: [MetisModule],
                 providers: [
                     MockProvider(NgbModal),
                     MockProvider(MetisConversationService),
                     MockProvider(ConversationService),
                     { provide: MetisService, useClass: MockMetisService },
+                    { provide: TranslateService, useClass: MockTranslateService },
                 ],
             }).compileComponents();
         }));
diff --git a/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts
index d4527ee2faa1..9b44b262bf50 100644
--- a/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MetisService } from 'app/shared/metis/metis.service';
+import { MetisModule } from 'app/shared/metis/metis.module';
 import { MockMetisService } from '../../../../../helpers/mocks/service/mock-metis-service.service';
 import { DebugElement, ViewContainerRef } from '@angular/core';
 import dayjs from 'dayjs/esm';
@@ -35,7 +36,7 @@ describe('AnswerPostHeaderComponent', () => {
 
     beforeEach(() => {
         return TestBed.configureTestingModule({
-            imports: [MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(NgbTooltip)],
+            imports: [MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(NgbTooltip), MockModule(MetisModule)],
             providers: [
                 FormBuilder,
                 { provide: MetisService, useClass: MockMetisService },
@@ -70,6 +71,8 @@ describe('AnswerPostHeaderComponent', () => {
                 component.posting = metisResolvingAnswerPostUser1;
                 component.posting.creationDate = yesterday;
                 component.ngOnInit();
+                component.userRoleBadge = 'artemisApp.metis.userRoles.student';
+                component.todayFlag = 'artemisApp.metis.today';
             });
     });
 
@@ -79,7 +82,7 @@ describe('AnswerPostHeaderComponent', () => {
 
     it('should set author information correctly', () => {
         fixture.detectChanges();
-        const headerAuthorAndDate = getElement(debugElement, '.header-author-date');
+        const headerAuthorAndDate = getElement(debugElement, '#header-author-date');
         expect(headerAuthorAndDate).not.toBeNull();
         expect(headerAuthorAndDate.innerHTML).toContain(metisUser1.name);
     });
@@ -88,7 +91,7 @@ describe('AnswerPostHeaderComponent', () => {
         component.posting.creationDate = yesterday;
         component.ngOnInit();
         fixture.detectChanges();
-        expect(getElement(debugElement, '.today-flag')).toBeNull();
+        expect(getElement(debugElement, '#today-flag')).toBeNull();
     });
 
     it('should display edit and delete options to post author', () => {
diff --git a/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts
index cdca953ed051..4a985591b754 100644
--- a/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MetisService } from 'app/shared/metis/metis.service';
+import { MetisModule } from 'app/shared/metis/metis.module';
 import { DebugElement } from '@angular/core';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockDirective, MockModule, MockPipe } from 'ng-mocks';
@@ -28,7 +29,7 @@ describe('PostHeaderComponent', () => {
     let metisServiceDeletePostMock: jest.SpyInstance;
     beforeEach(() => {
         return TestBed.configureTestingModule({
-            imports: [MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(NgbTooltip)],
+            imports: [MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(NgbTooltip), MockModule(MetisModule)],
             providers: [FormBuilder, { provide: MetisService, useClass: MockMetisService }],
             declarations: [
                 PostHeaderComponent,
@@ -62,7 +63,7 @@ describe('PostHeaderComponent', () => {
 
     it('should set date information correctly for post of today', () => {
         fixture.detectChanges();
-        expect(getElement(debugElement, '.today-flag')).toBeDefined();
+        expect(getElement(debugElement, '#today-flag')).toBeDefined();
     });
 
     it('should display resolved icon on resolved post header', () => {
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-small.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-small.component.spec.ts
index cbf6e9b8ee11..0a38c4d118c3 100644
--- a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-small.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-small.component.spec.ts
@@ -84,7 +84,7 @@ describe('SidebarCardSmallComponent', () => {
         expect(mockFn).toHaveBeenCalledWith('testId');
         expect(router.navigateByUrl).toHaveBeenCalled();
         const navigationArray = router.navigateByUrl.mock.calls[0][0];
-        expect(navigationArray).toBe('../messages');
+        expect(navigationArray).toBe('../communication');
     });
 
     it('should navigate to the when no item was selected before', async () => {
@@ -98,6 +98,6 @@ describe('SidebarCardSmallComponent', () => {
         expect(mockFn).toHaveBeenCalledWith('testId');
         expect(router.navigateByUrl).toHaveBeenCalled();
         const navigationArray = router.navigateByUrl.mock.calls[0][0];
-        expect(navigationArray).toBe('./messages');
+        expect(navigationArray).toBe('./communication');
     });
 });
diff --git a/src/test/playwright/support/pageobjects/course/CourseMessagesPage.ts b/src/test/playwright/support/pageobjects/course/CourseMessagesPage.ts
index 5bc6f57213f8..49f5f3854db8 100644
--- a/src/test/playwright/support/pageobjects/course/CourseMessagesPage.ts
+++ b/src/test/playwright/support/pageobjects/course/CourseMessagesPage.ts
@@ -153,7 +153,7 @@ export class CourseMessagesPage {
      * @returns The locator for the name element.
      */
     getName() {
-        return this.page.locator('h3.conversation-name');
+        return this.page.locator('h4.d-inline-block');
     }
 
     /**
@@ -161,7 +161,7 @@ export class CourseMessagesPage {
      * @returns The locator for the topic element.
      */
     getTopic() {
-        return this.page.locator('.conversation-topic');
+        return this.page.locator('#conversation-topic');
     }
 
     /**