Use theme colors for job overlay, improve dashboard on small screens (#…

…2810)
Automattic · Apr 25, 2024 · ad9a9dc · ad9a9dc
1 parent 2224b9e
commit ad9a9dc
Show file tree

Hide file tree

Showing 15 changed files with 422 additions and 79 deletions.
diff --git a/assets/css/job-dashboard.scss b/assets/css/job-dashboard.scss
@@ -2,10 +2,14 @@
 @import 'mixins';
 @import 'job-overlay';
 
-.jm-dashboard {
+.jm-dashboard-table {
+	container-name: jm-dashboard-table;
 	container-type: inline-size;
-
 	--jm-dashboard-company-logo-size: calc(var(--jm-ui-icon-size) + 2 * var(--jm-ui-space-xs));
+
+	&.jm-dashboard-table--large {
+		container-name: jm-dashboard-table-large;
+	}
 }
 
 .jm-dashboard-job, .jm-dashboard-header {
@@ -42,14 +46,10 @@
 .jm-dashboard-job-column {
 	flex: 1 1 calc(50% - var(--jm-ui-space-sm));
 	min-width: 0;
-}
-
-.jm-dashboard small {
-	font-size: var(--jm-ui-font-size-s);
-}
-
-.jm-dashboard .job_title {
-	flex: 1 1 200%;
+	line-height: 1.2;
+	small {
+		white-space: nowrap;
+	}
 }
 
 .jm-dashboard-job-column.company {
@@ -80,10 +80,6 @@
 		width: var(--jm-ui-icon-size-s);
 		height: var(--jm-ui-icon-size-s);
 	}
-
-	.job-status-rejected {
-		color: var(--jm-ui-error-color);
-	}
 }
 
 .jm-dashboard img.company_logo {
@@ -92,27 +88,47 @@
 	object-fit: contain;
 }
 
-
 .jm-dashboard-job-column.actions {
-	flex: 0.5 1 100%;
 	text-align: right;
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	gap: var(--jm-ui-space-m);
+	gap: var(--jm-ui-space-s);
 }
 
 .jm-dashboard-job-column a.job-title {
 	font-weight: 600;
 	font-size: var(--jm-ui-font-size);
-	line-height: 1.2;
 	text-decoration: unset;
 }
 
 .jm-dashboard-job-column a.job-title:hover {
 	text-decoration: underline;
 }
 
+.jm-dashboard-job-column-label {
+	text-transform: uppercase;
+	font-size: var(--jm-ui-font-size-s);
+	font-weight: 200;
+	color: fadeCurrentColor( 70% );
+}
+
+.jm-dashboard-job .jm-dashboard-job-column-label {
+	display: none;
+}
+
+.jm-dashboard small {
+	font-size: var(--jm-ui-font-size-s);
+}
+
+.jm-dashboard-table .job_title {
+	flex: 1 1 200%;
+}
+
+.jm-dashboard-table--large .job_title {
+	flex: 1 1 150%;
+}
+
 .jm-dashboard-action {
 	display: block;
 	text-decoration: none;
@@ -126,12 +142,33 @@
 	color: inherit;
 }
 
-.job-dashboard-action-delete {
+.jm-dashboard .job-dashboard-action-delete {
 	color: var(--jm-ui-danger-color);
 }
 
-@container (width < 540px)
-{
+.jm-dashboard .job-manager-pagination {
+	ul.page-numbers {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--jm-ui-font-size);
+		border: unset;
+		gap: 12px;
+	}
+	li {
+		min-width: 32px;
+		text-align: center;
+		border: 1px solid var(--jm-ui-border-light);
+		border-radius: 2px;
+
+	}
+}
+
+@mixin jm-dashboard-job-mobile {
+	.jm-dashboard-job-column:where(:not(.job_title):not(.actions):not(.company)) .jm-dashboard-job-column-label  {
+		display: block;
+	}
 	.jm-dashboard-job {
 		flex-wrap: wrap;
 		align-items: flex-start;
@@ -149,4 +186,28 @@
 		flex-basis: calc( 100% - var(--jm-dashboard-company-logo-size) - var(--jm-ui-space-sm) );
 		order: -1;
 	}
+
+}
+
+@container jm-dashboard-table-large (width < 940px)
+{
+	.jm-dashboard-job-column.job_title {
+		flex-basis: 100%;
+	}
+}
+
+@container jm-dashboard-table (width < 540px)
+{
+	@include jm-dashboard-job-mobile;
+}
+@container jm-dashboard-table-large (width < 780px)
+{
+	@include jm-dashboard-job-mobile;
+}
+
+@container jm-dashboard-table-large (540px < width < 780px)
+{
+	.jm-dashboard-job-column {
+		flex: 1 1 calc(33% - 2 * var(--jm-ui-space-sm));
+	}
 }
diff --git a/assets/css/job-overlay.scss b/assets/css/job-overlay.scss
@@ -131,7 +131,7 @@
 .jm-job-stats {
 
 	--jm-stat-color-page-view: var(--jm-ui-accent-color);
-	--jm-stat-color-unique-view: color-mix(in srgb, #000, var(--jm-stat-color-page-view) 40%);
+	--jm-stat-color-unique-view: var(--jm-ui-accent-alt-color);
 }
 
 .jm-job-stat-details {

diff --git a/assets/css/ui.dialog.scss b/assets/css/ui.dialog.scss
@@ -21,6 +21,7 @@
 }
 
 .jm-dialog {
+	font-family: var(--jm-ui-font-family);
 	font-size: var(--jm-ui-font-size);
 	--jm-dialog-padding: var(--jm-ui-space-l);
 }
@@ -54,6 +55,9 @@
 	overflow: auto;
 	overscroll-behavior: contain;
 
+	body & a:not(:hover):not(:active):not(:focus) {
+		color: var(--jm-ui-accent-color, #1a1a1a);
+	}
 }
 .jm-dialog-modal-container {
 	position: relative;

diff --git a/assets/css/ui.elements.scss b/assets/css/ui.elements.scss
@@ -1,4 +1,8 @@
 
+.jm-ui {
+	font-family: var(--jm-ui-font-family);
+}
+
 .jm-ui-row {
 	display: flex;
 	gap: var(--jm-ui-space-xs);
@@ -26,6 +30,7 @@
 	text-decoration: none;
 	outline: unset;
 	cursor: pointer;
+	border: unset;
 }
 
 .jm-ui-button,
@@ -51,6 +56,14 @@
 	}
 }
 
+a[href].jm-ui-button,
+a[href].jm-ui-button--outline,
+a[href].jm-ui-button--icon {
+	html body & {
+		text-decoration: none;
+	}
+}
+
 .jm-ui-button {
 	border: 1px solid currentColor;
 
@@ -67,13 +80,10 @@
 	}
 }
 
-.jm-ui-button--small,
+.jm-ui-button--small
 {
-	padding: var(--jm-ui-space-xxs) var(--jm-ui-space-s);
 	gap: var(--jm-ui-space-xs);
 	font-size: var(--jm-ui-font-size-s);
-	font-weight: 400;
-	letter-spacing: -0.1px;
 }
 
 .jm-ui-button__a {
@@ -83,6 +93,10 @@
 .jm-ui-button--outline {
 	background: unset;
 	border: 1px solid currentColor;
+
+	&:hover, &:focus {
+		border: 1px solid currentColor;
+	}
 }
 
 .jm-ui-button--icon {
@@ -238,7 +252,7 @@
 	font-size: var(--jm-ui-font-size-s);
 	text-align: left;
 	white-space: nowrap;
-
+	line-height: 1.5;
 	display: flex;
 	flex-direction: column;
 }

diff --git a/assets/css/ui.neutral.scss b/assets/css/ui.neutral.scss
@@ -1,5 +1,5 @@
 
-:root {
+:where(:root) {
 	--jm-ui-border-light: #{fadeCurrentColor(15%)};
 	--jm-ui-border-faint: #{fadeCurrentColor(5%)};
 	--jm-ui-border-strong: currentColor;
@@ -17,14 +17,16 @@
 
 	--jm-ui-faint-color: #{fadeCurrentColor(2.5%)};
 	--jm-ui-accent-color: inherit;
+	--jm-ui-accent-alt-color: inherit;
 	--jm-ui-danger-color: #cc1818;
-	--jm-ui-error-color: #cc1818;
+	--jm-ui-danger-color-dark-mode: #f86c80;
+	--jm-ui-error-color: var(--jm-ui-danger-color);
 	--jm-ui-info-color: #4e71ec;
 	--jm-ui-success-color: #4ab866;
 	--jm-ui-accent-color-contrast: #ffffff;
 
 	--jm-ui-button-color: var(--jm-ui-accent-color, inherit);
-	--jm-ui-button-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
+	--jm-ui-button-color-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
 	--jm-ui-link-color: var(--jm-ui-accent-color, inherit);
 
 	--jm-ui-notice-error: var(--jm-ui-danger-color);
@@ -50,6 +52,7 @@
 	--jm-ui-space-xl: calc(16 * var(--jm-ui-space-base)); // 64px
 	--jm-ui-space-xxl: calc(24 * var(--jm-ui-space-base)); // 96px
 
+	--jm-ui-font-family: inherit;
 	--jm-ui-font-size: 16px;
 	--jm-ui-font-size-m: 14px;
 	--jm-ui-font-size-s: 12px;

diff --git a/assets/js/job-dashboard.js b/assets/js/job-dashboard.js
@@ -2,8 +2,6 @@
 
 import domReady from '@wordpress/dom-ready';
 
-import './ui';
-
 // eslint-disable-next-line camelcase
 const { i18nConfirmDelete, overlayEndpoint, statsEnabled } = job_manager_job_dashboard;