feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx

@@ -22,8 +22,8 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
 
     return (
       <button
-        className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner ${
-          isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
+        className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner text-sm ${
+          isSelected ? 'text-info font-medium shadow-bottom' : 'text-text'
         }`}
         onClick={() => {
           selectTab(type)
@@ -46,8 +46,8 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
   }
 
   return (
-    <div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
-      <div className="flex border-0 border-b-1 border-solid border-main">
+    <div className={'flex flex-col min-w-60 border-r border-solid border-border overflow-auto h-full'}>
+      <div className="flex border-b border-solid border-border">
         <TabButton type={RevisionType.Remote} />
         <TabButton type={RevisionType.Session} />
         {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionType.Legacy} />}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx

@@ -1,5 +1,6 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { FunctionComponent } from 'react'
+import RadioIndicator from '../RadioIndicator/RadioIndicator'
 
 type HistoryListItemProps = {
   isSelected: boolean
@@ -10,11 +11,13 @@ const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, is
   return (
     <button
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-      className={`sn-dropdown-item py-2.5 focus:bg-contrast focus:shadow-none ${isSelected ? 'bg-info-backdrop' : ''}`}
+      className={`flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm ${
+        isSelected ? 'bg-info-backdrop' : ''
+      }`}
       onClick={onClick}
       data-selected={isSelected}
     >
-      <div className={`pseudo-radio-btn ${isSelected ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
+      <RadioIndicator checked={isSelected} className="mr-2" />
       {children}
     </button>
   )

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx

@@ -5,6 +5,7 @@ import { WebApplication } from '@/Application/Application'
 import { NotesController } from '@/Controllers/NotesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { NoteHistoryController, RevisionContentState } from '@/Controllers/NoteHistory/NoteHistoryController'
+import Spinner from '@/Components/Spinner/Spinner'
 
 type Props = {
   application: WebApplication
@@ -24,14 +25,12 @@ const HistoryModalContentPane = ({
   switch (contentState) {
     case RevisionContentState.Idle:
       return (
-        <div className="color-passive-0 select-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div className="text-sm text-passive-0 select-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           No revision selected
         </div>
       )
     case RevisionContentState.Loading:
-      return (
-        <div className="sk-spinner w-5 h-5 spinner-info absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
-      )
+      return <Spinner className="w-5 h-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
     case RevisionContentState.Loaded:
       return (
         <SelectedRevisionContent

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -22,7 +22,7 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
       onDismiss={onDismiss}
       aria-label="Note revision history"
     >
-      <StyledDialogContent aria-label="Note revision history" className="rounded shadow-overlay">
+      <StyledDialogContent aria-label="Note revision history" className="rounded-md shadow-lg p-0">
         <div className="bg-default flex flex-col h-full overflow-hidden">{children}</div>
       </StyledDialogContent>
     </DialogOverlay>

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx

@@ -2,7 +2,8 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont
 import { RevisionListEntry } from '@standardnotes/snjs/dist/@types'
 import { observer } from 'mobx-react-lite'
 import { useCallback, useState } from 'react'
-import Button from '../Button/Button'
+import Button from '@/Components/Button/Button'
+import Spinner from '@/Components/Spinner/Spinner'
 
 type Props = {
   dismissModal: () => void
@@ -40,19 +41,19 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
   }, [deleteRemoteRevision, selectedEntry])
 
   return (
-    <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-0 border-t-1px border-solid border-main">
+    <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-t border-solid border-border">
       <div>
-        <Button className="py-1.35" label="Close" onClick={dismissModal} variant="normal" />
+        <Button className="py-1.35" label="Close" onClick={dismissModal} />
       </div>
       {selectedRevision && (
         <div className="flex items-center">
           {(selectedEntry as RevisionListEntry).uuid && (
-            <Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
-              {isDeletingRevision ? <div className="sk-spinner my-1 w-3 h-3 spinner-info" /> : 'Delete this revision'}
+            <Button className="mr-2.5" onClick={deleteSelectedRevision}>
+              {isDeletingRevision ? <Spinner className="w-3 h-3 my-1" /> : 'Delete this revision'}
             </Button>
           )}
-          <Button className="py-1.35 mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} variant="normal" />
-          <Button className="py-1.35" label="Restore version" onClick={restoreSelectedRevision} variant="primary" />
+          <Button className="mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} />
+          <Button className="" label="Restore version" onClick={restoreSelectedRevision} primary />
         </div>
       )}
     </div>

packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx

@@ -39,7 +39,7 @@ const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistor
           </HistoryListItem>
         )
       })}
-      {!legacyHistory?.length && <div className="color-passive-0 select-none">No legacy history found</div>}
+      {!legacyHistory?.length && <div className="text-sm text-passive-0 select-none">No legacy history found</div>}
     </div>
   )
 }

packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx

@@ -6,6 +6,7 @@ import HistoryListItem from './HistoryListItem'
 import { previewHistoryEntryTitle } from './utils'
 import { FeaturesClientInterface, RevisionListEntry } from '@standardnotes/snjs/dist/@types'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import Spinner from '@/Components/Spinner/Spinner'
 
 type RemoteHistoryListProps = {
   features: FeaturesClientInterface
@@ -28,12 +29,12 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features
       }`}
       ref={remoteHistoryListRef}
     >
-      {isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
+      {isFetchingRemoteHistory && <Spinner className="w-5 h-5" />}
       {remoteHistory?.map((group) => {
         if (group.entries && group.entries.length) {
           return (
             <Fragment key={group.title}>
-              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
+              <div className="px-3 mt-2.5 mb-1 font-semibold uppercase text-passive-0 text-sm select-none">
                 {group.title}
               </div>
               {group.entries.map((entry) => (
@@ -57,7 +58,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features
         }
       })}
       {!remoteHistoryLength && !isFetchingRemoteHistory && (
-        <div className="color-passive-0 select-none">No remote history found</div>
+        <div className="text-sm text-passive-0 select-none">No remote history found</div>
       )}
     </div>
   )

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx

@@ -31,7 +31,7 @@ const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionControlle
       <div className="flex flex-col items-center text-center max-w-40%">
         <HistoryLockedIllustration />
         <div className="text-lg font-bold mt-2 mb-1">Can't access this version</div>
-        <div className="mb-4 color-passive-0 leading-140%">
+        <div className="mb-4 text-passive-0 leading-140%">
           {getPremiumContentCopy(
             !isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
               ? userSubscriptionName
@@ -40,7 +40,7 @@ const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionControlle
           . Learn more about our other plans to upgrade your history capacity.
         </div>
         <Button
-          variant="primary"
+          primary
           label="Discover plans"
           onClick={() => {
             if (window.plansUrl) {

packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx

@@ -59,11 +59,11 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
           {selectedRevision?.payload.content.text.length ? (
             <textarea
               readOnly={true}
-              className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
+              className="w-full h-full resize-none p-4 pt-0 border-0 bg-default text-text text-editor font-editor"
               value={selectedRevision?.payload.content.text}
             />
           ) : (
-            <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
+            <div className={`text-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
           )}
         </div>
       )}

packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx

@@ -31,7 +31,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
         if (group.entries && group.entries.length) {
           return (
             <Fragment key={group.title}>
-              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
+              <div className="px-3 mt-2.5 mb-1 font-semibold uppercase text-passive-0 text-sm select-none">
                 {group.title}
               </div>
               {group.entries.map((entry, index) => (
@@ -51,7 +51,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
           return null
         }
       })}
-      {!sessionHistoryLength && <div className="color-passive-0 select-none">No session history found</div>}
+      {!sessionHistoryLength && <div className="text-sm text-passive-0 select-none">No session history found</div>}
     </div>
   )
 }