fix bleaching out of uml shape text. show spinner when switching uml diagrams. fix button border

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

@@ -67,8 +67,6 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   }
 
   onActivation(): void {
-    // if (this.currentFile.length < 1) 
-    console.log('activated!!')
     this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
       const currentTheme: ThemeQualityType = await this.call('theme', 'currentTheme')
       this.currentlySelectedTheme = currentTheme.quality
@@ -82,8 +80,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
         const umlClasses = convertAST2UmlClasses(ast, this.currentFile)
         const umlDot = convertUmlClasses2Dot(umlClasses)
         const payload = vizRenderStringSync(umlDot)
-        const mangled = await this.mangleSvgPayload(payload)
-        this.updatedSvg = mangled
+        this.updatedSvg = payload
         this.renderComponent()
         await this.call('tabs', 'focus', 'solidityumlgen')
       } catch (error) {
@@ -116,7 +113,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   }
 
   generateCustomAction = async (action: customAction) => {
-    console.log('calling activation')
+    this.updatedSvg = this.updatedSvg.startsWith('<?xml') ? '' : this.updatedSvg
     this.currentFile = action.path[0]
     await this.generateUml(action.path[0])
   }

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

@@ -1,3 +1,9 @@
 .remixui_default-message {
   margin-top: 100px;
+}
+
+.remixui_no-shadow {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--info);
 }

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

@@ -1,7 +1,6 @@
-import { CustomTooltip } from '@remix-ui/helper'
-import React, { Fragment, useEffect, useRef, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
-import { ISolidityUmlGen, ThemeSummary } from '../types'
+import { ThemeSummary } from '../types'
 import './css/solidity-uml-gen.css'
 export interface RemixUiSolidityUmlGenProps {
   updatedSvg?: string
@@ -54,19 +53,19 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityU
               <i className="far fa-arrow-to-bottom align-item-center d-flex justify-content-center"></i>
             </button>
             <button
-              className="badge badge-info p-2 align-item-center d-flex justify-content-center rounded-circle mr-2"
+              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
               onClick={() => zoomIn()}
             >
               <i className="far fa-plus "></i>
             </button>
             <button
-              className="badge badge-info p-2 rounded-circle mr-2"
+              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
               onClick={() => zoomOut()}
             >
               <i className="far fa-minus align-item-center d-flex justify-content-center"></i>
             </button>
             <button
-              className="badge badge-info p-2 rounded-circle mr-2"
+              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
               onClick={() => resetTransform()}
             >
               <i className="far fa-undo align-item-center d-flex justify-content-center"></i>