feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/ContentListView/ContentList.tsx

@@ -66,7 +66,7 @@ const ContentList: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="infinite-scroll border-solid border-0 border-t-1px border-main focus:shadow-none focus:outline-none"
+      className="infinite-scroll border-solid border-t border-border focus:shadow-none focus:outline-none"
       id={ElementIds.ContentList}
       onScroll={onScroll}
       onKeyDown={onKeyDown}

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

@@ -255,8 +255,8 @@ const ContentListView: FunctionComponent<Props> = ({
             />
           </div>
         </div>
-        {completedFullSync && !renderedItems.length ? <p className="empty-items-list faded">No items.</p> : null}
-        {!completedFullSync && !renderedItems.length ? <p className="empty-items-list faded">Loading...</p> : null}
+        {completedFullSync && !renderedItems.length ? <p className="empty-items-list opacity-50">No items.</p> : null}
+        {!completedFullSync && !renderedItems.length ? <p className="empty-items-list opacity-50">Loading...</p> : null}
         {renderedItems.length ? (
           <ContentList
             items={renderedItems}

packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx

@@ -53,8 +53,8 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
 
   return (
     <div
-      className={`content-list-item flex items-stretch w-full cursor-pointer ${
-        selected && 'selected border-0 border-l-2px border-solid border-info'
+      className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${
+        selected && 'selected border-l-2px border-solid border-info'
       }`}
       id={item.uuid}
       onClick={onClick}
@@ -70,8 +70,8 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
       ) : (
         <div className="pr-4" />
       )}
-      <div className="flex-grow min-w-0 py-4 px-0 border-0 border-b-1 border-solid border-main">
-        <div className="flex items-start justify-between font-semibold text-base leading-1.3 overflow-hidden">
+      <div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
+        <div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
           <div className="break-word mr-2">{item.title}</div>
         </div>
         <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -45,16 +45,16 @@ const ContentListHeader = ({
   }, [])
 
   return (
-    <div className="section-title-bar-header">
-      <div className="flex flex-col">
-        <div className="text-lg font-semibold title">{panelTitle}</div>
-        {optionsSubtitle && <div className="text-xs color-passive-0">{optionsSubtitle}</div>}
+    <div className="section-title-bar-header gap-1">
+      <div className="flex flex-col flex-grow">
+        <div className="text-lg font-semibold text-text">{panelTitle}</div>
+        {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
       </div>
       <div className="flex">
         <div className="relative" ref={displayOptionsContainerRef}>
           <Disclosure open={showDisplayOptionsMenu} onChange={toggleDisplayOptionsMenu}>
-            <StyledDisplayOptionsButton pressed={showDisplayOptionsMenu} ref={displayOptionsButtonRef}>
-              <Icon type="sort-descending" className="w-5 h-5" />
+            <StyledDisplayOptionsButton $pressed={showDisplayOptionsMenu} ref={displayOptionsButtonRef}>
+              <Icon type="sort-descending" />
             </StyledDisplayOptionsButton>
             <DisclosurePanel>
               {showDisplayOptionsMenu && displayOptionsMenuPosition && (
@@ -72,12 +72,12 @@ const ContentListHeader = ({
           </Disclosure>
         </div>
         <button
-          className="flex justify-center items-center min-w-8 h-8 ml-3 bg-info hover:brightness-130 color-info-contrast border-1 border-solid border-transparent rounded-full cursor-pointer"
+          className="flex justify-center items-center min-w-8 h-8 ml-3 bg-info hover:brightness-125 text-info-contrast border border-solid border-transparent rounded-full cursor-pointer"
           title={addButtonLabel}
           aria-label={addButtonLabel}
           onClick={addNewItem}
         >
-          <Icon type="add" className="w-5 h-5" />
+          <Icon type="add" />
         </button>
       </div>
     </div>

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -99,15 +99,15 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   return (
     <Menu
       className={
-        'py-1 sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
-        border-1 border-solid border-main text-sm z-index-dropdown-menu \
+        'py-1 bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-70 overflow-y-auto \
+        border border-solid border-border text-sm z-index-dropdown-menu \
         flex flex-col'
       }
       a11yLabel="Notes list options menu"
       closeMenu={closeDisplayOptionsMenu}
       isOpen={isOpen}
     >
-      <div className="px-3 my-1 text-xs font-semibold color-text uppercase">Sort by</div>
+      <div className="px-3 my-1 text-xs font-semibold text-text uppercase">Sort by</div>
       <MenuItem
         className="py-2"
         type={MenuItemType.RadioButton}
@@ -118,9 +118,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
           <span>Date modified</span>
           {sortBy === CollectionSort.UpdatedAt ? (
             sortReverse ? (
-              <Icon type="arrows-sort-up" className="color-neutral" />
+              <Icon type="arrows-sort-up" className="text-neutral" />
             ) : (
-              <Icon type="arrows-sort-down" className="color-neutral" />
+              <Icon type="arrows-sort-down" className="text-neutral" />
             )
           ) : null}
         </div>
@@ -135,9 +135,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
           <span>Creation date</span>
           {sortBy === CollectionSort.CreatedAt ? (
             sortReverse ? (
-              <Icon type="arrows-sort-up" className="color-neutral" />
+              <Icon type="arrows-sort-up" className="text-neutral" />
             ) : (
-              <Icon type="arrows-sort-down" className="color-neutral" />
+              <Icon type="arrows-sort-down" className="text-neutral" />
             )
           ) : null}
         </div>
@@ -152,15 +152,15 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
           <span>Title</span>
           {sortBy === CollectionSort.Title ? (
             sortReverse ? (
-              <Icon type="arrows-sort-up" className="color-neutral" />
+              <Icon type="arrows-sort-up" className="text-neutral" />
             ) : (
-              <Icon type="arrows-sort-down" className="color-neutral" />
+              <Icon type="arrows-sort-down" className="text-neutral" />
             )
           ) : null}
         </div>
       </MenuItem>
       <MenuItemSeparator />
-      <div className="px-3 py-1 text-xs font-semibold color-text uppercase">View</div>
+      <div className="px-3 py-1 text-xs font-semibold text-text uppercase">View</div>
       {!isFilesSmartView && (
         <MenuItem
           type={MenuItemType.SwitchButton}
@@ -195,8 +195,8 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       >
         Show icon
       </MenuItem>
-      <div className="h-1px my-2 bg-border"></div>
-      <div className="px-3 py-1 text-xs font-semibold color-text uppercase">Other</div>
+      <MenuItemSeparator />
+      <div className="px-3 py-1 text-xs font-semibold text-text uppercase">Other</div>
       <MenuItem
         type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"

packages/web/src/javascripts/Components/ContentListView/Header/StyledDisplayOptionsButton.tsx

@@ -3,11 +3,11 @@ import styled from 'styled-components'
 
 const StyledDisplayOptionsButton = styled(DisclosureButton).attrs(() => ({
   className:
-    'flex justify-center items-center min-w-8 h-8 bg-color-padding hover:bg-contrast focus:bg-contrast color-neutral border-1 border-solid border-main rounded-full cursor-pointer',
+    'flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer',
 }))<{
-  pressed: boolean
+  $pressed: boolean
 }>`
-  background-color: ${(props) => (props.pressed ? 'var(--sn-stylekit-contrast-background-color)' : 'transparent')};
+  background-color: ${(props) => (props.$pressed ? 'var(--sn-stylekit-contrast-background-color)' : 'transparent')};
 `
 
 export default StyledDisplayOptionsButton

packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx

@@ -10,7 +10,7 @@ type Props = {
 const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
   return item.conflictOf ? (
     <div className="flex flex-wrap items-center mt-0.5">
-      <div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger color-danger-contrast'}>
+      <div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger text-danger-contrast'}>
         <div className="text-xs font-bold text-center">Conflicted Copy</div>
       </div>
     </div>

packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx

@@ -14,30 +14,30 @@ type Props = {
 
 const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
   return (
-    <div className="flex items-start p-4 pl-0 border-0 border-b-1 border-solid border-main">
+    <div className="flex items-start p-4 pl-0 border-b border-solid border-border">
       {item.locked && (
         <span className="flex items-center" title="Editing Disabled">
-          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="sn-icon--small color-info" />
+          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" />
         </span>
       )}
       {item.trashed && (
         <span className="flex items-center ml-1.5" title="Trashed">
-          <Icon ariaLabel="Trashed" type="trash-filled" className="sn-icon--small color-danger" />
+          <Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="small" />
         </span>
       )}
       {item.archived && (
         <span className="flex items-center ml-1.5" title="Archived">
-          <Icon ariaLabel="Archived" type="archive" className="sn-icon--mid color-accessory-tint-3" />
+          <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
         </span>
       )}
       {item.pinned && (
         <span className="flex items-center ml-1.5" title="Pinned">
-          <Icon ariaLabel="Pinned" type="pin-filled" className="sn-icon--small color-info" />
+          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="small" />
         </span>
       )}
       {hasFiles && (
         <span className="flex items-center ml-1.5" title="Files">
-          <Icon ariaLabel="Files" type="attachment-file" className="sn-icon--small color-info" />
+          <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="small" />
         </span>
       )}
     </div>

packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx

@@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy })
   }
 
   return (
-    <div className="text-xs leading-1.4 mt-1 faded">
+    <div className="text-xs leading-1.4 mt-1 opacity-50">
       {item.protected && <span>Protected {hideDate ? '' : ' • '}</span>}
       {!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || 'Now'}</span>}
       {!hideDate && !showModifiedDate && <span>{item.createdAtString || 'Now'}</span>}

packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx

@@ -16,10 +16,10 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
     <div className="flex flex-wrap mt-1.5 text-xs gap-2">
       {tags.map((tag) => (
         <span
-          className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant color-foreground rounded-0.5"
+          className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant text-foreground rounded-sm"
           key={tag.uuid}
         >
-          <Icon type="hashtag" className="sn-icon--small color-passive-1 mr-1" />
+          <Icon type="hashtag" className="text-passive-1 mr-1" size="small" />
           <span>{tag.title}</span>
         </span>
       ))}

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -45,8 +45,8 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
 
   return (
     <div
-      className={`content-list-item flex items-stretch w-full cursor-pointer ${
-        selected && 'selected border-0 border-l-2px border-solid border-info'
+      className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${
+        selected && 'selected border-l-2 border-solid border-info'
       }`}
       id={item.uuid}
       onClick={() => {
@@ -58,14 +58,14 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
       }}
     >
       {!hideIcon ? (
-        <div className="flex flex-col items-center justify-between p-4 pr-3 mr-0">
-          <Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`color-accessory-tint-${tint}`} />
+        <div className="flex flex-col items-center justify-between p-4 pr-4 mr-0">
+          <Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`text-accessory-tint-${tint}`} />
         </div>
       ) : (
         <div className="pr-4" />
       )}
-      <div className="flex-grow min-w-0 py-4 px-0 border-0 border-b-1 border-solid border-main">
-        <div className="flex items-start justify-between font-semibold text-base leading-1.3 overflow-hidden">
+      <div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
+        <div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
           <div className="break-word mr-2">{item.title}</div>
         </div>
         {!hidePreview && !item.hidePreview && !item.protected && (