diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx index e58fba96d..5885f9cc2 100644 --- a/src/components/BackgroundImagePlaceholderDiv.tsx +++ b/src/components/BackgroundImagePlaceholderDiv.tsx @@ -75,7 +75,7 @@ function BackgroundImagePlaceholderDiv(props: Props) {
- +
Failed to Load
{imageError}
)} {!backgroundImage && !imageError && ( -
+
)} diff --git a/src/components/CharacterImage.tsx b/src/components/CharacterImage.tsx index ac205ab3c..7a4ff2a35 100644 --- a/src/components/CharacterImage.tsx +++ b/src/components/CharacterImage.tsx @@ -35,7 +35,7 @@ function CharacterImage(props: Props) { {!imageLoaded && (
diff --git a/src/components/Collection/AnidbDescription.tsx b/src/components/Collection/AnidbDescription.tsx index dcf80020e..50677183f 100644 --- a/src/components/Collection/AnidbDescription.tsx +++ b/src/components/Collection/AnidbDescription.tsx @@ -1,11 +1,8 @@ import React, { useMemo } from 'react'; const RemoveSummaryRegex = /^\n(Source|Note|Summary):.*/mg; - const CleanMiscLinesRegex = /^(\*|--|~) /sg; - const CleanMultiEmptyLinesRegex = /\n{2,}/sg; - const LinkRegex = /(?http:\/\/anidb\.net\/(?ch|cr|[feat])(?\d+)) \[(?[^\]]+)]/g; const AnidbDescription = ({ text }: { text: string }) => { diff --git a/src/components/Collection/CollectionTitle.tsx b/src/components/Collection/CollectionTitle.tsx index 04f877ed8..0d5a1a743 100644 --- a/src/components/Collection/CollectionTitle.tsx +++ b/src/components/Collection/CollectionTitle.tsx @@ -11,7 +11,7 @@ type Props = { const CollectionTitle = ({ count, filterOrGroup }: Props) => (
- + Entire Collection {filterOrGroup && ( @@ -21,7 +21,7 @@ const CollectionTitle = ({ count, filterOrGroup }: Props) => ( )} | - + {/* Count is set to -1 when series data is empty and is used as a flag to signify that in other places */} {/* But ideally we should 0 to the user */} {count === -1 ? 0 : count} diff --git a/src/components/Collection/CollectionView.tsx b/src/components/Collection/CollectionView.tsx index e415db41d..2fb0be82d 100644 --- a/src/components/Collection/CollectionView.tsx +++ b/src/components/Collection/CollectionView.tsx @@ -162,14 +162,14 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
{/* This is always equal width to the actual grid container so we are using the ref here */} {/* Otherwise we would need two refs to remove flicker */}
{isLoading || seriesData.total === -1 - ? + ? : 'No series/groups available!'}
@@ -180,7 +180,7 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
@@ -251,7 +251,7 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries } else { items.push(
{
Poster View Options
-
+
{
List View Options
-
+
{ const SeriesTag = ({ text, type }: { text: string, type: 'AniDB' | 'User' }) => (
@@ -114,7 +114,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => { return (
{ hidePlaceholderOnHover zoomOnHover > -
+
{showGroupIndicator && groupCount > 1 && ( -
+
{groupCount}  Series
@@ -203,7 +203,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
- + {formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)}  ( diff --git a/src/components/Collection/PosterViewItem.tsx b/src/components/Collection/PosterViewItem.tsx index 282d970eb..175d48923 100644 --- a/src/components/Collection/PosterViewItem.tsx +++ b/src/components/Collection/PosterViewItem.tsx @@ -58,21 +58,21 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => { {showUnwatchedCount && (
{unwatchedCount || ( - + )}
)} -
+
{showGroupIndicator && !isSeries && groupCount > 1 && ( -
+
{groupCount}  Series
@@ -81,7 +81,7 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {

{item.Name}

{showEpisodeCount && (

{episodeCount} diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx index 01b617d2a..f64cb1525 100644 --- a/src/components/Collection/Series/EditSeriesModal.tsx +++ b/src/components/Collection/Series/EditSeriesModal.tsx @@ -40,7 +40,7 @@ const EditSeriesModal = (props: Props) => {

{map(tabs, (value, key) => (
setActiveTab(key)} > diff --git a/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx index 62a6740fd..4227f0023 100644 --- a/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx +++ b/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx @@ -19,7 +19,7 @@ type Props = { const Action = ({ name, onClick }: { name: string, onClick: () => void }) => (
{name} -
diff --git a/src/components/Collection/Series/EpisodeDetails.tsx b/src/components/Collection/Series/EpisodeDetails.tsx index cad1645c7..971a25052 100644 --- a/src/components/Collection/Series/EpisodeDetails.tsx +++ b/src/components/Collection/Series/EpisodeDetails.tsx @@ -22,7 +22,7 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
{episode.Size > 1 && (
- {episode.Size} + {episode.Size}  Files
)} diff --git a/src/components/Collection/Series/EpisodeFiles.tsx b/src/components/Collection/Series/EpisodeFiles.tsx index 21d66334c..1cc94be36 100644 --- a/src/components/Collection/Series/EpisodeFiles.tsx +++ b/src/components/Collection/Series/EpisodeFiles.tsx @@ -38,7 +38,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => { return (
-
+
{ @@ -55,7 +55,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
{selectedFile.AniDB && ( -
+
{`${selectedFile.AniDB.ID} (AniDB)`} @@ -64,7 +64,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => { )} {ReleaseGroupID > 0 && ( -
+
{ReleaseGroupName === null ? 'Unknown' : ReleaseGroupName} @@ -73,7 +73,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => { )} {selectedFile.IsVariation && ( - Variation + Variation )}
diff --git a/src/components/Collection/Series/SeriesEpisode.tsx b/src/components/Collection/Series/SeriesEpisode.tsx index 3cc3f583a..20e300eb2 100644 --- a/src/components/Collection/Series/SeriesEpisode.tsx +++ b/src/components/Collection/Series/SeriesEpisode.tsx @@ -25,7 +25,7 @@ type Props = { const StateIcon = ({ icon, show }: { icon: string, show: boolean }) => ( show ? ( -
+
) @@ -33,7 +33,7 @@ const StateIcon = ({ icon, show }: { icon: string, show: boolean }) => ( ); const StateButton = ({ active, icon, onClick }: { icon: string, active: boolean, onClick: () => void }) => ( - ); @@ -70,7 +70,7 @@ const SeriesEpisode = ({ episode }: Props) => {
-
+
{}} />
diff --git a/src/components/Dialogs/ActionsModal.tsx b/src/components/Dialogs/ActionsModal.tsx index f4196603a..833081c13 100644 --- a/src/components/Dialogs/ActionsModal.tsx +++ b/src/components/Dialogs/ActionsModal.tsx @@ -110,10 +110,10 @@ const Action = ({ actionKey }: { actionKey: string }) => {
{name}
- -
@@ -144,7 +144,7 @@ function ActionsModal({ onClose, show }: Props) {
{map(actions, (value, key) => (
setActiveTab(key)} > diff --git a/src/components/Dialogs/BrowseFolderModal.tsx b/src/components/Dialogs/BrowseFolderModal.tsx index 37bb4293d..926da6866 100644 --- a/src/components/Dialogs/BrowseFolderModal.tsx +++ b/src/components/Dialogs/BrowseFolderModal.tsx @@ -34,7 +34,7 @@ function BrowseFolderModal(props: Props) { onRequestClose={() => handleClose()} title="Select Import Folder" > -
+
diff --git a/src/components/Dialogs/DeleteFilesModal.tsx b/src/components/Dialogs/DeleteFilesModal.tsx index 5bf179cce..abe00f5fc 100644 --- a/src/components/Dialogs/DeleteFilesModal.tsx +++ b/src/components/Dialogs/DeleteFilesModal.tsx @@ -20,7 +20,7 @@ const Title = ({ fileCount }: { fileCount: number }) => (
Delete Confirmation
-
{fileCount}
+
{fileCount}
 Files
@@ -46,7 +46,7 @@ function DeleteFilesModal(props: Props) { {file.Locations[0]?.RelativePath?.split(/[/\\]+/g).slice(-2).join('/') ?? ``}
-
+
diff --git a/src/components/Dialogs/FiltersModal.tsx b/src/components/Dialogs/FiltersModal.tsx index 5007f371f..0efe3bb5f 100644 --- a/src/components/Dialogs/FiltersModal.tsx +++ b/src/components/Dialogs/FiltersModal.tsx @@ -47,13 +47,13 @@ function FiltersModal({ onClose, show }: Props) { const renderItem = (item: CollectionFilterType) => (
{item.Name} - {item.Size} + {item.Size}
); const renderTabSide = (title, filterId) => (
{ setActiveTab(title); @@ -87,7 +87,7 @@ function FiltersModal({ onClose, show }: Props) { : (
Your search for  - {search} + {search}  returned zero results.
)} diff --git a/src/components/Dialogs/LanguagesModal.tsx b/src/components/Dialogs/LanguagesModal.tsx index 558f68b45..36c044320 100644 --- a/src/components/Dialogs/LanguagesModal.tsx +++ b/src/components/Dialogs/LanguagesModal.tsx @@ -111,17 +111,19 @@ function LanguagesModal({ onClose, type }: Props) { onRequestClose={onClose} title={`${type} Languages`} > -
- {Object.keys(languageDescription).map(key => ( - - ))} +
+
+ {Object.keys(languageDescription).map(key => ( + + ))} +
diff --git a/src/components/Dialogs/ProfileModal.tsx b/src/components/Dialogs/ProfileModal.tsx index 204d87236..2bfe8f770 100644 --- a/src/components/Dialogs/ProfileModal.tsx +++ b/src/components/Dialogs/ProfileModal.tsx @@ -47,7 +47,7 @@ function ProfileModal() {
- + {oldUsername.charAt(0)}
@@ -61,7 +61,7 @@ function ProfileModal() {
-
+
@@ -75,7 +75,7 @@ function ProfileModal() { onChange={e => setUsername(e.target.value)} />
@@ -90,7 +90,7 @@ function ProfileModal() { onChange={e => setPassword(e.target.value)} />
@@ -106,7 +106,10 @@ function ProfileModal() {
-
diff --git a/src/components/Dialogs/QueueModal.tsx b/src/components/Dialogs/QueueModal.tsx index d21f58c1d..59799a4c0 100644 --- a/src/components/Dialogs/QueueModal.tsx +++ b/src/components/Dialogs/QueueModal.tsx @@ -40,7 +40,7 @@ const TabButton = ( }, ) => (
setActiveTab(id)} > {name} @@ -58,7 +58,7 @@ const Title = ({ activeTab, count, tabs }: { activeTab: string, count: number, t
-
{count < 0 ? '-' : count}
+
{count < 0 ? '-' : count}
  {names[activeTab]}  Entries @@ -157,8 +157,8 @@ const QueueModal = ({ onClose, show: showModal }: Props) => {
{item.IsRunning && } @@ -172,7 +172,7 @@ const QueueModal = ({ onClose, show: showModal }: Props) => {
{currentCommand.Description}
-
+
, @@ -247,7 +247,7 @@ const QueueModal = ({ onClose, show: showModal }: Props) => { title={} > <div className="flex gap-x-3"> - <div className="flex grow gap-x-2 rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="flex grow gap-x-2 rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> <MenuButton highlight onClick={handleShowDisabledToggle} @@ -282,21 +282,21 @@ const QueueModal = ({ onClose, show: showModal }: Props) => { Clear Queue </Button> </div> - <div className="flex flex-row"> - <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-background-alt p-4 capitalize"> - <div className="flex h-64 flex-col overflow-y-auto bg-panel-background-alt"> - <div className="mt-0 flex gap-x-3"> - <div className="grow"> - <strong>Task</strong> - </div> - <div className="px-1"> - <strong>Status</strong> - </div> - </div> + <div className="flex flex-col"> + <div className="flex w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize"> + <div className="grow"> + <strong>Task</strong> + </div> + <div className="px-1"> + <strong>Status</strong> + </div> + </div> + <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize"> + <div className="flex h-64 flex-col overflow-y-auto bg-panel-input"> {items} {isLoading && ( <div className="flex grow items-center justify-center"> - <Icon path={mdiLoading} spin size={3} /> + <Icon className="text-panel-text-primary" path={mdiLoading} spin size={3} /> </div> )} {!isLoading && items.length === 0 && ( diff --git a/src/components/Input/Button.tsx b/src/components/Input/Button.tsx index 4d510e433..f5d100146 100644 --- a/src/components/Input/Button.tsx +++ b/src/components/Input/Button.tsx @@ -16,9 +16,12 @@ type Props = { }; const buttonTypeClasses = { - primary: 'bg-button-primary hover:bg-button-primary-hover text-button-text-alt', - secondary: 'bg-button-secondary hover:bg-button-secondary-hover text-button-text', - danger: 'bg-button-danger hover:bg-button-danger-hover text-button-text-alt', + primary: + 'bg-button-primary text-button-primary-text border-2 border-button-primary-border rounded-md hover:bg-button-primary-hover', + secondary: + 'bg-button-secondary text-button-secondary-text border-2 border-button-secondary-border rounded-md hover:bg-button-secondary-hover', + danger: + 'bg-button-danger text-button-danger-text border-2 border-button-danger-border rounded-md hover:bg-button-danger-hover', }; function Button(props: Props) { @@ -41,7 +44,7 @@ function Button(props: Props) { className={cx([ `${className} button font-semibold transition ease-in-out rounded focus:shadow-none focus:outline-none`, buttonType !== undefined - && `${buttonTypeClasses[buttonType]} drop-shadow-md border border-panel-border`, + && `${buttonTypeClasses[buttonType]} border border-panel-border`, loading && 'cursor-default', disabled && 'opacity-50 cursor-default', ])} diff --git a/src/components/Input/Checkbox.tsx b/src/components/Input/Checkbox.tsx index 8042b8037..55a5e78c8 100644 --- a/src/components/Input/Checkbox.tsx +++ b/src/components/Input/Checkbox.tsx @@ -26,7 +26,7 @@ function Checkbox({ className, id, intermediate, isChecked, justify, label, labe justify && 'justify-between', `${className}`, 'cursor-pointer flex items-center transition ease-in-out', - focused && 'ring-2 ring-panel-primary ring-inset', + focused && 'ring-2 ring-panel-icon-action ring-inset', ])} > <input @@ -48,17 +48,17 @@ function Checkbox({ className, id, intermediate, isChecked, justify, label, labe </span> )} {!intermediate && isChecked && ( - <TransitionDiv className="flex text-panel-primary" enterFrom="opacity-50" appear={false}> + <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}> <Icon path={mdiCheckboxMarkedCircleOutline} size={1} /> </TransitionDiv> )} {!intermediate && !isChecked && ( - <TransitionDiv className="flex text-panel-primary" enterFrom="opacity-50" appear={false}> + <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}> <Icon path={mdiCheckboxBlankCircleOutline} size={1} /> </TransitionDiv> )} {intermediate && ( - <TransitionDiv className="flex text-panel-primary" enterFrom="opacity-50" appear={false}> + <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}> <Icon path={mdiCircleHalfFull} size={1} /> </TransitionDiv> )} diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index ab3b5f61a..100f30385 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -63,7 +63,7 @@ function Input(props: Props) { <input className={cx([ inputClassName, - 'appearance-none bg-default-background-input w-full focus:shadow-none focus:outline-none px-3 py-2 rounded transition ease-in-out border border-panel-border focus:ring-2 focus:ring-panel-primary focus:ring-inset', + 'appearance-none bg-panel-input w-full focus:shadow-none focus:outline-none px-3 py-2 rounded transition ease-in-out border border-panel-border focus:ring-2 focus:ring-panel-icon-action focus:ring-inset', center && 'text-center', startIcon && '!pl-11', ])} @@ -79,7 +79,7 @@ function Input(props: Props) { {endIcon && ( <div onClick={endIconClick} - className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-panel-primary" + className="text-panel-icon-primary absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer" > <Icon path={endIcon} size={1} horizontal vertical rotate={180} /> </div> diff --git a/src/components/Input/InputSmall.tsx b/src/components/Input/InputSmall.tsx index bfcf0e5c9..d59b0ff8e 100644 --- a/src/components/Input/InputSmall.tsx +++ b/src/components/Input/InputSmall.tsx @@ -29,7 +29,7 @@ function InputSmall(props: Props) { return ( <input - className={`${className} appearance-none rounded-md border border-panel-border bg-default-background-input text-sm transition ease-in-out focus:shadow-none focus:outline-none focus:ring-2 focus:ring-inset focus:ring-panel-primary`} + className={`${className} appearance-none rounded-md border border-panel-border bg-panel-input text-sm transition ease-in-out focus:shadow-none focus:outline-none focus:ring-2 focus:ring-inset focus:ring-panel-icon-action`} id={id} type={type} placeholder={placeholder ?? ''} diff --git a/src/components/Input/Select.tsx b/src/components/Input/Select.tsx index 099159ba7..8e125d466 100644 --- a/src/components/Input/Select.tsx +++ b/src/components/Input/Select.tsx @@ -34,11 +34,11 @@ function Select(props: Props) { id={id} value={value} onChange={onChange} - className="w-full appearance-none rounded border border-panel-border bg-default-background-input py-1.5 pl-2 pr-8 transition ease-in-out focus:shadow-none focus:outline-none focus:ring-2 focus:ring-inset focus:ring-panel-primary" + className="w-full appearance-none rounded border border-panel-border bg-panel-input py-1.5 pl-2 pr-8 transition ease-in-out focus:shadow-none focus:outline-none focus:ring-2 focus:ring-inset focus:ring-panel-icon-action" > {children} </select> - <div className="pointer-events-none absolute inset-y-0 right-0 py-2 pr-2"> + <div className="pointer-events-none absolute inset-y-0 right-0 py-2 pr-2 text-panel-icon"> <Icon path={mdiChevronDown} size={1} /> </div> </div> diff --git a/src/components/Input/SelectEpisodeList.tsx b/src/components/Input/SelectEpisodeList.tsx index 3a804489d..86ff70523 100644 --- a/src/components/Input/SelectEpisodeList.tsx +++ b/src/components/Input/SelectEpisodeList.tsx @@ -78,11 +78,11 @@ const SelectOption = (option: Option & { divider: boolean }) => ( <Listbox.Option value={option} key={`listbox-item-${option.value}`} - className="group relative cursor-pointer select-none px-2 py-0.5 text-panel-text hover:bg-panel-primary hover:text-panel-text-alt" + className="group relative cursor-pointer select-none px-2 py-0.5 text-panel-text" > <div className="flex items-center justify-between"> <span className="flex grow truncate font-normal"> - <div className="w-10 shrink-0 text-panel-important group-hover:text-panel-text"> + <div className="w-10 shrink-0 text-panel-text-important"> {getPrefix(option.type) + option.number} </div> | @@ -139,11 +139,11 @@ const SelectEpisodeList = ( if (!selected || !selected.label) return emptyValue; return ( <> - <span className="font-semibold text-panel-important">{selected.number}</span> + <span className="font-semibold text-panel-text-important">{selected.number}</span>  -  {selected.label} {selected.type && selected.type !== 'Normal' && ( - <span className="mx-2 rounded-md border border-panel-primary bg-panel-background px-1 py-0.5 text-sm text-panel-text"> + <span className="mx-2 rounded-md border border-panel-border bg-panel-background px-1 py-0.5 text-sm text-panel-text"> {selected.type} </span> )} @@ -175,7 +175,7 @@ const SelectEpisodeList = ( placeholder="Input Episode Name or Number..." /> </div> - <div className="mt-1 max-h-96 overflow-y-auto rounded-md bg-panel-background-alt p-4"> + <div className="mt-1 max-h-96 overflow-y-auto rounded-md bg-panel-input border border-panel-border p-4"> {options.map((item, idx) => ( <React.Fragment key={`listbox-item-${item.value}`}> {idx !== 0 && item.type !== options[idx - 1].type && ( @@ -203,8 +203,8 @@ const SelectEpisodeList = ( <Listbox.Button ref={buttonRef} className={cx( - 'relative w-full h-full border border-panel-border rounded-md pl-2 pr-10 py-2 text-left cursor-default focus:outline-none focus:border-panel-primary', - rowIdx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-toolbar', + 'relative w-full h-full border border-panel-border rounded-md pl-2 pr-10 py-2 text-left cursor-default focus:outline-none focus:border-panel-text-primary', + rowIdx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt', )} > <span className="flex items-center"> diff --git a/src/components/Input/SelectSmall.tsx b/src/components/Input/SelectSmall.tsx index c8221ade5..b683297f7 100644 --- a/src/components/Input/SelectSmall.tsx +++ b/src/components/Input/SelectSmall.tsx @@ -33,7 +33,7 @@ function SelectSmall(props: Props) { id={id} value={value} onChange={onChange} - className="w-full appearance-none rounded border border-panel-border bg-default-background-input py-1 pl-3 pr-8 text-sm transition ease-in-out focus:border-panel-primary focus:shadow-none focus:outline-none" + className="w-full appearance-none rounded border border-panel-border bg-panel-input py-1 pl-3 pr-8 text-sm transition ease-in-out focus:border-panel-text-primary focus:shadow-none focus:outline-none" > {children} </select> diff --git a/src/components/Layout/AniDBBanDetectionItem.tsx b/src/components/Layout/AniDBBanDetectionItem.tsx index 35dd296bf..21420a3f2 100644 --- a/src/components/Layout/AniDBBanDetectionItem.tsx +++ b/src/components/Layout/AniDBBanDetectionItem.tsx @@ -33,7 +33,7 @@ const AniDBBanDetectionItem = ({ banStatus, type }: Props) => { return ( <> <div className="flex cursor-pointer items-center gap-x-2.5 font-semibold" onClick={handleOpen}> - <Icon path={mdiInformationOutline} size={1} className="text-header-warning" /> + <Icon path={mdiInformationOutline} size={1} className="text-topnav-icon-warning" /> AniDB  {type}  Ban Detected! @@ -47,7 +47,7 @@ const AniDBBanDetectionItem = ({ banStatus, type }: Props) => { <div className="flex flex-col gap-y-8"> <p> It looks like you’ve been  - <span className="font-bold text-panel-important">temporarily banned</span> + <span className="font-bold text-panel-text-important">temporarily banned</span>  for excessive connection attempts. It happens and just means you’ll need to wait a bit for the temporary ban to expire. </p> @@ -58,7 +58,7 @@ const AniDBBanDetectionItem = ({ banStatus, type }: Props) => { href="https://docs.shokoanime.com/faq" target="_blank" rel="noopener noreferrer" - className="flex gap-x-2 font-bold text-panel-primary" + className="flex gap-x-2 font-bold text-panel-text-primary" > AniDB Ban | Shoko Docs <Icon path={mdiOpenInNew} size={1} /> diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index fc27343a8..bf7027c3a 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -17,14 +17,14 @@ function Header({ setShowSidebar, showSidebar }: Props) { const queueItems = useSelector((state: RootState) => state.mainpage.queueStatus); return ( - <div className="z-[100] flex max-h-15 items-center justify-between bg-header-background-alt p-4 drop-shadow-md"> + <div className="z-[100] flex max-h-15 items-center justify-between bg-topnav-background p-4 drop-shadow-md"> <Button onClick={() => setShowSidebar(!showSidebar)}> <Icon path={showSidebar ? mdiBackburger : mdiMenu} size={1} className="text-header-text" /> </Button> <ShokoIcon className="w-8" /> <div className="flex items-center"> <Icon path={mdiServer} size={1} /> - <span className="ml-2 text-header-important"> + <span className="ml-2 text-header-text-important"> {(queueItems.HasherQueueState.queueCount + queueItems.GeneralQueueState.queueCount + queueItems.ImageQueueState.queueCount) ?? 0} </span> diff --git a/src/components/Layout/TopNav.tsx b/src/components/Layout/TopNav.tsx index 9c04f29eb..c2535ed49 100644 --- a/src/components/Layout/TopNav.tsx +++ b/src/components/Layout/TopNav.tsx @@ -150,7 +150,7 @@ function TopNav() { <NavLink to={path} key={path.split('/').pop()} - className={({ isActive }) => cx('flex items-center gap-x-2', isActive && 'text-header-primary')} + className={({ isActive }) => cx('flex items-center gap-x-2', isActive && 'text-header-text-primary')} onClick={closeModalsAndSubmenus} > <Icon path={icon} size={0.8333} /> @@ -175,19 +175,19 @@ function TopNav() { <div className="flex items-center gap-x-8"> <div className="flex items-center gap-x-2"> <div - className={cx(['cursor-pointer', showQueueModal ? 'text-header-primary' : undefined])} + className={cx(['cursor-pointer', showQueueModal ? 'text-header-text-primary' : undefined])} onClick={handleQueueModalOpen} title="Show Queue Modal" > <Icon path={mdiServer} size={0.8333} /> </div> - <span className="text-header-important"> + <span className="text-header-text-important"> {(queueItems.HasherQueueState.queueCount + queueItems.GeneralQueueState.queueCount + queueItems.ImageQueueState.queueCount) ?? 0} </span> </div> <div className="flex items-center gap-x-2"> - <div className="mr-1 flex h-8 w-8 items-center justify-center rounded-full bg-header-primary text-xl hover:bg-header-primary-hover"> + <div className="mr-1 flex h-8 w-8 items-center justify-center rounded-full bg-header-user-background text-header-user-text text-xl"> {currentUser.data?.Avatar ? <img src={currentUser.data?.Avatar} alt="avatar" className="h-8 w-8 rounded-full" /> : currentUser.data?.Username.charAt(0)} @@ -197,14 +197,14 @@ function TopNav() { </div> <NavLink to="settings" - className={({ isActive }) => (isActive ? 'text-header-primary' : '')} + className={({ isActive }) => (isActive ? 'text-header-text-primary' : '')} onClick={() => closeModalsAndSubmenus()} > <Icon path={mdiCogOutline} size={0.8333} /> </NavLink> </div> </div> - <div className="bg-header-background-alt text-header-text-alt"> + <div className="bg-topnav-background text-topnav-text"> <div className="mx-auto flex w-full max-w-[120rem] justify-between px-8 py-4"> <div className="flex gap-x-8"> {renderLinkMenuItem('dashboard', 'Dashboard', mdiTabletDashboard)} @@ -254,8 +254,8 @@ function TopNav() { : mdiDownloadCircleOutline} size={1} className={checkWebuiUpdate.isFetching || webuiUpdateResult.isLoading - ? 'text-header-primary' - : 'text-header-important'} + ? 'text-header-text-primary' + : 'text-header-text-important'} spin={checkWebuiUpdate.isFetching || webuiUpdateResult.isLoading} /> <div className="flex"> @@ -266,7 +266,7 @@ function TopNav() { )} {isOffline && ( <div className="flex cursor-pointer items-center gap-x-2.5 font-semibold"> - <Icon path={mdiInformationOutline} size={1} className="text-header-warning" /> + <Icon path={mdiInformationOutline} size={1} className="text-topnav-icon-warning" /> No Internet Connection. </div> )} @@ -282,7 +282,7 @@ function TopNav() { </div> <AnimateHeight height={showUtilitiesMenu ? 'auto' : 0} - className="border-t border-header-border bg-header-background-alt" + className="border-t border-topnav-border bg-topnav-background" > <div className="mx-auto flex w-full max-w-[120rem] gap-x-8 px-8 py-4"> {renderLinkMenuItem('utilities/unrecognized', 'Unrecognized Files', mdiFileQuestionOutline)} diff --git a/src/components/Panels/ModalPanel.tsx b/src/components/Panels/ModalPanel.tsx index c2f7cb776..b05f91a29 100644 --- a/src/components/Panels/ModalPanel.tsx +++ b/src/components/Panels/ModalPanel.tsx @@ -13,9 +13,9 @@ type Props = { }; const sizeClass = { - sm: 'w-[31.25rem]', + sm: 'w-[32rem]', md: 'w-[40rem]', - lg: 'w-[56.875rem]', + lg: 'w-[62rem]', }; function ModalPanel(props: Props) { @@ -44,7 +44,7 @@ function ModalPanel(props: Props) { <div className="flex h-full w-full items-center justify-center" onClick={onRequestClose}> <div className={cx( - 'flex max-h-[66%] flex-col gap-y-8 rounded-md border border-panel-border-alt bg-panel-background p-8 drop-shadow-lg', + 'flex max-h-[66%] flex-col gap-y-8 rounded-md border border-panel-border bg-panel-background p-8 drop-shadow-lg', sizeClass[size ?? 'md'], className, )} diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx index 73778ebbb..de07fe34c 100644 --- a/src/components/Panels/ShokoPanel.tsx +++ b/src/components/Panels/ShokoPanel.tsx @@ -34,7 +34,7 @@ const ShokoPanel = ( className={cx( 'flex flex-col overflow-hidden transition-colors border rounded p-8', fullHeight && 'h-full', - editMode ? 'pointer-events-none border-panel-primary' : 'border-panel-border', + editMode ? 'pointer-events-none border-panel-text-primary' : 'border-panel-border', transparent ? 'bg-panel-background-transparent' : 'bg-panel-background', className, )} diff --git a/src/components/Settings/AvatarEditorModal.tsx b/src/components/Settings/AvatarEditorModal.tsx index 026b336db..90dd1e65f 100644 --- a/src/components/Settings/AvatarEditorModal.tsx +++ b/src/components/Settings/AvatarEditorModal.tsx @@ -60,7 +60,7 @@ const AvatarEditorModal = (props: Props) => { height={256} borderRadius={9999} scale={scale} - className="h-auto w-full self-center rounded bg-default-background" + className="h-auto w-full self-center rounded bg-panel-background" onLoadFailure={onLoadFailure} ref={imageEditor} /> diff --git a/src/components/ShokoIcon.tsx b/src/components/ShokoIcon.tsx index c36107bbe..4bdce1f11 100644 --- a/src/components/ShokoIcon.tsx +++ b/src/components/ShokoIcon.tsx @@ -13,7 +13,7 @@ const SVGComponent = props => ( d="M82.5.292c-1.815.077-3.3.313-3.3.524 0 .211-.99.384-2.2.384-1.21 0-2.2.18-2.2.4 0 .22-.72.4-1.6.4-.88 0-1.6.18-1.6.4 0 .22-.72.4-1.6.4-.909 0-1.6.192-1.6.445 0 .271-.486.374-1.237.264-.803-.118-1.309.007-1.443.355-.113.295-.626.536-1.139.536-.514 0-1.056.197-1.204.438-.149.24-.7.355-1.224.255-.627-.12-.953.004-.953.362 0 .315-.423.545-1 .545-.55 0-1 .18-1 .4 0 .22-.45.4-1 .4s-1 .18-1 .4c0 .22-.45.4-1 .4s-1 .18-1 .4c0 .22-.36.4-.8.4-.44 0-.8.18-.8.4 0 .22-.36.4-.8.4-.44 0-.8.18-.8.4 0 .22-.36.4-.8.4-.44 0-.8.186-.8.414 0 .282-.241.285-.754.011-.607-.325-.743-.269-.7.286.034.428-.211.668-.646.633-.385-.03-.705.15-.71.4-.01.436-2.637 1.856-3.433 1.856-.209 0-.64.36-.957.8-.317.44-.857.8-1.2.8-.343 0-.883.36-1.2.8-.317.44-.857.8-1.2.8-.343 0-.883.36-1.2.8-.317.44-.821.8-1.12.8-.298 0-1.234.72-2.08 1.6-.846.88-1.731 1.6-1.969 1.6a.438.438 0 0 0-.431.443c0 .243-.279.335-.621.204-.341-.131-.517-.07-.39.135.301.488-8.919 9.708-9.407 9.407-.205-.127-.266.049-.135.39.131.342.039.621-.204.621a.443.443 0 0 0-.443.44c0 .241-.54.943-1.2 1.56-.66.617-1.2 1.329-1.2 1.584 0 .255-.18.352-.4.216-.22-.136-.4.084-.4.488 0 .405-.36.995-.8 1.312-.44.317-.8.857-.8 1.2 0 .343-.36.883-.8 1.2-.44.317-.8.857-.8 1.2 0 .343-.36.883-.8 1.2-.44.317-.8.831-.8 1.141 0 .311-.377.892-.837 1.291-.46.399-.719.916-.574 1.15.144.233-.023.533-.371.666-.348.134-.584.538-.525.898.07.425-.153.632-.636.591-.542-.045-.623.057-.3.38.614.614.555 1.212-.095.962-.385-.147-.485.067-.353.758.106.552-.006.963-.262.963-.246 0-.447.36-.447.8 0 .44-.18.8-.4.8-.22 0-.4.36-.4.8 0 .44-.18.8-.4.8-.22 0-.4.45-.4 1s-.18 1-.4 1c-.22 0-.4.45-.4 1s-.18 1-.4 1c-.22 0-.4.45-.4 1 0 .577-.23 1-.545 1-.365 0-.481.329-.353 1 .112.584.005 1-.255 1-.246 0-.447.54-.447 1.2 0 .66-.18 1.2-.4 1.2-.22 0-.4.63-.4 1.4 0 .77-.18 1.4-.4 1.4-.22 0-.4.63-.4 1.4 0 .77-.18 1.4-.4 1.4-.22 0-.4.81-.4 1.8s-.18 1.8-.4 1.8c-.22 0-.4.975-.4 2.167 0 1.377-.182 2.227-.5 2.333-.736.245-.736 241.155 0 241.4.318.106.5.956.5 2.333 0 1.192.18 2.167.4 2.167.22 0 .4.81.4 1.8s.18 1.8.4 1.8c.22 0 .4.63.4 1.4 0 .77.18 1.4.4 1.4.22 0 .4.63.4 1.4 0 .77.18 1.4.4 1.4.22 0 .4.54.4 1.2 0 .66.18 1.2.4 1.2.22 0 .4.45.4 1s.18 1 .4 1c.22 0 .4.45.4 1s.18 1 .4 1c.22 0 .4.45.4 1s.18 1 .4 1c.22 0 .4.45.4 1s.18 1 .4 1c.22 0 .4.36.4.8 0 .44.18.8.4.8.22 0 .4.36.4.8 0 .44.18.8.4.8.22 0 .4.36.4.8 0 .44.199.8.443.8.243 0 .336.277.207.615-.132.344.014.712.331.833a.61.61 0 0 1 .351.785c-.12.312-.034.567.19.567.223 0 .819.855 1.324 1.9.504 1.045 1.24 2.249 1.636 2.675.395.427.718 1.012.718 1.3 0 .289.15.525.332.525.183 0 .587.495.898 1.1.31.605.881 1.391 1.267 1.747.387.356.703.848.703 1.094 0 .246.855 1.356 1.9 2.468 4.078 4.338 12.847 13.191 13.067 13.191.128 0 .974.72 1.881 1.6.907.88 1.857 1.6 2.112 1.6.255 0 .723.36 1.04.8.317.44.857.8 1.2.8.343 0 .883.36 1.2.8.317.44.857.8 1.2.8.343 0 .883.36 1.2.8.317.44.897.8 1.288.8.392 0 .712.162.712.361 0 .198.54.549 1.2.779.66.23 1.2.616 1.2.857s.315.385.7.321c.456-.077.681.122.646.571-.043.555.093.611.7.286.513-.274.754-.271.754.011 0 .228.36.414.8.414.44 0 .8.18.8.4 0 .22.36.4.8.4.44 0 .8.18.8.4 0 .22.36.4.8.4.44 0 .8.18.8.4 0 .22.45.4 1 .4s1 .18 1 .4c0 .22.45.4 1 .4s1 .18 1 .4c0 .22.45.4 1 .4.577 0 1 .23 1 .545 0 .365.329.481 1 .353.584-.112 1-.005 1 .255 0 .246.521.447 1.157.447.637 0 1.25.241 1.363.536.134.348.64.473 1.443.355.751-.11 1.237-.007 1.237.264 0 .254.698.445 1.624.445.98 0 1.525.158 1.376.4-.151.244.463.4 1.576.4 1.003 0 1.824.18 1.824.4 0 .22.975.4 2.167.4 1.377 0 2.227.182 2.333.5.245.736 241.155.736 241.4 0 .106-.318.956-.5 2.333-.5 1.192 0 2.167-.18 2.167-.4 0-.22.81-.4 1.8-.4s1.8-.18 1.8-.4c0-.22.63-.4 1.4-.4.77 0 1.4-.18 1.4-.4 0-.22.63-.4 1.4-.4.77 0 1.4-.18 1.4-.4 0-.22.54-.4 1.2-.4.66 0 1.2-.201 1.2-.447 0-.26.416-.367 1-.255.671.128 1 .012 1-.353 0-.315.423-.545 1-.545.55 0 1-.18 1-.4 0-.22.45-.4 1-.4s1-.18 1-.4c0-.22.45-.4 1-.4s1-.18 1-.4c0-.22.36-.4.8-.4.44 0 .8-.18.8-.4 0-.22.36-.4.8-.4.44 0 .8-.18.8-.4 0-.22.36-.4.8-.4.44 0 .8-.174.8-.387 0-.214.268-.285.597-.159.335.129.7-.041.833-.387.13-.339.468-.528.751-.419.284.109.631-.101.771-.467.14-.365.495-.572.789-.459.294.113.783-.138 1.085-.558.303-.42.871-.764 1.262-.764.392 0 .712-.18.712-.4 0-.22.27-.4.6-.4.33 0 .6-.18.6-.4 0-.22.23-.4.512-.4.281 0 .771-.36 1.088-.8.317-.44.857-.8 1.2-.8.343 0 .883-.36 1.2-.8.317-.44.785-.8 1.04-.8s1.205-.72 2.112-1.6c.907-.88 1.829-1.6 2.048-1.6.22 0 .4-.18.4-.4 0-.22.27-.4.6-.4.33 0 .6-.173.6-.385 0-.416 7.783-8.232 9.164-9.203.46-.324.836-.819.836-1.1 0-.281.72-1.253 1.6-2.16.88-.907 1.6-1.857 1.6-2.112 0-.255.36-.723.8-1.04.44-.317.8-.831.8-1.141 0-.311.316-.856.703-1.212.386-.356.957-1.142 1.267-1.747.311-.605.715-1.1.898-1.1.182 0 .332-.36.332-.8 0-.44.162-.8.361-.8.198 0 .549-.54.779-1.2.23-.66.627-1.2.882-1.2s.36-.27.233-.6c-.145-.378.005-.6.404-.6.437 0 .569-.248.425-.8-.115-.44-.046-.8.153-.8.2 0 .363-.36.363-.8 0-.44.18-.8.4-.8.22 0 .4-.36.4-.8 0-.44.18-.8.4-.8.22 0 .4-.36.4-.8 0-.44.18-.8.4-.8.22 0 .4-.45.4-1s.18-1 .4-1c.22 0 .4-.45.4-1s.18-1 .4-1c.22 0 .4-.45.4-1 0-.577.23-1 .545-1 .365 0 .481-.329.353-1-.112-.584-.005-1 .255-1 .246 0 .447-.54.447-1.2 0-.66.18-1.2.4-1.2.22 0 .4-.63.4-1.4 0-.77.18-1.4.4-1.4.22 0 .4-.619.4-1.376 0-.757.18-1.488.4-1.624.22-.136.4-.957.4-1.824 0-.867.18-1.576.4-1.576.22 0 .4-.975.4-2.167 0-1.377.182-2.227.5-2.333.399-.133.5-24.629.5-120.7s-.101-120.567-.5-120.7c-.318-.106-.5-.956-.5-2.333 0-1.192-.18-2.167-.4-2.167-.22 0-.4-.821-.4-1.824 0-1.113-.156-1.727-.4-1.576-.242.149-.4-.396-.4-1.376 0-.893-.18-1.624-.4-1.624-.22 0-.4-.63-.4-1.4 0-.77-.18-1.4-.4-1.4-.22 0-.4-.54-.4-1.2 0-.66-.201-1.2-.447-1.2-.26 0-.367-.416-.255-1 .128-.671.012-1-.353-1-.315 0-.545-.423-.545-1 0-.55-.18-1-.4-1-.22 0-.4-.45-.4-1s-.18-1-.4-1c-.22 0-.4-.45-.4-1s-.18-1-.4-1c-.22 0-.4-.36-.4-.8 0-.44-.18-.8-.4-.8-.22 0-.4-.36-.4-.8 0-.44-.164-.8-.365-.8-.201 0-.485-.715-.633-1.589-.149-.881-.476-1.549-.735-1.5-.257.049-.419-.206-.36-.565.059-.36-.177-.764-.525-.898-.348-.133-.538-.396-.421-.585.116-.188-.142-.722-.575-1.186-.432-.464-.786-1.081-.786-1.372 0-.291-.36-.788-.8-1.105-.44-.317-.8-.857-.8-1.2 0-.343-.36-.883-.8-1.2-.44-.317-.8-.857-.8-1.2 0-.343-.36-.883-.8-1.2-.44-.317-.8-.821-.8-1.12 0-.298-.72-1.234-1.6-2.08-.88-.846-1.6-1.649-1.6-1.786 0-.333-11.468-11.814-11.801-11.814-.144 0-.953-.72-1.799-1.6-.846-.88-1.782-1.6-2.08-1.6-.299 0-.803-.36-1.12-.8-.317-.44-.831-.8-1.141-.8-.311 0-.856-.316-1.212-.703-.356-.386-1.142-.957-1.747-1.267-.605-.311-1.1-.715-1.1-.898 0-.182-.283-.332-.629-.332-.345 0-.898-.27-1.228-.6-.33-.33-.947-.6-1.372-.6-.424 0-.771-.264-.771-.587 0-.357-.235-.498-.597-.359-.345.133-.704-.051-.851-.435-.14-.366-.502-.57-.804-.455-.301.116-.548.037-.548-.177 0-.213-.36-.387-.8-.387-.44 0-.8-.18-.8-.4 0-.22-.36-.4-.8-.4-.44 0-.8-.18-.8-.4 0-.22-.36-.4-.8-.4-.44 0-.8-.18-.8-.4 0-.22-.45-.4-1-.4s-1-.18-1-.4c0-.22-.45-.4-1-.4s-1-.18-1-.4c0-.22-.45-.4-1-.4s-1-.18-1-.4c0-.22-.45-.4-1-.4s-1-.18-1-.4c0-.22-.54-.4-1.2-.4-.66 0-1.2-.18-1.2-.4 0-.22-.63-.4-1.4-.4-.77 0-1.4-.18-1.4-.4 0-.22-.72-.4-1.6-.4-.88 0-1.6-.18-1.6-.4 0-.22-.72-.4-1.6-.4-.88 0-1.6-.18-1.6-.4 0-.22-.975-.4-2.167-.4-1.377 0-2.227-.182-2.333-.5C320.545.236 93.022-.154 82.5.292m233.133 15.679c1.192.204 3.427.582 4.967.841 31.77 5.332 57.861 32.219 63.095 65.02.747 4.687.739 231.685-.009 236.434-5.295 33.618-31.802 60.125-65.42 65.42-4.749.748-231.747.756-236.434.009-32.834-5.239-59.586-31.201-65.014-63.095l-.847-4.967c-.497-2.905-.497-228.361 0-231.266.204-1.192.582-3.427.841-4.967 1.26-7.511 5.657-19.398 9.171-24.8.573-.88 1.271-2.057 1.552-2.616.46-.916 1.981-3.039 5.118-7.145 1.425-1.865 10.321-10.761 12.186-12.186 4.106-3.137 6.229-4.658 7.145-5.118.559-.281 1.736-.979 2.616-1.552 5.333-3.47 17.283-7.909 24.6-9.138 1.43-.24 3.5-.597 4.6-.794 2.721-.485 229.008-.564 231.833-.08M189.4 67.64c-1.32.189-3.93.543-5.8.787-1.87.245-4.03.593-4.8.774-.77.181-2.39.533-3.6.781-29.843 6.123-53.285 24.499-61.005 47.818-5.54 16.735-3.917 38.775 3.905 53 4.55 8.276 9.1 13.356 19.154 21.391 4.991 3.988 19.65 11.902 28.546 15.411 1.76.694 3.74 1.497 4.4 1.783.66.287 1.83.74 2.6 1.008s1.76.631 2.2.807c.44.176 1.43.536 2.2.8.77.264 1.76.635 2.2.824.939.402 8.774 2.926 15.6 5.025 21.971 6.756 34.549 14.237 38.751 23.047 3.586 7.519 3.547 17.883-.096 25.504-1.399 2.926-8.065 10.4-9.276 10.4-.239 0-1.187.505-2.107 1.123-12.724 8.545-44.945 8.288-64.901-.518-.754-.333-2.046-.9-2.871-1.261-8.141-3.561-15.531-8.047-22.612-13.727-3.912-3.138-4.282-3.259-5.444-1.782-.448.57-2.306 2.682-4.129 4.695-6.017 6.641-7.313 8.068-7.515 8.27-.11.11-1.73 1.908-3.6 3.996s-3.76 4.171-4.2 4.629c-.44.458-1.97 2.158-3.4 3.777a508.409 508.409 0 0 1-3.898 4.371c-1.748 1.922-1.5 2.33 4.298 7.07.77.629 1.49 1.252 1.6 1.384.854 1.023 12.839 9.573 13.42 9.573.141 0 .734.333 1.318.74 1.022.713 6.397 3.697 8.462 4.698 1.046.507 2.673 1.23 7.482 3.322 6.602 2.871 19.491 6.558 28.018 8.013 6.023 1.028 7.309 1.217 10.9 1.602 15.408 1.651 30.524 1.531 44-.352 7.489-1.045 13.657-2.392 20.2-4.41 42.784-13.193 64.494-47.536 56.776-89.813-.524-2.869-2.26-9.403-2.976-11.2-4.677-11.742-12.124-21.833-21.2-28.727-1.21-.919-2.29-1.773-2.4-1.898-.329-.374-3.61-2.544-6.6-4.365-3.408-2.075-17.868-9.21-18.667-9.21-.315 0-.744-.152-.953-.339-.209-.186-1.91-.923-3.78-1.638-1.87-.714-3.76-1.454-4.2-1.642-1.014-.435-8.482-2.887-17-5.582-7.847-2.482-18.331-6.165-22.2-7.796l-4.8-2.024c-13.605-5.736-19.55-12.784-19.55-23.179 0-9.048 4.495-15.686 13.616-20.104 2.365-1.145 2.841-1.324 5.734-2.15 10.23-2.919 25.738-3.07 36.4-.354 7.509 1.913 9.549 2.545 14.2 4.399 6.741 2.687 14.845 7.358 21.4 12.335 3.008 2.284 2.359 2.61 8.127-4.083.399-.464 1.659-1.907 2.8-3.207l2.673-3.049c.33-.376 1.5-1.74 2.6-3.03 1.1-1.29 2.72-3.153 3.6-4.14l2.857-3.206c.691-.776 2.729-3.118 4.529-5.203l3.273-3.793-1.929-1.812a74.696 74.696 0 0 0-3.677-3.208c-.961-.767-1.951-1.582-2.2-1.809-4.668-4.272-19.055-12.522-27.453-15.744-1.87-.717-3.713-1.47-4.095-1.673-.382-.203-1.046-.369-1.476-.369-.43 0-.893-.18-1.029-.4-.136-.22-.599-.4-1.029-.4-.43 0-1.094-.171-1.476-.38-.798-.436-4.004-1.264-10.295-2.657-7.299-1.617-7.831-1.703-18.2-2.954-4.029-.486-27.952-.462-31.4.031" /> <path - className="fill-logo-background" + className="fill-logo-secondary" d="M84.2 16.628c-35.406 4.273-63.396 32.43-67.582 67.985-.923 7.838-.923 222.936 0 230.774 1.105 9.387 3.241 16.631 7.434 25.213 8.283 16.954 23.155 30.782 40.748 37.889a26.6 26.6 0 0 1 1.695.758c.382.194 1.021.353 1.42.353s.896.149 1.105.33c.468.407 3.629 1.302 8.58 2.429 6.415 1.461 4.726 1.441 122.4 1.441 91.69 0 115.2-.103 117.6-.515 2.894-.498 4.225-.775 8.3-1.73 1.99-.467 6.063-1.743 7.6-2.381.495-.206 1.305-.535 1.8-.731 10.233-4.06 21.288-11.834 28.787-20.243 3.374-3.783 9.113-11.679 9.113-12.537 0-.218.137-.456.305-.53.284-.124 4.157-7.829 4.942-9.833.194-.495.521-1.305.727-1.8.633-1.525 1.913-5.606 2.353-7.5 1.077-4.644 1.276-5.595 1.758-8.4.412-2.4.515-25.947.515-117.8 0-123.8.121-115.623-1.829-123.8a55.503 55.503 0 0 1-.644-3.104c-.119-.717-.376-1.402-.571-1.523-.196-.121-.356-.649-.356-1.173s-.18-1.064-.4-1.2c-.22-.136-.4-.599-.4-1.029a3.88 3.88 0 0 0-.353-1.476 26.6 26.6 0 0 1-.758-1.695c-5.882-14.562-16.154-27.015-29.967-36.329-1.363-.919-2.653-1.671-2.867-1.671-.213 0-.448-.141-.522-.313-.123-.289-5.866-3.193-9.133-4.619-5.336-2.329-13.531-4.416-20.613-5.25-7.243-.853-224.115-.843-231.187.01m133.886 50.181c9.585.954 13.345 1.511 20.714 3.067 6.55 1.383 15.996 4.247 18.938 5.742.846.43 1.881.782 2.3.782.419 0 .762.18.762.4 0 .22.261.4.581.4 3.548 0 23.653 12.872 30.796 19.716 2.42 2.319 2.638 1.633-2.299 7.247a735.063 735.063 0 0 0-3.478 3.983c-.77.891-2.21 2.54-3.2 3.665a822.555 822.555 0 0 0-3.986 4.575c-1.203 1.391-2.376 2.729-2.606 2.972-.231.243-1.407 1.607-2.614 3.032-2.046 2.415-2.824 3.302-6.455 7.361-1.614 1.803-2.135 1.761-4.495-.368-.855-.772-2.07-1.708-2.7-2.08-.629-.371-1.144-.817-1.144-.989 0-.173-.19-.314-.422-.314-.232 0-1.511-.74-2.842-1.644-1.331-.904-3.346-2.136-4.478-2.738A228.128 228.128 0 0 1 248 119.74c-1.979-1.109-8.883-3.9-12.2-4.934-24.229-7.549-48.997-4.772-58.882 6.601-1.562 1.798-1.94 2.415-2.811 4.593-.22.55-.59 1.45-.822 2-1.21 2.869-1.273 10.031-.114 13 1.925 4.932 3.686 7.273 7.779 10.34 2.968 2.225 12.221 7.06 13.509 7.06.408 0 .741.18.741.4 0 .22.324.4.72.4.396 0 .891.143 1.1.318.209.175 1.1.547 1.98.827.88.279 2.05.7 2.6.935 1.104.471 1.909.768 4 1.472l6 2.022c2.53.853 7.84 2.572 11.8 3.821 3.96 1.248 7.56 2.423 8 2.611.44.188 1.97.728 3.4 1.201 1.43.473 3.363 1.205 4.296 1.626.932.422 1.86.767 2.062.767.201 0 1.148.386 2.104.857.956.471 2.098.992 2.538 1.158 3.085 1.162 13.772 6.438 15.462 7.634.584.413 1.178.751 1.321.751.309 0 5.928 3.617 6.217 4.002.11.146.491.431.846.632 4.518 2.559 14.911 13.386 17.886 18.632.416.734 1.28 2.234 1.92 3.334 1.161 1.997 2.738 5.198 3.399 6.9.192.495.517 1.305.723 1.8.205.495.59 1.62.855 2.5.265.88.618 1.96.785 2.4.166.44.516 1.88.777 3.2.261 1.32.626 3.12.812 4 1.308 6.188 1.568 23.728.436 29.4-.241 1.21-.629 3.1-.861 4.2a108.02 108.02 0 0 0-.644 3.304c-.122.717-.383 1.402-.578 1.523-.196.121-.356.624-.356 1.117s-.143 1.067-.318 1.276c-.175.209-.548 1.1-.828 1.98-.28.88-.879 2.41-1.332 3.4-.453.99-1.025 2.25-1.272 2.8-3.509 7.829-11.957 18.321-19.85 24.653-3.104 2.49-7.76 5.747-8.216 5.747-.143 0-.805.388-1.471.862-2.065 1.47-9.104 4.911-13.713 6.703-2.42.94-4.76 1.853-5.2 2.027-.44.174-1.61.535-2.6.801-.99.267-2.113.647-2.495.846-.382.199-1.136.361-1.676.361s-1.081.161-1.203.358c-.121.197-.897.455-1.723.574a57.04 57.04 0 0 0-3.503.663c-15.493 3.464-40.393 4.149-58.6 1.613-7.636-1.064-14.788-2.61-22.6-4.887-1.54-.449-3.16-.963-3.6-1.142-.44-.18-1.97-.721-3.4-1.202-3.89-1.311-10.965-4.322-14-5.958-.77-.415-2.21-1.175-3.2-1.687-.99-.513-1.89-1.022-2-1.132-.396-.396-2.615-1.654-3.3-1.871-.385-.122-.7-.381-.7-.576 0-.194-.19-.353-.422-.353-1.615 0-19.226-13.976-19.658-15.6-.127-.478 7.418-9.418 10.466-12.401.338-.33 1.961-2.13 3.607-4 1.646-1.869 3.266-3.669 3.6-3.999.334-.33 1.309-1.41 2.166-2.4.858-.99 2.392-2.7 3.41-3.8 1.018-1.1 2.819-3.125 4.001-4.5 2.323-2.701 2.678-2.864 3.935-1.8 1.823 1.542 2.472 2.064 4.933 3.968 6.672 5.164 15.293 10.074 23.562 13.421.55.222 1.313.563 1.695.758a3.88 3.88 0 0 0 1.476.353c.43 0 .893.18 1.029.4.136.22.599.4 1.029.4.43 0 1.094.162 1.476.361.382.199 1.505.571 2.495.827.99.256 2.353.634 3.028.839.676.205 1.7.373 2.277.373.576 0 1.145.157 1.264.35.119.192 1.255.472 2.524.622 1.269.15 3.567.444 5.107.654 9.284 1.264 22.425.877 29.8-.878 3.399-.808 3.774-.93 6.406-2.081.773-.339 1.853-.804 2.4-1.034 5.373-2.261 11.33-7.807 13.569-12.633 1.662-3.582 1.998-4.756 2.463-8.592 1.898-15.663-5.944-26.164-25.138-33.657-.495-.193-1.35-.531-1.9-.751-.55-.22-1.405-.556-1.9-.746-.495-.191-1.35-.525-1.9-.742-1.706-.673-4.82-1.72-9.4-3.16-10.98-3.453-20.934-6.786-23.4-7.834a73.234 73.234 0 0 0-1.9-.772l-1.8-.692c-3.476-1.339-5.512-2.265-13.3-6.055-3.74-1.82-7.748-3.915-8.908-4.654-1.159-.74-2.204-1.345-2.322-1.345-.275 0-4.853-3.077-6.199-4.167a81.627 81.627 0 0 0-2.383-1.833c-10.288-7.592-21.988-24.34-21.988-31.475 0-.483-.161-.977-.358-1.099-.197-.121-.457-.897-.579-1.723a88.406 88.406 0 0 0-.668-3.703c-1.487-7.341-1.178-27.661.446-29.38.197-.209.359-.963.359-1.676s.18-1.408.4-1.544c.22-.136.4-.689.4-1.229 0-.54.166-1.294.368-1.676.202-.382.775-1.775 1.273-3.095 2.239-5.939 7.051-13.751 11.357-18.437l2.076-2.263c5.073-5.532 14.692-12.411 22.526-16.109 1.65-.778 3.313-1.59 3.695-1.803.382-.214.967-.388 1.3-.388.333 0 .605-.18.605-.4 0-.22.362-.4.805-.4.443 0 1.118-.159 1.5-.353 5.887-2.995 19.923-6.22 33.095-7.604 4.654-.489 21.492-.511 26.286-.034" /> </g> diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index 23d06ab69..0b2ddbb11 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -16,10 +16,10 @@ type Props = Partial<ToastContentProps> & { }; const colorClass = { - success: 'text-toast-important', - error: 'text-toast-danger', - info: 'text-toast-primary', - warning: 'text-toast-warning', + success: 'text-panel-text-important', + error: 'text-panel-text-danger', + info: 'text-panel-text-primary', + warning: 'text-panel-text-warning', }; function Toast(props: Props) { @@ -32,11 +32,11 @@ function Toast(props: Props) { </span> <div className="ml-4 mr-8 flex grow flex-col"> <div className="font-semibold">{header}</div> - <div className="text-toast-text">{message}</div> + <div className="text-panel-text">{message}</div> </div> {toastProps?.autoClose && ( <span onClick={closeToast}> - <Icon path={mdiCloseCircleOutline} size={1} className="text-toast-text opacity-65" /> + <Icon path={mdiCloseCircleOutline} size={1} className="text-panel-text opacity-65" /> </span> )} </div> diff --git a/src/components/TreeView/TreeNode.tsx b/src/components/TreeView/TreeNode.tsx index ce4e05ce9..01d82a214 100644 --- a/src/components/TreeView/TreeNode.tsx +++ b/src/components/TreeView/TreeNode.tsx @@ -102,7 +102,7 @@ function TreeNode(props: Props) { <span className="select-none">{getChoppedPath()}</span> </div> <Icon - className={cx('inline-block justify-self-end mr-3 text-panel-primary', { hidden: !isSelected })} + className={cx('inline-block justify-self-end mr-3 text-panel-text-primary', { hidden: !isSelected })} path={mdiCheckboxMarkedCircleOutline} size={1} /> diff --git a/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx b/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx index 2ee30f480..0f48226e4 100644 --- a/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx +++ b/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx @@ -38,7 +38,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (dumpSession?.status === 'Running') { return { path: mdiLoading, - color: 'text-panel-primary', + color: 'text-panel-text-primary', title: 'Dumping Now!', state: 'running', } as const; @@ -47,7 +47,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (dumpSession?.status === 'Failed') { return { path: mdiFileDocumentAlertOutline, - color: 'text-panel-danger', + color: 'text-panel-icon-danger', title: 'Dump Failed!', state: 'failed', } as const; @@ -56,7 +56,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (dumpSession?.status === 'Success') { return { path: mdiFileDocumentCheckOutline, - color: 'text-panel-important', + color: 'text-panel-icon-important', title: 'Dumped Successfully!', state: 'success', } as const; @@ -65,7 +65,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (file.AVDump.Status === 'Queued') { return { path: mdiFileDocumentRefreshOutline, - color: 'text-panel-warning', + color: 'text-panel-icon-action', title: 'Dumping Queued!', state: 'queued', } as const; @@ -74,7 +74,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (file.AVDump.LastDumpedAt) { return { path: mdiFileDocumentCheckOutline, - color: 'text-panel-important', + color: 'text-panel-icon-important', title: 'Previously Dumped!', state: 'success', } as const; @@ -83,7 +83,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole if (truck) { return { path: mdiDumpTruck, - color: 'text-panel-primary', + color: 'text-panel-icon-action', title: 'Click to Dump!', state: 'idle', } as const; diff --git a/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx b/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx index 67387a46a..d33be2cf3 100644 --- a/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx +++ b/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx @@ -65,45 +65,52 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) { onRequestClose={onClose} title="AvDump Series Select" > - <Button - className="mt-4 flex items-center justify-center gap-x-2.5 bg-panel-primary p-2 font-semibold text-panel-text-alt" - onClick={handleCopy} - > - <Icon path={mdiFileDocumentMultipleOutline} size={0.833} /> - Copy ED2K Hashes - </Button> - <div className="flex h-auto max-h-64 flex-col gap-y-1 overflow-y-auto break-all rounded-md bg-panel-background-alt p-4 text-sm"> - {links.map(link => <div key={`link-${link.split('|')[4]}`}>{link}</div>)} - </div> - <Input - id="search" - value={searchText} - type="text" - placeholder="Search..." - onChange={e => handleSearch(e.target.value)} - startIcon={mdiMagnify} - /> - <div className="flex h-64 flex-col gap-y-1 overflow-y-auto overflow-x-clip rounded-md border border-panel-border bg-panel-background-alt p-4"> - {searchResults.isLoading - ? ( - <div className="flex h-full items-center justify-center"> - <Icon path={mdiLoading} size={3} spin className="text-panel-primary" /> + <div className="flex flex-col gap-y-4"> + <Button + buttonType="primary" + className="flex w-full items-center justify-center gap-x-2.5 p-2" + onClick={handleCopy} + > + <Icon path={mdiFileDocumentMultipleOutline} size={0.833} /> + Copy ED2K Hashes + </Button> + <div className="flex h-auto max-h-64 flex-col gap-y-1 overflow-y-auto break-all rounded-md bg-panel-input p-4 text-sm"> + {links.map(link => <div key={`link-${link.split('|')[4]}`}>{link}</div>)} + </div> + <div className="flex flex-col gap-y-2"> + <Input + id="search" + value={searchText} + type="text" + placeholder="Search..." + onChange={e => handleSearch(e.target.value)} + startIcon={mdiMagnify} + /> + <div className="w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize"> + <div className="flex h-72 flex-col gap-y-1 overflow-y-auto overflow-x-clip rounded-md bg-panel-input pr-2 "> + {searchResults.isLoading + ? ( + <div className="flex h-full items-center justify-center"> + <Icon path={mdiLoading} size={3} spin className="text-panel-text-primary" /> + </div> + ) + : (searchResults.data ?? []).map(result => ( + <a + href={`https://anidb.net/anime/${result.ID}/release/add`} + key={result.ID} + target="_blank" + rel="noopener noreferrer" + className="flex items-center justify-between" + > + <div className="line-clamp-1">{result.Title}</div> + <div className="text-panel-text-primary"> + <Icon path={mdiOpenInNew} size={0.833} /> + </div> + </a> + ))} </div> - ) - : (searchResults.data ?? []).map(result => ( - <a - href={`https://anidb.net/anime/${result.ID}/release/add`} - key={result.ID} - target="_blank" - rel="noopener noreferrer" - className="flex items-center justify-between" - > - <div className="line-clamp-1">{result.Title}</div> - <div className="text-panel-primary"> - <Icon path={mdiOpenInNew} size={0.833} /> - </div> - </a> - ))} + </div> + </div> </div> </ModalPanel> ); diff --git a/src/components/Utilities/Unrecognized/ItemCount.tsx b/src/components/Utilities/Unrecognized/ItemCount.tsx index 4202cc10e..9f2991cb2 100644 --- a/src/components/Utilities/Unrecognized/ItemCount.tsx +++ b/src/components/Utilities/Unrecognized/ItemCount.tsx @@ -2,7 +2,7 @@ import React from 'react'; const ItemCount = ({ filesCount, series = false }: { filesCount: number, series?: boolean }) => ( <div className="text-xl font-semibold"> - <span className="text-panel-important"> + <span className="text-panel-text-important"> {filesCount}   </span> diff --git a/src/components/Utilities/Unrecognized/ManuallyLinkedFilesRow.tsx b/src/components/Utilities/Unrecognized/ManuallyLinkedFilesRow.tsx index 86a9300e9..c695259a0 100644 --- a/src/components/Utilities/Unrecognized/ManuallyLinkedFilesRow.tsx +++ b/src/components/Utilities/Unrecognized/ManuallyLinkedFilesRow.tsx @@ -91,13 +91,13 @@ function ManuallyLinkedFilesRow(props: Props) { <div className="flex"> {`${getEpTypePrefix(episode?.AniDB?.Type ?? '')} ${episode?.AniDB?.EpisodeNumber} - ${episode?.Name}`}  ( - <span className="font-semibold text-panel-primary">{episode?.IDs?.AniDB}</span> + <span className="font-semibold text-panel-text-primary">{episode?.IDs?.AniDB}</span> ) <a href={`https://anidb.net/episode/${episode?.IDs?.AniDB}`} rel="noopener noreferrer" target="_blank" - className="ml-2 text-panel-primary" + className="ml-2 text-panel-text-primary" > <Icon path={mdiOpenInNew} size={1} /> </a> diff --git a/src/components/Utilities/Unrecognized/MenuButton.tsx b/src/components/Utilities/Unrecognized/MenuButton.tsx index 395fcdc1b..53728d222 100644 --- a/src/components/Utilities/Unrecognized/MenuButton.tsx +++ b/src/components/Utilities/Unrecognized/MenuButton.tsx @@ -14,7 +14,7 @@ const MenuButton = ( }, ) => ( <Button onClick={onClick} className="flex items-center gap-x-2 text-panel-text" disabled={disabled}> - <Icon path={icon} size={0.8333} className={cx({ 'text-panel-primary': highlight })} /> + <Icon path={icon} size={0.8333} className={cx({ 'text-panel-text-primary': highlight })} /> {name} </Button> ); diff --git a/src/components/Utilities/Unrecognized/RangeFillModal.tsx b/src/components/Utilities/Unrecognized/RangeFillModal.tsx index a62442820..efaad2654 100644 --- a/src/components/Utilities/Unrecognized/RangeFillModal.tsx +++ b/src/components/Utilities/Unrecognized/RangeFillModal.tsx @@ -23,10 +23,11 @@ const RangeFillModal = ({ onClose, rangeFill, show }: Props) => { return ( <ModalPanel show={show} + size="sm" onRequestClose={onClose} title="Range Fill Options" > - <div className="flex flex-col gap-y-3.5"> + <div className="flex flex-col gap-y-2"> <SelectSmall label="Type" id="Type" value={epType} onChange={e => setEpType(e.target.value)}> <option value="Normal">Episode</option> <option value="Special">Special</option> diff --git a/src/components/Utilities/Unrecognized/Title.tsx b/src/components/Utilities/Unrecognized/Title.tsx index 6f246fa05..ac0015293 100644 --- a/src/components/Utilities/Unrecognized/Title.tsx +++ b/src/components/Utilities/Unrecognized/Title.tsx @@ -4,7 +4,7 @@ import { mdiChevronRight } from '@mdi/js'; import { Icon } from '@mdi/react'; const TabButton = ({ id, name }: { id: string, name: string }) => ( - <NavLink to={`../${id}`} className={({ isActive }) => (isActive ? 'text-panel-primary' : '')}> + <NavLink to={`../${id}`} className={({ isActive }) => (isActive ? 'text-panel-text-primary' : '')}> {name} </NavLink> ); diff --git a/src/components/Utilities/UtilitiesTable.tsx b/src/components/Utilities/UtilitiesTable.tsx index 40599d377..e040ae8bb 100644 --- a/src/components/Utilities/UtilitiesTable.tsx +++ b/src/components/Utilities/UtilitiesTable.tsx @@ -87,7 +87,7 @@ function UtilitiesTable(props: Props) { <Icon path={mdiMenuUp} size={1} - className="ml-2 inline text-panel-primary transition-transform" + className="ml-2 inline text-panel-text-primary transition-transform" rotate={sortCriteria === (criteria * -1) ? 180 : 0} /> ); @@ -101,7 +101,7 @@ function UtilitiesTable(props: Props) { > <thead className="sticky top-0 z-[1]"> {table.getHeaderGroups().map(headerGroup => ( - <tr key={headerGroup.id} className="bg-panel-background-toolbar"> + <tr key={headerGroup.id} className="bg-panel-background-alt"> {headerGroup.headers.map(header => ( <th key={header.id} @@ -138,7 +138,7 @@ function UtilitiesTable(props: Props) { <tr key={row.id} className={cx( - parseInt(row.id, 10) % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background', + parseInt(row.id, 10) % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt', 'cursor-pointer', )} onClick={e => handleRowSelect(e, row)} @@ -148,7 +148,7 @@ function UtilitiesTable(props: Props) { key={cell.id} className={cx( 'py-4 first:rounded-l-md last:rounded-r-md border-y first:border-l last:border-r first:pl-6 pr-6 transition-colors', - row.getIsSelected() ? 'border-panel-primary' : 'border-panel-border', + row.getIsSelected() ? 'border-panel-text-primary' : 'border-panel-border', )} > {flexRender(cell.column.columnDef.cell, cell.getContext())} diff --git a/src/css/common.css b/src/css/common.css index 58cc22f33..d7fe29390 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1,7 +1,9 @@ input, -button, textarea, -:focus { +select +{ + background: theme('colors.panel-input'); + border: 1px solid theme('colors.panel-border'); outline: none; } @@ -47,7 +49,7 @@ input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; - background-color: theme('colors.slider-thumb'); + background-color: theme('colors.slider-color'); height: 1rem; width: 1rem; border-radius: 9999px; @@ -56,7 +58,7 @@ input[type='range']::-webkit-slider-thumb { /* For Firefox */ input[type='range']::-moz-range-thumb { border: none; - background-color: theme('colors.slider-thumb'); + background-color: theme('colors.slider-color'); height: 1rem; width: 1rem; border-radius: 9999px; @@ -68,20 +70,20 @@ input[type='range']:focus { /* For Chrome, Safari, Edge */ input[type='range']:focus::-webkit-slider-thumb { - outline: 1px solid theme('colors.panel-primary-hover'); + outline: 1px solid theme('colors.button-primary-hover'); outline-offset: 0.125rem; } /* For Firefox */ input[type='range']:focus::-moz-range-thumb { - outline: 1px solid theme('colors.panel-primary-hover'); + outline: 1px solid theme('colors.button-primary-hover'); outline-offset: 0.125rem; } body { - background-color: theme('colors.default-background'); + background-color: theme('colors.panel-background-alt'); color: theme('colors.panel-text'); - font-weight: 300; + font-weight: 400; } ::-webkit-scrollbar { @@ -95,31 +97,31 @@ body { } ::-webkit-scrollbar-thumb { - background: theme('colors.slider-thumb'); + background: theme('colors.slider-color'); border-radius: 10px; border: 2px solid theme('colors.slider-background'); height: 15%; } -.bg-panel-background-alt::-webkit-scrollbar-track { +.bg-panel-input::-webkit-scrollbar-track { background: theme('colors.slider-background-alt'); border-radius: 10px; } -.bg-panel-background-alt::-webkit-scrollbar-thumb { - background: theme('colors.slider-thumb-alt'); +.bg-panel-input::-webkit-scrollbar-thumb { + background: theme('colors.slider-color-alt'); border-radius: 10px; border: 2px solid theme('colors.slider-background-alt'); height: 15%; } .shoko-scrollbar { - scrollbar-color: theme('colors.slider-thumb') theme('colors.slider-background'); + scrollbar-color: theme('colors.slider-color') theme('colors.slider-background'); scrollbar-width: thin; } -.shoko-scrollbar * .bg-panel-background-alt { - scrollbar-color: theme('colors.slider-thumb') theme('colors.slider-background-alt'); +.shoko-scrollbar * .bg-panel-input { + scrollbar-color: theme('colors.slider-color-alt') theme('colors.slider-background-alt'); scrollbar-width: thin; } @@ -142,31 +144,31 @@ body { /* stylelint-disable-next-line selector-class-pattern */ .Toastify__toast { - background: theme('colors.toast-background') !important; - border: 1px solid theme('colors.toast-border') !important; + background: theme('colors.panel-background') !important; + border: 1px solid theme('colors.panel-border') !important; border-radius: 5px !important; - color: theme('colors.toast-text') !important; + color: theme('colors.panel-text') !important; font-family: Sora, sans, serif, mono !important; } /* stylelint-disable-next-line selector-class-pattern */ .Toastify__progress-bar--success { - background: theme('colors.toast-important') !important; + background: theme('colors.panel-text-important') !important; } /* stylelint-disable-next-line selector-class-pattern */ .Toastify__progress-bar--error { - background: theme('colors.toast-danger') !important; + background: theme('colors.panel-text-danger') !important; } /* stylelint-disable-next-line selector-class-pattern */ .Toastify__progress-bar--info { - background: theme('colors.toast-primary') !important; + background: theme('colors.panel-text-primary') !important; } /* stylelint-disable-next-line selector-class-pattern */ .Toastify__progress-bar--warning { - background: theme('colors.toast-warning') !important; + background: theme('colors.panel-text-warning') !important; } @@ -188,7 +190,7 @@ input:-webkit-autofill:focus { /* Firefox Autofill Fix */ input:autofill { - background: theme('colors.default-background-input'); + background: theme('colors.panel-input'); } .react-grid-item > .react-resizable-handle::after { diff --git a/src/css/error-page.css b/src/css/error-page.css index 3dc80b3b2..0b0ee478b 100644 --- a/src/css/error-page.css +++ b/src/css/error-page.css @@ -1,7 +1,7 @@ .error-page { - background-color: theme('colors.default-background'); + background-color: theme('colors.panel-background-alt'); - a { + & a { color: #49a2df; font-weight: 600; } diff --git a/src/css/theme-shoko-gray.css b/src/css/theme-shoko-gray.css index 6ac1ac698..32a557774 100644 --- a/src/css/theme-shoko-gray.css +++ b/src/css/theme-shoko-gray.css @@ -1,57 +1,51 @@ .theme-shoko-gray { - --color-button-primary: #44a3ff; - --color-button-primary-hover: #225eb7; - --color-button-secondary: #353d4a; - --color-button-secondary-hover: #2b323c; - --color-button-danger: #db4551; - --color-button-danger-hover: #9b2e3f; - --color-button-text: #cfd8e3; - --color-button-text-alt: #010f1c; - --color-default-background: #282e38; - --color-default-background-input: #21242b; - --color-header-background: #2c333e; - --color-header-background-alt: #353d4a; - --color-header-border: #21242b; - --color-header-text: #cfd8e3; - --color-header-text-alt: #cfd8e3; - --color-header-primary: #44a3ff; - --color-header-primary-hover: #8ed3ff; - --color-header-important: #10c469; - --color-header-warning: #f9c851; - --color-logo-background: #282e38; - --color-logo-primary: #44a3ff; - --color-overlay-background: #282e38a6; - --color-overlay-border: #21242b; - --color-overlay-count-episode: #10c469d9; - --color-overlay-count-group: #b981ffd9; - --color-overlay-count-text: #fff; - --color-overlay-icon: #cfd8e3; - --color-overlay-icon-hover: #44a3ff; - --color-panel-background: #2c333e; - --color-panel-background-alt: #21242b; - --color-panel-background-toolbar: #282e38; - --color-panel-background-transparent: #2c333ee6; - --color-panel-background-overlay: #1e2027e5; - --color-panel-border: #21242b; - --color-panel-border-alt: #3f4762; - --color-panel-text: #cfd8e3; - --color-panel-text-alt: #010f1c; - --color-panel-text-transparent: #cfd8e3a6; - --color-panel-primary: #44a3ff; - --color-panel-primary-hover: #8ed3ff; - --color-panel-important: #10c469; - --color-panel-danger: #db4551; - --color-panel-warning: #f9c851; - --color-panel-extra: #b981ff; - --color-slider-background: #21242b; - --color-slider-background-alt: #282e38; - --color-slider-thumb: #44a3ff; - --color-slider-thumb-alt: #44a3ff; - --color-toast-background: #282e38; - --color-toast-border: #21242b; - --color-toast-text: #cfd8e3; - --color-toast-primary: #44a3ff; - --color-toast-important: #10c469; - --color-toast-danger: #db4551; - --color-toast-warning: #f9c851; + --button-danger: #ff6c6c; + --button-danger-border: #21242b; + --button-danger-hover: #fa7676; + --button-danger-text: #010f1c; + --button-primary: #44a3ff; + --button-primary-border: #21242b; + --button-primary-hover: #64b3ff; + --button-primary-text: #010f1c; + --button-secondary: #353d4a; + --button-secondary-border: #21242b; + --button-secondary-hover: #404a59; + --button-secondary-text: #cfd8e3; + --header-background: #2c333e; + --header-icon: #cfd8e3; + --header-text: #cfd8e3; + --header-text-primary: #44a3ff; + --header-text-important: #10c469; + --header-user-background: #44a3ff; + --header-user-text: #010f1c; + --logo-primary: #44a3ff; + --logo-secondary: #2c333e; + --panel-background: #2c333e; + --panel-background-alt: #282e38; + --panel-background-overlay: #1e2027e5; + --panel-background-transparent: #2c333ea6; + --panel-border: #21242b; + --panel-icon: #cfd8e3; + --panel-icon-action: #44a3ff; + --panel-icon-danger: #ff6c6c; + --panel-icon-important: #10c469; + --panel-icon-warning: #f9c851; + --panel-input: #1e2027; + --panel-tags: #3f4762; + --panel-text: #cfd8e3; + --panel-text-danger: #ff6c6c; + --panel-text-important: #10c469; + --panel-text-other: #b981ff; + --panel-text-primary: #44a3ff; + --panel-text-warning: #f9c851; + --slider-background: #21242b; + --slider-background-alt: #282e38; + --slider-color: #44a3ff; + --slider-color-alt: #44a3ff; + --topnav-background: #353d4a; + --topnav-border: #21242b; + --topnav-icon-important: #10c469; + --topnav-icon-primary: #cfd8e3; + --topnav-icon-warning: #f9c851; + --topnav-text: #cfd8e3; } diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx index 4835bb3ea..1d3d6593b 100644 --- a/src/pages/collection/Collection.tsx +++ b/src/pages/collection/Collection.tsx @@ -46,7 +46,7 @@ const TimelineItem = ({ series }: { series: SeriesType }) => { <div className="flex gap-y-2"> {moment(series.AniDB?.AirDate).year()}  |  - <div className="text-panel-important">{seriesType}</div> + <div className="text-panel-text-important">{seriesType}</div> </div> <div className="line-clamp-2">{series.Name}</div> </div> diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx index b62044a2b..a89eb1231 100644 --- a/src/pages/collection/Series.tsx +++ b/src/pages/collection/Series.tsx @@ -32,7 +32,7 @@ import type { TagType } from '@/core/types/api/tags'; const IconNotification = ({ text }) => ( <div className="flex items-center gap-x-2 font-semibold"> - <Icon path={mdiInformationOutline} size={1} className="text-panel-important" /> + <Icon path={mdiInformationOutline} size={1} className="text-panel-text-important" /> <div className="flex flex-col"> {text} </div> @@ -45,7 +45,7 @@ const SeriesTab = ({ icon, text, to }) => ( className={({ isActive }) => cx( 'flex items-center gap-x-2', - isActive && 'text-panel-primary', + isActive && 'text-panel-text-primary', )} > <Icon path={icon} size={1} /> @@ -56,8 +56,8 @@ const SeriesTab = ({ icon, text, to }) => ( const SeriesTag = ({ text, type }) => ( <div className={cx( - 'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-border-alt rounded-md p-2 whitespace-nowrap capitalize', - type === 'User' ? 'text-panel-important' : 'text-panel-primary', + 'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-tags rounded-md p-2 whitespace-nowrap capitalize', + type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action', )} > <Icon path={mdiTagTextOutline} size="1rem" /> @@ -104,10 +104,10 @@ const Series = () => { <div className="flex grow flex-col gap-y-2"> <div className="flex justify-between"> <div className="flex gap-x-2"> - <Link className="font-semibold text-panel-primary" to="/webui/collection">Entire Collection</Link> + <Link className="font-semibold text-panel-text-primary" to="/webui/collection">Entire Collection</Link> <Icon path={mdiChevronRight} size={1} /> <Link - className="font-semibold text-panel-primary" + className="font-semibold text-panel-text-primary" to={`/webui/collection/group/${series.IDs?.ParentGroup}`} > {group.Name} @@ -127,11 +127,11 @@ const Series = () => { </div> <div className="flex flex-nowrap gap-x-4 text-sm"> <div className="flex items-center gap-x-2"> - <Icon path={mdiTelevision} size={1} /> + <Icon className="text-panel-icon" path={mdiTelevision} size={1} /> <span>{series?.AniDB?.Type}</span> </div> <div className="flex items-center gap-x-2"> - <Icon path={mdiCalendarMonthOutline} size={1} /> + <Icon className="text-panel-icon" path={mdiCalendarMonthOutline} size={1} /> <span> {moment(series?.AniDB?.AirDate).format('MMM DD, YYYY')}  -  @@ -141,11 +141,11 @@ const Series = () => { </span> </div> <div className="flex items-center gap-x-2"> - <Icon path={mdiFileDocumentMultipleOutline} size={1} /> + <Icon className="text-panel-icon" path={mdiFileDocumentMultipleOutline} size={1} /> {`${series?.Sizes.Local.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Local.Specials} / ${series?.Sizes.Total.Specials}`} </div> <div className="flex items-center gap-x-2"> - <Icon path={mdiEyeOutline} size={1} /> + <Icon className="text-panel-icon" path={mdiEyeOutline} size={1} /> {`${series?.Sizes.Watched.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Watched.Specials} / ${series?.Sizes.Total.Specials}`} </div> </div> @@ -171,7 +171,7 @@ const Series = () => { className="ml-auto flex cursor-pointer items-center gap-x-2" onClick={() => setShowEditSeriesModal(true)} > - <Icon path={mdiPencilCircleOutline} size={1} /> + <Icon className="text-panel-icon" path={mdiPencilCircleOutline} size={1} />  Edit </div> </div> diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx index 50a02a13a..384b8cd0d 100644 --- a/src/pages/collection/series/SeriesCredits.tsx +++ b/src/pages/collection/series/SeriesCredits.tsx @@ -28,7 +28,7 @@ const Heading = React.memo(({ mode, setMode }: { mode: string, setMode: (mode: s onClick={() => { setMode('Character'); }} - className={cx(mode === 'Character' && 'text-panel-primary', 'cursor-pointer')} + className={cx(mode === 'Character' && 'text-panel-text-primary', 'cursor-pointer')} > Characters </span> @@ -37,7 +37,7 @@ const Heading = React.memo(({ mode, setMode }: { mode: string, setMode: (mode: s onClick={() => { setMode('Staff'); }} - className={cx(mode === 'Staff' && 'text-panel-primary', 'cursor-pointer')} + className={cx(mode === 'Staff' && 'text-panel-text-primary', 'cursor-pointer')} > Staff </span> @@ -82,7 +82,7 @@ const SeriesCredits = () => { <div className="flex items-center justify-between rounded-md border border-panel-border bg-panel-background-transparent px-8 py-4"> <Heading mode={mode} setMode={setMode} /> <div className="text-xl font-semibold"> - <span className="text-panel-important">{cast?.length || 0}</span> + <span className="text-panel-text-important">{cast?.length || 0}</span>  Characters Listed </div> </div> diff --git a/src/pages/collection/series/SeriesEpisodes.tsx b/src/pages/collection/series/SeriesEpisodes.tsx index 9914920b9..f579c7961 100644 --- a/src/pages/collection/series/SeriesEpisodes.tsx +++ b/src/pages/collection/series/SeriesEpisodes.tsx @@ -131,7 +131,7 @@ const SeriesEpisodes = () => { <div className="text-xl font-semibold"> Episodes <span className="px-2">|</span> - <span className="pr-2 text-panel-important"> + <span className="pr-2 text-panel-text-important"> {episodesData.isUninitialized || episodesData.isLoading ? '-' : episodeTotal} </span> Entries Listed @@ -173,7 +173,7 @@ const SeriesEpisodes = () => { > {item ? <SeriesEpisode episode={item} /> : ( // 332px is the minimum height of a loaded row - <div className="flex h-[332px] items-center justify-center p-8 text-panel-primary"> + <div className="flex h-[332px] items-center justify-center p-8 text-panel-text-primary"> <Icon path={mdiLoading} spin size={3} /> </div> )} diff --git a/src/pages/collection/series/SeriesFileSummary.tsx b/src/pages/collection/series/SeriesFileSummary.tsx index c20e22c8b..b62947be8 100644 --- a/src/pages/collection/series/SeriesFileSummary.tsx +++ b/src/pages/collection/series/SeriesFileSummary.tsx @@ -16,7 +16,7 @@ const HeaderFragment = ({ range, title }) => { return ( <> <span>{title}</span> - <span className="text-panel-important">{range}</span> + <span className="text-panel-text-important">{range}</span> </> ); }; @@ -103,7 +103,7 @@ const SummaryGroup = React.memo(({ group }: { group: WebuiSeriesFileSummaryGroup const locationDetails = group.FileLocation ?? '-'; return ( - <div className="flex flex-col gap-y-8 rounded border border-panel-border p-8"> + <div className="flex flex-col gap-y-8 rounded border border-panel-border bg-panel-background-transparent p-8"> <div className="flex text-xl font-semibold"> <Header ranges={group.RangeByType} /> </div> @@ -237,7 +237,7 @@ const SeriesFileSummary = () => { <div className="flex items-center justify-between rounded border border-panel-border bg-panel-background-transparent px-8 py-5 text-xl font-semibold"> Files Breakdown <div> - <span className="text-panel-important">{fileSummary?.Groups.length || 0}</span> + <span className="text-panel-text-important">{fileSummary?.Groups.length || 0}</span>   {fileSummary?.Groups.length === 1 ? 'Entry' : 'Entries'} </div> @@ -256,13 +256,13 @@ const SeriesFileSummary = () => { {find(episode.Titles, ['Language', 'en'])?.Name || '--'}  ( <a - className="inline-flex items-center gap-x-1 text-panel-primary" + className="inline-flex items-center gap-x-1 text-panel-text-primary" href={`https://anidb.net/episode/${episode.ID}`} target="_blank" rel="noopener noreferrer" > {episode.ID} - <Icon className="text-panel-primary" path={mdiOpenInNew} size={0.8333} /> + <Icon className="text-panel-text-primary" path={mdiOpenInNew} size={0.8333} /> </a> ) </div> diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx index 9d93786fc..639227d11 100644 --- a/src/pages/collection/series/SeriesImages.tsx +++ b/src/pages/collection/series/SeriesImages.tsx @@ -22,7 +22,7 @@ const Heading = React.memo(({ setType, type }: { type: string, setType: (type: s onClick={() => { setType('Posters'); }} - className={cx(type === 'Posters' && 'text-panel-primary')} + className={cx(type === 'Posters' && 'text-panel-text-primary')} > Poster </span> @@ -31,7 +31,7 @@ const Heading = React.memo(({ setType, type }: { type: string, setType: (type: s onClick={() => { setType('Fanarts'); }} - className={cx(type === 'Fanarts' && 'text-panel-primary')} + className={cx(type === 'Fanarts' && 'text-panel-text-primary')} > Fanart </span> @@ -40,7 +40,7 @@ const Heading = React.memo(({ setType, type }: { type: string, setType: (type: s onClick={() => { setType('Banners'); }} - className={cx(type === 'Banners' && 'text-panel-primary')} + className={cx(type === 'Banners' && 'text-panel-text-primary')} > Banners </span> @@ -107,7 +107,7 @@ const SeriesImages = () => { <div className="flex items-center justify-between rounded-md border border-panel-border bg-panel-background-transparent px-8 py-4"> <Heading type={type} setType={setType} /> <div className="text-xl font-semibold"> - <span className="text-panel-important">{get(images, type, []).length}</span> + <span className="text-panel-text-important">{get(images, type, []).length}</span>   {type}  Listed @@ -125,7 +125,7 @@ const SeriesImages = () => { image={item} className={cx( 'rounded-md drop-shadow-md border', - item === selectedImage ? 'border-panel-important border-2 opacity-50' : 'border-panel-border', + item === selectedImage ? 'border-panel-text-important border-2 opacity-65' : 'border-panel-border', sizeMap[type], )} /> diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx index 4df0eea60..a936cebdb 100644 --- a/src/pages/collection/series/SeriesOverview.tsx +++ b/src/pages/collection/series/SeriesOverview.tsx @@ -74,7 +74,7 @@ const MetadataLink = ({ id, series, site }: { site: string, id: number | number[ ? ( <a href={siteLink} - className="flex gap-x-2 font-semibold text-panel-primary" + className="flex gap-x-2 font-semibold text-panel-text-primary" rel="noopener noreferrer" target="_blank" > @@ -90,16 +90,16 @@ const MetadataLink = ({ id, series, site }: { site: string, id: number | number[ ? ( <> <Button disabled> - <Icon className="text-panel-primary" path={mdiPencilCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiPencilCircleOutline} size={1} /> </Button> <Button disabled> - <Icon className="text-panel-danger" path={mdiCloseCircleOutline} size={1} /> + <Icon className="text-panel-text-danger" path={mdiCloseCircleOutline} size={1} /> </Button> </> ) : ( <Button disabled> - <Icon className="text-panel-primary" path={mdiPlusCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} /> </Button> )} </div> @@ -164,7 +164,7 @@ const SeriesOverview = () => { {overview?.FirstAirSeason ? ( <Link - className="font-semibold text-panel-primary" + className="font-semibold text-panel-text-primary" to={`/webui/collection/filter/${overview.FirstAirSeason.IDs.ID}`} > {overview.FirstAirSeason.Name} @@ -192,7 +192,7 @@ const SeriesOverview = () => { rel="noopener noreferrer" target="_blank" key={jpOfficialSite.Name} - className="font-semibold text-panel-primary" + className="font-semibold text-panel-text-primary" > {jpOfficialSite.Name} </a> @@ -203,7 +203,7 @@ const SeriesOverview = () => { rel="noopener noreferrer" target="_blank" key={enOfficialSite.Name} - className="font-semibold text-panel-primary" + className="font-semibold text-panel-text-primary" > {enOfficialSite.Name} </a> @@ -224,7 +224,7 @@ const SeriesOverview = () => { <Icon path={mdiChevronRight} size={1} /> <a href={`https://anidb.net/anime/${series.IDs.AniDB}`} - className="flex items-center gap-x-2 text-panel-primary" + className="flex items-center gap-x-2 text-panel-text-primary" rel="noopener noreferrer" target="_blank" > @@ -239,7 +239,7 @@ const SeriesOverview = () => { > <div className="grid grid-cols-2 grid-rows-3 gap-x-9 gap-y-4"> {links.map(site => ( - <div className="rounded border border-panel-border bg-panel-background px-4 py-3" key={site}> + <div className="rounded border border-panel-border bg-panel-background-alt px-4 py-3" key={site}> <MetadataLink site={site} id={series.IDs[site]} series={series.Name} /> </div> ))} @@ -266,7 +266,7 @@ const SeriesOverview = () => { className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" /> <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span> - <span className="text-sm text-panel-important">{itemRelation}</span> + <span className="text-sm text-panel-text-important">{itemRelation}</span> </div> ); } @@ -281,7 +281,7 @@ const SeriesOverview = () => { className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" /> <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span> - <span className="text-sm text-panel-important">{itemRelation}</span> + <span className="text-sm text-panel-text-important">{itemRelation}</span> </Link> ); })} @@ -306,7 +306,7 @@ const SeriesOverview = () => { className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" /> <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span> - <span className="text-sm text-panel-important"> + <span className="text-sm text-panel-text-important"> {round(item.UserApproval.Value, 2)} % ( {item.UserApproval.Votes} @@ -326,7 +326,7 @@ const SeriesOverview = () => { className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" /> <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span> - <span className="text-sm text-panel-important"> + <span className="text-sm text-panel-text-important"> {round(item.UserApproval.Value, 2)} % ( {item.UserApproval.Votes} diff --git a/src/pages/collection/series/SeriesTags.tsx b/src/pages/collection/series/SeriesTags.tsx index bd0875405..5c74e59b4 100644 --- a/src/pages/collection/series/SeriesTags.tsx +++ b/src/pages/collection/series/SeriesTags.tsx @@ -66,7 +66,7 @@ const SeriesTags = () => { <div className="flex items-center justify-between rounded-md border border-panel-border bg-panel-background-transparent px-8 py-4 text-xl font-semibold"> Tags <div> - <span className="text-panel-important">{tags?.length || 0}</span> + <span className="text-panel-text-important">{tags?.length || 0}</span>  Tags Listed </div> </div> diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index d61c5986b..1ec6279d3 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -81,7 +81,7 @@ function DashboardPage() { draggable: false, closeOnClick: false, toastId: 'layoutEditMode', - className: 'w-64 ml-auto', + className: 'max-w-[17rem] ml-auto', }); } else { toast.infoUpdate('layoutEditMode', '', renderToast()); @@ -93,7 +93,7 @@ function DashboardPage() { const renderResizeHandle = () => ( <div className="react-resizable-handle bottom-0 right-0 cursor-nwse-resize"> - <Icon path={mdiMenuDown} size={1.5} className="text-panel-primary" rotate={-45} /> + <Icon path={mdiMenuDown} size={1.5} className="text-panel-text-primary" rotate={-45} /> </div> ); diff --git a/src/pages/dashboard/components/DashboardTitleToggle.tsx b/src/pages/dashboard/components/DashboardTitleToggle.tsx index da1782992..8b9749b86 100644 --- a/src/pages/dashboard/components/DashboardTitleToggle.tsx +++ b/src/pages/dashboard/components/DashboardTitleToggle.tsx @@ -23,7 +23,7 @@ const DashboardTitleToggle = ({ className={cx({ 'cursor-pointer': true, 'font-semibold': !secondaryActive, - 'text-panel-primary': !secondaryActive, + 'text-panel-text-primary': !secondaryActive, })} onClick={() => setSecondaryActive(false)} > @@ -34,7 +34,7 @@ const DashboardTitleToggle = ({ className={cx({ 'cursor-pointer': true, 'font-semibold': secondaryActive, - 'text-panel-primary': secondaryActive, + 'text-panel-text-primary': secondaryActive, })} onClick={() => setSecondaryActive(true)} > diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx index 78dcec73c..53bef1dbd 100644 --- a/src/pages/dashboard/components/EpisodeDetails.tsx +++ b/src/pages/dashboard/components/EpisodeDetails.tsx @@ -45,7 +45,7 @@ function EpisodeDetails(props: Props): JSX.Element { ? ( <> <p className="truncate text-center text-sm font-semibold">{airDate.format('MMMM Do, YYYY')}</p> - <p className="mb-2 truncate text-center text-sm opacity-75">{relativeTime}</p> + <p className="mb-2 truncate text-center text-sm font-semibold opacity-65">{relativeTime}</p> </> ) : null} @@ -53,7 +53,9 @@ function EpisodeDetails(props: Props): JSX.Element { image={episode.SeriesPoster} className="mb-3 h-80 rounded border border-panel-border drop-shadow-md" > - {percentage && <div className="absolute bottom-0 left-0 h-1 bg-panel-primary" style={{ width: percentage }} />} + {percentage && ( + <div className="absolute bottom-0 left-0 h-1 bg-panel-text-primary" style={{ width: percentage }} /> + )} {isInCollection && ( <div className="absolute right-3 top-3 rounded bg-panel-background-transparent p-1"> <Icon path={mdiLayersTripleOutline} size={0.75} title="Episode is Already in Collection!" /> @@ -63,7 +65,7 @@ function EpisodeDetails(props: Props): JSX.Element { <p className="mb-1 truncate text-center text-sm font-semibold" title={episode.SeriesTitle}> {episode.SeriesTitle} </p> - <p className="truncate text-center text-sm opacity-75" title={title}>{title}</p> + <p className="truncate text-center text-sm font-semibold opacity-65" title={title}>{title}</p> </div> ); } diff --git a/src/pages/dashboard/components/SeriesDetails.tsx b/src/pages/dashboard/components/SeriesDetails.tsx index 9aad7f31f..557378d5b 100644 --- a/src/pages/dashboard/components/SeriesDetails.tsx +++ b/src/pages/dashboard/components/SeriesDetails.tsx @@ -16,7 +16,7 @@ function SeriesDetails(props: { series: SeriesType }): JSX.Element { className="mb-3 h-80 rounded border border-panel-border drop-shadow-md" /> <p className="mb-1 truncate text-center text-sm font-semibold" title={series.Name}>{series.Name}</p> - <p className="truncate text-center text-sm opacity-75" title={`${series.Size} Files`}> + <p className="truncate text-center text-sm font-semibold opacity-65" title={`${series.Size} Files`}> {series.Size}  Files </p> diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx index 3bd207cec..bb11c90d0 100644 --- a/src/pages/dashboard/panels/CollectionStats.tsx +++ b/src/pages/dashboard/panels/CollectionStats.tsx @@ -18,7 +18,7 @@ function CollectionStats() { <div className="mb-1 grow last:mb-0"> {title} </div> - {link ? <Link to={link} className="text-panel-primary">{value}</Link> : <div>{value}</div>} + {link ? <Link to={link} className="text-panel-text-primary">{value}</Link> : <div>{value}</div>} </div> ); diff --git a/src/pages/dashboard/panels/ImportFolders.tsx b/src/pages/dashboard/panels/ImportFolders.tsx index 66b43c912..73e98fafc 100644 --- a/src/pages/dashboard/panels/ImportFolders.tsx +++ b/src/pages/dashboard/panels/ImportFolders.tsx @@ -52,7 +52,7 @@ function ImportFolders() { <div className="flex"> <Button onClick={() => rescanFolder(folder.ID, folder.Name)} tooltip="Rescan Folder" className="mr-2"> <Icon - className="text-panel-primary" + className="text-panel-icon-action" path={mdiDatabaseSearchOutline} size={1} horizontal @@ -62,7 +62,7 @@ function ImportFolders() { </Button> <Button onClick={() => openImportFolderModalEdit(folder.ID)} tooltip="Edit Folder"> <Icon - className="text-panel-primary" + className="text-panel-icon-action" path={mdiDatabaseEditOutline} size={1} horizontal @@ -99,7 +99,7 @@ function ImportFolders() { onClick={() => setImportFolderModalStatus(true)} title="Add Folder" > - <Icon className="text-panel-primary" path={mdiFolderPlusOutline} size={1} horizontal vertical rotate={180} /> + <Icon className="text-panel-icon-action" path={mdiFolderPlusOutline} size={1} horizontal vertical rotate={180} /> </div> ); diff --git a/src/pages/dashboard/panels/MediaType.tsx b/src/pages/dashboard/panels/MediaType.tsx index ecc66c772..35dbc5d5d 100644 --- a/src/pages/dashboard/panels/MediaType.tsx +++ b/src/pages/dashboard/panels/MediaType.tsx @@ -18,17 +18,17 @@ function MediaType() { const renderColor = (type) => { switch (type) { case 'Series': - return 'panel-primary'; + return 'panel-text-primary'; case 'Other': - return 'panel-extra'; + return 'panel-text-other'; case 'Web': - return 'panel-danger'; + return 'panel-text-danger'; case 'Movie': - return 'panel-important'; + return 'panel-text-important'; case 'OVA': - return 'panel-warning'; + return 'panel-text-warning'; default: - return 'panel-primary'; + return 'panel-text-primary'; } }; @@ -48,7 +48,7 @@ function MediaType() { ); const renderBar = (item: string, countPercentage: number) => ( - <div key={`${item}-bar`} className="mt-2 flex rounded-md bg-panel-background-alt"> + <div key={`${item}-bar`} className="mt-2 flex rounded-md bg-panel-input"> {/* eslint-disable-next-line tailwindcss/no-custom-classname */} <div className={`bg-${renderColor(item)} h-4 rounded-md`} style={{ width: `${countPercentage}%` }} /> </div> diff --git a/src/pages/dashboard/panels/QueueProcessor.tsx b/src/pages/dashboard/panels/QueueProcessor.tsx index 09c00f365..5e4874556 100644 --- a/src/pages/dashboard/panels/QueueProcessor.tsx +++ b/src/pages/dashboard/panels/QueueProcessor.tsx @@ -50,21 +50,21 @@ function QueueProcessor() { {item?.status ?? 'Idle'} </span> </div> - <div className="flex text-panel-important">{item.queueCount ?? 0}</div> + <div className="flex text-panel-text-important">{item.queueCount ?? 0}</div> <div className="flex items-center"> {item?.status === 'Pausing' || item?.status === 'Paused' ? ( <Button className="mx-2" onClick={() => handleOperation('Start', key)} tooltip="Resume"> - <Icon className="text-panel-primary" path={mdiPlayCircleOutline} size={1} /> + <Icon className="text-panel-icon-action" path={mdiPlayCircleOutline} size={1} /> </Button> ) : ( <Button className="mx-2" onClick={() => handleOperation('Stop', key)} tooltip="Pause"> - <Icon className="text-panel-primary" path={mdiPauseCircleOutline} size={1} /> + <Icon className="text-panel-icon-action" path={mdiPauseCircleOutline} size={1} /> </Button> )} <Button className="mx-2" onClick={() => handleOperation('Clear', key)} tooltip="Clear"> - <Icon className="text-panel-primary" path={mdiCloseCircleOutline} size={1} /> + <Icon className="text-panel-icon-action" path={mdiCloseCircleOutline} size={1} /> </Button> </div> </div> @@ -86,7 +86,7 @@ function QueueProcessor() { {paused ? ( <div - className="mx-2 cursor-pointer text-panel-primary" + className="mx-2 cursor-pointer text-panel-icon-action" onClick={() => handleOperation('StartAll')} title="Resume All" > @@ -95,7 +95,7 @@ function QueueProcessor() { ) : ( <div - className="mx-2 cursor-pointer text-panel-primary" + className="mx-2 cursor-pointer text-panel-icon-action" onClick={() => handleOperation('StopAll')} title="Pause All" > @@ -103,10 +103,10 @@ function QueueProcessor() { </div> )} <Button className="mx-2" onClick={() => handleOperation('ClearAll')} tooltip="Clear All"> - <Icon className="text-panel-primary" path={mdiCloseCircleOutline} size={1} /> + <Icon className="text-panel-icon-action" path={mdiCloseCircleOutline} size={1} /> </Button> <Button className="mx-2" onClick={handleOpenQueueDialog} tooltip="Open Queue Modal"> - <Icon className="text-panel-primary" path={mdiTextBoxOutline} size={1} /> + <Icon className="text-panel-icon-action" path={mdiTextBoxOutline} size={1} /> </Button> </> ); diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx index 112cd2243..d3f93befd 100644 --- a/src/pages/dashboard/panels/RecommendedAnime.tsx +++ b/src/pages/dashboard/panels/RecommendedAnime.tsx @@ -27,7 +27,7 @@ const RecommendedAnime = () => { window.open(`https://anidb.net/anime/${series.ID}`, '_blank')} > <div className="mb-1 rounded-full border border-panel-border bg-panel-background-alt p-5"> - <Icon path={mdiEyeArrowRightOutline} size={1} className="text-panel-primary" /> + <Icon path={mdiEyeArrowRightOutline} size={1} className="text-panel-text-primary" /> </div> View Series on AniDB </div> diff --git a/src/pages/dashboard/panels/ShokoNews.tsx b/src/pages/dashboard/panels/ShokoNews.tsx index 801d5ef54..098e61e5a 100644 --- a/src/pages/dashboard/panels/ShokoNews.tsx +++ b/src/pages/dashboard/panels/ShokoNews.tsx @@ -21,13 +21,13 @@ const NewsRow = ({ item }: { item: DashboardNewsType }) => ( <div className="flex flex-col" key={item.title}> <div className="flex gap-x-4 font-semibold"> <p>{item.date_published}</p> - {newNewsCheck(item.date_published) && <p className="text-panel-important">New Post</p>} + {newNewsCheck(item.date_published) && <p className="text-panel-text-important">New Post</p>} </div> <a href={item.link} rel="noopener noreferrer" target="_blank" - className="mt-1 flex items-center space-x-2 font-semibold text-panel-primary hover:text-panel-primary-hover" + className="mt-1 flex items-center space-x-2 font-semibold text-panel-icon-action" > <p className="font-semibold">{item.title}</p> <Icon path={mdiOpenInNew} size={1} /> diff --git a/src/pages/error/ErrorPage.tsx b/src/pages/error/ErrorPage.tsx index 6fc13b8c9..854a58206 100644 --- a/src/pages/error/ErrorPage.tsx +++ b/src/pages/error/ErrorPage.tsx @@ -21,7 +21,7 @@ const Fallback = ({ componentStack, error }) => { <pre>{componentStack}</pre> </p> <p className="text"> - <span className="cursor-pointer text-panel-primary" onClick={() => navigate(-1)}>Go back</span> + <span className="cursor-pointer text-panel-text-primary" onClick={() => navigate(-1)}>Go back</span> , or head over to the  <Link to="/">home page</Link>  to choose a new direction. diff --git a/src/pages/firstrun/Acknowledgement.tsx b/src/pages/firstrun/Acknowledgement.tsx index 090f58aea..226132d55 100644 --- a/src/pages/firstrun/Acknowledgement.tsx +++ b/src/pages/firstrun/Acknowledgement.tsx @@ -34,14 +34,14 @@ function Acknowledgement() { OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. </div> - <div className="font-semibold text-panel-important"> + <div className="font-semibold text-panel-text-important"> We are constantly seeking talented individuals to join our team! If you believe you have the skills and expertise to contribute, we invite you to come and chat with us on  <a href="https://discord.gg/vpeHDsg" target="_blank" rel="noopener noreferrer" - className="text-panel-primary hover:underline" + className="text-panel-text-primary hover:underline" > Discord </a> diff --git a/src/pages/firstrun/AniDBAccount.tsx b/src/pages/firstrun/AniDBAccount.tsx index 5906957b6..9fa0025f7 100644 --- a/src/pages/firstrun/AniDBAccount.tsx +++ b/src/pages/firstrun/AniDBAccount.tsx @@ -61,12 +61,14 @@ function AniDBAccount() { href="https://anidb.net/" target="_blank" rel="noreferrer" - className="font-semibold text-panel-primary hover:underline" + className="font-semibold text-panel-text-primary hover:underline" > - {' Click Here '} + {' '} + Click Here + {' '} </a> to create one. Please note that, due to limitations with AniDB‘s API, your password must consist of only - <span className="font-semibold text-panel-important">{' alphanumeric '}</span> + <span className="font-semibold text-panel-text-important">{' alphanumeric '}</span> characters. Using any other characters will result in a ban when you attempt to log in. </div> <form className="flex flex-col" onSubmit={handleTest}> diff --git a/src/pages/firstrun/DataCollection.tsx b/src/pages/firstrun/DataCollection.tsx index 02ffc2528..127fd07a1 100644 --- a/src/pages/firstrun/DataCollection.tsx +++ b/src/pages/firstrun/DataCollection.tsx @@ -15,7 +15,7 @@ function DataCollection() { href="https://sentry.io/" target="_blank" rel="noopener noreferrer" - className="font-bold text-panel-primary hover:underline" + className="font-bold text-panel-text-primary hover:underline" > Sentry.io </a> diff --git a/src/pages/firstrun/FirstRunPage.tsx b/src/pages/firstrun/FirstRunPage.tsx index 17066a95d..5135c0dde 100644 --- a/src/pages/firstrun/FirstRunPage.tsx +++ b/src/pages/firstrun/FirstRunPage.tsx @@ -37,7 +37,7 @@ const MenuItem = ({ id, text }: { text: string, id: string }) => { <div key={id} className="flex items-center gap-x-7 text-xl font-semibold"> <Icon path={path} - className="text-panel-primary" + className="text-panel-icon-action" size={1} /> {text} @@ -82,7 +82,7 @@ function FirstRunPage() { const parsedVersion = useMemo(() => { if (version.isFetching || !version.data) { - return <Icon path={mdiLoading} spin size={1} className="ml-2 text-panel-primary" />; + return <Icon path={mdiLoading} spin size={1} className="ml-2 text-panel-icon-action" />; } if (version.data.Server.ReleaseChannel !== 'Stable') { diff --git a/src/pages/firstrun/Footer.tsx b/src/pages/firstrun/Footer.tsx index dbf41c53c..1959fad16 100644 --- a/src/pages/firstrun/Footer.tsx +++ b/src/pages/firstrun/Footer.tsx @@ -38,7 +38,7 @@ function Footer(props: Props) { <div className={cx([ 'flex items-center mb-5', - status?.type === 'error' ? 'text-panel-warning' : 'text-panel-important', + status?.type === 'error' ? 'text-panel-text-warning' : 'text-panel-text-important', ])} > {status?.text} @@ -52,7 +52,7 @@ function Footer(props: Props) { <Button onClick={() => navigate('/', { replace: true })} buttonType="primary" - className="ml-6 w-1/2 py-2" + className="w-1/2 px-4 py-2" disabled={nextDisabled} > Finish @@ -62,7 +62,7 @@ function Footer(props: Props) { <Button onClick={() => handleNext()} buttonType="primary" - className="ml-6 w-1/2 py-2" + className="w-1/2 px-4 py-2" disabled={nextDisabled || isFetching} loading={isFetching} > diff --git a/src/pages/firstrun/ImportFolders.tsx b/src/pages/firstrun/ImportFolders.tsx index a389bcde7..80c41bcb4 100644 --- a/src/pages/firstrun/ImportFolders.tsx +++ b/src/pages/firstrun/ImportFolders.tsx @@ -68,10 +68,10 @@ const Folder = (props: ImportFolderType) => { {Name} <div className="flex gap-x-3"> <Button onClick={() => dispatch(setImportFolderModalEdit(ID))}> - <Icon path={mdiPencilCircleOutline} size={1} className="text-panel-primary" /> + <Icon path={mdiPencilCircleOutline} size={1} className="text-panel-text-primary" /> </Button> <Button onClick={() => handleDeleteFolder(ID)}> - <Icon path={mdiMinusCircleOutline} size={1} className="text-panel-danger" /> + <Icon path={mdiMinusCircleOutline} size={1} className="text-panel-text-danger" /> </Button> </div> </div> diff --git a/src/pages/firstrun/MetadataSources.tsx b/src/pages/firstrun/MetadataSources.tsx index a4a16b972..780f47a97 100644 --- a/src/pages/firstrun/MetadataSources.tsx +++ b/src/pages/firstrun/MetadataSources.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; +import { mdiChevronRight } from '@mdi/js'; +import { Icon } from '@mdi/react'; import cx from 'classnames'; import Button from '@/components/Input/Button'; @@ -27,9 +29,10 @@ function MetadataSources() { onClick={() => setActiveTab(key)} className={cx([ 'font-semibold', - '!text-lg', 'drop-shadow-none', - activeTab === key ? '!text-panel-primary' : '!text-panel-text', + '!border-none', + '!bg-transparent', + activeTab === key ? 'text-panel-text-primary' : '!text-panel-text', ])} > {title} @@ -62,7 +65,9 @@ function MetadataSources() { collection. We highly recommend that you review the settings for each site and configure them to meet your preferences. </div> - <div className="flex gap-x-2 border-b-2 border-panel-border pb-3 text-xl"> + <div className="flex gap-x-2 pb-3 text-xl font-semibold items-center"> + <div>Recently Imported</div> + <Icon path={mdiChevronRight} size={1} /> {renderTabButton('AniDB', 'anidb')} | {renderTabButton('TMDB', 'moviedb')} diff --git a/src/pages/firstrun/MetadataSourcesTabs/AniDBTab.tsx b/src/pages/firstrun/MetadataSourcesTabs/AniDBTab.tsx index ccd34280a..2bd04e283 100644 --- a/src/pages/firstrun/MetadataSourcesTabs/AniDBTab.tsx +++ b/src/pages/firstrun/MetadataSourcesTabs/AniDBTab.tsx @@ -64,153 +64,161 @@ function AniDBTab({ setStatus }: Props) { ); return ( - <TransitionDiv className="flex flex-col gap-y-2"> - <div className="font-semibold">Download Options</div> - <Checkbox - label="Character Images" - id="DownloadCharacters" - isChecked={DownloadCharacters} - onChange={handleInputChange} - justify - className="mt-4" - /> - <Checkbox - label="Creator Images" - id="DownloadCreators" - isChecked={DownloadCreators} - onChange={handleInputChange} - justify - /> - <Checkbox - label="Release Groups" - id="DownloadReleaseGroups" - isChecked={DownloadReleaseGroups} - onChange={handleInputChange} - justify - /> - <Checkbox - label="Related Anime" - id="DownloadRelatedAnime" - isChecked={DownloadRelatedAnime} - onChange={handleInputChange} - justify - /> - <div - className={cx( - 'flex justify-between items-center transition-opacity', - !DownloadRelatedAnime && 'pointer-events-none opacity-50', - )} - > - Related Depth - <InputSmall - id="max-relation-depth" - value={MaxRelationDepth} - type="number" - onChange={event => validateAndSaveRelationDepth(event.target.value)} - className="w-10 px-2 text-center" + <TransitionDiv className="flex flex-col gap-y-8"> + <div className="font-semibold pb-4 border-b-2 border-panel-border">Download Options</div> + <div className="flex flex-col gap-y-2"> + <Checkbox + label="Character Images" + id="DownloadCharacters" + isChecked={DownloadCharacters} + onChange={handleInputChange} + justify /> + <Checkbox + label="Creator Images" + id="DownloadCreators" + isChecked={DownloadCreators} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Release Groups" + id="DownloadReleaseGroups" + isChecked={DownloadReleaseGroups} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Related Anime" + id="DownloadRelatedAnime" + isChecked={DownloadRelatedAnime} + onChange={handleInputChange} + justify + /> + <div + className={cx( + 'flex justify-between items-center transition-opacity', + !DownloadRelatedAnime && 'pointer-events-none opacity-50', + )} + > + Related Depth + <InputSmall + id="max-relation-depth" + value={MaxRelationDepth} + type="number" + onChange={event => validateAndSaveRelationDepth(event.target.value)} + className="w-10 px-2 text-center" + /> + </div> </div> - <div className="mt-6 font-semibold">Mylist Options</div> - <Checkbox - label="Add Files" - id="MyList_AddFiles" - isChecked={MyList_AddFiles} - onChange={handleInputChange} - justify - className="mt-4" - /> - <Checkbox - label="Read Watched" - id="MyList_ReadWatched" - isChecked={MyList_ReadWatched} - onChange={handleInputChange} - justify - /> - <Checkbox - label="Read Unwatched" - id="MyList_ReadUnwatched" - isChecked={MyList_ReadUnwatched} - onChange={handleInputChange} - justify - /> - <Checkbox - label="Set Watched" - id="MyList_SetWatched" - isChecked={MyList_SetWatched} - onChange={handleInputChange} - justify - /> - <Checkbox - label="Set Unwatched" - id="MyList_SetUnwatched" - isChecked={MyList_SetUnwatched} - onChange={handleInputChange} - justify - /> - <SelectSmall - label="Storage State" - id="MyList_StorageState" - value={MyList_StorageState} - onChange={handleInputChange} - > - <option value={0}>Unknown</option> - <option value={1}>HDD</option> - <option value={2}>Disk</option> - <option value={3}>Deleted</option> - <option value={4}>Remote</option> - </SelectSmall> - <SelectSmall label="Delete Action" id="MyList_DeleteType" value={MyList_DeleteType} onChange={handleInputChange}> - <option value={0}>Delete File (AniDB)</option> - <option value={1}>Delete File (Local)</option> - <option value={2}>Mark Deleted</option> - <option value={3}>Mark External (CD/DVD)</option> - <option value={4}>Mark Unknown</option> - <option value={5}>DVD/BD</option> - </SelectSmall> + <div className="font-semibold pb-4 border-b-2 border-panel-border">Mylist Options</div> + <div className="flex flex-col gap-y-2"> + <Checkbox + label="Add Files" + id="MyList_AddFiles" + isChecked={MyList_AddFiles} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Read Watched" + id="MyList_ReadWatched" + isChecked={MyList_ReadWatched} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Read Unwatched" + id="MyList_ReadUnwatched" + isChecked={MyList_ReadUnwatched} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Set Watched" + id="MyList_SetWatched" + isChecked={MyList_SetWatched} + onChange={handleInputChange} + justify + /> + <Checkbox + label="Set Unwatched" + id="MyList_SetUnwatched" + isChecked={MyList_SetUnwatched} + onChange={handleInputChange} + justify + /> + <SelectSmall + label="Storage State" + id="MyList_StorageState" + value={MyList_StorageState} + onChange={handleInputChange} + > + <option value={0}>Unknown</option> + <option value={1}>HDD</option> + <option value={2}>Disk</option> + <option value={3}>Deleted</option> + <option value={4}>Remote</option> + </SelectSmall> + <SelectSmall + label="Delete Action" + id="MyList_DeleteType" + value={MyList_DeleteType} + onChange={handleInputChange} + > + <option value={0}>Delete File (AniDB)</option> + <option value={1}>Delete File (Local)</option> + <option value={2}>Mark Deleted</option> + <option value={3}>Mark External (CD/DVD)</option> + <option value={4}>Mark Unknown</option> + <option value={5}>DVD/BD</option> + </SelectSmall> + </div> - <div className="mt-6 font-semibold">Update Options</div> - <SelectSmall - label="Calendar" - id="Calendar_UpdateFrequency" - value={Calendar_UpdateFrequency} - onChange={handleInputChange} - className="mt-4" - > - {renderUpdateFrequencyValues()} - </SelectSmall> - <SelectSmall - label="Anime Information" - id="Anime_UpdateFrequency" - value={Anime_UpdateFrequency} - onChange={handleInputChange} - > - {renderUpdateFrequencyValues()} - </SelectSmall> - <SelectSmall - label="Sync Mylist" - id="MyList_UpdateFrequency" - value={MyList_UpdateFrequency} - onChange={handleInputChange} - > - {renderUpdateFrequencyValues()} - </SelectSmall> - <SelectSmall - label="Get Mylist Stats" - id="MyListStats_UpdateFrequency" - value={MyListStats_UpdateFrequency} - onChange={handleInputChange} - > - {renderUpdateFrequencyValues()} - </SelectSmall> - <SelectSmall - label="Files With Missing Info" - id="File_UpdateFrequency" - value={File_UpdateFrequency} - onChange={handleInputChange} - > - {renderUpdateFrequencyValues()} - </SelectSmall> + <div className="font-semibold pb-4 border-b-2 border-panel-border">Update Options</div> + <div className="flex flex-col gap-y-2"> + <SelectSmall + label="Calendar" + id="Calendar_UpdateFrequency" + value={Calendar_UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + <SelectSmall + label="Anime Information" + id="Anime_UpdateFrequency" + value={Anime_UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + <SelectSmall + label="Sync Mylist" + id="MyList_UpdateFrequency" + value={MyList_UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + <SelectSmall + label="Get Mylist Stats" + id="MyListStats_UpdateFrequency" + value={MyListStats_UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + <SelectSmall + label="Files With Missing Info" + id="File_UpdateFrequency" + value={File_UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + </div> </TransitionDiv> ); } diff --git a/src/pages/firstrun/MetadataSourcesTabs/MovieDBTab.tsx b/src/pages/firstrun/MetadataSourcesTabs/MovieDBTab.tsx index 3b734e55c..011969f21 100644 --- a/src/pages/firstrun/MetadataSourcesTabs/MovieDBTab.tsx +++ b/src/pages/firstrun/MetadataSourcesTabs/MovieDBTab.tsx @@ -18,36 +18,45 @@ function MovieDBTab() { }; return ( - <TransitionDiv className="flex flex-col gap-y-2"> - <div className="font-semibold">Download Options</div> - <Checkbox - label="Fanart" - id="MovieDB_AutoFanart" - isChecked={AutoFanart} - onChange={handleInputChange} - justify - className="mt-4" - /> - <div className={cx('flex justify-between transition-opacity', !AutoFanart && 'pointer-events-none opacity-50')}> - Max Fanart - <InputSmall - id="MovieDB_AutoFanartAmount" - value={AutoFanartAmount} - type="text" + <TransitionDiv className="flex flex-col gap-y-8"> + <div className="font-semibold pb-4 border-b-2 border-panel-border">Download Options</div> + <div className="flex flex-col gap-y-2"> + <Checkbox + label="Fanart" + id="MovieDB_AutoFanart" + isChecked={AutoFanart} onChange={handleInputChange} - className="w-10 px-2 py-0.5" + justify /> - </div> - <Checkbox label="Posters" id="MovieDB_AutoPosters" isChecked={AutoPosters} onChange={handleInputChange} justify /> - <div className={cx('flex justify-between transition-opacity', !AutoPosters && 'pointer-events-none opacity-50')}> - Max Posters - <InputSmall - id="MovieDB_AutoPostersAmount" - value={AutoPostersAmount} - type="text" + <div className={cx('flex justify-between transition-opacity', !AutoFanart && 'pointer-events-none opacity-50')}> + Max Fanart + <InputSmall + id="MovieDB_AutoFanartAmount" + value={AutoFanartAmount} + type="text" + onChange={handleInputChange} + className="w-10 px-2 py-0.5" + /> + </div> + <Checkbox + label="Posters" + id="MovieDB_AutoPosters" + isChecked={AutoPosters} onChange={handleInputChange} - className="w-10 px-2 py-0.5" + justify /> + <div + className={cx('flex justify-between transition-opacity', !AutoPosters && 'pointer-events-none opacity-50')} + > + Max Posters + <InputSmall + id="MovieDB_AutoPostersAmount" + value={AutoPostersAmount} + type="text" + onChange={handleInputChange} + className="w-10 px-2 py-0.5" + /> + </div> </div> </TransitionDiv> ); diff --git a/src/pages/firstrun/MetadataSourcesTabs/TvDBTab.tsx b/src/pages/firstrun/MetadataSourcesTabs/TvDBTab.tsx index bcb3f79a8..900f328ab 100644 --- a/src/pages/firstrun/MetadataSourcesTabs/TvDBTab.tsx +++ b/src/pages/firstrun/MetadataSourcesTabs/TvDBTab.tsx @@ -41,86 +41,93 @@ function TvDBTab() { ); return ( - <TransitionDiv className="flex flex-col gap-y-2"> - <div className="font-semibold">Download Options</div> - <Checkbox - label="Fanart" - id="TvDB_AutoFanart" - isChecked={AutoFanart} - onChange={handleInputChange} - justify - className="mt-4" - /> - <div className={cx('flex justify-between transition-opacity', !AutoFanart && 'pointer-events-none opacity-50')}> - Max Fanart - <InputSmall - id="TvDB_AutoFanartAmount" - value={AutoFanartAmount} - type="text" + <TransitionDiv className="flex flex-col gap-y-8"> + <div className="border-b-2 border-panel-border pb-4 font-semibold">Download Options</div> + <div className="flex flex-col gap-y-2"> + <Checkbox + label="Fanart" + id="TvDB_AutoFanart" + isChecked={AutoFanart} onChange={handleInputChange} - className="w-10 px-2 py-0.5" + justify /> - </div> - <Checkbox - label="Posters" - id="TvDB_AutoPosters" - isChecked={AutoPosters} - onChange={handleInputChange} - justify - className="mt-1" - /> - <div className={cx('flex justify-between transition-opacity', !AutoPosters && 'pointer-events-none opacity-50')}> - Max Posters - <InputSmall - id="TvDB_AutoPostersAmount" - value={AutoPostersAmount} - type="text" + <div className={cx('flex justify-between transition-opacity', !AutoFanart && 'pointer-events-none opacity-50')}> + Max Fanart + <InputSmall + id="TvDB_AutoFanartAmount" + value={AutoFanartAmount} + type="text" + onChange={handleInputChange} + className="w-10 px-2 py-0.5" + /> + </div> + <Checkbox + label="Posters" + id="TvDB_AutoPosters" + isChecked={AutoPosters} onChange={handleInputChange} - className="w-10 px-2 py-0.5" + justify + className="mt-1" /> - </div> - <Checkbox - label="Wide Banners" - id="TvDB_AutoWideBanners" - isChecked={AutoWideBanners} - onChange={handleInputChange} - justify - /> - <div - className={cx('flex justify-between transition-opacity', !AutoWideBanners && 'pointer-events-none opacity-50')} - > - Max Wide Banners - <InputSmall - id="TvDB_AutoWideBannersAmount" - value={AutoWideBannersAmount} - type="text" + <div + className={cx('flex justify-between transition-opacity', !AutoPosters && 'pointer-events-none opacity-50')} + > + Max Posters + <InputSmall + id="TvDB_AutoPostersAmount" + value={AutoPostersAmount} + type="text" + onChange={handleInputChange} + className="w-10 px-2 py-0.5" + /> + </div> + <Checkbox + label="Wide Banners" + id="TvDB_AutoWideBanners" + isChecked={AutoWideBanners} onChange={handleInputChange} - className="w-10 px-2 py-0.5" + justify /> + <div + className={cx( + 'flex justify-between transition-opacity', + !AutoWideBanners && 'pointer-events-none opacity-50', + )} + > + Max Wide Banners + <InputSmall + id="TvDB_AutoWideBannersAmount" + value={AutoWideBannersAmount} + type="text" + onChange={handleInputChange} + className="w-10 px-2 py-0.5" + /> + </div> </div> - <div className="mt-6 font-semibold">Preferences</div> - <Checkbox - label="Auto Link" - id="TvDB_AutoLink" - isChecked={AutoLink} - onChange={handleInputChange} - justify - className="mt-4" - /> - <SelectSmall label="Language" id="TvDB_Language" value={Language} onChange={handleInputChange}> - {tvdbLanguages.map( - item => <option value={item[0]} key={item[0]}>{item[1]}</option>, - )} - </SelectSmall> - <SelectSmall - label="Automatically Update Stats" - id="UpdateFrequency" - value={UpdateFrequency} - onChange={handleInputChange} - > - {renderUpdateFrequencyValues()} - </SelectSmall> + <div className="border-b-2 border-panel-border pb-4 font-semibold">Preferences</div> + <div className="flex flex-col gap-y-2"> + <Checkbox + label="Auto Link" + id="TvDB_AutoLink" + isChecked={AutoLink} + onChange={handleInputChange} + justify + /> + <SelectSmall label="Language" id="TvDB_Language" value={Language} onChange={handleInputChange}> + {tvdbLanguages.map( + item => <option value={item[0]} key={item[0]}>{item[1]}</option>, + )} + </SelectSmall> + <SelectSmall + label="Automatically Update Stats" + id="UpdateFrequency" + value={UpdateFrequency} + onChange={handleInputChange} + > + {renderUpdateFrequencyValues()} + </SelectSmall> + </div> </TransitionDiv> ); } diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx index 74023b7a5..43a2c0cb3 100644 --- a/src/pages/login/LoginPage.tsx +++ b/src/pages/login/LoginPage.tsx @@ -80,7 +80,7 @@ function LoginPage() { const parsedVersion = useMemo(() => { if (version.isFetching || !version.data) { - return <Icon path={mdiLoading} spin size={1} className="ml-2 text-panel-primary" />; + return <Icon path={mdiLoading} spin size={1} className="ml-2 text-panel-text-primary" />; } if (version.data.Server.ReleaseChannel !== 'Stable') { @@ -125,12 +125,12 @@ function LoginPage() { <div className="flex w-full flex-col gap-y-4"> {!status.data?.State && ( <div className="flex items-center justify-center"> - <Icon path={mdiLoading} spin className="text-panel-primary" size={4} /> + <Icon path={mdiLoading} spin className="text-panel-text-primary" size={4} /> </div> )} {status.data?.State === 1 && ( <div className="flex flex-col items-center justify-center gap-y-2"> - <Icon path={mdiLoading} spin className="text-panel-primary" size={4} /> + <Icon path={mdiLoading} spin className="text-panel-text-primary" size={4} /> <div className="mt-2 text-xl font-semibold">Server is starting. Please wait!</div> <div className="text-lg"> <span className="font-semibold">Status:</span> @@ -178,7 +178,7 @@ function LoginPage() { )} {status.data?.State === 3 && ( <div className="flex max-h-[20rem] flex-col items-center justify-center gap-y-2 pb-2"> - <Icon path={mdiCloseCircleOutline} className="shrink-0 text-panel-warning" size={4} /> + <Icon path={mdiCloseCircleOutline} className="shrink-0 text-panel-text-warning" size={4} /> <div className="mt-2 text-xl font-semibold">Server startup failed!</div> Check the error message below <div className="overflow-y-auto break-all text-lg font-semibold"> @@ -193,13 +193,13 @@ function LoginPage() { <div className="text-justify"> Before Shoko can start managing your anime collection for you, you'll need to go through our  - <span className="font-bold text-panel-important">First Run Wizard</span> + <span className="font-bold text-panel-text-important">First Run Wizard</span>  to set everything up. Don't worry, its extremely easy, straightforward and should only take you a couple minutes. </div> <div> Click  - <span className="font-semibold text-panel-important">Continue</span> + <span className="font-semibold text-panel-text-important">Continue</span>  below to proceed. </div> </div> diff --git a/src/pages/logs/LogsPage.tsx b/src/pages/logs/LogsPage.tsx index 47133e829..b2bed4fa4 100644 --- a/src/pages/logs/LogsPage.tsx +++ b/src/pages/logs/LogsPage.tsx @@ -54,7 +54,7 @@ const LogsPage = () => { {/* TODO: To be moved into settings modal */} <Button buttonType="secondary" - className={cx('px-5 py-2', isScrollToBottom ? 'text-panel-primary' : '!text-panel-text')} + className={cx('px-5 py-2', isScrollToBottom ? 'text-panel-text-primary' : '!text-panel-text')} onClick={() => setScrollToBottom(prev => !prev)} > <Icon path={mdiArrowVerticalLock} size={1} /> @@ -63,12 +63,12 @@ const LogsPage = () => { </div> <div className="flex grow rounded-md border border-panel-border bg-panel-background p-8"> - <div className="w-full rounded-md border border-panel-border bg-panel-background-alt py-4 pr-4"> - <div className="relative h-full grow overflow-y-auto bg-panel-background-alt" ref={parentRef}> + <div className="w-full rounded-md border border-panel-border bg-panel-input py-4 pr-4"> + <div className="relative h-full grow overflow-y-auto bg-panel-input" ref={parentRef}> {(logsQuery.isLoading || logLines.length === 0) ? ( <div className="flex h-full grow items-center justify-center"> - <Icon path={mdiLoading} size={4} className="text-panel-primary" spin /> + <Icon path={mdiLoading} size={4} className="text-panel-text-primary" spin /> </div> ) : ( diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx index ab852b340..be346151d 100644 --- a/src/pages/settings/SettingsPage.tsx +++ b/src/pages/settings/SettingsPage.tsx @@ -578,7 +578,7 @@ function SettingsPage() { {items.map(item => ( <NavLink to={item.path} - className={({ isActive }) => (isActive ? 'text-panel-primary' : '')} + className={({ isActive }) => (isActive ? 'text-panel-text-primary' : '')} key={item.path} > {item.name} @@ -591,7 +591,7 @@ function SettingsPage() { {/* <div className="flex justify-center mb-8 font-semibold"> */} {/* Settings */} {/* <Icon path={mdiChevronRight} size={1} className="mx-1" /> */} - {/* <div className="flex text-panel-primary rounded pl-2 border border-panel-primary items-center cursor-pointer" onClick={(e) => { e.stopPropagation(); setShowNav(!showNav); }}> */} + {/* <div className="flex text-panel-text-primary rounded pl-2 border border-panel-text-primary items-center cursor-pointer" onClick={(e) => { e.stopPropagation(); setShowNav(!showNav); }}> */} {/* {find(items, item => item.path === pathname.split('/').pop())?.name} */} {/* <Icon path={mdiChevronDown} size={1} /> */} {/* </div> */} @@ -600,7 +600,7 @@ function SettingsPage() { <div className="flex min-h-full w-[37.5rem] flex-col gap-y-8 overflow-y-visible rounded-md border border-panel-border bg-panel-background-transparent p-8"> {settingsQuery.isLoading ? ( - <div className="flex grow items-center justify-center text-panel-primary"> + <div className="flex grow items-center justify-center text-panel-text-primary"> <Icon path={mdiLoading} spin size={5} /> </div> ) @@ -630,7 +630,7 @@ function SettingsPage() { unsavedChanges ? 'opacity-100' : 'opacity-0', )} > - <Icon path={mdiInformationOutline} size={1} className="text-panel-primary" /> + <Icon path={mdiInformationOutline} size={1} className="text-panel-text-primary" /> Whoa! You Have Unsaved Changes! </div> <div diff --git a/src/pages/settings/tabs/AniDBSettings.tsx b/src/pages/settings/tabs/AniDBSettings.tsx index c7d72bc35..b8cdb8a2a 100644 --- a/src/pages/settings/tabs/AniDBSettings.tsx +++ b/src/pages/settings/tabs/AniDBSettings.tsx @@ -359,10 +359,10 @@ function AniDBSettings() { <div className="flex justify-between"> Series Title (Drag to Reorder) <Button onClick={() => setShowLanguagesModal('Series')} tooltip="Add Language"> - <Icon className="text-panel-primary" path={mdiPlusCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} /> </Button> </div> - <div className="flex rounded-md border border-panel-border bg-panel-background-alt p-4"> + <div className="flex rounded-md border border-panel-border bg-panel-input p-4"> <DnDList onDragEnd={result => onDragEnd(result)}> {newSettings.LanguagePreference.map(language => ( { @@ -371,7 +371,7 @@ function AniDBSettings() { <div className="mt-2.5 flex items-center justify-between group-first:mt-0"> {languageDescription[language]} <Button onClick={() => removeLanguage(language)} tooltip="Remove"> - <Icon className="text-panel-primary" path={mdiMinusCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiMinusCircleOutline} size={1} /> </Button> </div> ), @@ -382,10 +382,10 @@ function AniDBSettings() { <div className="flex justify-between"> Episode Title (Drag to Reorder) <Button onClick={() => setShowLanguagesModal('Episode')} tooltip="Add Language"> - <Icon className="text-panel-primary" path={mdiPlusCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} /> </Button> </div> - <div className="flex rounded-md border border-panel-border bg-panel-background-alt p-4"> + <div className="flex rounded-md border border-panel-border bg-panel-input p-4"> <DnDList onDragEnd={result => onDragEnd(result, true)}> {newSettings.EpisodeLanguagePreference.map(language => ( { @@ -394,7 +394,7 @@ function AniDBSettings() { <div className="mt-2.5 flex items-center justify-between group-first:mt-0"> {languageDescription[language]} <Button onClick={() => removeLanguage(language, true)} tooltip="Remove"> - <Icon className="text-panel-primary" path={mdiMinusCircleOutline} size={1} /> + <Icon className="text-panel-text-primary" path={mdiMinusCircleOutline} size={1} /> </Button> </div> ), diff --git a/src/pages/settings/tabs/GeneralSettings.tsx b/src/pages/settings/tabs/GeneralSettings.tsx index 4d53cbeb9..ae19b5f8f 100644 --- a/src/pages/settings/tabs/GeneralSettings.tsx +++ b/src/pages/settings/tabs/GeneralSettings.tsx @@ -118,7 +118,12 @@ function GeneralSettings() { onClick={() => webuiUpdateCheck({ channel: newSettings.WebUI_Settings.updateChannel, force: true })} tooltip="Check for WebUI Update" > - <Icon path={mdiRefresh} size={1} className="text-panel-primary" spin={webuiUpdateCheckResult.isFetching} /> + <Icon + path={mdiRefresh} + size={1} + className="text-panel-text-primary" + spin={webuiUpdateCheckResult.isFetching} + /> </Button> </div> <div className="flex flex-col gap-y-2"> @@ -127,7 +132,7 @@ function GeneralSettings() { <div className="flex gap-2"> {version.data?.Server.Version} <a - className="text-panel-primary" + className="text-panel-text-primary" target="_blank" href={`https://github.com/ShokoAnime/ShokoServer/compare/${ version.data?.Server.Commit?.slice(0, 7) @@ -136,7 +141,7 @@ function GeneralSettings() { > {`(${version.data?.Server.Commit?.slice(0, 7)})`} </a> - <Icon className="text-panel-primary" path={mdiOpenInNew} size={1} /> + <Icon className="text-panel-text-primary" path={mdiOpenInNew} size={1} /> </div> </div> <div className="flex justify-between"> @@ -148,14 +153,14 @@ function GeneralSettings() { <div className="flex gap-2"> {version.data?.WebUI?.Version} <a - className="text-panel-primary" + className="text-panel-text-primary" target="_blank" href={`https://github.com/ShokoAnime/Shoko-WebUI/compare/${UI_VERSION}...master`} rel="noreferrer" > {`(${UI_VERSION})`} </a> - <Icon className="text-panel-primary" path={mdiOpenInNew} size={1} /> + <Icon className="text-panel-text-primary" path={mdiOpenInNew} size={1} /> </div> </div> <div className="flex items-center justify-between"> @@ -306,7 +311,7 @@ function GeneralSettings() { setNewSettings({ ...newSettings, AutoGroupSeriesUseScoreAlgorithm: event.target.checked })} /> Exclude following relations - <div className="flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-background-alt p-4"> + <div className="flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-input p-4"> {Object.keys(exclusionMapping).map(item => ( <Checkbox justify diff --git a/src/pages/settings/tabs/MetadataSitesSettings.tsx b/src/pages/settings/tabs/MetadataSitesSettings.tsx index 6a9aa8245..8f5e09b58 100644 --- a/src/pages/settings/tabs/MetadataSitesSettings.tsx +++ b/src/pages/settings/tabs/MetadataSitesSettings.tsx @@ -227,7 +227,7 @@ function MetadataSitesSettings() { href={traktCodeResult?.data?.url} rel="noopener noreferrer" target="_blank" - className="text-panel-important hover:underline" + className="text-panel-text-important hover:underline" > Click here to activate </a> @@ -246,7 +246,7 @@ function MetadataSitesSettings() { undefined, { autoClose: 10000 }, ), () => {})} - className="bg-panel-primary px-2 py-1 font-semibold " + className="bg-panel-text-primary px-2 py-1 font-semibold " > {traktCodeResult.isFetching ? 'Requesting...' : 'Get Code'} </Button> diff --git a/src/pages/settings/tabs/UserManagementSettings.tsx b/src/pages/settings/tabs/UserManagementSettings.tsx index 3ddd0b250..f8939227f 100644 --- a/src/pages/settings/tabs/UserManagementSettings.tsx +++ b/src/pages/settings/tabs/UserManagementSettings.tsx @@ -248,10 +248,10 @@ function UserManagementSettings() { <div>{user.Username}</div> <div className="flex gap-x-2"> <div onClick={() => setSelectedUser(user)}> - <Icon path={mdiCircleEditOutline} size={1} className="cursor-pointer text-panel-primary" /> + <Icon path={mdiCircleEditOutline} size={1} className="cursor-pointer text-panel-text-primary" /> </div> <div onClick={() => deleteSelectedUser(user)}> - <Icon path={mdiMinusCircleOutline} size={1} className="cursor-pointer text-panel-danger" /> + <Icon path={mdiMinusCircleOutline} size={1} className="cursor-pointer text-panel-text-danger" /> </div> </div> </div> @@ -375,11 +375,11 @@ function UserManagementSettings() { onChange={event => setTagSearch(event.target.value)} /> <div className="flex flex-row"> - <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-background-alt p-4 capitalize"> - <div className="h-64 overflow-y-auto bg-panel-background-alt"> + <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize"> + <div className="h-64 overflow-y-auto bg-panel-input"> {tags.data?.filter(tag => tag.Name.includes(tagSearch)).map(tag => ( <div - className="mt-2 cursor-pointer first:mt-0 hover:text-panel-primary" + className="mt-2 cursor-pointer first:mt-0" key={`tagData-${tag.ID}`} onClick={() => handleTagChange(tag.ID, true)} > @@ -391,7 +391,7 @@ function UserManagementSettings() { </div> <div className="border-b border-panel-border pb-8"> <div className="my-4 font-semibold">Selected Tags</div> - <div className="flex min-h-[8rem] flex-col rounded-md border border-panel-border bg-panel-background-alt p-4"> + <div className="flex min-h-[8rem] flex-col rounded-md border border-panel-border bg-panel-input p-4"> {selectedUser.RestrictedTags?.length ? selectedUser.RestrictedTags?.map(tag => ( <div className="mt-2 flex justify-between capitalize first:mt-0" key={`selectedTag-${tag}`}> @@ -403,7 +403,7 @@ function UserManagementSettings() { onClick={() => handleTagChange(tag, false)} > - <Icon path={mdiMinusCircleOutline} size={1} className="text-panel-danger" /> + <Icon path={mdiMinusCircleOutline} size={1} className="text-panel-text-danger" /> </Button> </div> )) diff --git a/src/pages/utilities/SeriesWithoutFilesUtility.tsx b/src/pages/utilities/SeriesWithoutFilesUtility.tsx index 553aa594f..39a4f2b33 100644 --- a/src/pages/utilities/SeriesWithoutFilesUtility.tsx +++ b/src/pages/utilities/SeriesWithoutFilesUtility.tsx @@ -34,7 +34,7 @@ const columns = [ {info.getValue()} <span onClick={() => window.open(`https://anidb.net/anime/${info.getValue()}`, '_blank')} - className="mr-6 cursor-pointer text-panel-primary" + className="mr-6 cursor-pointer text-panel-text-primary" > <Icon path={mdiOpenInNew} size={1} /> </span> @@ -110,7 +110,7 @@ function SeriesWithoutFilesUtility() { highlight = false, ) => ( <Button onClick={onClick} className="flex items-center gap-x-2 font-normal text-panel-text"> - <Icon path={icon} size={1} className={cx({ 'text-panel-primary': highlight })} /> + <Icon path={icon} size={1} className={cx({ 'text-panel-text-primary': highlight })} /> {name} </Button> ); @@ -135,7 +135,7 @@ function SeriesWithoutFilesUtility() { const renderPanelOptions = () => ( <div className="flex font-semibold"> - <span className="text-panel-important">{series.Total}</span> + <span className="text-panel-text-important">{series.Total}</span>  Empty Series </div> ); @@ -154,9 +154,9 @@ function SeriesWithoutFilesUtility() { onChange={e => setColumnFilters([{ id: 'filename', value: e.target.value }])} inputClassName="px-4 py-3" /> - <div className="relative box-border flex grow items-center gap-x-4 rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="relative box-border flex grow items-center gap-x-4 rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> {renderOperations(table.getSelectedRowModel().rows.length === 0)} - <div className="ml-auto font-semibold text-panel-important"> + <div className="ml-auto font-semibold text-panel-text-important"> {table.getSelectedRowModel().rows.length} <span className="text-panel-text">Series Selected</span> </div> diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx index 01abe4519..88270f7bb 100644 --- a/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx +++ b/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx @@ -107,9 +107,9 @@ function IgnoredFilesTab() { onChange={e => setSearch(e.target.value)} inputClassName="px-4 py-3" /> - <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> <Menu table={table} files={files} refetch={() => filesQuery.refetch()} /> - <span className="ml-auto text-panel-important"> + <span className="ml-auto text-panel-text-important"> {selectedRows.length}   </span> @@ -121,7 +121,7 @@ function IgnoredFilesTab() { <TransitionDiv className="flex grow overflow-y-auto rounded-md border border-panel-border bg-panel-background p-8"> {filesQuery.isLoading && ( - <div className="flex grow items-center justify-center text-panel-primary"> + <div className="flex grow items-center justify-center text-panel-text-primary"> <Icon path={mdiLoading} size={4} spin /> </div> )} diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx index 7a11bdb15..f27d188cb 100644 --- a/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx +++ b/src/pages/utilities/UnrecognizedUtilityTabs/LinkFilesTab.tsx @@ -124,9 +124,13 @@ const AnimeResultRow = ( }); return ( - <div key={data.ID} onClick={handleOnClick} className="flex cursor-pointer gap-x-2 gap-y-1"> + <div + key={data.ID} + onClick={handleOnClick} + className="flex cursor-pointer gap-x-2 gap-y-1 hover:text-panel-text-primary" + > <a - className="flex w-20 shrink-0 font-semibold text-panel-primary" + className="flex w-20 shrink-0 font-semibold text-panel-text-primary" href={`https://anidb.net/anime/${data.ID}`} target="_blank" rel="noopener noreferrer" @@ -155,7 +159,7 @@ const AnimeSelectPanel = ( const debouncedSearch = useMemo(() => debounce((query: string) => { - searchTrigger({ query, pageSize: 20 }).catch(() => {}); + searchTrigger({ query, pageSize: 40 }).catch(() => {}); }, 200), [searchTrigger]); const searchRows = useMemo(() => { @@ -166,7 +170,7 @@ const AnimeSelectPanel = ( }); } else { rows.push( - <div key="loading" className="flex grow items-center justify-center text-panel-primary"> + <div key="loading" className="flex grow items-center justify-center text-panel-text-primary"> <Icon path={mdiLoading} size={4} spin /> </div>, ); @@ -200,7 +204,7 @@ const AnimeSelectPanel = ( inputClassName="!p-4" startIcon={mdiMagnify} /> - <div className="flex h-full flex-col overflow-y-auto rounded-md border border-panel-border bg-panel-background-alt p-4"> + <div className="flex flex-col overflow-y-auto rounded-md border border-panel-border bg-panel-input p-4"> {searchRows} </div> </div> @@ -570,8 +574,8 @@ function LinkFilesTab() { <div title={path} className={cx([ - 'p-4 w-full odd:bg-panel-background-toolbar even:bg-panel-background border border-panel-border rounded-md leading-5', - selectedLink === idx && 'border-panel-primary', + 'p-4 w-full odd:bg-panel-background-alt even:bg-panel-background border border-panel-border rounded-md leading-5', + selectedLink === idx && 'border-panel-text-primary', ])} key={`${link.FileID}-${link.EpisodeID}-${idx}-static`} onClick={() => updateSelectedLink(idx)} @@ -591,15 +595,15 @@ function LinkFilesTab() { title={path} className={cx([ 'flex items-center p-4 w-full border border-panel-border rounded-md col-start-1 cursor-pointer transition-colors leading-5', - idx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-toolbar', - selectedLink === idx && 'border-panel-primary', + idx % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt', + selectedLink === idx && 'border-panel-text-primary', ])} key={`${link.FileID}-${link.EpisodeID}-${idx}`} data-file-id={link.FileID} onClick={() => updateSelectedLink(idx)} > {path} - {isSameFile && <Icon path={mdiLink} size={1} className="ml-auto text-panel-important" />} + {isSameFile && <Icon path={mdiLink} size={1} className="ml-auto text-panel-text-important" />} </div>, ); if (episodes.length > 0) { @@ -631,7 +635,7 @@ function LinkFilesTab() { <div> <ShokoPanel title={<Title />} options={<ItemCount filesCount={selectedRows.length} />}> <div className="flex items-center gap-x-3"> - <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> <div className="flex grow gap-x-4"> <MenuButton onClick={duplicateLink} @@ -680,15 +684,15 @@ function LinkFilesTab() { selectedSeries?.ID ? 'w-full grid-cols-2' : 'w-1/2 grid-cols-1', )} > - <div className="flex justify-between rounded-md border border-panel-border bg-panel-background-toolbar p-4 font-semibold"> + <div className="flex justify-between rounded-md border border-panel-border bg-panel-background-alt p-4 font-semibold"> Selected Files <Icon size={1} path={mdiSortAlphabeticalAscending} /> </div> {selectedSeries?.ID && ( - <div className="flex rounded-md border border-panel-border bg-panel-background-toolbar p-4 font-semibold"> + <div className="flex rounded-md border border-panel-border bg-panel-background-alt p-4 font-semibold"> AniDB |  <a - className="flex cursor-pointer font-semibold text-panel-primary" + className="flex cursor-pointer font-semibold text-panel-text-primary" href={`https://anidb.net/anime/${selectedSeries.ID}`} target="_blank" rel="noopener noreferrer" @@ -698,7 +702,7 @@ function LinkFilesTab() { {selectedSeries.Title} <Icon path={mdiOpenInNew} size={1} className="ml-3" /> </a> - <Button onClick={editSelectedSeries} className="ml-auto text-panel-primary" disabled={isLinking}> + <Button onClick={editSelectedSeries} className="ml-auto text-panel-text-primary" disabled={isLinking}> <Icon path={mdiPencilCircleOutline} size={1} /> </Button> </div> diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx index 291f30f23..8cb7cfaf1 100644 --- a/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx +++ b/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx @@ -82,7 +82,7 @@ const SeriesRow = ( href={`https://anidb.net/anime/${row.IDs.AniDB}`} rel="noopener noreferrer" target="_blank" - className="flex w-24 gap-x-2 font-semibold text-panel-primary" + className="flex w-24 gap-x-2 font-semibold text-panel-text-primary" onClick={e => e.stopPropagation()} > {row.IDs.AniDB} @@ -145,7 +145,7 @@ const Menu = ( }; return ( - <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> <MenuButton onClick={refreshData} icon={mdiRefresh} name="Refresh" /> <TransitionDiv className="ml-4 flex grow gap-x-4" show={Object.keys(selectedFiles).length !== 0}> <MenuButton onClick={rescanFiles} icon={mdiDatabaseSearchOutline} name="Rescan" /> @@ -156,7 +156,7 @@ const Menu = ( highlight /> </TransitionDiv> - <span className="ml-auto text-panel-important"> + <span className="ml-auto text-panel-text-important"> {Object.keys(selectedFiles).length}   </span> @@ -251,12 +251,12 @@ function ManuallyLinkedTab() { <div className="flex grow overflow-y-auto rounded-md border border-panel-border bg-panel-background p-8"> {seriesQuery.isFetching && ( <div className="flex grow items-center justify-center"> - <Icon path={mdiLoading} size={4} className="text-panel-primary" spin /> + <Icon path={mdiLoading} size={4} className="text-panel-text-primary" spin /> </div> )} {!seriesQuery.isFetching && series.Total > 0 && ( <div className="flex w-full flex-col overflow-y-auto"> - <div className="sticky top-0 z-[1] flex rounded-md border border-panel-border bg-panel-background-toolbar px-6 py-4 font-semibold"> + <div className="sticky top-0 z-[1] flex rounded-md border border-panel-border bg-panel-background-alt px-6 py-4 font-semibold"> <div className="grow">Series</div> <div className="w-24">AniDB ID</div> <div className="w-32">Link Count</div> diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx index ff713879c..c2e1c3bd6 100644 --- a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx +++ b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx @@ -147,7 +147,7 @@ const Menu = ( }); return ( - <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-toolbar px-4 py-3"> + <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3"> <TransitionDiv className="absolute flex grow gap-x-4" show={selectedRows.length === 0}> <MenuButton onClick={() => { @@ -178,7 +178,7 @@ const Menu = ( highlight /> </TransitionDiv> - <span className="ml-auto font-semibold text-panel-important"> + <span className="ml-auto font-semibold text-panel-text-important"> {selectedRows.length}   </span> @@ -288,7 +288,7 @@ function UnrecognizedTab() { refetch={() => filesQuery.refetch()} setSeriesSelectModal={setSeriesSelectModal} /> - <TransitionDiv show={selectedRows.length !== 0} className="flex gap-x-3"> + <TransitionDiv show={selectedRows.length !== 0} className="flex h-[50px] gap-x-3"> <Button buttonType="primary" className="flex gap-x-2.5 px-4 py-3 font-semibold" @@ -304,7 +304,7 @@ function UnrecognizedTab() { disabled={dumpInProgress} > <Icon path={mdiDumpTruck} size={0.8333} /> - {isAvdumpFinished && 'Finish AVDump'} + {isAvdumpFinished && !dumpInProgress && 'Finish AVDump'} {!isAvdumpFinished && dumpInProgress && 'Dumping Files...'} {!isAvdumpFinished && !dumpInProgress && 'AVDump Files'} </Button> @@ -315,7 +315,7 @@ function UnrecognizedTab() { <TransitionDiv className="flex grow overflow-y-auto rounded-md border border-panel-border bg-panel-background p-8"> {filesQuery.isLoading && ( - <div className="flex grow items-center justify-center text-panel-primary"> + <div className="flex grow items-center justify-center text-panel-text-primary"> <Icon path={mdiLoading} size={4} spin /> </div> )} diff --git a/tailwind.config.js b/tailwind.config.js index 06fd9e323..ebfd397d9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,15 +11,8 @@ module.exports = { ], //Any class that is generated dynamically goes here safelist: [ - 'bg-panel-extra', - 'bg-panel-danger', - 'bg-panel-warning', - 'text-panel-extra', - 'text-toast-danger', - 'text-toast-important', - 'text-toast-primary', - 'text-toast-primary-hover', - 'text-toast-warning', + 'bg-panel-text-other', + 'text-panel-text-other', ], theme: { transitionDuration: { @@ -40,65 +33,55 @@ module.exports = { black: 800 }, colors: { - 'button-primary': 'var(--color-button-primary)', - 'button-primary-hover': 'var(--color-button-primary-hover)', - 'button-secondary': 'var(--color-button-secondary)', - 'button-secondary-hover': 'var(--color-button-secondary-hover)', - 'button-danger': 'var(--color-button-danger)', - 'button-danger-hover': 'var(--color-button-danger-hover)', - 'button-text': 'var(--color-button-text)', - 'button-text-alt': 'var(--color-button-text-alt)', - 'default-background': 'var(--color-default-background)', - 'default-background-input': 'var(--color-default-background-input)', - 'header-background': 'var(--color-header-background)', - 'header-background-alt': 'var(--color-header-background-alt)', - 'header-border': 'var(--color-header-border)', - 'header-border-alt': 'var(--color-header-border-alt)', - 'header-text': 'var(--color-header-text)', - 'header-text-alt': 'var(--color-header-text-alt)', - 'header-primary': 'var(--color-header-primary)', - 'header-primary-hover': 'var(--color-header-primary-hover)', - 'header-important': 'var(--color-header-important)', - 'header-danger': 'var(--color-header-danger)', - 'header-warning': 'var(--color-header-warning)', - 'header-purple': 'var(--color-header-purple)', - 'logo-background': 'var(--color-logo-background)', - 'logo-primary': 'var(--color-logo-primary)', - 'overlay-background': 'var(--color-overlay-background)', - 'overlay-border': 'var(--color-overlay-border)', - 'overlay-count-episode': 'var(--color-overlay-count-episode)', - 'overlay-count-group': 'var(--color-overlay-count-group)', - 'overlay-count-text': 'var(--color-overlay-count-text)', - 'overlay-icon': 'var(--color-overlay-icon)', - 'overlay-icon-hover': 'var(--color-overlay-icon-hover)', - 'panel-background': 'var(--color-panel-background)', - 'panel-background-alt': 'var(--color-panel-background-alt)', - 'panel-background-toolbar': 'var(--color-panel-background-toolbar)', - 'panel-background-transparent': 'var(--color-panel-background-transparent)', - 'panel-background-overlay': 'var(--color-panel-background-overlay)', - 'panel-border': 'var(--color-panel-border)', - 'panel-border-alt': 'var(--color-panel-border-alt)', - 'panel-text': 'var(--color-panel-text)', - 'panel-text-alt': 'var(--color-panel-text-alt)', - 'panel-text-transparent': 'var(--color-panel-text-transparent)', - 'panel-primary': 'var(--color-panel-primary)', - 'panel-primary-hover': 'var(--color-panel-primary-hover)', - 'panel-important': 'var(--color-panel-important)', - 'panel-danger': 'var(--color-panel-danger)', - 'panel-warning': 'var(--color-panel-warning)', - 'panel-extra': 'var(--color-panel-extra)', - 'slider-background': 'var(--color-slider-background)', - 'slider-background-alt': 'var(--color-slider-background-alt)', - 'slider-thumb': 'var(--color-slider-thumb)', - 'slider-thumb-alt': 'var(--color-slider-thumb-alt)', - 'toast-background': 'var(--color-toast-background)', - 'toast-border': 'var(--color-toast-border)', - 'toast-text': 'var(--color-toast-text)', - 'toast-primary': 'var(--color-toast-primary)', - 'toast-primary-hover': 'var(--color-toast-primary-hover)', - 'toast-important': 'var(--color-toast-important)', - 'toast-danger': 'var(--color-toast-danger)', - 'toast-warning': 'var(--color-toast-warning)', + 'button-danger': 'var(--button-danger)', + 'button-danger-border': 'var(--button-danger-border)', + 'button-danger-hover': 'var(--button-danger-hover)', + 'button-danger-text': 'var(--button-danger-text)', + 'button-primary': 'var(--button-primary)', + 'button-primary-border': 'var(--button-primary-border)', + 'button-primary-hover': 'var(--button-primary-hover)', + 'button-primary-text': 'var(--button-primary-text)', + 'button-secondary': 'var(--button-secondary)', + 'button-secondary-border': 'var(--button-secondary-border)', + 'button-secondary-hover': 'var(--button-secondary-hover)', + 'button-secondary-text': 'var(--button-secondary-text)', + 'header-background': 'var(--header-background)', + 'header-icon': 'var(--header-icon)', + 'header-text': 'var(--header-text)', + 'header-text-primary': 'var(--header-text-primary)', + 'header-text-important': 'var(--header-text-important)', + 'header-user-background': 'var(--header-user-background)', + 'header-user-text': 'var(--header-user-text)', + 'logo-primary': 'var(--logo-primary)', + 'logo-secondary': 'var(--logo-secondary)', + 'panel-background': 'var(--panel-background)', + 'panel-background-alt': 'var(--panel-background-alt)', + 'panel-background-overlay': 'var(--panel-background-overlay)', + 'panel-background-transparent': 'var(--panel-background-transparent)', + 'panel-border': 'var(--panel-border)', + 'panel-icon': 'var(--panel-icon)', + 'panel-icon-action': 'var(--panel-icon-action)', + 'panel-icon-danger': 'var(--panel-icon-remove)', + 'panel-icon-important': 'var(--panel-icon-important)', + 'panel-icon-warning': 'var(--panel-icon-warning)', + 'panel-input': 'var(--panel-input)', + 'panel-tags': 'var(--panel-tags)', + 'panel-text': 'var(--panel-text)', + 'panel-text-danger': 'var(--panel-text-danger)', + 'panel-text-important': 'var(--panel-text-important)', + 'panel-text-other': 'var(--panel-text-other)', + 'panel-text-primary': 'var(--panel-text-primary)', + 'panel-text-warning': 'var(--panel-text-warning)', + 'slider-background': 'var(--slider-background)', + 'slider-background-alt': 'var(--slider-background-alt)', + 'slider-color': 'var(--slider-color)', + 'slider-color-alt': 'var(--slider-color-alt)', + 'topnav-background': 'var(--topnav-background)', + 'topnav-border': 'var(--topnav-border)', + 'topnav-icon-important': 'var(--topnav-icon-important)', + 'topnav-icon-primary': 'var(--topnav-icon-primary)', + 'topnav-icon-warning': 'var(--topnav-icon-warning)', + 'topnav-text': 'var(--topnav-text)', transparent: 'transparent', }, spacing: {