klo-gba-sidebar: can click on community icons when modal is present

brush/src/components/KloGbaSidebar/Community/index.js

@@ -1,37 +1,44 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import discordIcon from '../../../../assets/discord-icon.png'
 import gitHubIcon from '../../../../assets/github-icon.png'
 import mediumIcon from '../../../../assets/medium-icon.png'
 import twitterIcon from '../../../../assets/twitter-icon.png'
+import ROMContext from '../../../context/ROMContext'
 import CommunityIcon from './CommunityIcon'
 import style from './style.css'
 
-const Community = () => (
-  <div className={style.container}>
-    <CommunityIcon
-      name="discord"
-      imageUrl={discordIcon}
-      link="https://disboard.org/server/103975433493581824"
-    />
+const Community = () => {
+  const { romBufferStatus } = useContext(ROMContext)
 
-    <CommunityIcon
-      name="github"
-      imageUrl={gitHubIcon}
-      link="https://github.com/macabeus/klo-gba.js"
-    />
+  const isShowingInputModal = (romBufferStatus !== 'loaded')
 
-    <CommunityIcon
-      name="medium"
-      imageUrl={mediumIcon}
-      link="https://medium.com/@bruno.macabeus/reverse-engineering-a-gameboy-advance-game-introduction-ec185bd8e02"
-    />
+  return (
+    <div className={`${style.container} ${isShowingInputModal ? style.iconWhenModalIsPresent : ''}`}>
+      <CommunityIcon
+        name="discord"
+        imageUrl={discordIcon}
+        link="https://disboard.org/server/103975433493581824"
+      />
 
-    <CommunityIcon
-      name="twitter"
-      imageUrl={twitterIcon}
-      link="https://twitter.com/bmacabeus"
-    />
-  </div>
-)
+      <CommunityIcon
+        name="github"
+        imageUrl={gitHubIcon}
+        link="https://github.com/macabeus/klo-gba.js"
+      />
+
+      <CommunityIcon
+        name="medium"
+        imageUrl={mediumIcon}
+        link="https://medium.com/@bruno.macabeus/reverse-engineering-a-gameboy-advance-game-introduction-ec185bd8e02"
+      />
+
+      <CommunityIcon
+        name="twitter"
+        imageUrl={twitterIcon}
+        link="https://twitter.com/bmacabeus"
+      />
+    </div>
+  )
+}
 
 export default Community

brush/src/components/KloGbaSidebar/Community/style.css

@@ -17,6 +17,10 @@
   opacity: 0.4;
 }
 
+.iconWhenModalIsPresent {
+  opacity: 0.8;
+}
+
 .icon:hover {
   opacity: 1;
 }

brush/src/components/KloGbaSidebar/style.css

@@ -1,6 +1,9 @@
+@import "former-kit-skin-pagarme/dist/styles/z-index.css";
+
 .communityContainer {
   position: absolute;
   width: inherit;
   min-width: inherit;
   bottom: 0;
+  z-index: calc(var(--modal-overlay-z-index) + 1);
 }