From 1328f05d787816ead5da714d7a17c55813f46ae7 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Wed, 29 May 2024 18:58:02 +0530
Subject: [PATCH] fix: dashboard design feedback (#5104)

* fix: add createdby and createdAt by default and show not be configurable

* fix: make the checkbox always checked for createdby and createdat

* fix: decrease the margins for the graph and make it compact

* fix: decrease font size for metadata
---
 .../ListOfDashboard/DashboardList.styles.scss    |  8 ++++----
 .../container/ListOfDashboard/DashboardsList.tsx | 16 +++++++---------
 .../LeftContainer/WidgetGraph/WidgetGraphs.tsx   |  6 +++---
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index e16bf19aba..11dac46fde 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -143,7 +143,7 @@
 								slashed-zero;
 							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
-							font-size: 14px;
+							font-size: 12px;
 							font-style: normal;
 							font-weight: 400;
 							line-height: 18px; /* 128.571% */
@@ -168,7 +168,7 @@
 								slashed-zero;
 							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
-							font-size: 14px;
+							font-size: 12px;
 							font-style: normal;
 							font-weight: 400;
 							line-height: 18px; /* 128.571% */
@@ -192,7 +192,7 @@
 								slashed-zero;
 							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
-							font-size: 14px;
+							font-size: 12px;
 							font-style: normal;
 							font-weight: 400;
 							line-height: 18px; /* 128.571% */
@@ -226,7 +226,7 @@
 								slashed-zero;
 							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
-							font-size: 14px;
+							font-size: 12px;
 							font-style: normal;
 							font-weight: 400;
 							line-height: 18px; /* 128.571% */
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index c2f2cf6505..d1b859696a 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -503,14 +503,12 @@ function DashboardsList(): JSX.Element {
 							</div>
 						</div>
 						<div className="dashboard-details">
-							{visibleColumns.createdAt && (
-								<div className="dashboard-created-at">
-									<CalendarClock size={14} />
-									<Typography.Text>{formattedDateAndTime}</Typography.Text>
-								</div>
-							)}
+							<div className="dashboard-created-at">
+								<CalendarClock size={14} />
+								<Typography.Text>{formattedDateAndTime}</Typography.Text>
+							</div>
 
-							{dashboard.createdBy && visibleColumns.createdBy && (
+							{dashboard.createdBy && (
 								<div className="created-by">
 									<div className="dashboard-tag">
 										<Typography.Text className="tag-text">
@@ -900,7 +898,7 @@ function DashboardsList(): JSX.Element {
 							<div className="right">
 								<Switch
 									size="small"
-									checked={visibleColumns.createdAt}
+									checked
 									disabled
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
@@ -921,7 +919,7 @@ function DashboardsList(): JSX.Element {
 								<Switch
 									size="small"
 									disabled
-									checked={visibleColumns.createdBy}
+									checked
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
index 0d8d4de071..9262a4a766 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -91,9 +91,9 @@ function WidgetGraph({
 		<div
 			ref={graphRef}
 			style={{
-				height: '80%',
-				width: '80%',
-				margin: 'auto auto',
+				height: '100%',
+				width: '100%',
+				marginTop: '16px',
 				borderRadius: '3px',
 				border: isDarkMode
 					? '1px solid var(--bg-slate-500)'