small fixes to how icons are displayed

Shelf-nu · May 2, 2024 · c70f44c · c70f44c
1 parent 6755a7f
commit c70f44c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
@@ -84,8 +84,9 @@ export function ItemsIcon(props: SVGProps<SVGSVGElement>) {
 export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width={22}
-      height={22}
+      width="100%"
+      height="100%"
+      viewBox="0 0 22 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
@@ -108,7 +108,9 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   onClick={toggleMobileNav}
                   title={item.label}
                 >
-                  <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
+                    {item.icon}
+                  </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">
                     {item.label}
                   </span>
@@ -145,7 +147,9 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   onClick={toggleMobileNav}
                   title={item.label}
                 >
-                  <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
+                    {item.icon}
+                  </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">
                     {item.label}
                   </span>
@@ -169,7 +173,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                     workspaceSwitching ? "pointer-events-none" : ""
                   )}
                 >
-                  <i className="icon pl-[2px] text-gray-500">
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
                     <Icon icon="switch" />
                   </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">

diff --git a/app/routes/_layout+/locations.$locationId.tsx b/app/routes/_layout+/locations.$locationId.tsx
@@ -259,6 +259,7 @@ export default function LocationPage() {
                     to="add-assets"
                     variant="primary"
                     icon="plus"
+                    className="whitespace-nowrap"
                   >
                     Manage assets
                   </Button>