Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

revamp server pages #158

Merged
merged 11 commits into from
Nov 4, 2024
Merged

revamp server pages #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0a8c38d
revamp server pages
pivilartisant Oct 30, 2024
1eebe16
add types/node
pivilartisant Oct 30, 2024
1691cbd
revamp colors
pivilartisant Oct 30, 2024
36bf90a
Revert "revamp colors"
pivilartisant Oct 30, 2024
2d3930f
refacto colors presets
pivilartisant Oct 30, 2024
bc4b453
add theme generation on load
pivilartisant Oct 30, 2024
40fd885
fmt
pivilartisant Oct 30, 2024
a880f7b
render themes independently
pivilartisant Oct 30, 2024
68571dd
add 404 svgs & imgae optimizers
pivilartisant Oct 30, 2024
c1405ca
update todo's
pivilartisant Oct 30, 2024
50c5c3d
fix lint
pivilartisant Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions server/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2,328 changes: 282 additions & 2,046 deletions server/pages/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions server/pages/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@
"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",
"@types/node": "^22.8.4",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
Expand All @@ -33,6 +34,8 @@
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.0",
"vite": "^5.4.0",
"vite-plugin-singlefile": "^2.0.2"
"vite-plugin-image-optimizer": "^1.1.8",
"vite-plugin-singlefile": "^2.0.2",
"vite-plugin-svgr": "^4.2.0"
}
}
3 changes: 3 additions & 0 deletions server/pages/src/assets/404_avara.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions server/pages/src/assets/404_format.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions server/pages/src/assets/404_linux.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions server/pages/src/assets/404_old.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions server/pages/src/assets/404_pixel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions server/pages/src/colors/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
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"
};

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",
];
289 changes: 289 additions & 0 deletions server/pages/src/colors/preset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@
/** @type {import('tailwindcss').Config} */
import plugin from "tailwindcss/plugin";
import { colors } from "./colors";


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({
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,
},
}),
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"),
},
});
}),
],
};
Loading