Adding styling

package.json

@@ -18,12 +18,14 @@
     "precommit": "npm run generate:types && npm run prettier && npm run tsc"
   },
   "dependencies": {
+    "@fontsource/vollkorn": "^5.0.5",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "iso-639-1": "^2.1.15",
     "payload": "^1.11.1",
-    "slugify": "^1.6.6"
+    "slugify": "^1.6.6",
+    "styled-components": "^6.0.5"
   },
   "devDependencies": {
     "@types/express": "^4.17.9",

src/components/Icon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { styled } from "styled-components";
+
+export const Icon = styled.div`
+  width: 46px;
+  height: 46px;
+  mask: url("/public/accords.svg");
+  background-color: var(--theme-elevation-1000);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+`;

src/components/Logo.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import "@fontsource/vollkorn/700.css";
+import { styled } from "styled-components";
+
+export const Logo = (): JSX.Element => (
+  <Container>
+    <Icon />
+    <Title>Accord’s Library</Title>
+    <Subtitle>Dashboard</Subtitle>
+  </Container>
+);
+
+const Container = styled.div`
+  display: grid;
+  place-items: center;
+`;
+
+const Title = styled.h1`
+  font-family: "Vollkorn";
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+`;
+
+const Subtitle = styled.h2`
+  font-family: "Vollkorn";
+  margin: 0;
+`;
+
+const Icon = styled.div`
+  width: 256px;
+  height: 256px;
+  mask: url("/public/accords.svg");
+  background-color: var(--theme-elevation-1000);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+`;

src/payload.config.ts

@@ -9,13 +9,21 @@ import { Tags } from "./collections/Tags/Tags";
 import { LibraryItems } from "./collections/LibraryItems/LibraryItems";
 import { Contents } from "./collections/Contents/Contents";
 import { Files } from "./collections/Files/Files";
+import { Logo } from "./components/Logo";
+import { Icon } from "./components/Icon";
 
 export default buildConfig({
   serverURL: "http://localhost:3000",
   admin: {
     user: Users.slug,
+    components: { graphics: { Logo, Icon } },
+    meta: {
+      favicon: "/public/favicon.ico",
+      ogImage: "og.jpg",
+      titleSuffix: "- Accord’s Library",
+  },
+    css: path.resolve(__dirname, "styles.scss"),
   },
-  collections: [LibraryItems, Contents, Posts, Images, Files, Languages, Recorders, Tags, Users],
   globals: [],
   telemetry: false,
   typescript: {

src/server.ts

@@ -1,7 +1,8 @@
 import express from "express";
 import payload from "payload";
+import "dotenv/config";
+import path from "path";
 
-require("dotenv").config();
 const app = express();
 
 // Redirect root to Admin panel
@@ -12,6 +13,22 @@ app.get("/", (_, res) => {
 const start = async () => {
   // Initialize Payload
   await payload.init({
+    email: {
+      transportOptions: {
+        host: process.env.SMTP_HOST,
+        auth: {
+          user: process.env.SMTP_USER,
+          pass: process.env.SMTP_PASS,
+        },
+        port: 587,
+        secure: true,
+        tls: {
+          rejectUnauthorized: false,
+        },
+      },
+      fromName: "hello",
+      fromAddress: "hello@example.com",
+    },
     secret: process.env.PAYLOAD_SECRET,
     mongoURL: process.env.MONGODB_URI,
     express: app,
@@ -21,6 +38,7 @@ const start = async () => {
   });
 
   // Add your own express routes here
+  app.use("/public", express.static(path.join(__dirname, "../public")));
 
   app.listen(3000);
 };

src/styles.scss

@@ -0,0 +1,47 @@
+html[data-theme="dark"] {
+  --color-base-0: #ffffff;
+  --color-base-50: #ebeae7;
+  --color-base-100: #ebeae7;
+  --color-base-150: #e5c1a1;
+  --color-base-200: #dcb392;
+  --color-base-250: #d3a583;
+  --color-base-300: #d59e7d;
+  --color-base-350: #cb906c;
+  --color-base-400: #be825c;
+  --color-base-450: #af7650;
+  --color-base-500: #9f6a47;
+  --color-base-550: #8f5f3f;
+  --color-base-600: #7d5438;
+  --color-base-650: #6c4a33;
+  --color-base-700: #5a402d;
+  --color-base-750: #4a3728;
+  --color-base-800: #3a2d22;
+  --color-base-850: #2a2521;
+  --color-base-900: #1d1a17;
+  --color-base-950: #12100e;
+  --color-base-1000: #000000;
+}
+
+html[data-theme="light"] {
+  --color-base-0: #ffedd8;
+  --color-base-50: #f9dec2;
+  --color-base-100: #efcfb1;
+  --color-base-150: #e5c1a1;
+  --color-base-200: #dcb392;
+  --color-base-250: #d3a583;
+  --color-base-300: #c99674;
+  --color-base-350: #bf8966;
+  --color-base-400: #b37d59;
+  --color-base-450: #a76f4d;
+  --color-base-500: #9a6443;
+  --color-base-550: #8b593a;
+  --color-base-600: #7a4f33;
+  --color-base-650: #6a452d;
+  --color-base-700: #5a3c27;
+  --color-base-750: #493322;
+  --color-base-800: #3a2b1d;
+  --color-base-850: #2b2218;
+  --color-base-900: #1d1912;
+  --color-base-950: #11100b;
+  --color-base-1000: #000000;
+}