Skip to content

Commit

Permalink
Merge pull request Expensify#30577 from b4s36t4/fix/docs-search-icon
Browse files Browse the repository at this point in the history
update search icon & styles for search input
  • Loading branch information
srikarparsi authored Nov 15, 2023
2 parents 39a6ed3 + da9a060 commit 089ea41
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 21 deletions.
2 changes: 0 additions & 2 deletions docs/_sass/_search-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -210,9 +210,7 @@ label.search-label {
width: auto;
}

/* Change the path of the Google Search Button icon into Expensify icon */
.gsc-search-button.gsc-search-button-v2 svg path {
d: path('M8 1c3.9 0 7 3.1 7 7 0 1.4-.4 2.7-1.1 3.8l5.2 5.2c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0l-5.2-5.2C10.7 14.6 9.4 15 8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7zm0 3c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z');
fill-rule: evenodd;
clip-rule: evenodd;
}
Expand Down
37 changes: 18 additions & 19 deletions docs/assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,25 +123,12 @@ function changeSVGViewBoxGoogle() {
// Get all inline Google SVG elements on the page
const svgsGoogle = document.querySelectorAll('svg');

// Create a media query for screens wider than tablet
const mediaQuery = window.matchMedia('(min-width: 800px)');

// Check if the viewport is smaller than tablet
if (!mediaQuery.matches) {
Array.from(svgsGoogle).forEach((svg) => {
// Set the viewBox attribute to '0 0 13 13' to make the svg fit in the mobile view
svg.setAttribute('viewBox', '0 0 13 13');
svg.setAttribute('height', '13');
svg.setAttribute('width', '13');
});
} else {
Array.from(svgsGoogle).forEach((svg) => {
// Set the viewBox attribute to '0 0 20 20' to make the svg fit in the tablet-desktop view
svg.setAttribute('viewBox', '0 0 20 20');
svg.setAttribute('height', '16');
svg.setAttribute('width', '16');
});
}
Array.from(svgsGoogle).forEach((svg) => {
// Set the viewBox attribute to '0 0 13 13' to make the svg fit in the mobile view
svg.setAttribute('viewBox', '0 0 20 20');
svg.setAttribute('height', '16');
svg.setAttribute('width', '16');
});
}

// Function to insert element after another
Expand All @@ -150,11 +137,23 @@ function insertElementAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// Update the ICON for search input.
/* Change the path of the Google Search Button icon into Expensify icon */
function updateGoogleSearchIcon() {
const node = document.querySelector('.gsc-search-button.gsc-search-button-v2 svg path');
node.setAttribute(
'd',
'M8 1c3.9 0 7 3.1 7 7 0 1.4-.4 2.7-1.1 3.8l5.2 5.2c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0l-5.2-5.2C10.7 14.6 9.4 15 8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7zm0 3c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z',
);
}

// Need to wait up until page is load, so the svg viewBox can be changed
// And the search label can be inserted
window.addEventListener('load', () => {
changeSVGViewBoxGoogle();

updateGoogleSearchIcon();

// Add required into the search input
const searchInput = document.getElementById('gsc-i-id1');
searchInput.setAttribute('required', '');
Expand Down

0 comments on commit 089ea41

Please sign in to comment.