revamp server pages

massalabs · Oct 30, 2024 · 0a8c38d · 0a8c38d
1 parent 645b35a
commit 0a8c38d
Show file tree

Hide file tree

Showing 14 changed files with 732 additions and 2,372 deletions.
diff --git a/server/pages/index.html b/server/pages/index.html
@@ -4,6 +4,16 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/massa_logomark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap"
+    />
+    <link
+      rel="preload stylesheet"
+      href="https://fonts.cdnfonts.com/css/e1234"
+    />
     <title>DeWeb</title>
   </head>
   <body>

diff --git a/server/pages/package-lock.json b/server/pages/package-lock.json
diff --git a/server/pages/package.json b/server/pages/package.json
@@ -12,10 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@massalabs/react-ui-kit": "^0.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "tw-colors": "^3.3.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

diff --git a/server/pages/src/colors/colors.ts b/server/pages/src/colors/colors.ts
@@ -0,0 +1,24 @@
+export const colors = {
+  greenNeon: "#00FF6D",
+  blueBright: "#0043FF",
+  darkForestGreen: "#043D1B",
+  deepNavyBlue: "#030D23",
+  yellowBright: "#FFFF00",
+  magentaBright: "#E600FF",
+  darkOliveGreen: "#1E1D03",
+  darkPurple: "#160119",
+  redBright: "#FF003D",
+  cyanBright: "#00FFCE",
+  darkMaroon: "#2D000D",
+  darkTeal: "#001E18",
+  orangeBright: "#FF7300",
+  purpleRoyal: "#5218EF",
+  darkBrown: "#3F1B00",
+  midnightBlue: "#070021",
+  charcoal: "#0C0C0C",
+  pinkNeon: "#FF36AE",
+  plum: "#661047",
+  pastelPink: "#FFE1F4",
+  DeepBlue: "#0000A8",
+  CelestialMist: "#ECECEC"
+};
diff --git a/server/pages/src/colors/preset.js b/server/pages/src/colors/preset.js
@@ -0,0 +1,208 @@
+/** @type {import('tailwindcss').Config} */
+import plugin from "tailwindcss/plugin";
+import themeConfig from "./themeConfig.js";
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { createThemes } = require("tw-colors");
+
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    fontFamily: {
+      plex: ["IBM Plex Mono", "monospace"],
+      clock: ["E1234", "sans-serif"]
+    }
+  },
+  plugins: [
+    createThemes(themeConfig),
+    plugin(function ({ addComponents, theme }) {
+      addComponents({
+        ".paragraph-lg": {
+          fontSize: "30px",
+          fontWeight: "400",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "42px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-light-lg": {
+          fontSize: "28px",
+          fontWeight: "200",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "42px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-italic-lg": {
+          fontSize: "30px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "42px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".paragraph-italic-light-lg": {
+          fontSize: "30px",
+          fontWeight: "300",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "42px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".title-lg": {
+          fontSize: "46px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "62px",
+          fontStyle: "semi-bold",
+          userSelect: "none"
+        },
+
+        // medium
+        ".paragraph-md": {
+          fontSize: "24px",
+          fontWeight: "400",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "36px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-light-md": {
+          fontSize: "22px",
+          fontWeight: "200",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "36px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-italic-md": {
+          fontSize: "24px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "36px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".paragraph-italic-light-md": {
+          fontSize: "24px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "36px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".title-md": {
+          fontSize: "36px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "52px",
+          fontStyle: "semi-bold",
+          userSelect: "none"
+        },
+        // mobile
+        ".paragraph-sm": {
+          fontSize: "16px",
+          fontWeight: "400",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "32px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-light-sm": {
+          fontSize: "14px",
+          fontWeight: "200",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "32px",
+          fontStyle: "normal",
+          userSelect: "none"
+        },
+        ".paragraph-italic-sm": {
+          fontSize: "16px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "32px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".paragraph-italic-light-sm": {
+          fontSize: "16px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "32px",
+          fontStyle: "italic",
+          userSelect: "none"
+        },
+        ".title-sm": {
+          fontSize: "28px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.plex"),
+          lineHeight: "46px",
+          fontStyle: "semi-bold",
+          userSelect: "none"
+        },
+
+        // window
+        ".window-content": {
+          display: "flex",
+
+          flexDirection: "column",
+          justifyContent: "start",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "32px",
+          overflow: "scroll",
+          padding: "24px 4px",
+          overflowY: "scroll"
+        },
+
+        ".pan-action": {
+          touchAction: "pan-x"
+        },
+
+        // Clock
+        ".clock-lg": {
+          fontSize: "60px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.clock"),
+          userSelect: "none"
+        },
+        ".clock-md": {
+          fontSize: "48px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.clock"),
+          userSelect: "none"
+        },
+        ".clock-sm": {
+          fontSize: "36px",
+          fontWeight: "500",
+          fontFamily: theme("fontFamily.clock"),
+          userSelect: "none"
+        },
+
+        // Custom Button
+        ".custom-button-primary": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: "16px 24px",
+          border: "2px solid",
+          borderRadius: "8px",
+          color: theme("colors.secondary"),
+          borderColor: theme("colors.secondary"),
+          backgroundColor: theme("colors.primary")
+        },
+        ".custom-button-secondary": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: "16px 24px",
+          border: "2px solid",
+          borderRadius: "8px",
+          color: theme("colors.primary"),
+          borderColor: theme("colors.primary"),
+          backgroundColor: theme("colors.secondary")
+        }
+      });
+    })
+  ]
+};
diff --git a/server/pages/src/colors/themeConfig.js b/server/pages/src/colors/themeConfig.js
@@ -0,0 +1,107 @@
+import { colors } from "./colors";
+
+export const themeNames = [
+  "neon_green_forest",
+  "bright_blue_navy",
+  "sunny_magenta",
+  "magenta_sunny",
+  "olive_sunshine",
+  "magenta_midnight",
+  "red_cyan",
+  "cyan_red",
+  "maroon_red",
+  "teal_cyan",
+  "sunset_purple",
+  "purple_sunset",
+  "brown_sunset",
+  "midnight_purple",
+  "charcoal_neon_pink",
+  "neon_pink_charcoal",
+  "plum_neon_pink",
+  "pastel_neon_pink",
+  "light_gray_blue",
+  "deep_blue_gray"
+];
+
+export default {
+  neon_green_forest: {
+    primary: colors.greenNeon,
+    secondary: colors.darkForestGreen
+  },
+  bright_blue_navy: {
+    primary: colors.blueBright,
+    secondary: colors.deepNavyBlue
+  },
+  sunny_magenta: {
+    primary: colors.yellowBright,
+    secondary: colors.magentaBright
+  },
+  magenta_sunny: {
+    primary: colors.magentaBright,
+    secondary: colors.yellowBright
+  },
+  olive_sunshine: {
+    primary: colors.darkOliveGreen,
+    secondary: colors.yellowBright
+  },
+  magenta_midnight: {
+    primary: colors.magentaBright,
+    secondary: colors.darkPurple
+  },
+  red_cyan: {
+    primary: colors.redBright,
+    secondary: colors.cyanBright
+  },
+  cyan_red: {
+    primary: colors.cyanBright,
+    secondary: colors.redBright
+  },
+  maroon_red: {
+    primary: colors.darkMaroon,
+    secondary: colors.redBright
+  },
+  teal_cyan: {
+    primary: colors.darkTeal,
+    secondary: colors.cyanBright
+  },
+  sunset_purple: {
+    primary: colors.orangeBright,
+    secondary: colors.purpleRoyal
+  },
+  purple_sunset: {
+    primary: colors.purpleRoyal,
+    secondary: colors.orangeBright
+  },
+  brown_sunset: {
+    primary: colors.darkBrown,
+    secondary: colors.orangeBright
+  },
+  midnight_purple: {
+    primary: colors.midnightBlue,
+    secondary: colors.purpleRoyal
+  },
+  charcoal_neon_pink: {
+    primary: colors.charcoal,
+    secondary: colors.pinkNeon
+  },
+  neon_pink_charcoal: {
+    primary: colors.pinkNeon,
+    secondary: colors.charcoal
+  },
+  plum_neon_pink: {
+    primary: colors.plum,
+    secondary: colors.pinkNeon
+  },
+  pastel_neon_pink: {
+    primary: colors.pastelPink,
+    secondary: colors.pinkNeon
+  },
+  light_gray_blue: {
+    primary: colors.CelestialMist,
+    secondary: colors.DeepBlue
+  },
+  deep_blue_gray: {
+    primary: colors.DeepBlue,
+    secondary: colors.CelestialMist
+  }
+};
diff --git a/server/pages/src/main.tsx b/server/pages/src/main.tsx
@@ -2,3 +2,8 @@ import DevHomePage from "./pages/DevHomePage.tsx";
 import { renderApp } from "./utils/RootApp.tsx";
 
 renderApp({ children: <DevHomePage /> });
+
+// import 404 styles in svg
+// import set oops
+// implement themes w/ setting per page ? with option to set theme on search page 
+