From 9e1daf50621044bd1fc280c7ac28228c99043b56 Mon Sep 17 00:00:00 2001
From: pateljannat <pateljannat2308@gmail.com>
Date: Tue, 31 Aug 2021 19:17:00 +0530
Subject: [PATCH] fix: reply card ui

---
 .../community/widgets/DiscussionMessage.html  |  6 ++++--
 community/public/css/style.css                | 13 ++++++------
 community/templates/reply_card.html           | 21 +++++++++++--------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/community/community/widgets/DiscussionMessage.html b/community/community/widgets/DiscussionMessage.html
index f36936c0..dfd2acf3 100644
--- a/community/community/widgets/DiscussionMessage.html
+++ b/community/community/widgets/DiscussionMessage.html
@@ -15,7 +15,7 @@
   data-docname="{{ docname }}">
   {% for topic in topics %}
   <div class="topic-parent" data-topic="{{ topic.name }}">
-    <div class="font-weight-bold mb-5">{{ topic.title }}</div>
+    <div class="course-home-headings p-0">{{ topic.title }}</div>
     {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
     ["reply", "owner", "creation"], order_by="creation")%}
     {% for reply in replies %}
@@ -24,7 +24,9 @@
   </div>
   {% endfor %}
   {% if not topics %}
-  <p id="no-discussions" class="text-center"> No discussions yet. </p>
+  <span id="no-discussions" class="text-center">
+    No discussions yet. <img src="/assets/community/icons/slash.svg">
+  </span>
   {% endif %}
 </div>
 <script>
diff --git a/community/public/css/style.css b/community/public/css/style.css
index a615533d..5a60312b 100644
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -20,7 +20,6 @@
   --received-message: var(--c8);
   --checkbox-size: 14px;
   --control-bg: var(--gray-100);
-  --muted-text: #4C5A67;
   --button-background: #EEF0F2;
   --text-xs: 11px;
   --text-sm: 12px;
@@ -109,8 +108,6 @@ input[type=checkbox] {
 .muted-text {
   font-size: 12px;
   line-height: 135%;
-  color: var(--muted-text);
-  height: 15px;
 }
 
 .course-card-meta {
@@ -169,7 +166,6 @@ input[type=checkbox] {
 .course-student-count {
   font-size: 12px;
   line-height: 135%;
-  color: var(--muted-text);
   float: right;
 }
 
@@ -225,9 +221,13 @@ input[type=checkbox] {
     padding-right: 1rem;
   }
 }
+.button-links {
+  color: #4C5A67;
+}
 
 .button-links:hover {
   text-decoration: none;
+  color: #4C5A67;
 }
 
 .icon-background {
@@ -1303,9 +1303,8 @@ textarea.form-control {
   justify-content: flex-end;
 }
 
-.message-author {
-  color: #192734;
-  margin-left: 0.5rem;
+.reply-card {
+  margin-bottom: 40px;
 }
 
 .certificate-page .common-card-style {
diff --git a/community/templates/reply_card.html b/community/templates/reply_card.html
index 8a56a91e..4bcb5970 100644
--- a/community/templates/reply_card.html
+++ b/community/templates/reply_card.html
@@ -1,14 +1,17 @@
-<div>
+<div class="reply-card">
   {% set member = frappe.get_doc("User", reply.owner) %}
-  <div class="mb-4">
+  <div class="d-flex align-items-center">
     {% set member = frappe.get_doc("User", reply.owner) %}
-    {{ widgets.Avatar(member=member, avatar_class="avatar-small")}}
-    <a class="button-links" href="/user/{{ member.username }}">
-      <span class="message-author">{{ member.full_name }}</span>
-    </a>
-    <span class="muted-text">{{ frappe.utils.format_datetime(reply.creation, "hh:mm a, dd MMM YYYY") }}</span>
-    <a href="" class="dark-links muted-text pull-right reply" data-topic="{{ topic.name }}">Reply</a>
+    {{ widgets.Avatar(member=member, avatar_class="avatar-medium")}}
+    <div class="ml-2 flex-grow-1">
+      <a class="button-links" href="/user/{{ member.username }}">
+        <span class="muted-text">{{ member.full_name }}</span>
+      </a>
+      <div class="muted-text">{{ frappe.utils.format_datetime(reply.creation, "hh:mm a, dd MMM YYYY") }}</div>
+    </div>
+
+    <a href="" class="dark-links muted-text reply" data-topic="{{ topic.name }}">Reply</a>
   </div>
-  <div class="card-divider"></div>
+  <div class="card-divider mt-3"></div>
   <div>{{ reply.reply }}</div>
 </div>