diff --git a/cspell.jsonc b/cspell.jsonc index 32a1389..df83292 100644 --- a/cspell.jsonc +++ b/cspell.jsonc @@ -7,11 +7,13 @@ "Greatsword", "icns", "jwalk", + "Mincho", "mohidden", "multispace", "noconflict", "rfind", "Rustup", + "Shippori", "Skyrim", "splitn", "stperson", diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 1940806..95b5ba6 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -84,7 +84,6 @@ body { max-width: 100vw; min-height: 100vh; overflow-x: hidden; - height: 100%; } body { diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 6427105..c1fc4bb 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -32,6 +32,8 @@ export default function RootLayout({ {children} + {/* To prevents the conversion button from being hidden because the menu is fixed. */} +
diff --git a/frontend/src/components/lists/style_list.tsx b/frontend/src/components/lists/style_list.tsx index ebcf7ba..033f5f3 100644 --- a/frontend/src/components/lists/style_list.tsx +++ b/frontend/src/components/lists/style_list.tsx @@ -36,6 +36,7 @@ export const SelectStyleList = ({ preset, setPreset, setStyle }: Props) => { Custom Preset1 Preset2 + Preset3 diff --git a/frontend/src/components/navigation.tsx b/frontend/src/components/navigation.tsx index 0b9712b..6387524 100644 --- a/frontend/src/components/navigation.tsx +++ b/frontend/src/components/navigation.tsx @@ -13,6 +13,7 @@ const Nav = styled(BottomNavigation)(() => { position: "fixed", bottom: 0, width: "100%", + zIndex: "100", // Because Ace-editor uses z-index and without it, it would be covered. ".Mui-selected": { color: "#99e4ee", }, @@ -25,9 +26,9 @@ export default function MenuNavigation() { const [value, setValue] = useState(0); useEffect(() => { - if (pathname=== "/") { + if (pathname === "/") { setValue(0); - } else if (pathname=== "/settings") { + } else if (pathname === "/settings") { setValue(1); } }, [setValue, pathname]); diff --git a/frontend/src/components/pages/converter.tsx b/frontend/src/components/pages/converter.tsx index a3bb023..7c0da61 100644 --- a/frontend/src/components/pages/converter.tsx +++ b/frontend/src/components/pages/converter.tsx @@ -16,9 +16,9 @@ export default function Converter() { component="main" sx={{ display: "grid", - placeItems: "center", + minHeight: "calc(100vh - 56px)", placeContent: "center", - height: "calc(100% - 56px)", + placeItems: "center", width: "100%", }} > diff --git a/frontend/src/components/pages/settings.tsx b/frontend/src/components/pages/settings.tsx index 54c30dc..5170508 100644 --- a/frontend/src/components/pages/settings.tsx +++ b/frontend/src/components/pages/settings.tsx @@ -1,9 +1,10 @@ "use client"; import AceEditor from "react-ace"; -import { Box } from "@mui/material"; import InputLabel from "@mui/material/InputLabel"; +import packageJson from "@/../../package.json"; import type { EditorMode } from "@/utils/editor"; +import { Box } from "@mui/material"; import { SelectEditorMode } from "@/components/lists/editor_list"; import { SelectStyleList } from "@/components/lists/style_list"; import { Toaster } from "react-hot-toast"; @@ -34,7 +35,7 @@ export default function Settings() { component="main" sx={{ display: "flex", - marginBottom: "20px", + marginBottom: "1rem", flexDirection: "column", alignItems: "center", width: "100%", @@ -121,6 +122,19 @@ export default function Settings() { theme="one_dark" value={script} /> + +
+

Version: {packageJson.version}

+

+ Source Code:{" "} + open(packageJson.homepage)} + > + GitHub + +

+
); } diff --git a/frontend/src/utils/styles.ts b/frontend/src/utils/styles.ts index 2f8eccb..4ced4eb 100644 --- a/frontend/src/utils/styles.ts +++ b/frontend/src/utils/styles.ts @@ -1,6 +1,7 @@ -const preset1 = `body { +function createPreset() { + return `body { background-attachment: fixed; - background-image: url("https://i.redd.it/red-forest-1920-1080-v0-s9u8ki2rr70a1.jpg?s=139edf608c428656505a143635a0687dec086229"); + background-image: var(--image-url); background-repeat: no-repeat; background-size: cover; background-color: #000; @@ -12,7 +13,13 @@ const preset1 = `body { } p.Mui-error { - color: #ff1655; + color: var(--error-color); + background-color: #2f2e2eba; +} + +main:has(.ace_editor) > .MuiInputLabel-animated { + padding-right: 1rem !important; + padding-left: 1rem !important; background-color: #2f2e2eba; } @@ -21,13 +28,12 @@ span.Mui-checked > svg, .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.Mui-focused > fieldset, .Mui-selected, /* Bottom Navigation */ .MuiButton-outlined { - color: #ff8e16 !important; - border-color: #ff8e16; + color: var(--theme-color) !important; + border-color: var(--theme-color); } - label.Mui-focused { - color: #ff8e16 !important; + color: var(--theme-color) !important; } .MuiButton-outlined { @@ -36,45 +42,83 @@ label.Mui-focused { .MuiButton-outlined:hover { color: #fff !important; - background-color: #ff89898b; + background-color: var(--hover-btn-color); } .MuiLoadingButton-root { color: #fff; - background-color: #ab2b7e6e; + background-color: var(--convert-btn-color); } .MuiLoadingButton-root:hover { - background-color: #fd3b3b6e; + background-color: var(--hover-convert-btn-color); }`; +} + +const preset1 = `:root { + --theme-color: #ff8e16; + --hover-btn-color: #ff89898b; + --convert-btn-color: #ab2b7e6e; + --hover-convert-btn-color: #fd3b3b6e; + --error-color: #ff1655; + --image-url: url("https://i.redd.it/red-forest-1920-1080-v0-s9u8ki2rr70a1.jpg?s=139edf608c428656505a143635a0687dec086229") +} -const preset2 = `body { +${createPreset()}`; + +const preset2 = `:root { + --image-url: url("https://images.pexels.com/photos/2817421/pexels-photo-2817421.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750& dpr=1"); +} + +body { background-attachment: fixed; - background-image: url("https://images.pexels.com/photos/2817421/pexels-photo-2817421.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750& dpr=1"); + background-image: var(--image-url); background-repeat: no-repeat; background-size: cover; background-color: #000; } .ace_gutter, -.MuiButton-outlined, .MuiOutlinedInput-root { - background-color: #2424248c; + background-color: #2424248c !important; } -.MuiButton-outlined:hover { - background-color: #0e0d0dc7; +p.Mui-error { + color: var(--error-color); + background-color: #2f2e2eba; +} + +main:has(.ace_editor) > .MuiInputLabel-animated { + padding-right: 1rem !important; + padding-left: 1rem !important; + background-color: #2f2e2eba; +} + +.MuiButton-outlined { + background-color: #2424248c; }`; +const preset3 = `:root { + --theme-color: #9644f1; + --hover-btn-color: #8b51fb8b; + --convert-btn-color: #ab2b7e6e; + --hover-convert-btn-color: #fd3b3b6e; + --image-url: url("https://images.pexels.com/photos/6162265/pexels-photo-6162265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); +} + +${createPreset()}`; + export const presetStyles = { "1": preset1, "2": preset2, + "3": preset3, } as const; export function selectPreset(select: string) { switch (select) { case "1": case "2": + case "3": return select; default: return "0"; diff --git a/package.json b/package.json index 725be99..15bed09 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "dar-to-oar", "version": "0.1.6", "license": "MIT", + "homepage": "https://github.com/SARDONYX-sard/dar-to-oar", "private": true, "scripts": { "dev": "tauri dev",