diff --git a/ui/src/Pages/PeoplePage/PeoplePage.tsx b/ui/src/Pages/PeoplePage/PeoplePage.tsx index ffa141e9..76e2636c 100644 --- a/ui/src/Pages/PeoplePage/PeoplePage.tsx +++ b/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 +> +const FaceDetailsWrapperInner = ({ + labeled, + children, + className, + ...otherProps +}: FaceDetailsWrapperProps) => ( + + {children} + +) + +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 ( -
+
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx index 0e193bec..b39fcd7c 100644 --- a/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx +++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx @@ -67,7 +67,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => { <>

{faceGroup?.label ?? diff --git a/ui/src/components/header/Searchbar.tsx b/ui/src/components/header/Searchbar.tsx index 25386897..0df8e09b 100644 --- a/ui/src/components/header/Searchbar.tsx +++ b/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, })} > diff --git a/ui/src/components/layout/MainMenu.tsx b/ui/src/components/layout/MainMenu.tsx index e5181062..9ef9ab98 100644 --- a/ui/src/components/layout/MainMenu.tsx +++ b/ui/src/components/layout/MainMenu.tsx @@ -4,7 +4,7 @@ import { useQuery, gql } from '@apollo/client' import { authToken } from '../../helpers/authentication' import { useTranslation } from 'react-i18next' import { mapboxEnabledQuery } from '../../__generated__/mapboxEnabledQuery' -import classNames from 'classnames' +import { tailwindClassNames } from '../../helpers/utils' export const MAPBOX_QUERY = gql` query mapboxEnabledQuery { @@ -44,9 +44,13 @@ const MenuButton = ({ to={to} end={exact} className={({ isActive }) => - classNames(`rounded-lg my-2`, className, { - [`ring-4 lg:ring-4 ${activeClasses}`]: isActive, - }) + tailwindClassNames( + `rounded-lg my-2 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg`, + className, + { + [`ring-4 lg:ring-4 ${activeClasses}`]: isActive, + } + ) } >
  • @@ -89,7 +93,7 @@ export const MainMenu = () => { label={t('sidemenu.photos', 'Timeline')} background="#8ac5f4" activeClasses="ring-[#f1f8ff] bg-[#f1f8ff] dark:bg-[#171f28] dark:ring-[#171f28]" - className="outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-[#283849] focus:ring-offset-2" + className="focus:ring-blue-200 dark:focus:ring-[#335981]" icon={ @@ -102,7 +106,7 @@ export const MainMenu = () => { label={t('sidemenu.albums', 'Albums')} background="#ff797b" activeClasses="ring-[#fff1f2] bg-[#fff1f2] dark:ring-[#1d1516] dark:bg-[#1d1516]" - className="outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-2" + className="focus:ring-red-200 dark:focus:ring-[#863541]" icon={ @@ -116,7 +120,7 @@ export const MainMenu = () => { label={t('sidemenu.places', 'Places')} background="#92e072" activeClasses="ring-[#e3fee5] bg-[#e3fee5] dark:ring-[#0c1c0f] dark:bg-[#0c1c0f]" - className="outline-none focus:ring-2 focus:ring-green-100 focus:ring-offset-2" + className="focus:ring-green-100 dark:focus:ring-[#368644]" icon={ @@ -131,7 +135,7 @@ export const MainMenu = () => { label={t('sidemenu.people', 'People')} background="#fbcd78" activeClasses="ring-[#fff7e4] bg-[#fff7e4] dark:ring-[#1a1b13] dark:bg-[#1a1b13]" - className="outline-none focus:ring-2 focus:ring-yellow-100 focus:ring-offset-2" + className="focus:ring-yellow-100 dark:focus:ring-[#8f8c36]" icon={ @@ -146,7 +150,7 @@ export const MainMenu = () => { label={t('sidemenu.settings', 'Settings')} background="#aacbd0" activeClasses="ring-[#e4f0f8] bg-[#e4f0f8] dark:ring-[#0f1f23] dark:bg-[#0f1f23]" - className="outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2" + className="focus:ring-gray-200 dark:focus:ring-[#2b778a]" icon={ diff --git a/ui/src/components/messages/Message.tsx b/ui/src/components/messages/Message.tsx index 46a52a24..a79440ea 100644 --- a/ui/src/components/messages/Message.tsx +++ b/ui/src/components/messages/Message.tsx @@ -17,10 +17,10 @@ const Message = forwardRef( return (

    {header}

    {content}
    diff --git a/ui/src/components/sidebar/SidebarDownloadAlbum.tsx b/ui/src/components/sidebar/SidebarDownloadAlbum.tsx index ab4c5384..a578e59c 100644 --- a/ui/src/components/sidebar/SidebarDownloadAlbum.tsx +++ b/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 => ( - (location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`) @@ -58,8 +58,8 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => { tabIndex={0} > {`${x.title}`} - {`${x.description}`} - + {`${x.description}`} + )) return ( @@ -68,16 +68,16 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => { {t('sidebar.download.title', 'Download')} - - - + + + - - + + {downloadRows} -
    {t('sidebar.download.table_columns.name', 'Name')}
    + ) } diff --git a/ui/src/components/sidebar/SidebarDownloadMedia.tsx b/ui/src/components/sidebar/SidebarDownloadMedia.tsx index ecb06043..4557166a 100644 --- a/ui/src/components/sidebar/SidebarDownloadMedia.tsx +++ b/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 => ( - download(x.url)} - tabIndex={0} - > + download(x.url)} tabIndex={0}> {`${x.title}`} {`${x.width} x ${x.height}`} {`${bytes(x.fileSize)}`} {extractExtension(x.url)} - + )) return ( - - - + + + @@ -240,10 +236,10 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => { - - + + {downloadRows} -
    {t('sidebar.download.table_columns.name', 'Name')} {t('sidebar.download.table_columns.file_type', 'Type')}
    + ) } diff --git a/ui/src/components/sidebar/SidebarTable.tsx b/ui/src/components/sidebar/SidebarTable.tsx new file mode 100644 index 00000000..e05457e0 --- /dev/null +++ b/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, +} diff --git a/ui/src/index.css b/ui/src/index.css index 63ef9800..2aaa3959 100644 --- a/ui/src/index.css +++ b/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; } diff --git a/ui/src/primitives/Modal.tsx b/ui/src/primitives/Modal.tsx index 3faac50b..f2c1b2c7 100644 --- a/ui/src/primitives/Modal.tsx +++ b/ui/src/primitives/Modal.tsx @@ -46,7 +46,7 @@ const Modal = ({
    -
    +
    {title} @@ -56,7 +56,7 @@ const Modal = ({ {children}
    -
    +
    {actionElms}
    diff --git a/ui/src/primitives/Table.tsx b/ui/src/primitives/Table.tsx index fffdfba7..b7a111db 100644 --- a/ui/src/primitives/Table.tsx +++ b/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({ diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 2d7a7fce..679d0e33 100644 --- a/ui/tailwind.config.js +++ b/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',