diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js
index b36f95683e46..32c51cf4f29f 100644
--- a/client/config/webpack.config.js
+++ b/client/config/webpack.config.js
@@ -385,9 +385,6 @@ function config(webpackEnv) {
options: {
prettier: false,
svgo: false,
- svgoConfig: {
- plugins: [{ removeViewBox: false }],
- },
titleProp: true,
ref: true,
},
diff --git a/client/src/assets/icons/baseline/browser-check.svg b/client/src/assets/icons/baseline/browser-check.svg
index 063263f244d6..8a4c592e25b0 100644
--- a/client/src/assets/icons/baseline/browser-check.svg
+++ b/client/src/assets/icons/baseline/browser-check.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/browser-cross.svg b/client/src/assets/icons/baseline/browser-cross.svg
index 54e998254c1a..1b0aeb267445 100644
--- a/client/src/assets/icons/baseline/browser-cross.svg
+++ b/client/src/assets/icons/baseline/browser-cross.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/chrome.svg b/client/src/assets/icons/baseline/chrome.svg
index 98bc15cdc4d7..66362669dc4a 100644
--- a/client/src/assets/icons/baseline/chrome.svg
+++ b/client/src/assets/icons/baseline/chrome.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/edge.svg b/client/src/assets/icons/baseline/edge.svg
index 8d6dbf5c5d24..21bea60b7ad5 100644
--- a/client/src/assets/icons/baseline/edge.svg
+++ b/client/src/assets/icons/baseline/edge.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/firefox.svg b/client/src/assets/icons/baseline/firefox.svg
index 3b9ea4b8959a..e228a55bf806 100644
--- a/client/src/assets/icons/baseline/firefox.svg
+++ b/client/src/assets/icons/baseline/firefox.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/high-dark.svg b/client/src/assets/icons/baseline/high-dark.svg
index cf06ac9a8905..06b214cf1d20 100644
--- a/client/src/assets/icons/baseline/high-dark.svg
+++ b/client/src/assets/icons/baseline/high-dark.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/high.svg b/client/src/assets/icons/baseline/high.svg
index b72cacc383b3..83b6ef2e14a7 100644
--- a/client/src/assets/icons/baseline/high.svg
+++ b/client/src/assets/icons/baseline/high.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/limited-dark.svg b/client/src/assets/icons/baseline/limited-dark.svg
index e5b19dda4cd6..07b848a82b20 100644
--- a/client/src/assets/icons/baseline/limited-dark.svg
+++ b/client/src/assets/icons/baseline/limited-dark.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/limited.svg b/client/src/assets/icons/baseline/limited.svg
index 52081bb0b327..9b126ff1dc7c 100644
--- a/client/src/assets/icons/baseline/limited.svg
+++ b/client/src/assets/icons/baseline/limited.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/low-dark.svg b/client/src/assets/icons/baseline/low-dark.svg
index 261502c44554..4256a616b7ac 100644
--- a/client/src/assets/icons/baseline/low-dark.svg
+++ b/client/src/assets/icons/baseline/low-dark.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/low.svg b/client/src/assets/icons/baseline/low.svg
index 36912d2fb8b0..aa0cf0f2d503 100644
--- a/client/src/assets/icons/baseline/low.svg
+++ b/client/src/assets/icons/baseline/low.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/baseline/safari.svg b/client/src/assets/icons/baseline/safari.svg
index 34fff5fabe7e..b77e117496ee 100644
--- a/client/src/assets/icons/baseline/safari.svg
+++ b/client/src/assets/icons/baseline/safari.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/assets/icons/feedback.svg b/client/src/assets/icons/feedback.svg
index cc09b3d58272..63fd30ec1791 100644
--- a/client/src/assets/icons/feedback.svg
+++ b/client/src/assets/icons/feedback.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/src/document/baseline-indicator.scss b/client/src/document/baseline-indicator.scss
index ace3f9042fd9..ab5437609709 100644
--- a/client/src/document/baseline-indicator.scss
+++ b/client/src/document/baseline-indicator.scss
@@ -8,7 +8,7 @@ $browsers: "chrome", "edge", "firefox", "safari";
--baseline-img: var(--baseline-limited-img);
--baseline-check: var(--baseline-limited-check);
--baseline-cross: var(--baseline-limited-cross);
- --feedback-link-icon: #666;
+ --feedback-link-icon: var(--icon-primary);
background: var(--baseline-bg);
border-radius: 0.25rem;
@@ -179,7 +179,7 @@ $browsers: "chrome", "edge", "firefox", "safari";
list-style: none;
margin: 0;
- &:first-child a {
+ a.learn-more {
&,
&:active,
&:visited {
@@ -188,9 +188,10 @@ $browsers: "chrome", "edge", "firefox", "safari";
}
}
- &:not(:first-child) a {
+ a:not(.learn-more) {
&,
- &:active {
+ &:active,
+ &:visited {
background: none;
color: var(--text-primary);
}
diff --git a/client/src/document/baseline-indicator.tsx b/client/src/document/baseline-indicator.tsx
index db9ae287955a..76a6aa9e48c8 100644
--- a/client/src/document/baseline-indicator.tsx
+++ b/client/src/document/baseline-indicator.tsx
@@ -48,7 +48,9 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) {
? "not"
: undefined;
- const feedbackLink = `${SURVEY_URL}?page=${pathname}&level=${level}`;
+ const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(
+ pathname
+ )}&level=${level}`;
const supported = (browser: string) => {
const version: string | undefined = status.support?.[browser.toLowerCase()];
@@ -119,20 +121,20 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) {
This feature is well established and works across many devices and browser versions. It’s been available across browsers since{" "} - {low_date?.toLocaleDateString("en-US", { + {low_date.toLocaleDateString("en-US", { year: "numeric", month: "long", })} .
- ) : level === "low" ? ( + ) : level === "low" && low_date ? (Since{" "} - {low_date?.toLocaleDateString("en-US", { + {low_date.toLocaleDateString("en-US", { year: "numeric", month: "long", })} @@ -151,6 +153,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { href="/en-US/blog/baseline-evolution-on-mdn/" data-glean={BASELINE.LINK_LEARN_MORE} target="_blank" + className="learn-more" > Learn more @@ -168,7 +171,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { target="_blank" rel="noreferrer" > - Feedback + Give feedback diff --git a/svgo.config.js b/svgo.config.js new file mode 100644 index 000000000000..f3e9f6311060 --- /dev/null +++ b/svgo.config.js @@ -0,0 +1,13 @@ +export default { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeViewBox: false, + }, + }, + }, + "removeDimensions", + ], +};