Dark style the remaining pieces
This commit is contained in:
parent
414ad11953
commit
10611b5ff5
|
@ -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>
|
||||
|
|
|
@ -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 ??
|
||||
|
|
|
@ -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}>
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue