Remove MUI icon, replace with SVG

datacommonsorg · Oct 30, 2024 · cc52b00 · cc52b00
1 parent 6d72c60
commit cc52b00
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/static/css/base.scss b/static/css/base.scss
@@ -16,6 +16,7 @@
 
 @import "./base/color";
 @import "./base/box";
+@import "node_modules/bootstrap/scss/bootstrap";
 
 $full-footer-bg: #fafcff;
 $sub-footer-breakpoint: 596px;
@@ -63,8 +64,6 @@ $font-family-sans-serif: "Google Sans", "Google Sans Text", -apple-system,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $headings-font-family: $font-family-sans-serif;
 
-@import "node_modules/bootstrap/scss/bootstrap";
-
 :root.feedingamerica .navbar-brand > a {
   display: inline-block;
   background: url(https://secure.feedingamerica.org/assets/images/sprites2018.png);

diff --git a/static/css/components/topics.scss b/static/css/components/topics.scss
@@ -46,6 +46,9 @@
       gap: 10px;
       border-radius: calc(#{var.$spacing} * 10);
       padding: 10px calc(#{var.$spacing} * 3) 10px calc(#{var.$spacing} * 2);
+      .icon svg{
+        fill: #007bff;
+      }
     }
   }
 }
diff --git a/static/css/core.scss b/static/css/core.scss
@@ -167,8 +167,6 @@ section {
               padding: 0;
               display: inline-block;
               transition: transform 0.3s ease;
-              font-size: 1.45rem;
-              transform: translateY(1px);
             }
 
             .menu-arrow-icon.open {

diff --git a/static/js/apps/base/components/header_bar/menu_desktop.tsx b/static/js/apps/base/components/header_bar/menu_desktop.tsx
@@ -127,11 +127,11 @@ const MenuDesktop = ({
                     {labels[menuItem.label]}
                   </span>
                   <span
-                    className={`material-icons-outlined menu-arrow-icon ${
+                    className={`menu-arrow-icon ${
                       openMenu === index ? "open" : ""
                     }`}
                   >
-                    keyboard_arrow_down
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
                   </span>
                 </button>
                 <div

diff --git a/static/js/components/content/topics.tsx b/static/js/components/content/topics.tsx
@@ -51,7 +51,7 @@ const Topics = ({ topics }: TopicsProps): ReactElement => {
                   window.location.href = topic.browseUrl;
                 }}
               >
-                <span className="material-icons-outlined">arrow_forward</span>
+                <span className="icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg></span>
                 {topic.title}
               </a>
             </li>