Add 3D Memories branding and theme integration

- Added new logo images for 3D Memories.
- Introduced a new theme configuration for 3D Memories with custom color schemes.
- Updated UploadOptionsButton component to comment out the options button.
- Modified upload page to include a logo, updated title, and added a stepper for the upload process.
- Included an alert for public folder warnings.
- Created a new CSS file for 3D Memories styles.

.gitignore

@@ -45,4 +45,5 @@ next-env.d.ts
 # zipline
 uploads*/
 *.crt
-*.key
+*.key
+.history/*

src/components/pages/upload/UploadOptionsButton.tsx

@@ -373,13 +373,13 @@ export default function UploadOptionsButton({ folder, numFiles }: { folder?: str
         </Group>
       </Modal>
 
-      <Button
+      {/* <Button
         variant={changes() !== 0 ? 'light' : 'outline'}
         rightSection={changes() !== 0 ? <Badge variant='outline'>{changes()}</Badge> : null}
         onClick={() => setOpen(true)}
       >
         Options
-      </Button>
+      </Button> */}
     </>
   );
 }

src/lib/theme/builtins/dreid_memories.theme.json

@@ -0,0 +1,69 @@
+{
+  "name": "3D Memories",
+  "id": "builtin:3d_memories",
+  "colorScheme": "light",
+  "colors": {
+    "cta": [
+      "#fbeee9",
+      "#f6d4c7",
+      "#f0bba5",
+      "#eaa184",
+      "#e48862",
+      "#d96f49",
+      "#b3583a",
+      "#8c422c",
+      "#662c1d",
+      "#40160f"
+    ],
+    "contrast": [
+      "#e9edec",
+      "#c4cdcb",
+      "#9eaead",
+      "#798f8e",
+      "#546f6f",
+      "#3a5655",
+      "#2e4343",
+      "#223131",
+      "#161f20",
+      "#0b0d0d"
+    ],
+    "base": [
+      "#ffffff",
+      "#f9f8f6",
+      "#f3f2ef",
+      "#edebe8",
+      "#e7e5e1",
+      "#dbd9d4",
+      "#aea8a1",
+      "#827d77",
+      "#55524e",
+      "#292725"
+    ],
+    "lightShade": [
+      "#ffffff",
+      "#faf8f4",
+      "#f5f2eb",
+      "#efebdf",
+      "#eae5d4",
+      "#dfdac7",
+      "#b3af9f",
+      "#878578",
+      "#5c5a50",
+      "#302d28"
+    ],
+    "darkShade": [
+      "#fdeeea",
+      "#f7d3c9",
+      "#f1b8a8",
+      "#eba087",
+      "#e58566",
+      "#da6b4c",
+      "#b4553d",
+      "#8e3f2e",
+      "#68291e",
+      "#42140f"
+    ]
+  },
+  "primaryColor": "cta",
+  "mainBackgroundColor": "var(--mantine-color-base-0)"
+}

src/lib/theme/file.ts

@@ -3,20 +3,22 @@ import { basename, join } from 'path';
 import { ZiplineTheme } from '.';
 import { exists } from '../fs';
 
+import black_dark from './builtins/black_dark.theme.json';
 import dark_gray from './builtins/dark_gray.theme.json';
 import light_gray from './builtins/light_gray.theme.json';
-import black_dark from './builtins/black_dark.theme.json';
 
-import light_blue from './builtins/light_blue.theme.json';
 import dark_blue from './builtins/dark_blue.theme.json';
+import light_blue from './builtins/light_blue.theme.json';
 
 import cat_frappe from './builtins/catppuccin_frappe.theme.json';
 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 midnight_orange from './builtins/midnight_orange.theme.json';
+
+import dreid_memories from './builtins/dreid_memories.theme.json';
 
 import { log } from '../logger';
 
@@ -53,6 +55,7 @@ export async function readThemes(): Promise<ZiplineTheme[]> {
     handleOverrideColors(cat_mocha as unknown as ZiplineTheme),
     handleOverrideColors(midnight_orange as unknown as ZiplineTheme),
     handleOverrideColors(midnight_blue as unknown as ZiplineTheme),
+    handleOverrideColors(dreid_memories as unknown as ZiplineTheme),
   );
 
   return parsedThemes;

src/pages/_app.tsx

@@ -1,19 +1,20 @@
-import { AppProps } from 'next/app';
-import { NuqsAdapter } from 'nuqs/adapters/next/pages';
-import Head from 'next/head';
-import { SWRConfig } from 'swr';
+import Theming from '@/components/ThemeProvider';
+import { ZiplineTheme } from '@/lib/theme';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
-import { ZiplineTheme } from '@/lib/theme';
-import Theming from '@/components/ThemeProvider';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import { NuqsAdapter } from 'nuqs/adapters/next/pages';
+import { SWRConfig } from 'swr';
 
+import '@mantine/charts/styles.css';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/dropzone/styles.css';
 import '@mantine/notifications/styles.css';
-import '@mantine/charts/styles.css';
 import 'mantine-datatable/styles.css';
 
+import '@/styles/3dm.css';
 import '@/styles/global.css';
 
 import '@/components/render/code/HighlightCode.theme.scss';

src/pages/folder/[id]/upload.tsx

@@ -3,10 +3,10 @@ import UploadFile from '@/components/pages/upload/File';
 import { prisma } from '@/lib/db';
 import { Folder, cleanFolder } from '@/lib/db/models/folder';
 import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
-import { Anchor, Center, Container, Text } from '@mantine/core';
+import { Alert, Center, Container, Image, Stepper, Text, Title } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
 import { InferGetServerSidePropsType } from 'next';
 import Head from 'next/head';
-import Link from 'next/link';
 
 export default function UploadToFolderId({
   folder,
@@ -16,16 +16,53 @@ export default function UploadToFolderId({
 
   return (
     <>
+      <div className='memories-logo-container'>
+        <Container>
+          <Image
+            className='memories-logo'
+            src='/3D-Memories-Logo.png'
+            alt='3D Memories Logo'
+            width={100}
+            height={100}
+          />
+        </Container>
+      </div>
       <Head>
-        <title>{`${config.website.title ?? 'Zipline'} – Upload to ${folder.name}`}</title>
+        <title>{`${config.website.title ?? '3D Memories'} – Upload to ${folder.name}`}</title>
       </Head>
 
       <Container mt='lg'>
         <ConfigProvider config={config}>
-          <UploadFile title={`Upload files to ${folder.name}`} folder={folder.id} />
+          <Title order={1}>{`Hey ${folder.name}`}!</Title>
+          <br />
+          <Text>
+            <strong>Upload your files for your 3D Model here!</strong>
+            <br />
+            Please make sure to upload as many pictures as possible, so we can create the best 3D-Print for
+            you!
+          </Text>
+
+          <br />
+          <br />
+          <br />
+
+          <Stepper active={1} color='#d1cbb7'>
+            <Stepper.Step label='Step 1' description='Purchase your custom 3D Print' />
+            <Stepper.Step label='Step 2' description='Upload as many pictures as possible' />
+            <Stepper.Step label='Step 3' description='Receive 3D-Print' />
+          </Stepper>
+
+          <br />
+          <br />
+
+          <UploadFile title='' folder={folder.id} />
+          <Alert variant='outline' title='Public Folder' color='yellow' icon={<IconInfoCircle />}>
+            Please make sure to not share this link with anyone else. This folder is public, and anyone with
+            the link can view its contents and upload files.
+          </Alert>
           <Center>
             <Text c='dimmed' ta='center'>
-              {folder.public ? (
+              {/* {folder.public ? (
                 <>
                   This folder is{' '}
                   <Anchor component={Link} href={`/folder/${folder.id}`}>
@@ -35,7 +72,7 @@ export default function UploadToFolderId({
                 </>
               ) : (
                 "Only the owner can view this folder's contents. However, anyone can upload files, and they can still access their uploaded files if they have the link to the specific file."
-              )}
+              )} */}
             </Text>
           </Center>
         </ConfigProvider>

src/styles/3dm.css

@@ -0,0 +1,64 @@
+/* Light Mode CSS */
+
+:root {
+    --cta-color: #d4967d;
+    --contrast-color: #495a58;
+    --base-color: #e5e3dc;
+    --light-shade: #d1cbb7;
+    --darker-shade: #d9ad9a;
+}
+
+body {
+    background-color: #fff;
+    /* background-color: var(--base-color); */
+    color: var(--contrast-color);
+    font-family: Poppins, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: var(--light-shade);
+    color: var(--contrast-color);
+    padding: 1rem;
+    text-align: center;
+}
+
+button.cta {
+    background-color: var(--cta-color);
+    color: var(--base-color);
+    border: none;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    border-radius: 5px;
+}
+
+button.cta:hover {
+    background-color: var(--darker-shade);
+}
+
+footer {
+    background-color: var(--light-shade);
+    color: var(--contrast-color);
+    text-align: center;
+    padding: 1rem;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+
+.memories-logo-container {
+    background-color: var(--base-color);
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.memories-logo {
+    width: 100px;
+    height: auto;
+    margin: 0 auto;
+    display: block;
+    object-fit: contain;
+}