STARIONGROUP · antoineatstariongroup · Nov 9, 2022 · Oct 31, 2022
diff --git a/UI_DSM/UI_DSM.Client/Components/App/AppAccordion/AppAccordion.razor b/UI_DSM/UI_DSM.Client/Components/App/AppAccordion/AppAccordion.razor
@@ -44,7 +44,8 @@
 	{
 		Default,
 		Small,
-		Tiny
+		Tiny,
+		Reply
 	}
 
 	/// <summary>
@@ -69,6 +70,7 @@
 			VariantValue.Default => "app-accordion__button--default",
 			VariantValue.Small => "app-accordion__button--small",
 			VariantValue.Tiny => "app-accordion__button--tiny",
+			VariantValue.Reply => "app-accordion__button--reply",
 			_ => ""
 		};
 	}

diff --git a/UI_DSM/UI_DSM.Client/Components/App/AppAccordion/AppAccordion.razor.css b/UI_DSM/UI_DSM.Client/Components/App/AppAccordion/AppAccordion.razor.css
@@ -45,3 +45,10 @@
   font-size: var(--text-sm);
   line-height: 130%;
 }
+
+.app-accordion__button--reply {
+  font-size: var(--text-sm);
+  color: var(--colors-primary-700);
+  padding: 0;
+  font-weight: 600;
+}
diff --git a/UI_DSM/UI_DSM.Client/Components/App/AppButton/AppButton.razor b/UI_DSM/UI_DSM.Client/Components/App/AppButton/AppButton.razor
@@ -1,12 +1,12 @@
 <!--------------------------------------------------------------------------------------------------------
 // AppButton.razor
 // Copyright (c) 2022 RHEA System S.A.
-// 
+//
 // Author: Antoine Théate, Sam Gerené, Alex Vorobiev, Alexander van Delft, Martin Risseeuw
-// 
-// This file is part of UI-DSM. 
+//
+// This file is part of UI-DSM.
 // The UI-DSM web application is used to review an ECSS-E-TM-10-25 model.
-// 
+//
 // The UI-DSM application is provided to the community under the Apache License 2.0.
 -------------------------------------------------------------------------------------------------------->
 
@@ -19,7 +19,7 @@
     ///     Different variants on the button, for styling purpose
     /// </summary>
     public enum VariantValue
-    {   
+    {
         Danger,
         Primary,
         Secondary,
@@ -67,7 +67,7 @@
 
     /// <summary>
     ///     Render the innerhtml for the component
-    /// </summary>    
+    /// </summary>
     [Parameter]
     public EventCallback Click { get; set; }
 }
diff --git a/UI_DSM/UI_DSM.Client/Components/App/AppRelatedViewsWidget/AppRelateViewsWidget.razor b/UI_DSM/UI_DSM.Client/Components/App/AppRelatedViewsWidget/AppRelateViewsWidget.razor
@@ -0,0 +1,15 @@
+<!--------------------------------------------------------------------------------------------------------
+// AppRelateViewsWidget.razor
+// Copyright (c) 2022 RHEA System S.A.
+//
+// Author: Antoine Théate, Sam Gerené, Alex Vorobiev, Alexander van Delft, Martin Risseeuw, Nabil Abbar
+//
+// This file is part of UI-DSM.
+// The UI-DSM web application is used to review an ECSS-E-TM-10-25 model.
+//
+// The UI-DSM application is provided to the community under the Apache License 2.0.
+-------------------------------------------------------------------------------------------------------->
+
+<AppAccordion Label="Related views">
+	aa
+</AppAccordion>
diff --git a/UI_DSM/UI_DSM.Client/Components/App/AppReviewHeader/AppReviewHeader.razor.css b/UI_DSM/UI_DSM.Client/Components/App/AppReviewHeader/AppReviewHeader.razor.css
@@ -9,4 +9,11 @@
 .app-review-header p {
   margin-bottom: 0;
   opacity: 0.8;
+  font-size: var(--text-xl);
+  font-weight: 500;
+}
+
+.app-review-header h1 {
+  font-size: var(--text-2xl);
+  opacity: 0.9;
 }
diff --git a/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor b/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor
@@ -12,47 +12,79 @@
 
 <div class="app-comment">
 	<div class="app-comment__header">
-		<FeatherMessageCircle Size="24" Color="currentColor" StrokeWidth="1.5f" @onclick="this.OnReplyCallback"/>
-		@if (this.ViewModel.IsAllowedToEdit)
-		{
-			<FeatherEdit Size="24" Color="currentColor" StrokeWidth="1.5f" @onclick="this.OnContentEditClick"/>
-			<FeatherTrash2 Size="24" Color="currentColor" StrokeWidth="1.5f" @onclick="this.OnDeleteClick"/>
-		}
-		<button id="dropdownButton" @onclick="() => this.IsOnStatusUpdateMode = true">Mark as :</button>
-		<DxDropDown @bind-IsOpen="@(this.IsOnStatusUpdateMode)"
-		            Width="200"
-		            PositionTarget="#dropdownButton"
-		            PositionMode="DropDownPositionMode.Bottom">
-			<BodyTemplate>
-				@foreach (var status in AvailableStatus)
-				{
-					<div id="@status.ToString()" @onclick="() => this.ViewModel.UpdateStatus(status)">
-						@if (this.ViewModel.Comment.Status == status)
-						{
-							<FeatherCheck Size="20" Color="currentColor"/>
-						}
-						@status
-					</div>
-				}
-			</BodyTemplate>
-		</DxDropDown>
+			<DxDropDown 
+				@bind-IsOpen="@this.IsOnStatusUpdateMode"
+				Width="200"
+				PositionTarget="@this.PositionTarget"
+				PositionMode="DropDownPositionMode.Bottom"
+			>
+
+				<BodyTemplate>
+					@foreach (var status in AvailableStatus)
+					{
+						<div id="@status.ToString()" class="status-item" @onclick="() => this.ViewModel.UpdateStatus(status)">
+							@if (this.ViewModel.Comment.Status == status)
+							{
+								<FeatherCheckSquare Size="20" Color="currentColor" />
+							}
+							else
+							{
+								<FeatherSquare Size="20" Color="currentColor" />
+							}
+							@status
+						</div>
+					}
+				</BodyTemplate>
+			</DxDropDown>
 	</div>
 
 	<div class="app-comment__body">
 		<span class="app-comment__title">
-			<span class="app-comment__name">@(this.ViewModel.Comment.Author.User.UserName)</span>
-			<span class="app-comment__date">@(this.ViewModel.Comment.CreatedOn)</span>
+			<span>
+				<span class="app-comment__name">@(this.ViewModel.Comment.Author.User.UserName)</span>
+				<span class="app-comment__date">@(this.ViewModel.Comment.CreatedOn)</span>
+			</span>
+
+
+			@if (this.ViewModel.IsAllowedToEdit)
+			{
+				<button id="@this.CardUniqueId" class="app-comment__status" @onclick="() => this.IsOnStatusUpdateMode = true">
+					@this.ViewModel.Comment.Status
+					<FeatherChevronDown Size="20" Color="currentColor" StrokeWidth="2" />
+				</button>
+			}
 		</span>
 		<span class="app-comment__description">@((MarkupString)this.ViewModel.Comment.Content)</span>
 	</div>
 
+	<div class="app-comment__actions">
+				<button class="app-comment__button" @onclick="this.OnReplyCallback">
+					<FeatherMessageCircle Size="20" Color="currentColor" StrokeWidth="2" />
+					Reply
+				</button>
+			@if (this.ViewModel.IsAllowedToEdit)
+			{
+			<button class="app-comment__button" @onclick="this.OnContentEditClick">
+				<FeatherEdit Size="20" Color="currentColor" StrokeWidth="2" />
+				Edit
+			</button>
+
+			<button class="app-comment__button" @onclick="this.OnDeleteClick">
+				<FeatherTrash2 Size="20" Color="currentColor" StrokeWidth="2" />
+				Delete
+			</button>
+			}
+	</div>
+
 	@if (this.ViewModel.Comment.Replies.Any())
 	{
-		<AppAccordion Label="Replies">
+		<div class="app-comment__replies">
+		<AppAccordion Label="Replies" Variant="AppAccordion.VariantValue.Reply">
 			@foreach (var reply in this.ViewModel.Comment.Replies.OrderBy(x => x.CreatedOn))
 			{
 				<ReplyCard ViewModel="@(this.CreateReplyCardViewModel(reply))"/>
 			}
 		</AppAccordion>
+		</div>
 	}
 </div>
diff --git a/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor.cs b/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor.cs
@@ -75,6 +75,16 @@ private IReplyCardViewModel CreateReplyCardViewModel(Reply reply)
             return new ReplyCardViewModel(reply, this.ViewModel.OnContentEditReplyCallback, this.ViewModel.OnDeleteReplyCallback, this.ViewModel.CurrentParticipant);
         }
 
+         /// <summary>
+        ///     The position target
+        /// </summary>
+        public string PositionTarget => $"#{this.CardUniqueId}";
+
+       /// <summary>
+        ///     The unique html id
+        /// </summary>
+        public string CardUniqueId => $"comment_{this.ViewModel.Comment.Id}";
+
         /// <summary>
         ///     Handle the click event of the content reply button
         /// </summary>

diff --git a/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor.css b/UI_DSM/UI_DSM.Client/Components/App/CommentCard/CommentCard.razor.css
@@ -1,10 +1,15 @@
 .app-comment {
   display: grid;
-  gap: var(--spacing-3);
+  gap: var(--spacing-2);
   padding: var(--spacing-4);
-  border-bottom: 1px solid var(--colors-gray-100);  
+  border-bottom: 1px solid var(--colors-gray-100);
   font-size: var(--text-sm);
-} 
+}
+
+.app-comment__title {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
 
 .app-comment__header {
   display: grid;
@@ -13,12 +18,16 @@
   align-items: center;
 }
 
-
 .app-comment__header button {
   text-align: right;
   font-weight: 600;
 }
 
+.app-comment__actions {
+  display: flex;
+  gap: var(--spacing-3);
+}
+
 .app-comment__button {
   color: var(--colors-primary-500);
   font-weight: 600;
@@ -37,6 +46,17 @@
 .app-comment__body {
   font-size: var(--text-sm);
   display: grid;
-  gap: var(--spacing-1);
-  color: var(--colors-gray-600);
+  gap: var(--spacing-2);
+  color: var(--colors-gray-800);
+}
+
+.status-item {
+  padding: var(--spacing-2);
+  border-bottom: 1px solid var(--colors-gray-50);
+}
+
+
+.app-comment__replies {
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--colors-gray-50)
 }
diff --git a/UI_DSM/UI_DSM.Client/Components/App/CommentCreation/CommentCreation.razor b/UI_DSM/UI_DSM.Client/Components/App/CommentCreation/CommentCreation.razor
@@ -1,12 +1,12 @@
 <!--------------------------------------------------------------------------------------------------------
 // CommentCreation.razor
 // Copyright (c) 2022 RHEA System S.A.
-// 
+//
 // Author: Antoine Théate, Sam Gerené, Alex Vorobiev, Alexander van Delft, Martin Risseeuw, Nabil Abbar
-// 
-// This file is part of UI-DSM. 
+//
+// This file is part of UI-DSM.
 // The UI-DSM web application is used to review an ECSS-E-TM-10-25 model.
-// 
+//
 // The UI-DSM application is provided to the community under the Apache License 2.0.
 -------------------------------------------------------------------------------------------------------->
 <TextEditor Content="@this.ViewModel.Comment.Content" OnValidSubmit="@this.OnValidSubmit" SubmitText="Comment"/>
diff --git a/UI_DSM/UI_DSM.Client/Components/App/Comments/Comments.razor b/UI_DSM/UI_DSM.Client/Components/App/Comments/Comments.razor
@@ -1,26 +1,32 @@
 <!--------------------------------------------------------------------------------------------------------
 // Comments.razor
 // Copyright (c) 2022 RHEA System S.A.
-// 
+//
 // Author: Antoine Théate, Sam Gerené, Alex Vorobiev, Alexander van Delft, Martin Risseeuw, Nabil Abbar
-// 
-// This file is part of UI-DSM. 
+//
+// This file is part of UI-DSM.
 // The UI-DSM web application is used to review an ECSS-E-TM-10-25 model.
-// 
+//
 // The UI-DSM application is provided to the community under the Apache License 2.0.
 -------------------------------------------------------------------------------------------------------->
 <AppAccordion Label="Comments">
-	<AppButton Click="@(this.ViewModel.OpenCommentCreationPopup)">
-		Create Comment
-	</AppButton>
-	<DxPopup CloseOnOutsideClick="false" HeaderText="Create Comment" @bind-Visible="@(this.ViewModel.IsOnCommentCreationMode)">
+
+
+	<div class="comments__header">
+		<button class="comments__add-button" onclick="@(this.ViewModel.OpenCommentCreationPopup)">
+			<FeatherMessageCircle Size="24" Color="currentColor" StrokeWidth="1.5f" /> Leave a comment
+		</button>
+	</div>
+
+	<DxPopup CloseOnOutsideClick="false" HeaderText="Add comment" @bind-Visible="@(this.ViewModel.IsOnCommentCreationMode)">
 		<Content>
 			<CascadingValue Value="this.ViewModel.ErrorMessageViewModel">
 				<CommentCreation ViewModel="@(this.ViewModel.CommentCreationViewModel)"/>
 			</CascadingValue>
 		</Content>
 	</DxPopup>
-	<DxPopup CloseOnOutsideClick="false" HeaderText="Update Comment" @bind-Visible="@(this.ViewModel.IsOnCommentUpdateMode)">
+
+	<DxPopup CloseOnOutsideClick="false" HeaderText="Update comment" @bind-Visible="@(this.ViewModel.IsOnCommentUpdateMode)">
 		<Content>
 			<CascadingValue Value="this.ViewModel.ErrorMessageViewModel">
 				<CommentCreation ViewModel="@(this.ViewModel.CommentCreationViewModel)"/>

diff --git a/UI_DSM/UI_DSM.Client/Components/App/Comments/Comments.razor.css b/UI_DSM/UI_DSM.Client/Components/App/Comments/Comments.razor.css
@@ -0,0 +1,13 @@
+.comments__add-button {
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--colors-gray-100);
+  text-align: center;
+  width: 100%;
+  font-weight: 700;
+  color: var(--colors-primary-500);
+}
+
+.comments__add-button:hover {
+  background-color: var(--colors-primary-500);
+  color: var(--colors-white);
+}
diff --git a/UI_DSM/UI_DSM.Client/Components/App/ReplyCard/ReplyCard.razor b/UI_DSM/UI_DSM.Client/Components/App/ReplyCard/ReplyCard.razor
@@ -11,13 +11,13 @@
 -------------------------------------------------------------------------------------------------------->
 
 <div class="app-reply">
-	<div class="app-reply__header">
+	@* <div class="app-reply__header">
 		@if (this.ViewModel.IsAllowedToEdit)
 		{
 			<FeatherEdit Size="24" Color="currentColor" StrokeWidth="1.5f" @onclick="this.OnContentEditClick"/>
 			<FeatherTrash2 Size="24" Color="currentColor" StrokeWidth="1.5f" @onclick="this.OnDeleteClick"/>
 		}
-	</div>
+	</div> *@
 
 	<div class="app-reply__body">
 		<span class="app-reply__title">
@@ -26,4 +26,19 @@
 		</span>
 		<span class="app-reply__description">@((MarkupString)this.ViewModel.Reply.Content)</span>
 	</div>
+
+	<div class="app-reply__actions">
+		@if (this.ViewModel.IsAllowedToEdit)
+		{
+		<button class="app-reply__button" @onclick="this.OnContentEditClick">
+			<FeatherEdit Size="20" Color="currentColor" StrokeWidth="2" />
+			Edit
+		</button>
+
+		<button class="app-reply__button" @onclick="this.OnDeleteClick">
+			<FeatherTrash2 Size="20" Color="currentColor" StrokeWidth="2" />
+			Delete
+		</button>
+		}
+	</div>
 </div>