Use only svg icons and simplify svg markup

orestbida · May 29, 2023 · 383a7a1 · 383a7a1
1 parent 7ccc5cb
commit 383a7a1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/src/core/modals/preferencesModal.js b/src/core/modals/preferencesModal.js
@@ -252,6 +252,7 @@ export const createPreferencesModal = (api, createMainContainer) => {
  * Arrow icon span
  */
  const sTitleIcon = createNode('span');
+ sTitleIcon.innerHTML = getSvgIcon(2, 3.5);
  addClassPm(sTitleIcon, 'section-arrow');
  appendChild(sTitleContainer, sTitleIcon);
 
@@ -529,8 +530,8 @@ function createToggleLabel(label, value, sCurrentCategoryObject, isService, cate
  /** @type {HTMLSpanElement} */ const toggleOnIcon = createNode('span');
  /** @type {HTMLSpanElement} */ const toggleOffIcon = createNode('span');
 
- toggleOnIcon.innerHTML = getSvgIcon(true, 2);
- toggleOffIcon.innerHTML = getSvgIcon(false, 2);
+ toggleOnIcon.innerHTML = getSvgIcon(1, 3);
+ toggleOffIcon.innerHTML = getSvgIcon(0, 3);
 
  toggle.type = 'checkbox';
 

diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss
@@ -38,6 +38,10 @@ $service-toggle-knob-icon-width: 1.7px;
  box-shadow: $modal-box-shadow;
  }
 
+ svg {
+ fill: none;
+ }
+
  .pm__header,
  .pm__body,
  .pm__footer{
@@ -76,7 +80,7 @@ $service-toggle-knob-icon-width: 1.7px;
 
  svg{
  stroke: var(--cc-btn-secondary-color);
- transform: scale(.6);
+ transform: scale(.5);
  transition: stroke .15s ease;
  width: 100%;
  }
@@ -193,9 +197,8 @@ $service-toggle-knob-icon-width: 1.7px;
  border-bottom-right-radius: 0;
  }
 
- .pm__section-arrow::before{
- transform: translateY(-20%) rotate(225deg);
- margin-top: 0;
+ .pm__section-arrow svg{
+ transform: scale(.5) rotate(180deg);
  }
 
  .pm__section-desc-wrapper{
@@ -222,16 +225,9 @@ $service-toggle-knob-icon-width: 1.7px;
  border-radius: 100%;
  pointer-events: none;
 
- &::before{
- content: "";
- border: solid var(--cc-btn-secondary-color);
- border-width: 0 2px 2px 0;
- padding: 2px;
- position: absolute;
- transform: translateY(-50%) rotate(45deg);
- top: 50%;
- margin-top: -1px;
- z-index: 1;
+ svg {
+ stroke: var(--cc-btn-secondary-color);
+ transform: scale(.5);
  }
  }
  }
@@ -393,7 +389,7 @@ $service-toggle-knob-icon-width: 1.7px;
 
  svg {
  stroke: var(--cc-toggle-on-bg);
- transform: scale(.6) rotate(-45deg);
+ transform: scale(.55) rotate(-45deg);
  }
  }
 
@@ -402,7 +398,7 @@ $service-toggle-knob-icon-width: 1.7px;
 
  svg {
  stroke: var(--cc-toggle-off-bg);
- transform: scale(.7)
+ transform: scale(.55)
  }
  }
 

diff --git a/src/utils/general.js b/src/utils/general.js
@@ -779,15 +779,19 @@ export const toggleDisableInteraction = (enable) => {
  }
 };
 
+const svgIcons = [
+ '<path d="M 19.5 4.5 L 4.5 19.5 M 4.5 4.501 L 19.5 19.5"/>', // X
+ '<path d="M 3.572 13.406 L 8.281 18.115 L 20.428 5.885"/>', // TICK
+ '<path d="M 21.999 6.94 L 11.639 17.18 L 2.001 6.82"/> ' // BOTTOM ARROW
+];
+
 /**
- * x and v (tick) icons
- * @param {boolean} [tickIcon]
+ * [0: x, 1: tick, 2: arrow]
+ * @param {0 | 1 | 2} [iconIndex]
+ * @param {number} [strokeWidth]
  */
-export const getSvgIcon = (tickIcon = false, strokeWidth = 1.5) => {
- const xIconPath = '<path d="M6.25,6.25,17.75,17.75"></path><path d="M6.25,17.75,17.75,6.25"></path>';
- const tickIconPath = '<path d="M 3.789 11.236 L 9.529 16.976"/></path><path d="M 9.007 17.518 L 20.439 6.086"></path>';
-
- return `<svg viewBox="0 0 24 24" stroke-width="${strokeWidth}">${ tickIcon ? tickIconPath: xIconPath }</svg>`;
+export const getSvgIcon = (iconIndex = 0, strokeWidth = 1.5) => {
+ return `<svg viewBox="0 0 24 24" stroke-width="${strokeWidth}">${svgIcons[iconIndex]}</svg>`;
 };
 
 /**