Skip to content

feat: styling enhancements for creator #26

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

Open
24bartixx wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: styling enhancements for creator #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e98ffa9
feat: styling enhancements for creator
24bartixx Mar 29, 2026
10f7889
chore: remove unncessary comments
24bartixx Mar 29, 2026
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
2 changes: 1 addition & 1 deletion client/src/components/creator/creator-board/creator-board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function CreatorBoard({ dims }: CreatorBoardProps) {

return (
<div
className="h-full overflow-hidden rounded-lg bg-[#4b2a86] p-4 shadow-lg"
className="h-full w-full overflow-hidden rounded-lg bg-[#4b2a86] p-4 shadow-lg"
ref={boardRef}
>
<div className="flex min-h-full items-center">
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/creator/creator-control/creator-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
const isColsMax = cols >= MAX_DIM;

return (
<div className="flex h-full items-center gap-6 rounded-lg bg-[#4b2a86] py-4 pr-4 pl-6 shadow-lg">
<div className="relative flex h-full w-full items-center gap-6 rounded-lg bg-[#4b2a86] p-4 shadow-lg">
<div className="flex flex-col gap-3">
{/* Rows Control */}
<div className="flex items-center gap-3">
Expand Down Expand Up @@ -83,11 +83,11 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
</div>

{/* Action Buttons */}
<div className="ml-auto flex items-center gap-2">
<button className="rounded-md bg-violet-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-violet-400">
<div className="creator-control-actions ml-auto flex flex-col gap-2 md:flex-row">
<button className="h-8 min-w-[70px] rounded-md bg-violet-500 px-3 py-1 text-[0.8rem] font-semibold text-white transition-colors hover:bg-violet-400">
Reset
</button>
<button className="rounded-md bg-emerald-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-emerald-400">
<button className="h-8 min-w-[70px] rounded-md bg-emerald-500 px-3 py-1 text-[0.8rem] font-semibold text-white transition-colors hover:bg-emerald-400">
Create
</button>
</div>
Expand Down
22 changes: 11 additions & 11 deletions client/src/components/creator/creator-items-select/creator-items-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,34 @@ export function CreatorItemsSelect() {
const [selected, setSelected] = useState<string>(MENU_OPTIONS[0].key);

return (
<div className="flex h-full flex-col rounded-lg bg-[#4b2a86] p-4 shadow-lg">
{/* Common width container for menu and select */}
<div className="flex h-full w-full max-w-full flex-col">
<div className="flex h-full w-full flex-col rounded-lg bg-[#4b2a86] p-4 shadow-lg">
<div className="flex h-full w-full flex-col">
{/* Options Menu */}
<div className="mb-4">
<div
className="custom-scrollbar flex gap-2 overflow-x-auto"
className="custom-scrollbar flex gap-3 overflow-x-auto"
style={{ WebkitOverflowScrolling: "touch" }}
>
{MENU_OPTIONS.map((option) => (
<button
key={option.key}
onClick={() => setSelected(option.key)}
className={`rounded-md px-6 py-2 text-center text-sm font-semibold tracking-wide whitespace-nowrap transition-colors ${
className={`rounded-lg px-5 py-2 text-center font-mono text-base font-bold tracking-wide whitespace-nowrap transition-colors ${
selected === option.key
? "bg-amber-400 text-violet-900 shadow"
: "bg-violet-500/70 text-amber-100 hover:bg-violet-400/80"
? "border border-amber-300 bg-transparent text-amber-300"
: "border border-transparent bg-transparent text-gray-300 hover:text-white"
} `}
title={option.label}
>
{option.label}
</button>
))}
</div>
</div>
{/* Options Select (empty for now) */}
<div className="mx-auto flex min-h-0 w-full max-w-[calc(100vw-4rem)] flex-1 items-center justify-center rounded-lg bg-orange-300/80">
<span className="text-lg font-bold text-orange-900 opacity-60">
Options Select
{/* Show selected option label */}
<div className="flex min-h-0 w-full flex-1 items-center justify-center rounded-lg bg-[#3a2266] shadow-inner">
<span className="font-mono text-lg font-bold text-amber-100 opacity-90 drop-shadow">
{MENU_OPTIONS.find((option) => option.key === selected)?.label}
</span>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions client/src/components/creator/creator-name/creator-name.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,17 @@ export function CreatorName({ levelName, setLevelName }: CreatorNameProps) {
};

return (
<div className="flex h-full flex-col items-start justify-center gap-2 rounded-lg bg-[#4b2a86] pt-5 pr-4 pb-3 pl-6 text-left shadow-lg">
<div className="flex h-full w-full flex-col items-start justify-center gap-2 rounded-lg bg-[#4b2a86] p-4 text-left shadow-lg">
<label className="px-3 text-xs font-semibold tracking-wide whitespace-nowrap text-violet-200 uppercase">
Level Name
</label>

{!isEditing ? (
<div onClick={handleEdit} className="group w-full cursor-pointer">
<p className="flex h-9 items-center rounded-md border-2 border-transparent px-3 text-left text-base font-bold text-amber-300 transition-colors group-hover:text-amber-200">
<p
className="flex h-9 w-full items-center overflow-hidden rounded-md border-2 border-transparent px-3 text-left text-xs font-bold text-ellipsis whitespace-nowrap text-amber-300 transition-colors group-hover:text-amber-200 md:text-sm"
title={levelName || "Untitled Level"}
>
{levelName || "Untitled Level"}
</p>
</div>
Expand Down
16 changes: 8 additions & 8 deletions client/src/pages/creator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useState } from "react";

import { CreatorBoard } from "../components/creator/creator-board/creator-board";
import { CreatorControl } from "../components/creator/creator-control/creator-control";
Expand All @@ -10,20 +10,20 @@ export function Creator() {
const [dims, setDims] = useState<[number, number]>([7, 8]);

return (
<div className="mx-4 mt-[2dvh] mb-[2dvh] flex w-full flex-col gap-[2dvh] text-center">
<div className="flex h-[14dvh] w-full items-stretch gap-4">
<div className="w-2/5">
<div className="mx-[2dvw] mt-[2dvh] mb-[2dvh] flex w-auto flex-col gap-[2dvh] text-center">
<div className="flex h-[14dvh] w-full items-stretch gap-[1dvw]">
<div className="w-[30dvw]">
<CreatorName levelName={levelName} setLevelName={setLevelName} />
</div>
<div className="w-3/5">
<div className="w-[64dvw]">
<CreatorControl dims={dims} setDims={setDims} />
</div>
</div>
<div className="flex h-[80dvh] w-full items-stretch gap-4">
<div className="w-2/5">
<div className="flex h-[80dvh] w-full items-stretch gap-[1dvw]">
<div className="w-[30dvw]">
<CreatorItemsSelect />
</div>
<div className="w-3/5">
<div className="w-[64dvw]">
<CreatorBoard dims={dims} />
</div>
</div>
Expand Down