From 751e609daa3eb1c174e7cce06b323389ee194ee2 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 29 Jun 2020 18:40:21 +0530
Subject: [PATCH] feat: replace desktop.less and updated styles

---
 frappe/public/build.json        |   1 -
 frappe/public/less/desktop.less | 878 --------------------------------
 frappe/public/scss/desktop.scss | 197 +++----
 3 files changed, 68 insertions(+), 1008 deletions(-)
 delete mode 100644 frappe/public/less/desktop.less

diff --git a/frappe/public/build.json b/frappe/public/build.json
index 3a6cdcfa2f..c2916659eb 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -97,7 +97,6 @@
 		"public/less/sidebar.less",
 		"public/less/page.less",
 		"public/less/tree.less",
-		"public/less/desktop.less",
 		"public/less/link_preview.less",
 		"public/less/form.less",
 		"public/less/mobile.less",
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
deleted file mode 100644
index e68a093d25..0000000000
--- a/frappe/public/less/desktop.less
+++ /dev/null
@@ -1,878 +0,0 @@
-@import "variables.less";
-
-.desk-container {
-	margin-top: 20px;
-
-	.page-switcher {
-		border-radius: 5px;
-		display: none;
-		border: 1px solid @border-color;
-		background-color: @panel-bg;
-		padding: 8px 15px;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 10px;
-	}
-
-	.mobile-list {
-		display: none;
-		border-radius: 5px;
-		padding: 8px 15px;
-		border: 1px solid @border-color;
-
-		.sidebar-item {
-			font-size: 12px;
-			font-weight: bold;
-			margin-bottom: 1px;
-			display: flex;
-			padding: 10px 15px;
-			border-radius: 4px;
-			text-decoration: none;
-			cursor: pointer;
-			text-rendering: optimizelegibility;
-
-			&.selected {
-				background-color: @panel-bg;
-			}
-		}
-	}
-
-	.desk-sidebar {
-		width: 20rem;
-		display: block;
-		position: fixed;
-		z-index: 1;
-		min-height: 1px;
-		padding-right: 15px;
-		scroll-behavior: auto;
-		overflow-y: scroll;
-		top: 40px;
-		scrollbar-width: none;
-		bottom: 0;
-		float: left;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		.sidebar-item {
-			font-size: 12px;
-			font-weight: bold;
-			margin-bottom: 1px;
-			display: flex;
-			padding: 10px 15px;
-			border-radius: 4px;
-			text-decoration: none;
-			cursor: pointer;
-			text-rendering: optimizelegibility;
-
-			&:focus {
-				background-color: @panel-bg;
-				outline: 0;
-			}
-
-			&:hover {
-				background-color: @panel-bg;
-			}
-
-			&.selected {
-				background-color: @panel-bg;
-			}
-
-			&:last-child {
-				margin-bottom: 30px;
-			}
-
-			.icon {
-				color: @text-muted;
-				padding-right: 1rem;
-				align-self: center;
-			}
-		}
-
-		.sidebar-group-title {
-			margin-top: 30px;
-			padding: 0px 15px;
-			text-rendering: optimizelegibility;
-
-			&:first-child {
-				// To compensate for top value in desk-sidebar
-				margin-top: 30px;
-			}
-		}
-	}
-
-	.desk-body {
-		padding-left: 20rem;
-		display: flex;
-		flex-direction: column;
-  		height: 100%;
-		position: relative;
-		min-height: 1px;
-		padding-right: 15px;
-
-		.desk-page.allow-customization {
-			.customize-options {
-				text-align: right;
-				margin-top: 7px;
-				color: @text-muted;
-				z-index: 99;
-
-				.save-customization {
-					cursor: pointer;
-					color: @text-color;
-				}
-
-				.discard-customization {
-					cursor: pointer;
-				}
-			}
-		}
-	}
-
-	@media (max-width: 768px) {
-		.desk-sidebar {
-			display: none;
-		}
-		.desk-body {
-			padding-left: 15px !important;
-		}
-		.page-switcher {
-			display: flex;
-		}
-	}
-}
-
-.widget-group {
-	margin-bottom: 25px;
-	// -webkit-animation-name: slideInUp;
-	// animation-name: slideInUp;
-	// animation-duration: 0.4s;
-
-	.widget-group-head {
-		display: flex;
-		justify-content: space-between;
-
-		.widget-group-title {
-			align-self: center;
-		}
-
-		.widget-group-control {
-			align-self: center;
-		}
-	}
-
-	.legend {
-		display: flex;
-		padding: 15px;
-
-		.legend-item {
-			margin-right: 20px;
-		}
-	}
-
-	.grid-col-3 {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		// grid-auto-rows: minmax(62px, 1fr);
-		column-gap: 15px;
-		row-gap: 15px;
-		align-items: center;
-	}
-
-	.grid-col-2 {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		// grid-auto-rows: minmax(62px, 1fr);
-		column-gap: 15px;
-		row-gap: 15px;
-		align-items: center;
-
-		.full-width {
-			grid-column-start: 1;
-			grid-column-end: 3;
-		}
-	}
-
-	.grid-col-1 {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
-		// grid-auto-rows: minmax(62px, 1fr);
-		column-gap: 15px;
-		row-gap: 15px;
-		align-items: center;
-	}
-
-	@media (max-width: 768px) {
-		.legend {
-			display: flex;
-			flex-direction: column;
-
-			.legend-item {
-				margin-right: 20px;
-			}
-		}
-
-		.grid-col-2 {
-			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-			.full-width {
-				grid-column-start: 1;
-				grid-column-end: 2;
-			}
-		}
-
-		.grid-col-1 {
-			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		}
-	}
-}
-
-.widget {
-	display: flex;
-	flex-direction: column;
-	min-height: 1px;
-	padding: 15px;
-	border-radius: 5px;
-	border: 1px solid @border-color;
-	height: 100%;
-
-	.widget-head {
-		display: flex;
-		justify-content: space-between;
-
-		.widget-title {
-			align-self: center;
-			font-size: 16px;
-			font-family: inherit;
-			font-weight: 500;
-			line-height: 1.3em;
-			color: inherit;
-		}
-		.widget-control {
-			align-self: center;
-			display: flex;
-			flex-direction: row-reverse;
-
-			// Any immidiate child
-			>* {
-				align-self: center;
-				margin-left: 5px;
-			}
-
-			.drag-handle {
-				cursor: all-scroll;
-				cursor: -webkit-grabbing;
-
-				&:active {
-				    cursor: grabbing;
-				    cursor: -moz-grabbing;
-				    cursor: -webkit-grabbing;
-				}
-			}
-
-			.dashboard-date-field {
-				.clearfix,
-				.help-box {
-					display: none;
-				}
-
-				.frappe-control,
-				.form-group {
-					margin-bottom: 0px !important;
-				}
-			}
-		}
-	}
-
-	&.sortable-ghost {
-		background-color: @disabled-background;
-		border-color: @disabled-background
-	}
-
-	&.new-widget {
-		min-height: 65px;
-		background-color: @disabled-background;
-		color: @text-muted;
-		display: flex;
-		align-content: center;
-		justify-content: center;
-		cursor: pointer;
-	}
-
-	// Overrides for each widgets
-	&.dashboard-widget-box {
-		padding: 10px 15px !important;
-		min-height: 260px;
-
-		.chart-column-container {
-			padding-right: 0px !important;
-			padding-left: 0px !important;
-		}
-
-		.widget-footer {
-			font-size: 85%;
-			color: @text-muted;
-		}
-
-		.chart-loading-state {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		.report-summary {
-			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-			border: none;
-
-			.summary-value {
-				font-size: 20px;
-			}
-		}
-	}
-
-	&.dashboard-widget-box.heatmap-chart {
-		min-height: 0px;
-		height: 180px;
-
-		.widget-footer {
-			display: none;
-		}
-
-		.widget-control {
-            z-index: 1;
-        }
-
-		.frappe-chart .chart-legend {
-			display: none;
-		}
-
-		.chart-loading-state {
-			height: 160px !important;
-		}
-
-		.widget-body {
-			display: flex;
-			max-height: 100%;
-			margin: auto;
-			margin-top: -15px;
-
-			.chart-container {
-				height: 100%;
-				.frappe-chart {
-					height: 100%;
-				}
-			}
-
-			.heatmap-legend {
-				display: flex;
-				margin: 45px 20px 0 20px;
-
-				.legend-colors {
-					padding-left: 1;
-					padding-left: 15px;
-					list-style: none;
-				}
-
-				li {
-					width: 10px;
-					height: 10px;
-					margin: 5px;
-				}
-
-				.legend-label {
-					color: #555b51;
-					font-size: 11px;
-					margin-left: 15px;
-					line-height: 1.6em;
-				}
-
-				@media (max-width: 991px) {
-					display: none;
-				}
-			}
-		}
-	}
-
-	@media (max-width: 768px) {
-		&.dashboard-widget-box.heatmap-chart {
-			display: none;
-		}
-	}
-
-	&.onboarding-widget-box {
-		margin-bottom: 50px;
-		margin-top: 10px;
-
-		.widget-head {
-			display: flex;
-
-			.widget-title {
-				font-size: 20px;
-			}
-
-			.widget-subtitle {
-				font-size: 16px;
-				margin-top: 5px;
-				color: @text-muted;
-			}
-
-			.widget-control {
-				align-self: flex-start;
-				margin-top: -5px;
-				color: @text-muted;
-			}
-		}
-
-		.widget-body {
-			margin-top: 20px;
-			padding-right: 200px;
-
-			@media (max-width: 970px) {
-				padding-right: 0;
-			}
-
-			&.grid {
-				display: grid;
-				grid-template-columns: 1fr 1fr;
-				grid-auto-flow: column;
-
-				&.grid-rows-2 {
-					grid-template-rows: repeat(3, 1fr);
-				}
-
-				&.grid-rows-3 {
-					grid-template-rows: repeat(3, 1fr);
-				}
-
-				&.grid-rows-4 {
-					grid-template-rows: repeat(4, 1fr);
-				}
-
-				&.grid-rows-5 {
-					grid-template-rows: repeat(5, 1fr);
-				}
-
-				@media (max-width: 768px) {
-					grid-template-columns: 1fr;
-					&.grid-rows-2,
-					&.grid-rows-3,
-					&.grid-rows-4,
-					&.grid-rows-5 {
-						grid-template-columns: 1fr;
-						grid-auto-flow: row;
-					}
-				}
-			}
-
-			.onboarding-step {
-				margin-bottom: 8px;
-				font-size: 16px;
-				letter-spacing: 0.015em;
-
-				i {
-					color: @text-muted;
-					padding-left: 5px;
-					padding-right: 2px;
-				}
-
-				.step-skip {
-					visibility: hidden;
-					cursor: pointer;
-					font-size: 12px;
-					padding-left: 5px;
-				}
-
-				span {
-					color: @text-muted;
-					cursor: pointer;
-				}
-
-				&:hover {
-					span {
-						color: @text-color;
-					}
-
-					.step-skip {
-						visibility: visible;
-					}
-				}
-
-				&.skipped {
-					i {
-						color: @text-muted;
-					}
-
-					span {
-						color: @text-muted;
-					}
-
-					&:hover {
-						span {
-							color: @text-muted;
-						}
-
-						.step-skip {
-							visibility: hidden;
-						}
-					}
-				}
-
-				&.complete {
-					i {
-						color: @green;
-					}
-
-					span {
-						color: @text-color;
-					}
-				}
-			}
-		}
-	}
-
-	&.shortcut-widget-box {
-		cursor: pointer;
-
-		&:hover {
-			border-color: @text-muted;
-		}
-
-		.widget-head {
-			margin-top: 5px;
-			margin-bottom: 5px;
-
-			.widget-title {
-				i {
-					color: @text-muted;
-					font-size: 18px;
-					margin-right: 6px;
-				}
-			}
-		}
-	}
-
-	&.links-widget-box {
-		.link-item {
-			position: relative;
-			margin: 10px 0px;
-			cursor: default;
-
-			&:first-child {
-				margin-top: 15px;
-			}
-
-			&:last-child {
-				margin-bottom: 0px !important;
-			}
-
-			.link-content {
-				flex: 1;
-			}
-
-			.disabled-link {
-				color: @text-muted;
-			}
-
-			.popover {
-				display: block;
-				top: -60px;
-				max-width: 220px;
-
-				&.top > .arrow {
-					left: 20%;
-				}
-			}
-
-			.indicator {
-				margin-right: 5px;
-				color: inherit;
-				font-weight: inherit;
-			}
-		}
-	}
-
-	&.number-widget-box {
-		cursor: pointer;
-		height: 110px;
-		padding: 10px;
-
-		&:hover {
-			border-color: @text-muted;
-		}
-
-		.widget-head {
-
-			.widget-title {
-				font-weight: normal;
-				color: @text-muted;
-				font-size: 14px;
-				margin-top: -5px;
-			}
-
-			.widget-control {
-				right: -10px;
-				top: -10px;
-			}
-		}
-
-		.widget-body {
-			text-align: left;
-
-			.number-card-loading {
-				display: flex;
-				height: 50px;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.widget-content {
-				padding-top: 30px;
-				display: flex;
-				justify-content: space-between;
-
-				.number {
-					font-weight: 600;
-					font-size: 26px;
-					line-height: 1.8em;
-				}
-
-				.number-text {
-					color: @text-muted;
-					padding: 5px;
-					font-size: 14px;
-				}
-
-				.card-stats {
-					padding-top: 5px;
-				}
-
-				.percentage-stat {
-					float: right;
-					clear: right;
-					font-size: 12px;
-				}
-
-				.stat-period {
-					float: right;
-					clear: right;
-					font-size: 11px;
-				}
-
-				.green-stat {
-					color: green;
-				}
-
-				.red-stat {
-					color: @red;
-				}
-
-				.grey-stat {
-					color: @text-muted;
-				}
-			}
-		}
-	}
-
-}
-
-.onboarding-success {
-	margin: 50px auto;
-	max-width: 75%;
-
-	.success-state {
-		height: 15rem !important;
-		max-height: 150px;
-		width: auto;
-	}
-}
-
-.pill {
-	position: relative;
-	left: 2px;
-	// font-weight: bold;
-	display: inline-block;
-	background:	@text-muted;
-	font-size: 12px;
-	line-height: 20px;
-	padding: 0 8px;
-	color: #fff;
-	border-radius: 10px;
-}
-
-@-webkit-keyframes smallBounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -12px, 0);
-    transform: translate3d(0, -12px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -6px, 0);
-    transform: translate3d(0, -6px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
-@keyframes smallBounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -12px, 0);
-    transform: translate3d(0, -12px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -6px, 0);
-    transform: translate3d(0, -6px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
-.small-bounce {
-  -webkit-animation-name: smallBounce;
-  animation-name: smallBounce;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-  animation-duration: 1s;
-}
-
-@-webkit-keyframes slideInUp {
-  from {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slide-in-up {
-  -webkit-animation-name: slideInUp;
-  animation-name: slideInUp;
-  animation-duration: 1s;
-}
-
-
-@-webkit-keyframes pulse {
-  from {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes pulse {
-  from {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.zoomOutDelete {
-  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
-  transform: scale3d(0.5, 0.5, 0.5);
-  opacity: 0;
-  visibility: hidden;
-}
-
-@-webkit-keyframes zoomIn {
-  from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.7, 0.7, 0.7);
-    transform: scale3d(0.7, 0.7, 0.7);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.7, 0.7, 0.7);
-    transform: scale3d(0.7, 0.7, 0.7);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-.zoomIn {
-	-webkit-animation-name: zoomIn;
-	animation-name: zoomIn;
-	animation-duration: 400ms;
-}
diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss
index 549bcea090..b957f6bfa9 100644
--- a/frappe/public/scss/desktop.scss
+++ b/frappe/public/scss/desktop.scss
@@ -1,129 +1,65 @@
-$disabled-background: var(--gray-100);
-$panel-bg: var(--gray-50);
+$disabled-background: var(--grey-100);
+$panel-bg: $gray-50;
 
-.desk-container {
-	padding-top: 2rem;
-	.desk-sidebar {
-		width: 20rem;
-		display: block;
-		position: fixed;
-		z-index: 1;
-		min-height: 1px;
-		padding-right: 15px;
-		scroll-behavior: auto;
-		overflow-y: scroll;
-		top: $navbar-height;
-		scrollbar-width: none;
-		bottom: 0;
-		float: left;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		.sidebar-item {
-			font-size: var(--text-sm);
-			font-weight: bold;
-			margin-bottom: 1px;
-			display: flex;
-			padding: 10px 15px;
-			border-radius: 4px;
-			text-decoration: none;
-			cursor: pointer;
-			text-rendering: optimizelegibility;
-
-			&:focus {
-				background-color: $panel-bg;
-				outline: 0;
-			}
-
-			&:hover {
-				background-color: $panel-bg;
-			}
-
-			&.selected {
-				background-color: $panel-bg;
-			}
-
-			&:last-child {
-				margin-bottom: 30px;
-			}
-
-			.icon {
-				color: $text-muted;
-				padding-right: 1rem;
-				align-self: center;
-			}
-		}
-
-		.sidebar-group-title {
-			margin-top: 30px;
-			padding: 0px 15px;
-			text-rendering: optimizelegibility;
-
-			&:first-child {
-				// To compensate for top value in desk-sidebar
-				margin-top: 20px;
-			}
-		}
+.desk-sidebar {
+	.list-sidebar-label {
+		margin-bottom: 1rem;
 	}
-
-	.desk-body {
-		padding-left: calc(20rem + 15px);
+	.desk-sidebar-item {
 		display: flex;
-		flex-direction: column;
-		height: 100%;
-		position: relative;
-		min-height: 1px;
-		padding-right: 15px;
-		flex: 1;
-
-		.desk-page.allow-customization {
-			.customize-options {
-				text-align: right;
-				margin-bottom: 0.5rem;
-				color: $text-muted;
-				z-index: 99;
-				float: right;
-
-				.save-customization {
-					cursor: pointer;
-					color: $text-color;
-				}
-
-				.discard-customization {
-					cursor: pointer;
-				}
-			}
+		align-items: center;
+		font-size: var(--text-base);
+		padding: 8px 12px;
+		margin-bottom: 1px;
+		border-radius: 4px;
+		cursor: pointer;
+		text-rendering: optimizelegibility;
+	
+		&:focus {
+			background-color: $panel-bg;
+			outline: 0;
 		}
-	}
 
-	@media (max-width: 768px) {
-		.desk-sidebar {
-			display: none;
+		&:first-child {
+			margin-top: 100px;
 		}
-		.desk-body {
-			padding-left: 15px !important;
+	
+		&:hover {
+			background-color: $panel-bg;
 		}
-	}
+	
+		&.selected {
+			background-color: $panel-bg;
+		}
+	
+		a {
+			color: $gray-800;
+			text-decoration: none;
+		}
+	
+		svg {
+			margin-right: 0.875rem;
+		}
+	}	
+}
+
+.desk-page {
+	padding: 15px;
 }
 
 .widget-group {
 	margin-bottom: 25px;
-	// -webkit-animation-name: slideInUp;
-	// animation-name: slideInUp;
-	// animation-duration: 0.4s;
 
 	.widget-group-head {
 		display: flex;
+		align-items: center;
 		justify-content: space-between;
 
 		.widget-group-title {
-			align-self: center;
-		}
-
-		.widget-group-control {
-			align-self: center;
+			color: var(--grey-900);
+			font-weight: 600;
+			font-size: var(--text-lg);
+			margin-bottom: 1.2rem;
 		}
 	}
 
@@ -138,8 +74,7 @@ $panel-bg: var(--gray-50);
 
 	.grid-col-3 {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		// grid-auto-rows: minmax(62px, 1fr);
+		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 		column-gap: 15px;
 		row-gap: 15px;
 		align-items: center;
@@ -197,10 +132,21 @@ $panel-bg: var(--gray-50);
 	flex-direction: column;
 	min-height: 1px;
 	padding: 15px;
-	border-radius: 5px;
-	border: 1px solid $border-color;
+	border-radius: 8px;
 	height: 100%;
 
+	&.widget-shadow {
+		box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1);
+
+		&:hover {
+			box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);
+		}
+	}
+
+	&.border {
+		border: 1px solid $border-color;
+	}
+
 	.widget-head {
 		display: flex;
 		justify-content: space-between;
@@ -211,7 +157,7 @@ $panel-bg: var(--gray-50);
 			font-family: inherit;
 			font-weight: 500;
 			line-height: 1.3em;
-			color: inherit;
+			color: var(--grey-900);
 		}
 		.widget-control {
 			align-self: center;
@@ -266,12 +212,12 @@ $panel-bg: var(--gray-50);
 
 	// Overrides for each widgets
 	&.dashboard-widget-box {
-		padding: 10px 15px !important;
 		min-height: 260px;
+		padding: 0px;
 
-		.chart-column-container {
-			padding-right: 0px !important;
-			padding-left: 0px !important;
+		.chart-container {
+			margin-right: -10px;
+			margin-left: -10px;
 		}
 
 		.widget-footer {
@@ -297,7 +243,6 @@ $panel-bg: var(--gray-50);
 
 	&.onboarding-widget-box {
 		margin-bottom: 50px;
-		margin-top: 10px;
 
 		.widget-head {
 			display: flex;
@@ -413,10 +358,6 @@ $panel-bg: var(--gray-50);
 	&.shortcut-widget-box {
 		cursor: pointer;
 
-		&:hover {
-			border-color: $text-muted;
-		}
-
 		.widget-head {
 			margin-top: 5px;
 			margin-bottom: 5px;
@@ -424,7 +365,7 @@ $panel-bg: var(--gray-50);
 			.widget-title {
 				i {
 					color: $text-muted;
-					font-size: 18px;
+					font-size: var(--text-lg);
 					margin-right: 6px;
 				}
 			}
@@ -432,7 +373,9 @@ $panel-bg: var(--gray-50);
 	}
 
 	&.links-widget-box {
+		padding-left: 0px;
 		.link-item {
+			color: var(--gray-900);
 			position: relative;
 			margin: 10px 0px;
 			cursor: default;
@@ -476,16 +419,12 @@ $panel-bg: var(--gray-50);
 		height: 110px;
 		padding: 10px;
 
-		&:hover {
-			border-color: $text-muted;
-		}
-
 		.widget-head {
 
 			.widget-title {
 				font-weight: normal;
 				color: $text-muted;
-				font-size: 14px;
+				font-size: var(--text-base);
 				margin-top: -5px;
 			}