From 35a324b65b4ac6b40a45aeec8c79c86636ed25cf Mon Sep 17 00:00:00 2001
From: yexingsha <57771795+yexingsha@users.noreply.github.com>
Date: Wed, 21 Feb 2024 05:39:12 -0600
Subject: [PATCH] Replace tag icons and update scss (#3722)

---
 chrome/skin/default/zotero/tag-circle-border.svg   |  4 ++--
 chrome/skin/default/zotero/tag-circle.svg          |  4 ++--
 chrome/skin/default/zotero/tag-crescent-border.svg | 14 +++++---------
 chrome/skin/default/zotero/tag-crescent.svg        |  9 ++++++---
 scss/components/_item-tree.scss                    | 11 ++++++-----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/chrome/skin/default/zotero/tag-circle-border.svg b/chrome/skin/default/zotero/tag-circle-border.svg
index 48dae3dadd..893273d344 100644
--- a/chrome/skin/default/zotero/tag-circle-border.svg
+++ b/chrome/skin/default/zotero/tag-circle-border.svg
@@ -1,5 +1,5 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="tag-circle">
-<circle id="Vector" cx="5" cy="5" r="4.5" fill="context-fill" stroke="context-stroke"/>
+<circle id="Vector" cx="6" cy="6" r="5.5" fill="context-fill" stroke="context-stroke" stroke-width="1"/>
 </g>
 </svg>
diff --git a/chrome/skin/default/zotero/tag-circle.svg b/chrome/skin/default/zotero/tag-circle.svg
index bee233f940..f892f90f01 100644
--- a/chrome/skin/default/zotero/tag-circle.svg
+++ b/chrome/skin/default/zotero/tag-circle.svg
@@ -1,5 +1,5 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="tag-circle">
-<circle id="Vector" cx="4" cy="4" r="4" fill="context-fill"/>
+<circle id="Vector" cx="6" cy="6" r="5" fill="context-fill"/>
 </g>
 </svg>
diff --git a/chrome/skin/default/zotero/tag-crescent-border.svg b/chrome/skin/default/zotero/tag-crescent-border.svg
index 5e22880f05..d17440fa1b 100644
--- a/chrome/skin/default/zotero/tag-crescent-border.svg
+++ b/chrome/skin/default/zotero/tag-crescent-border.svg
@@ -1,12 +1,8 @@
-<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="tag-crescent">
-<g id="Vector">
-<mask id="path-1-outside-1_4333_2740" maskUnits="userSpaceOnUse" x="0.399414" y="0" width="9" height="10" fill="black">
-<rect fill="context-stroke" x="0.399414" width="9" height="10"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 8.66685C3.38403 7.75368 4.00023 6.4488 4.00023 5C4.00023 3.5512 3.38403 2.24632 2.39941 1.33315C2.88957 1.11887 3.43097 1 4.00013 1C6.20927 1 8.00013 2.79086 8.00013 5C8.00013 7.20914 6.20927 9 4.00013 9C3.43097 9 2.88957 8.88113 2.39941 8.66685Z"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4_8958" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 11.917C2.83771 11.441 5 8.973 5 6C5 3.027 2.83771 0.559036 0 0.0829584V0H12V12H0V11.917Z" fill="#D9D9D9"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 8.66685C3.38403 7.75368 4.00023 6.4488 4.00023 5C4.00023 3.5512 3.38403 2.24632 2.39941 1.33315C2.88957 1.11887 3.43097 1 4.00013 1C6.20927 1 8.00013 2.79086 8.00013 5C8.00013 7.20914 6.20927 9 4.00013 9C3.43097 9 2.88957 8.88113 2.39941 8.66685Z" fill="context-fill"/>
-<path d="M2.39941 8.66685L1.71941 7.93364L0.600161 8.97168L1.99886 9.58312L2.39941 8.66685ZM2.39941 1.33315L1.99886 0.416876L0.600161 1.02832L1.71941 2.06636L2.39941 1.33315ZM3.00023 5C3.00023 6.15906 2.50854 7.20177 1.71941 7.93364L3.07942 9.40006C4.25952 8.30559 5.00023 6.73854 5.00023 5H3.00023ZM1.71941 2.06636C2.50854 2.79823 3.00023 3.84094 3.00023 5H5.00023C5.00023 3.26146 4.25952 1.69441 3.07942 0.599942L1.71941 2.06636ZM2.79997 2.24942C3.1662 2.08932 3.57142 2 4.00013 2V0C3.29053 0 2.61295 0.148425 1.99886 0.416876L2.79997 2.24942ZM4.00013 2C5.65699 2 7.00013 3.34315 7.00013 5H9.00013C9.00013 2.23858 6.76156 0 4.00013 0V2ZM7.00013 5C7.00013 6.65685 5.65699 8 4.00013 8V10C6.76156 10 9.00013 7.76142 9.00013 5H7.00013ZM4.00013 8C3.57142 8 3.1662 7.91068 2.79997 7.75058L1.99886 9.58312C2.61295 9.85157 3.29053 10 4.00013 10V8Z" fill="context-stroke" mask="url(#path-1-outside-1_4333_2740)"/>
-</g>
+<g id="tag-crescent" mask="url(#mask0_4_8958)">
+<circle id="Vector" cx="6" cy="6" r="5.5" fill="context-fill" stroke="context-stroke" stroke-width="1"/>
 </g>
 </svg>
diff --git a/chrome/skin/default/zotero/tag-crescent.svg b/chrome/skin/default/zotero/tag-crescent.svg
index adc646299a..a348f6d2e5 100644
--- a/chrome/skin/default/zotero/tag-crescent.svg
+++ b/chrome/skin/default/zotero/tag-crescent.svg
@@ -1,5 +1,8 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="tag-crescent">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 7.66685C3.38403 6.75368 4.00023 5.4488 4.00023 4C4.00023 2.5512 3.38403 1.24632 2.39941 0.33315C2.88957 0.118875 3.43097 0 4.00013 0C6.20927 0 8.00013 1.79086 8.00013 4C8.00013 6.20914 6.20927 8 4.00013 8C3.43097 8 2.88957 7.88113 2.39941 7.66685Z" fill="context-fill" />
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4_8958" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 11.917C2.83771 11.441 5 8.973 5 6C5 3.027 2.83771 0.559036 0 0.0829584V0H12V12H0V11.917Z" fill="#D9D9D9"/>
+</mask>
+<g id="tag-crescent" mask="url(#mask0_4_8958)">
+<circle id="Vector" cx="6" cy="6" r="5" fill="context-fill"/>
 </g>
 </svg>
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index 39dbb3f666..25ba51b0a7 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -99,6 +99,7 @@
 			.colored-tag-swatches {
 				direction: ltr;
 				transform: scaleX(-1);
+				display: flex;
 			}
 			
 			.tag-swatch {
@@ -116,10 +117,10 @@
 
 				&.colored {
 					-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
-					width: 0.83333333em;
-					height: 0.83333333em;
+					width: 0.92307692em;
+					height: 0.92307692em;
 					background:
-						url("chrome://zotero/skin/tag-circle.svg") no-repeat center/80%,
+						url("chrome://zotero/skin/tag-circle.svg") no-repeat center/100%,
 						url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/0;
 					fill: currentcolor;
 
@@ -139,9 +140,9 @@
 
 				&.colored + .colored {
 					background:
-						url("chrome://zotero/skin/tag-crescent.svg") no-repeat center/80%,
+						url("chrome://zotero/skin/tag-crescent.svg") no-repeat center/100%,
 						url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/0;
-					margin-left: -0.41666667em;
+					margin-left: -0.38461538em;
 
 					@include focus-states using($color) {
 						@if $color =="white" {