From fba6b37a3c109432f49ee41b79a44c405343aecd Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Fri, 20 Oct 2023 14:43:07 +0530
Subject: [PATCH] fix: website comments and card style

- fix website comments section and changed comment button to primary
- replaced shadow with border on card style for website
- removed line-height from avatar as it is unnecessary
---
 frappe/public/scss/desk/avatar.scss              |  1 +
 frappe/public/scss/website/my_account.scss       |  2 +-
 frappe/templates/includes/comments/comments.html | 15 +++++++--------
 frappe/templates/styles/card_style.css           |  5 +++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss
index 615cb6604e..1572ce8fe9 100644
--- a/frappe/public/scss/desk/avatar.scss
+++ b/frappe/public/scss/desk/avatar.scss
@@ -67,6 +67,7 @@
 .avatar {
 	display: inline-block;
 	vertical-align: middle;
+	line-height: 1;
 }
 
 .avatar-frame {
diff --git a/frappe/public/scss/website/my_account.scss b/frappe/public/scss/website/my_account.scss
index a03763ef96..0bff99d9dc 100644
--- a/frappe/public/scss/website/my_account.scss
+++ b/frappe/public/scss/website/my_account.scss
@@ -35,7 +35,7 @@
 
 .account-info {
 	background-color: var(--fg-color);
-	box-shadow: var(--card-shadow);
+	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius-md);
 	padding: var(--padding-sm) 25px;
 
diff --git a/frappe/templates/includes/comments/comments.html b/frappe/templates/includes/comments/comments.html
index 63ec6a21bd..276fdb5239 100644
--- a/frappe/templates/includes/comments/comments.html
+++ b/frappe/templates/includes/comments/comments.html
@@ -31,7 +31,7 @@
 								<textarea class="form-control" name="comment" rows=5 ></textarea>
 								<div class="text-muted small mt-1 mb-4">{{ _("Ctrl+Enter to add comment") }}</div>
 							</div>
-							<button class="btn btn-sm small" id="submit-comment">{{ _("Comment") }}</button>
+							<button class="btn btn-sm btn-primary small" id="submit-comment">{{ _("Comment") }}</button>
 						</fieldset>
 					</form>
 				</div>
@@ -44,7 +44,7 @@
 	<div itemscope itemtype="http://schema.org/UserComments" id="comment-list">
 		<div class="add-comment mb-5">
 			<div class="timeline-dot"></div>
-			<button class="btn btn-sm small add-comment-button">{{ _("Add a comment") }}</button>
+			<button class="btn btn-sm btn-primary small add-comment-button">{{ _("Add a comment") }}</button>
 		</div>
 		<div class="comment-list">
 			{% for comment in comment_list %}
@@ -208,14 +208,13 @@
 	border-radius: 50%;
 	position: absolute;
 	top: 8px;
-	left: 22px;
+	left: 23.5px;
 	background-color: var(--fg-color);
-	border: 1px solid var(--dark-border-color);
 }
 
 .timeline-dot::before {
 	content: ' ';
-	background: var(--gray-600);
+	background: var(--gray-700);
 	position: absolute;
 	top: 5px;
 	left: 5px;
@@ -237,7 +236,7 @@
 .new-comment {
 	display: flex;
 	padding: var(--padding-lg);
-	box-shadow: var(--card-shadow);
+	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius-md);
 	background-color: var(--fg-color);
 }
@@ -280,11 +279,11 @@
 .comment-avatar {
 	position: absolute;
 	top: 10px;
-	left: -17px;
+	left: -13.75px;
 }
 
 .comment-content {
-	box-shadow: var(--card-shadow);
+	border: 1px solid var(--border-color);
 	background-color: var(--fg-color);
 	border-radius: var(--border-radius-md);
 	padding: var(--padding-md);
diff --git a/frappe/templates/styles/card_style.css b/frappe/templates/styles/card_style.css
index c887c1eabe..d400347e6d 100644
--- a/frappe/templates/styles/card_style.css
+++ b/frappe/templates/styles/card_style.css
@@ -43,8 +43,9 @@
 }
 
 .page-card-head h4 {
-	font-size: 18px;
-	font-weight: 600;
+	font-size: var(--text-xl);
+	font-weight: var(--weight-semibold);
+	letter-spacing: 0.01em;
 }
 
 #reset-password .form-group {