Add svg logo

css/common.scss

@@ -18,7 +18,7 @@ $button-unselected: #8F9290;
 
 
 $background-color-1: #1F2531;
-$background-color-2: #282C38;
+$background-color-2: #171C28;
 $background-color-3: #151B29;
 $background-color-4: #1B202B;
 

postcss.config.js

@@ -35,7 +35,7 @@ module.exports = {
         extend: {
           spacing: {
             '15': '3.75rem',
-            '65.5':'15.625rem',
+            '62.5':'15.625rem',
           },
         },
       },

src/components/Layout/Sidebar.tsx

@@ -48,9 +48,9 @@ function Sidebar() {
   );
 
   return (
-    <div className="flex flex-col flex-grow items-center h-screen bg-background-nav overflow-y-auto w-65.5 box-border font-semibold drop-shadow-[4px_0_4px_rgba(0,0,0,0.25)]">
+    <div className="flex flex-col flex-grow items-center h-screen bg-background-nav overflow-y-auto w-62.5 box-border font-semibold drop-shadow-[4px_0_4px_rgba(0,0,0,0.25)]">
       <div className="flex flex-col p-10">
-        <img src="logo.png" alt="logo" className="w-20" />
+        <img src="logo.svg" alt="logo" className="w-20" />
       </div>
       <div className="flex cursor-pointer items-center justify-center bg-background-alt w-full py-4">
         <div className="flex cursor-pointer items-center justify-center user-icon w-15 h-15 text-xl rounded-full" onClick={() => dispatch(setStatus(true))}>

src/components/Panels/ShokoPanel.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type Props = {
+  title: string;
+  children: any;
+  options?: any;
+  className?: string;
+  isFetching?: boolean;
+};
+
+const ShokoPanel = ({ className, title, options, children }: Props) => (
+    <div className={`${className ?? ''} flex flex-col overflow-hidden h-full`}>
+        <div className="flex justify-between items-center mr-2">
+            <span className="flex font-semibold text-xl">{title}</span>
+            <div
+                className="flex"
+                onMouseDown={event => event.stopPropagation()}
+                onTouchStart={event => event.stopPropagation()}
+            >
+                {options}
+            </div>
+        </div>
+      <span className="bg-background-border my-2 h-0.5 flex-shrink-0" />
+      <div className="flex flex-col mr-2 font-mulish">
+        {children}
+      </div>
+    </div>
+);
+
+export default ShokoPanel;

src/core/slices/webuiSettings.ts

@@ -36,7 +36,9 @@ type State = {
 export const defaultLayout = {
   dashboard: {
     lg: [{
-      i: 'collectionBreakdown', x: 0, y: 0, w: 6, h: 9, minW: 5, minH: 6, maxH: 9, moved: false, static: false,
+      i: 'collectionBreakdown', x: 0, y: 0, w: 2, h: 15, minW: 2, minH: 15, maxH: 15, moved: false, static: false,
+    }, {
+      i: 'collectionTypeBreakdown', x: 2, y: 0, w: 2, h: 15, moved: false, static: false,
     }, {
       i: 'seriesBreakdown', x: 6, y: 0, w: 6, h: 9, minW: 5, minH: 6, maxH: 9, moved: false, static: false,
     }, {
@@ -49,8 +51,6 @@ export const defaultLayout = {
       i: 'actionItems', x: 3, y: 26, w: 3, h: 14, moved: false, static: false,
     }, {
       i: 'actionItems2', x: 6, y: 26, w: 3, h: 14, moved: false, static: false,
-    }, {
-      i: 'collectionTypeBreakdown', x: 9, y: 26, w: 3, h: 14, moved: false, static: false,
     }],
   } as LayoutType,
   importFolders: {

src/pages/dashboard/DashboardPage.tsx

@@ -52,6 +52,9 @@ function DashboardPage() {
       <div key="collectionBreakdown">
         <CollectionBreakdown />
       </div>
+      <div key="collectionTypeBreakdown">
+        <CollectionTypeBreakdown />
+      </div>
       <div key="seriesBreakdown">
         <SeriesBreakdown />
       </div>
@@ -70,9 +73,6 @@ function DashboardPage() {
       <div key="actionItems2">
         <ActionItems />
       </div>
-      <div key="collectionTypeBreakdown">
-        <CollectionTypeBreakdown />
-      </div>
     </ResponsiveGridLayout>
   );
 }

src/pages/dashboard/panels/CollectionBreakdown.tsx

@@ -3,45 +3,53 @@ import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import { RootState } from '../../../core/store';
-import FixedPanel from '../../../components/Panels/FixedPanel';
+import ShokoPanel from '../../../components/Panels/ShokoPanel';
 
 function CollectionBreakdown() {
   const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.stats);
   const stats = useSelector((state: RootState) => state.mainpage.stats);
 
   const renderItem = (key: string, title: string, value: string | number = 0) => (
-    <div key={key} className="flex mt-3 first:mt-2">
+    <div key={key} className="flex">
       <div className="flex-grow">
         {title}
       </div>
-      <div className="color-highlight-1">
-        {value}
-      </div>
+      <div className="font-semibold">{value}</div>
     </div>
   );
 
-  const childrenLeft = [
+  const childrenFirst = [
     renderItem('series', 'Series', stats.SeriesCount),
-    renderItem('files', 'Files', stats.FileCount),
-    renderItem('collection-size', 'Collection Size', `${prettyBytes(stats.FileSize || 0, { binary: true })}`),
-  ];
-  const childrenRight = [
     renderItem('series-completed', 'Series Completed', stats.FinishedSeries),
     renderItem('episodes-watched', 'Episodes Watched', stats.WatchedEpisodes),
     renderItem('hours-watched', 'Hours Watched', `${stats.WatchedHours || 0} H`),
   ];
+  const childrenSecond = [
+    renderItem('collection-size', 'Collection Size', `${prettyBytes(stats.FileSize || 0, { binary: true })}`),
+    renderItem('files', 'Files', stats.FileCount),
+    renderItem('unrecognized-files', 'Unrecognized Files', stats.UnrecognizedFiles),
+    renderItem('multiple-files', 'Multiple Files', stats.EpisodesWithMultipleFiles),
+    renderItem('duplicate-files', 'Duplicate Files', stats.FilesWithDuplicateLocations),
+  ];
+
+  const childrenThird = [
+    renderItem('missing-links', 'Missing TvDB/TMDB Links', stats.SeriesWithMissingLinks),
+    renderItem('missing-episodes-collecting', 'Missing Episodes (Collecting)', stats.MissingEpisodesCollecting),
+    renderItem('missing-episodes', 'Missing Episodes (Total)', stats.MissingEpisodes),
+  ];
 
   return (
-    <FixedPanel title="Collection Breakdown" isFetching={!hasFetched}>
-      <div className="flex">
-        <div className="flex flex-col w-1/2 mr-6">
-          {childrenLeft}
-        </div>
-        <div className="flex flex-col w-1/2 ml-6">
-          {childrenRight}
-        </div>
+    <ShokoPanel title="Collection Breakdown" isFetching={!hasFetched}>
+      <div className="flex flex-col leading-5">
+        {childrenFirst}
+      </div>
+      <div className="flex flex-col mt-6 leading-5">
+        {childrenSecond}
+      </div>
+      <div className="flex flex-col mt-6 leading-5">
+        {childrenThird}
       </div>
-    </FixedPanel>
+    </ShokoPanel>
   );
 }
 

src/pages/dashboard/panels/CollectionTypeBreakdown.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { forEach } from 'lodash';
 
 import { RootState } from '../../../core/store';
-import FixedPanel from '../../../components/Panels/FixedPanel';
+import ShokoPanel from '../../../components/Panels/ShokoPanel';
 
 const colors = {
   Series: '#FF3F57',
@@ -51,9 +51,9 @@ function CollectionTypeBreakdown() {
   });
 
   return (
-    <FixedPanel title="Collection Type Breakdown" isFetching={!hasFetched}>
+    <ShokoPanel title="Collection Type Breakdown" isFetching={!hasFetched}>
       {items}
-    </FixedPanel>
+    </ShokoPanel>
   );
 }