Dark style the remaining pieces

ui/src/Pages/PeoplePage/PeoplePage.tsx

@@ -20,6 +20,7 @@ import {
 } from './__generated__/myFaces'
 import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
 import { isNil, tailwindClassNames } from '../../helpers/utils'
+import classNames from 'classnames'
 
 export const MY_FACES_QUERY = gql`
   query myFaces($limit: Int, $offset: Int) {
@@ -66,9 +67,32 @@ const RECOGNIZE_UNLABELED_FACES_MUTATION = gql`
   }
 `
 
-const FaceDetailsWrapper = styled.span<{ labeled: boolean }>`
-  color: ${({ labeled }) => (labeled ? 'black' : '#aaa')};
+type FaceDetailsWrapperProps = {
+  labeled: boolean
+  className?: string
+} & React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+>
 
+const FaceDetailsWrapperInner = ({
+  labeled,
+  children,
+  className,
+  ...otherProps
+}: FaceDetailsWrapperProps) => (
+  <span
+    {...otherProps}
+    className={classNames(
+      className,
+      `${labeled ? '' : 'text-gray-400 dark:text-gray-500'}`
+    )}
+  >
+    {children}
+  </span>
+)
+
+const FaceDetailsWrapper = styled(FaceDetailsWrapperInner)`
   &:hover,
   &:focus-visible {
     color: #2683ca;
@@ -180,14 +204,10 @@ export const FaceDetails = ({
   return label
 }
 
-const FaceImagesCount = styled.span`
-  background-color: #eee;
-  color: #222;
-  font-size: 0.9em;
-  padding: 0 4px;
-  margin-right: 6px;
-  border-radius: 4px;
-`
+const FaceImagesCount = styled.span.attrs({
+  className:
+    'bg-gray-100 text-gray-900 dark:bg-gray-400 dark:text-black text-sm px-1 mr-2 rounded-md',
+})``
 
 type FaceGroupProps = {
   group: myFaces_myFaceGroups
@@ -198,7 +218,7 @@ export const FaceGroup = ({ group }: FaceGroupProps) => {
   const [editLabel, setEditLabel] = useState(false)
 
   return (
-    <div style={{ margin: '12px' }}>
+    <div className="m-3">
       <Link to={`/people/${group.id}`}>
         <FaceCircleImage imageFace={previewFace} selectable />
       </Link>

ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx

@@ -67,7 +67,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
       <>
         <h1
           className={`text-2xl font-semibold ${
-            faceGroup?.label ? 'text-black' : 'text-gray-600'
+            faceGroup?.label ? '' : 'text-gray-600 dark:text-gray-400'
           }`}
         >
           {faceGroup?.label ??

ui/src/components/header/Searchbar.tsx

@@ -174,7 +174,7 @@ const SearchBar = () => {
           selectedItemId ? `search-item-${selectedItemId}` : ''
         }
         aria-expanded={expanded}
-        className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
+        className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-dark-bg2 dark:border-dark-bg2 dark:focus:bg-[#2a2f35]"
         type="search"
         placeholder={t('header.search.placeholder', 'Search')}
         onChange={fetchEvent}
@@ -186,7 +186,8 @@ const SearchBar = () => {
 }
 
 const ResultTitle = styled.h1.attrs({
-  className: 'uppercase text-gray-700 text-sm font-semibold mt-4 mb-2 mx-1',
+  className:
+    'uppercase text-gray-700 dark:text-gray-200 text-sm font-semibold mt-4 mb-2 mx-1',
 })``
 
 type SearchResultsProps = {
@@ -242,7 +243,7 @@ const SearchResults = ({
       id="search-results"
       role="listbox"
       className={classNames(
-        'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4 z-0',
+        'absolute bg-white dark:bg-dark-bg left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border dark:border-dark-border px-4 z-0',
         'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
         { hidden: !expanded }
       )}
@@ -319,7 +320,7 @@ const SearchRow = ({
       aria-selected={selected}
       onMouseOver={() => setSelected()}
       className={classNames('rounded p-1 mt-1', {
-        'bg-gray-100': selected,
+        'bg-gray-100 dark:bg-dark-bg2': selected,
       })}
     >
       <NavLink to={link} className="flex items-center" tabIndex={-1}>

ui/src/components/messages/Message.tsx

@@ -17,10 +17,10 @@ const Message = forwardRef(
     return (
       <div
         ref={ref}
-        className="bg-white shadow-md border rounded p-2 h-[84px] relative"
+        className="bg-white dark:bg-dark-bg2 shadow-md border rounded p-2 h-[84px] relative"
       >
         <button onClick={onDismiss} className="absolute top-3 right-2">
-          <DismissIcon className="w-[10px] h-[10px] text-gray-700" />
+          <DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
         </button>
         <h1 className="font-semibold text-sm">{header}</h1>
         <div className="text-sm">{content}</div>

ui/src/components/sidebar/SidebarDownloadAlbum.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { API_ENDPOINT } from '../../apolloClient'
 import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
+import SidebarTable from './SidebarTable'
 
 type SidebarAlbumDownladProps = {
   albumID: string
@@ -49,8 +50,7 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
   ]
 
   const downloadRows = downloads.map(x => (
-    <tr
-      className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
+    <SidebarTable.Row
       key={x.purpose}
       onClick={() =>
         (location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`)
@@ -58,8 +58,8 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
       tabIndex={0}
     >
       <td className="pl-4 py-2">{`${x.title}`}</td>
-      <td className="pr-4 py-2 text-sm text-gray-800 italic">{`${x.description}`}</td>
-    </tr>
+      <td className="pr-4 py-2 text-sm text-gray-800 dark:text-gray-400 italic">{`${x.description}`}</td>
+    </SidebarTable.Row>
   ))
 
   return (
@@ -68,16 +68,16 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
         {t('sidebar.download.title', 'Download')}
       </SidebarSectionTitle>
 
-      <table className="table-auto w-full">
-        <thead className="bg-[#f9f9fb]">
-          <tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
+      <SidebarTable.Table>
+        <SidebarTable.Head>
+          <SidebarTable.HeadRow>
             <th className="px-4 py-2" colSpan={2}>
               {t('sidebar.download.table_columns.name', 'Name')}
             </th>
-          </tr>
-        </thead>
+          </SidebarTable.HeadRow>
+        </SidebarTable.Head>
         <tbody>{downloadRows}</tbody>
-      </table>
+      </SidebarTable.Table>
     </SidebarSection>
   )
 }

ui/src/components/sidebar/SidebarDownloadMedia.tsx

@@ -5,6 +5,7 @@ import { authToken } from '../../helpers/authentication'
 import { useTranslation } from 'react-i18next'
 import { TranslationFn } from '../../localization'
 import { MediaSidebarMedia } from './MediaSidebar/MediaSidebar'
+import SidebarTable from './SidebarTable'
 import {
   sidebarDownloadQuery,
   sidebarDownloadQueryVariables,
@@ -211,23 +212,18 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
   const download = downloadMedia(t)
   const bytes = formatBytes(t)
   const downloadRows = rows.map(x => (
-    <tr
-      className="cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]"
-      key={x.url}
-      onClick={() => download(x.url)}
-      tabIndex={0}
-    >
+    <SidebarTable.Row key={x.url} onClick={() => download(x.url)} tabIndex={0}>
       <td className="pl-4 py-2">{`${x.title}`}</td>
       <td className="py-2">{`${x.width} x ${x.height}`}</td>
       <td className="py-2">{`${bytes(x.fileSize)}`}</td>
       <td className="pr-4 py-2">{extractExtension(x.url)}</td>
-    </tr>
+    </SidebarTable.Row>
   ))
 
   return (
-    <table className="table-fixed w-full">
-      <thead className="bg-[#f9f9fb] dark:bg-[#2B3037]">
-        <tr className="text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t">
+    <SidebarTable.Table>
+      <SidebarTable.Head>
+        <SidebarTable.HeadRow>
           <th className="w-2/6 pl-4 py-2">
             {t('sidebar.download.table_columns.name', 'Name')}
           </th>
@@ -240,10 +236,10 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
           <th className="w-1/6 pr-4 py-2">
             {t('sidebar.download.table_columns.file_type', 'Type')}
           </th>
-        </tr>
-      </thead>
+        </SidebarTable.HeadRow>
+      </SidebarTable.Head>
       <tbody>{downloadRows}</tbody>
-    </table>
+    </SidebarTable.Table>
   )
 }
 

ui/src/components/sidebar/SidebarTable.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+const Table = styled.table.attrs({ className: 'table-fixed w-full' })``
+
+const Head = styled.thead.attrs({
+  className: 'bg-[#f9f9fb] dark:bg-[#2B3037]',
+})``
+
+const HeadRow = styled.tr.attrs({
+  className:
+    'text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t',
+})``
+
+const Row = styled.tr.attrs({
+  className:
+    'cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]',
+})``
+
+export default {
+  Table,
+  Head,
+  HeadRow,
+  Row,
+}

ui/src/index.css

@@ -12,11 +12,6 @@ html {
   font-family: 'Source Sans Pro', sans-serif;
 }
 
-body.dark,
-html.dark {
-  @apply bg-dark-bg text-dark-text;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -28,6 +23,16 @@ html.dark {
 }
 
 @layer base {
+  body.dark,
+  html.dark {
+    @apply bg-dark-bg text-dark-text;
+  }
+
+  body.dark *,
+  html.dark * {
+    @apply border-dark-border;
+  }
+
   img {
     max-width: revert;
   }

ui/src/primitives/Modal.tsx

@@ -46,7 +46,7 @@ const Modal = ({
       <div className="flex items-center justify-center min-h-screen">
         <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
 
-        <div className="fixed bg-white max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
+        <div className="fixed bg-white dark:bg-dark-bg max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
           <div className="p-4">
             <Dialog.Title className="text-xl mb-1">{title}</Dialog.Title>
             <Dialog.Description className="text-sm mb-4">
@@ -56,7 +56,7 @@ const Modal = ({
             {children}
           </div>
 
-          <div className="bg-gray-50 p-2 flex gap-2 justify-end mt-4">
+          <div className="bg-gray-50 p-2 dark:bg-[#31363d] flex gap-2 justify-end mt-4">
             {actionElms}
           </div>
         </div>

ui/src/primitives/Table.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const Table = styled.table.attrs({
-  className: 'border border-separate rounded' as string,
+  className: 'border dark:border-dark-border border-separate rounded' as string,
 })`
   border-spacing: 0;
 
@@ -33,11 +33,12 @@ export const TableFooter = styled.tfoot.attrs({ className: '' as string })``
 export const TableRow = styled.tr.attrs({ className: '' as string })``
 
 export const TableCell = styled.td.attrs({
-  className: 'py-2 px-2 align-top' as string,
+  className: 'py-2 px-2 align-top dark:bg-[#2a2f35]' as string,
 })``
 
 export const TableHeaderCell = styled.th.attrs({
-  className: 'bg-gray-50 py-2 px-2 align-top font-semibold' as string,
+  className:
+    'bg-gray-50 dark:bg-dark-bg2 py-2 px-2 align-top font-semibold' as string,
 })``
 
 export const TableScrollWrapper = styled.div.attrs({

ui/tailwind.config.js

@@ -26,9 +26,9 @@ module.exports = {
         dark: {
           bg: '#24292e',
           bg2: '#30363e',
-          text: '#fafafa',
+          text: '#eee',
           border: '#3b3b3b',
-          border2: '#1E1E1E',
+          border2: '#202020',
           input: {
             bg: '#383e46',
             border: '#4a515a',