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) => {
+
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}
/>
+
+
);
}
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",