feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react'
+import Button from '@/Components/Button/Button'
 
 type Props = {
   componentName: string
@@ -8,16 +9,16 @@ type Props = {
 const IssueOnLoading: FunctionComponent<Props> = ({ componentName, reloadIframe }) => {
   return (
     <div className={'sn-component'}>
-      <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+      <div className="flex justify-between items-center w-full min-h-[1.625rem] py-2.5 px-2 bg-contrast text-text border-b border-border select-none">
         <div className={'left'}>
           <div className={'sk-app-bar-item'}>
             <div className={'sk-label.warning'}>There was an issue loading {componentName}.</div>
           </div>
         </div>
         <div className={'right'}>
-          <div className={'sk-app-bar-item'} onClick={reloadIframe}>
-            <button className={'sn-button small info'}>Reload</button>
-          </div>
+          <Button primary onClick={reloadIframe} small>
+            Reload
+          </Button>
         </div>
       </div>
     </div>