feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx

@@ -2,6 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { concatenateUint8Arrays } from '@/Utils'
 import { FileItem } from '@standardnotes/snjs'
 import { useEffect, useMemo, useState } from 'react'
+import Spinner from '@/Components/Spinner/Spinner'
 import FilePreviewError from './FilePreviewError'
 import { isFileTypePreviewable } from './isFilePreviewable'
 import PreviewComponent from './PreviewComponent'
@@ -59,7 +60,7 @@ const FilePreview = ({ file, application }: Props) => {
   return isDownloading ? (
     <div className="flex flex-col justify-center items-center flex-grow">
       <div className="flex items-center">
-        <div className="sk-spinner w-5 h-5 spinner-info mr-3"></div>
+        <Spinner className="w-5 h-5 mr-3" />
         <div className="text-base font-semibold">{downloadProgress}%</div>
       </div>
       <span className="mt-3">Loading file...</span>

packages/web/src/javascripts/Components/FilePreview/FilePreviewError.tsx

@@ -17,12 +17,12 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
       <div className="font-bold text-base mb-2">This file can't be previewed.</div>
       {isFilePreviewable ? (
         <>
-          <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
+          <div className="text-sm text-center text-passive-0 mb-4 max-w-35ch">
             There was an error loading the file. Try again, or download the file and open it using another application.
           </div>
           <div className="flex items-center">
             <Button
-              variant="primary"
+              primary
               className="mr-3"
               onClick={() => {
                 tryAgainCallback()
@@ -31,7 +31,6 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
               Try again
             </Button>
             <Button
-              variant="normal"
               onClick={() => {
                 filesController.downloadFile(file).catch(console.error)
               }}
@@ -42,11 +41,11 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
         </>
       ) : (
         <>
-          <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
+          <div className="text-sm text-center text-passive-0 mb-4 max-w-35ch">
             To view this file, download it and open it using another application.
           </div>
           <Button
-            variant="primary"
+            primary
             onClick={() => {
               filesController.downloadFile(file).catch(console.error)
             }}

packages/web/src/javascripts/Components/FilePreview/FilePreviewInfoPanel.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
   return (
-    <div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
+    <div className="flex flex-col min-w-70 p-4 border-0 border-l border-solid border-border">
       <div className="flex items-center mb-4">
         <Icon type="info" className="mr-2" />
         <div className="font-semibold">File information</div>

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -78,16 +78,10 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
     >
       <DialogContent
         aria-label="File preview modal"
-        className="flex flex-col rounded shadow-overlay"
-        style={{
-          width: '90%',
-          maxWidth: '90%',
-          minHeight: '90%',
-          background: 'var(--modal-background-color)',
-        }}
+        className="flex flex-col rounded shadow-main p-0 min-w-[90%] min-h-[90%] bg-[color:var(--modal-background-color)] "
       >
         <div
-          className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main focus:shadow-none"
+          className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b border-solid border-border focus:shadow-none"
           tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
           onKeyDown={keyDownHandler}
         >
@@ -97,10 +91,10 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
           </div>
           <div className="flex items-center">
             <button
-              className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-main border-1 cursor-pointer rounded"
+              className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-border border cursor-pointer rounded"
               onClick={() => setShowFileInfoPanel((show) => !show)}
             >
-              <Icon type="info" className="color-neutral" />
+              <Icon type="info" className="text-neutral" />
             </button>
             <button
               ref={closeButtonRef}
@@ -108,7 +102,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
               aria-label="Close modal"
               className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
             >
-              <Icon type="close" className="color-neutral" />
+              <Icon type="close" className="text-neutral" />
             </button>
           </div>
         </div>

packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx

@@ -37,7 +37,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
           }}
         />
       </div>
-      <div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
+      <div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border border-solid border-border rounded">
         <span className="mr-1.5">Zoom:</span>
         <IconButton
           className="hover:bg-contrast p-1 rounded"