changes to button

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -168,6 +168,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   renderComponent () {
     this.dispatch({
       ...this,
+      plugin: this,
       updatedSvg: this.updatedSvg,
       loading: this.loading,
       themeSelected: this.currentlySelectedTheme,

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -12,20 +12,18 @@ export interface RemixUiSolidityUmlGenProps {
   themeCollection: ThemeSummary[]
 }
 
-type ButtonAction = {
-  svgValid: () => boolean
-  action: () => void
-  buttonText: string
-  icon?: string
-  customcss?: string
-}
-
 interface ActionButtonsProps {
-  buttons: ButtonAction[]
+  actions: {
+    zoomIn: () => void,
+    zoomOut: () => void,
+    resetTransform: () => void
+  }
 }
 
 
-export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityUmlGenProps) {
+
+
+export function RemixUiSolidityUmlGen ({ updatedSvg, loading, plugin }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
   const [validSvg, setValidSvg] = useState(false)
@@ -41,6 +39,59 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityU
   const data = encoder.encode(updatedSvg)
   const final = btoa(String.fromCharCode.apply(null, data))
 
+  function ActionButtons({ actions: { zoomIn, zoomOut, resetTransform }}: ActionButtonsProps) {
+    const [reloadButton, setReloadButton] = useState(false)
+
+    useEffect(() => {
+      plugin.on('theme', 'themeChanged', (themeName) => {
+        console.log('theme changed', themeName)
+        setReloadButton(true)
+      })
+
+      return () => {
+        plugin.off('theme', 'themeChanged')
+        console.log('unmounted')
+      }
+    }, [])
+  
+    return (
+      <>
+        <div
+          className="position-absolute bg-transparent mt-2"
+          id="buttons"
+          style={{ zIndex: 3, top: "10", right: "2em" }}
+        >
+          <div className="py-2 px-2 d-flex justify-content-center align-items-center">
+            <button
+              className="btn btn-outline-info d-none rounded-circle mr-2"
+              onClick={() => resetTransform()}
+            >
+              <i className="far fa-arrow-to-bottom align-item-center d-flex justify-content-center"></i>
+            </button>
+            <button
+              className="btn btn-outline-info align-item-center d-flex justify-content-center rounded-circle mr-2"
+              onClick={() => zoomIn()}
+            >
+              <i className="far fa-plus "></i>
+            </button>
+            <button
+              className="btn btn-outline-info rounded-circle mr-2"
+              onClick={() => zoomOut()}
+            >
+              <i className="far fa-minus align-item-center d-flex justify-content-center"></i>
+            </button>
+            <button
+              className="btn btn-outline-info rounded-circle mr-2"
+              onClick={() => resetTransform()}
+            >
+              <i className="far fa-undo align-item-center d-flex justify-content-center"></i>
+            </button>
+          </div>
+        </div>
+      </>
+    )
+  }
+
   const DefaultInfo = () => (
     <div className="d-flex flex-column justify-content-center align-items-center mt-5">
       <h2 className="h2 align-self-start"><p>To view your contract as a Uml Diragram</p></h2>
@@ -58,22 +109,7 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityU
             {
               ({ zoomIn, zoomOut, resetTransform }) => (
                 <Fragment>
-                  <div className="position-absolute bg-transparent rounded mt-2" id="buttons"
+                  <ActionButtons actions={{ zoomIn, zoomOut, resetTransform }} />
-                    style={{ zIndex: 3,  top: '10', right: '2em' }}
-                  >
-                    <button className="btn btn-outline-info d-none rounded-circle mr-2" onClick={() => resetTransform()}>
-                      <i className="far fa-arrow-to-bottom"></i>
-                    </button>
-                    <button className="btn btn-outline-info rounded-circle mr-2" onClick={() => zoomIn()}>
-                      <i className="far fa-plus"></i>
-                    </button>
-                    <button className="btn btn-outline-info rounded-circle mr-2" onClick={() => zoomOut()}>
-                      <i className="far fa-minus"></i>
-                    </button>
-                    <button className="btn btn-outline-info rounded-circle mr-2" onClick={() => resetTransform()}>
-                      <i className="far fa-undo"></i>
-                    </button>
-                  </div>
                   <TransformComponent contentStyle={{ zIndex: 2 }}>
                     <img
                       id="umlImage"