fix: unnesting minimap styles (#253)

mParticle · Jun 3, 2024 · 067f24d · 067f24d
1 parent fa88242
commit 067f24d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 59 deletions.
diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
@@ -486,7 +486,7 @@ export const MP: Story = {
     minimapOptions: {
       overviewHref: '/',
       onLinkClick: link => alert(link.href),
-      onUnAuthorizedClick: link => alert(`unauthorized ${link?.href} `),
+      onUnauthorizedClick: link => alert(`unauthorized ${link?.href} `),
       unauthorizedLinks: ['oversight', 'dataPlatform'],
       links: [
         { linkId: 'oversight', href: '/oversight' },

diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
@@ -42,6 +42,6 @@ export interface IMiniMapOptions {
   overviewHref: string
   links: MiniMapLink[]
   onLinkClick: (link: MiniMapLink) => void
-  onUnAuthorizedClick: (link?: MiniMapLink) => void
+  onUnauthorizedClick: (link?: MiniMapLink) => void
   unauthorizedLinks: MiniMapLinks[]
 }
diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx
@@ -34,7 +34,7 @@ function MinimapWithPopover(props: MinimapWithPopoverProps) {
       content={() => (
         <MiniMap
           overviewHref={props.overviewHref}
-          onUnAuthorizedClick={props.onUnAuthorizedClick}
+          onUnauthorizedClick={props.onUnauthorizedClick}
           links={props.links}
           onLinkClick={props.onLinkClick}
           unauthorizedLinks={props.unauthorizedLinks}
@@ -62,7 +62,7 @@ export function HomeButton(props: HomeButtonProps) {
 
   return (
     <MinimapWithPopover
-      onUnAuthorizedClick={props.minimapOptions.onUnAuthorizedClick}
+      onUnauthorizedClick={props.minimapOptions.onUnauthorizedClick}
       overviewHref={props.minimapOptions.overviewHref}
       links={props.minimapOptions.links}
       onLinkClick={props.minimapOptions.onLinkClick}

diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx
@@ -45,7 +45,7 @@ const Minimap = (props: IMiniMapProps) => {
   function handleLinkClick(svgLink: ISvgLink): void {
     const miniMapLink = props.links.find(link => link.href === svgLink.href)!
 
-    if (svgLink.isUnauthorized) props.onUnAuthorizedClick(miniMapLink)
+    if (svgLink.isUnauthorized) props.onUnauthorizedClick(miniMapLink)
     else props.onLinkClick(miniMapLink)
   }
 }

diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css
@@ -1,57 +1,48 @@
 .svg-linker-root__button.svg-linker-root__button--disabled {
     cursor: default;
-    &.svg-linker-root__button--regular {
-        & rect:first-child {
-            fill: transparent;
-            stroke: var(--color-border);
-        }
-
-        & path {
-            fill: var(--color-text-disabled);
-        }
-
-        &:hover rect:first-child {
-            fill: transparent;
-        }
-    }
-
-    &.svg-linker-root__button--drop-shadow {
-        & > g > g > rect {
-            fill: var(--mp-brand-secondary-3);
-        }
-
-        & path {
-            fill: var(--color-text-disabled);
-        }
-
-        &:hover {
-            filter: none;
-        }
-    }
-
-    &.svg-linker-root__button--black {
-        & rect:first-child {
-            fill: var(--mp-brand-secondary-6);
-        }
-
-        &:hover rect:first-child {
-            fill: var(--mp-brand-secondary-6);
-        }
-    }
-}
-
-.svg-linker-root__button {
-    &.svg-linker-root__button--drop-shadow:hover {
-        filter: drop-shadow(0px 9px 28px rgba(0, 0, 0, 0.05))
-        drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.12))
-        drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.08));
-    }
-
-    &.svg-linker-root__button--regular:hover rect:first-child {
-        fill: var(--mp-brand-primary-2);
-    }
-
-    &.svg-linker-root__button--black:hover rect:first-child {
-        fill: var(--mp-brand-secondary-7);
-    }
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular rect:first-child {
+    fill: transparent;
+    stroke: var(--color-border);
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular path {
+    fill: var(--color-text-disabled);
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular:hover rect:first-child {
+    fill: transparent;
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow > g > g > rect {
+    fill: var(--mp-brand-secondary-3);
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow path {
+    fill: var(--color-text-disabled);
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow:hover {
+    filter: none;
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--black rect:first-child {
+    fill: var(--mp-brand-secondary-6);
+}
+
+.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--black:hover rect:first-child {
+    fill: var(--mp-brand-secondary-6);
+}
+
+.svg-linker-root__button.svg-linker-root__button--drop-shadow:hover {
+    filter: drop-shadow(0px 9px 28px rgba(0, 0, 0, 0.05)) drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.08));
+}
+
+.svg-linker-root__button.svg-linker-root__button--regular:hover rect:first-child {
+    fill: var(--mp-brand-primary-2);
+}
+
+.svg-linker-root__button.svg-linker-root__button--black:hover rect:first-child {
+    fill: var(--mp-brand-secondary-7);
 }