From 353cfe723b8a4ab61cb542815b34ebcbf102f3ba Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Tue, 9 Jul 2024 22:29:11 -0400
Subject: [PATCH] Update icon, font size, color for Learning Duration (#2651)

* Add the clock icon SVG

* Update duration font size and color
---
 .../themes/pub/wporg-learn-2024/assets/icon-clock.svg       | 5 +++++
 .../themes/pub/wporg-learn-2024/parts/card-course-h3.html   | 2 +-
 .../themes/pub/wporg-learn-2024/parts/card-course.html      | 2 +-
 .../themes/pub/wporg-learn-2024/parts/card-lesson-h3.html   | 2 +-
 .../themes/pub/wporg-learn-2024/parts/card-lesson.html      | 2 +-
 wp-content/themes/pub/wporg-learn-2024/parts/card.html      | 2 +-
 .../themes/pub/wporg-learn-2024/src/style/_card-grid.scss   | 6 ++----
 7 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/icon-clock.svg

diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/icon-clock.svg b/wp-content/themes/pub/wporg-learn-2024/assets/icon-clock.svg
new file mode 100644
index 000000000..c8c93d7ac
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/assets/icon-clock.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none">
+  <path fill="#656A71" fill-rule="evenodd" d="M12 19.75a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Zm0 1.5a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" clip-rule="evenodd"/>
+  <path fill="#656A71" d="m11 12.25 1-5 1 5h-2ZM12 13.25a1 1 0 0 0 1-1h-2a1 1 0 0 0 1 1Z"/>
+  <path fill="#656A71" d="m12.814 11.634 2.829 4.243L11.4 13.05l1.414-1.415Z"/>
+</svg>
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
index ecff26cbe..583e9eee5 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
@@ -13,7 +13,7 @@
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
-			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
 			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
index 3db21a15f..0449309eb 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
@@ -13,7 +13,7 @@
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
-			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
 			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
index 194298cb8..48894a3c7 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
@@ -13,7 +13,7 @@
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
-			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
 			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
index 5fcff651a..cd26497fb 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
@@ -13,7 +13,7 @@
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
-			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
 			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
index d92c93eda..f1eac0f03 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
@@ -13,7 +13,7 @@
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
-			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
 			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
index bd504b236..54a860240 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
@@ -18,16 +18,14 @@
 			align-items: center;
 
 			&::before {
-				// 'clock' icon
-				content: "\f469";
-				/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-				font-family: dashicons;
+				content: "";
 				display: block;
 				width: 24px;
 				height: 24px;
 				font-size: 24px;
 				line-height: 1;
 				margin-right: 6px;
+				background: url(../../assets/icon-clock.svg) no-repeat;
 			}
 		}