feat(web): tailwind css (#1147)

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

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react'
+import Button from '@/Components/Button/Button'
 
 type Props = {
   deprecationMessage: string | undefined
@@ -8,16 +9,18 @@ type Props = {
 const IsDeprecated: FunctionComponent<Props> = ({ deprecationMessage, dismissDeprecationMessage }) => {
   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'}>{deprecationMessage || 'This extension is deprecated.'}</div>
+            <div className="font-bold text-xs text-warning">
+              {deprecationMessage || 'This extension is deprecated.'}
+            </div>
           </div>
         </div>
         <div className={'right'}>
-          <div className={'sk-app-bar-item'} onClick={dismissDeprecationMessage}>
-            <button className={'sn-button small info'}>Dismiss</button>
-          </div>
+          <Button primary onClick={dismissDeprecationMessage} small>
+            Dismiss
+          </Button>
         </div>
       </div>
     </div>