feat: midnight orange/blue themes, fix #754 #751 (#753)

* feat(theme): add midnight orange theme

* feat(files): Added more files to one page & filter by views

* feat(ThemeProvider): Added bigger radius for moderner look
fix(auth): When title to long it fits now better
fix(api): Fixed user favorties not showing right

* fix(auth)

* feat(theme): add midnight blue theme
change(file): updated it 15 files per page

* changed(theme): midnight_orange: add missing colors

* little improvement on the theme files

src/components/ThemeProvider.tsx

@@ -57,7 +57,10 @@ export default function Theming({
       <MantineProvider
         defaultColorScheme={theme.colorScheme as unknown as any}
         forceColorScheme={theme.colorScheme as unknown as any}
-        theme={createTheme(themeComponents(theme))}
+        theme={createTheme({
+          ...themeComponents(theme),
+          defaultRadius: 'md',
+        })}
       >
         {children}
       </MantineProvider>

src/components/pages/files/views/FileTable.tsx

@@ -479,6 +479,11 @@ export default function FileTable({ id }: { id?: string }) {
               sortable: true,
               render: (file) => (file.favorite ? <Text c='yellow'>Yes</Text> : 'No'),
             },
+            {
+              accessor: 'views',
+              sortable: true,
+              render: (file) => file.views,
+            },
             {
               accessor: 'id',
               hidden: searchField !== 'id' || searchQuery.id.trim() === '',

src/lib/theme/builtins/midnight_blue.theme.json

@@ -0,0 +1,33 @@
+{
+  "name": "Midnight Blue",
+  "id": "builtin:midnight_blue",
+  "colorScheme": "dark",
+  "colors": {
+    "blue": [
+      "#FFFFFF",
+      "#7C7DC2",
+      "#7778C0",
+      "#6C6FBC",
+      "#575DB5",
+      "#4D54B2",
+      "#424BAE",
+      "#3742AA",
+      "#323EA8",
+      "#2C39A6"
+    ],
+    "dark": [
+      "#FFFFFF",
+      "#999999",
+      "#a8a8a8",
+      "#666666",
+      "#282828",
+      "#181818",
+      "#151515",
+      "#111111",
+      "#181818",
+      "#00001E"
+    ]
+  },
+  "primaryColor": "blue",
+  "mainBackgroundColor": "#0a0a0a"
+}

src/lib/theme/builtins/midnight_orange.theme.json

@@ -0,0 +1,33 @@
+{
+  "name": "Midnight Orange",
+  "id": "builtin:midnight_orange",
+  "colorScheme": "dark",
+  "colors": {
+    "orange": [
+      "#FFFFFF",
+      "#f5994b",
+      "#f5994b",
+      "#f48c35",
+      "#f48c35",
+      "#f3801f",
+      "#f3801f",
+      "#da731b",
+      "#da731b",
+      "#c26618"
+    ],
+    "dark": [
+      "#FFFFFF",
+      "#999999",
+      "#a8a8a8",
+      "#666666",
+      "#282828",
+      "#181818",
+      "#151515",
+      "#111111",
+      "#181818",
+      "#00001E"
+    ]
+  },
+  "primaryColor": "orange",
+  "mainBackgroundColor": "#0a0a0a"
+}

src/lib/theme/file.ts

@@ -15,6 +15,9 @@ import cat_latte from './builtins/catppuccin_latte.theme.json';
 import cat_macchiato from './builtins/catppuccin_macchiato.theme.json';
 import cat_mocha from './builtins/catppuccin_mocha.theme.json';
 
+import midnight_orange from './builtins/midnight_orange.theme.json';
+import midnight_blue from './builtins/midnight_blue.theme.json';
+
 import { log } from '../logger';
 
 const THEMES_DIR = './themes';
@@ -48,6 +51,8 @@ export async function readThemes(): Promise<ZiplineTheme[]> {
     handleOverrideColors(cat_latte as unknown as ZiplineTheme),
     handleOverrideColors(cat_macchiato as unknown as ZiplineTheme),
     handleOverrideColors(cat_mocha as unknown as ZiplineTheme),
+    handleOverrideColors(midnight_orange as unknown as ZiplineTheme),
+    handleOverrideColors(midnight_blue as unknown as ZiplineTheme),
   );
 
   return parsedThemes;

src/pages/auth/login.tsx

@@ -250,9 +250,11 @@ export default function Login({ config }: InferGetServerSidePropsType<typeof get
           <div style={{ width: '100%', overflowWrap: 'break-word' }}>
             <Title
               order={1}
-              size={(config.website.title ?? 'Zipline').length > 50 ? 20 : 50}
               ta='center'
-              style={{ whiteSpace: 'normal' }}
+              style={{
+                whiteSpace: 'normal',
+                fontSize: `clamp(20px, ${Math.max(50 - (config.website.title?.length ?? 0) / 2, 20)}px, 50px)`,
+              }}
             >
               <b>{config.website.title ?? 'Zipline'}</b>
             </Title>

src/pages/auth/register.tsx

@@ -131,9 +131,11 @@ export default function Register({ config, invite }: InferGetServerSidePropsType
           <div style={{ width: '100%', overflowWrap: 'break-word' }}>
             <Title
               order={1}
-              size={(config.website.title ?? 'Zipline').length > 50 ? 20 : 50}
               ta='center'
-              style={{ whiteSpace: 'normal' }}
+              style={{
+                whiteSpace: 'normal',
+                fontSize: `clamp(20px, ${Math.max(50 - (config.website.title?.length ?? 0) / 2, 20)}px, 50px)`,
+              }}
             >
               <b>{config.website.title ?? 'Zipline'}</b>
             </Title>

src/server/routes/api/user/files/index.ts

@@ -70,7 +70,7 @@ export default fastifyPlugin(
 
         if (!user) return res.notFound('User not found');
 
-        const perpage = Number(req.query.perpage || '9');
+        const perpage = Number(req.query.perpage || '15');
         if (isNaN(Number(perpage))) return res.badRequest('Perpage must be a number');
 
         const searchQuery = req.query.searchQuery

src/server/routes/api/user/stats.ts

@@ -38,6 +38,7 @@ export default fastifyPlugin(
 
       const favCount = await prisma.file.count({
         where: {
+          userId: req.user.id,
           favorite: true,
         },
       });