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>

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

@@ -1,5 +1,7 @@
 import { FeatureStatus } from '@standardnotes/snjs'
 import { FunctionComponent } from 'react'
+import Button from '@/Components/Button/Button'
+import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 
 type Props = {
   expiredDate: string
@@ -24,24 +26,20 @@ const statusString = (featureStatus: FeatureStatus, expiredDate: string, compone
 const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => {
   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-app-bar-item-column'}>
-              <div className={'sk-circle danger small'} />
-            </div>
-            <div className={'sk-app-bar-item-column'}>
-              <div>
-                <strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
-                <div className={'sk-p'}>{componentName} is in a read-only state.</div>
-              </div>
+          <div className="flex items-center">
+            <IndicatorCircle style="danger" />
+            <div className="ml-2">
+              <strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
+              <div className={'sk-p'}>{componentName} is in a read-only state.</div>
             </div>
           </div>
         </div>
         <div className={'right'}>
-          <div className={'sk-app-bar-item'} onClick={() => manageSubscription()}>
-            <button className={'sn-button small success'}>Manage Subscription</button>
-          </div>
+          <Button onClick={manageSubscription} primary colorStyle="success" small>
+            Manage subscription
+          </Button>
         </div>
       </div>
     </div>

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>

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

@@ -7,14 +7,14 @@ const OfflineRestricted: FunctionComponent = () => {
         <div className={'sk-panel-content'}>
           <div className={'sk-panel-section stretch'}>
             <div className={'sk-panel-column'} />
-            <div className={'sk-h1 sk-bold'}>You have restricted this component to not use a hosted version.</div>
+            <div className="font-bold text-base">You have restricted this component to not use a hosted version.</div>
             <div className={'sk-subtitle'}>Locally-installed components are not available in the web application.</div>
             <div className={'sk-panel-row'} />
             <div className={'sk-panel-row'}>
               <div className={'sk-panel-column'}>
                 <div className={'sk-p'}>To continue, choose from the following options:</div>
-                <ul>
-                  <li className={'sk-p'}>
+                <ul className="list-disc pl-8 mt-3">
+                  <li className="sk-p mb-1">
                     Enable the Hosted option for this component by opening the Preferences {'>'} General {'>'} Advanced
                     Settings menu and toggling 'Use hosted when local is unavailable' under this component's options.
                     Then press Reload.