Dark style the remaining pieces
This commit is contained in:
parent
414ad11953
commit
10611b5ff5
|
@ -20,6 +20,7 @@ import {
|
||||||
} from './__generated__/myFaces'
|
} from './__generated__/myFaces'
|
||||||
import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
|
import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
|
||||||
import { isNil, tailwindClassNames } from '../../helpers/utils'
|
import { isNil, tailwindClassNames } from '../../helpers/utils'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
export const MY_FACES_QUERY = gql`
|
export const MY_FACES_QUERY = gql`
|
||||||
query myFaces($limit: Int, $offset: Int) {
|
query myFaces($limit: Int, $offset: Int) {
|
||||||
|
@ -66,9 +67,32 @@ const RECOGNIZE_UNLABELED_FACES_MUTATION = gql`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const FaceDetailsWrapper = styled.span<{ labeled: boolean }>`
|
type FaceDetailsWrapperProps = {
|
||||||
color: ${({ labeled }) => (labeled ? 'black' : '#aaa')};
|
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,
|
&:hover,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
color: #2683ca;
|
color: #2683ca;
|
||||||
|
@ -180,14 +204,10 @@ export const FaceDetails = ({
|
||||||
return label
|
return label
|
||||||
}
|
}
|
||||||
|
|
||||||
const FaceImagesCount = styled.span`
|
const FaceImagesCount = styled.span.attrs({
|
||||||
background-color: #eee;
|
className:
|
||||||
color: #222;
|
'bg-gray-100 text-gray-900 dark:bg-gray-400 dark:text-black text-sm px-1 mr-2 rounded-md',
|
||||||
font-size: 0.9em;
|
})``
|
||||||
padding: 0 4px;
|
|
||||||
margin-right: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
`
|
|
||||||
|
|
||||||
type FaceGroupProps = {
|
type FaceGroupProps = {
|
||||||
group: myFaces_myFaceGroups
|
group: myFaces_myFaceGroups
|
||||||
|
@ -198,7 +218,7 @@ export const FaceGroup = ({ group }: FaceGroupProps) => {
|
||||||
const [editLabel, setEditLabel] = useState(false)
|
const [editLabel, setEditLabel] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: '12px' }}>
|
<div className="m-3">
|
||||||
<Link to={`/people/${group.id}`}>
|
<Link to={`/people/${group.id}`}>
|
||||||
<FaceCircleImage imageFace={previewFace} selectable />
|
<FaceCircleImage imageFace={previewFace} selectable />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -67,7 +67,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
|
||||||
<>
|
<>
|
||||||
<h1
|
<h1
|
||||||
className={`text-2xl font-semibold ${
|
className={`text-2xl font-semibold ${
|
||||||
faceGroup?.label ? 'text-black' : 'text-gray-600'
|
faceGroup?.label ? '' : 'text-gray-600 dark:text-gray-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{faceGroup?.label ??
|
{faceGroup?.label ??
|
||||||
|
|
|
@ -174,7 +174,7 @@ const SearchBar = () => {
|
||||||
selectedItemId ? `search-item-${selectedItemId}` : ''
|
selectedItemId ? `search-item-${selectedItemId}` : ''
|
||||||
}
|
}
|
||||||
aria-expanded={expanded}
|
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"
|
type="search"
|
||||||
placeholder={t('header.search.placeholder', 'Search')}
|
placeholder={t('header.search.placeholder', 'Search')}
|
||||||
onChange={fetchEvent}
|
onChange={fetchEvent}
|
||||||
|
@ -186,7 +186,8 @@ const SearchBar = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const ResultTitle = styled.h1.attrs({
|
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 = {
|
type SearchResultsProps = {
|
||||||
|
@ -242,7 +243,7 @@ const SearchResults = ({
|
||||||
id="search-results"
|
id="search-results"
|
||||||
role="listbox"
|
role="listbox"
|
||||||
className={classNames(
|
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]',
|
'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
|
||||||
{ hidden: !expanded }
|
{ hidden: !expanded }
|
||||||
)}
|
)}
|
||||||
|
@ -319,7 +320,7 @@ const SearchRow = ({
|
||||||
aria-selected={selected}
|
aria-selected={selected}
|
||||||
onMouseOver={() => setSelected()}
|
onMouseOver={() => setSelected()}
|
||||||
className={classNames('rounded p-1 mt-1', {
|
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}>
|
<NavLink to={link} className="flex items-center" tabIndex={-1}>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -17,10 +17,10 @@ const Message = forwardRef(
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
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">
|
<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>
|
</button>
|
||||||
<h1 className="font-semibold text-sm">{header}</h1>
|
<h1 className="font-semibold text-sm">{header}</h1>
|
||||||
<div className="text-sm">{content}</div>
|
<div className="text-sm">{content}</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { API_ENDPOINT } from '../../apolloClient'
|
import { API_ENDPOINT } from '../../apolloClient'
|
||||||
import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
|
import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
|
||||||
|
import SidebarTable from './SidebarTable'
|
||||||
|
|
||||||
type SidebarAlbumDownladProps = {
|
type SidebarAlbumDownladProps = {
|
||||||
albumID: string
|
albumID: string
|
||||||
|
@ -49,8 +50,7 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
|
||||||
]
|
]
|
||||||
|
|
||||||
const downloadRows = downloads.map(x => (
|
const downloadRows = downloads.map(x => (
|
||||||
<tr
|
<SidebarTable.Row
|
||||||
className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
|
|
||||||
key={x.purpose}
|
key={x.purpose}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
(location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`)
|
(location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`)
|
||||||
|
@ -58,8 +58,8 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<td className="pl-4 py-2">{`${x.title}`}</td>
|
<td className="pl-4 py-2">{`${x.title}`}</td>
|
||||||
<td className="pr-4 py-2 text-sm text-gray-800 italic">{`${x.description}`}</td>
|
<td className="pr-4 py-2 text-sm text-gray-800 dark:text-gray-400 italic">{`${x.description}`}</td>
|
||||||
</tr>
|
</SidebarTable.Row>
|
||||||
))
|
))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -68,16 +68,16 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
|
||||||
{t('sidebar.download.title', 'Download')}
|
{t('sidebar.download.title', 'Download')}
|
||||||
</SidebarSectionTitle>
|
</SidebarSectionTitle>
|
||||||
|
|
||||||
<table className="table-auto w-full">
|
<SidebarTable.Table>
|
||||||
<thead className="bg-[#f9f9fb]">
|
<SidebarTable.Head>
|
||||||
<tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
|
<SidebarTable.HeadRow>
|
||||||
<th className="px-4 py-2" colSpan={2}>
|
<th className="px-4 py-2" colSpan={2}>
|
||||||
{t('sidebar.download.table_columns.name', 'Name')}
|
{t('sidebar.download.table_columns.name', 'Name')}
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</SidebarTable.HeadRow>
|
||||||
</thead>
|
</SidebarTable.Head>
|
||||||
<tbody>{downloadRows}</tbody>
|
<tbody>{downloadRows}</tbody>
|
||||||
</table>
|
</SidebarTable.Table>
|
||||||
</SidebarSection>
|
</SidebarSection>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { authToken } from '../../helpers/authentication'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { TranslationFn } from '../../localization'
|
import { TranslationFn } from '../../localization'
|
||||||
import { MediaSidebarMedia } from './MediaSidebar/MediaSidebar'
|
import { MediaSidebarMedia } from './MediaSidebar/MediaSidebar'
|
||||||
|
import SidebarTable from './SidebarTable'
|
||||||
import {
|
import {
|
||||||
sidebarDownloadQuery,
|
sidebarDownloadQuery,
|
||||||
sidebarDownloadQueryVariables,
|
sidebarDownloadQueryVariables,
|
||||||
|
@ -211,23 +212,18 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
|
||||||
const download = downloadMedia(t)
|
const download = downloadMedia(t)
|
||||||
const bytes = formatBytes(t)
|
const bytes = formatBytes(t)
|
||||||
const downloadRows = rows.map(x => (
|
const downloadRows = rows.map(x => (
|
||||||
<tr
|
<SidebarTable.Row key={x.url} onClick={() => download(x.url)} tabIndex={0}>
|
||||||
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}
|
|
||||||
>
|
|
||||||
<td className="pl-4 py-2">{`${x.title}`}</td>
|
<td className="pl-4 py-2">{`${x.title}`}</td>
|
||||||
<td className="py-2">{`${x.width} x ${x.height}`}</td>
|
<td className="py-2">{`${x.width} x ${x.height}`}</td>
|
||||||
<td className="py-2">{`${bytes(x.fileSize)}`}</td>
|
<td className="py-2">{`${bytes(x.fileSize)}`}</td>
|
||||||
<td className="pr-4 py-2">{extractExtension(x.url)}</td>
|
<td className="pr-4 py-2">{extractExtension(x.url)}</td>
|
||||||
</tr>
|
</SidebarTable.Row>
|
||||||
))
|
))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<table className="table-fixed w-full">
|
<SidebarTable.Table>
|
||||||
<thead className="bg-[#f9f9fb] dark:bg-[#2B3037]">
|
<SidebarTable.Head>
|
||||||
<tr className="text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t">
|
<SidebarTable.HeadRow>
|
||||||
<th className="w-2/6 pl-4 py-2">
|
<th className="w-2/6 pl-4 py-2">
|
||||||
{t('sidebar.download.table_columns.name', 'Name')}
|
{t('sidebar.download.table_columns.name', 'Name')}
|
||||||
</th>
|
</th>
|
||||||
|
@ -240,10 +236,10 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
|
||||||
<th className="w-1/6 pr-4 py-2">
|
<th className="w-1/6 pr-4 py-2">
|
||||||
{t('sidebar.download.table_columns.file_type', 'Type')}
|
{t('sidebar.download.table_columns.file_type', 'Type')}
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</SidebarTable.HeadRow>
|
||||||
</thead>
|
</SidebarTable.Head>
|
||||||
<tbody>{downloadRows}</tbody>
|
<tbody>{downloadRows}</tbody>
|
||||||
</table>
|
</SidebarTable.Table>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
}
|
|
@ -12,11 +12,6 @@ html {
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark,
|
|
||||||
html.dark {
|
|
||||||
@apply bg-dark-bg text-dark-text;
|
|
||||||
}
|
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
@ -28,6 +23,16 @@ html.dark {
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
|
body.dark,
|
||||||
|
html.dark {
|
||||||
|
@apply bg-dark-bg text-dark-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark *,
|
||||||
|
html.dark * {
|
||||||
|
@apply border-dark-border;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: revert;
|
max-width: revert;
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,7 @@ const Modal = ({
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
|
<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">
|
<div className="p-4">
|
||||||
<Dialog.Title className="text-xl mb-1">{title}</Dialog.Title>
|
<Dialog.Title className="text-xl mb-1">{title}</Dialog.Title>
|
||||||
<Dialog.Description className="text-sm mb-4">
|
<Dialog.Description className="text-sm mb-4">
|
||||||
|
@ -56,7 +56,7 @@ const Modal = ({
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</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}
|
{actionElms}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
export const Table = styled.table.attrs({
|
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;
|
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 TableRow = styled.tr.attrs({ className: '' as string })``
|
||||||
|
|
||||||
export const TableCell = styled.td.attrs({
|
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({
|
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({
|
export const TableScrollWrapper = styled.div.attrs({
|
||||||
|
|
|
@ -26,9 +26,9 @@ module.exports = {
|
||||||
dark: {
|
dark: {
|
||||||
bg: '#24292e',
|
bg: '#24292e',
|
||||||
bg2: '#30363e',
|
bg2: '#30363e',
|
||||||
text: '#fafafa',
|
text: '#eee',
|
||||||
border: '#3b3b3b',
|
border: '#3b3b3b',
|
||||||
border2: '#1E1E1E',
|
border2: '#202020',
|
||||||
input: {
|
input: {
|
||||||
bg: '#383e46',
|
bg: '#383e46',
|
||||||
border: '#4a515a',
|
border: '#4a515a',
|
||||||
|
|
Loading…
Reference in New Issue