araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Clean up css

Browse source
This commit is contained in:
araemer 2025-10-25 08:00:59 +02:00
parent 5a4e04a47c
commit c866c01dfe
17 changed files with 214 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/App.css
View file

@ -4,6 +4,31 @@
@tailwind utilities;
/* Custom recipe app styles */
@layer preflight {
/* headlines */
h1 {
@apply text-3xl font-black text-blue-900;
}
h2 {
@apply text-xl font-bold mb-4 mt-4;
}
h3 {
@apply font-semibold;
}
/* labels */
label {
@apply text-gray-600;
}
/* input fields */
input, textarea {
@apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
}
}
@layer components {
/* background */
@ -24,17 +49,6 @@
@apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;
}
.content-title {
@apply text-3xl font-black pb-6 text-blue-900;
}
.section-heading {
@apply text-xl font-bold pb-4 pt-4;
}
.subsection-heading {
@apply font-semibold pb-2 pt-4;
}
/* icons */
.default-icon {
@ -42,58 +56,11 @@
}
/* labels */
.label {
@apply text-gray-600;
}
/* errors */
.error-text {
@apply text-sm text-red-600;
}
/* buttons */
.basic-button {
@apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed;
}
.default-button-bg {
@apply bg-gray-300 hover:bg-gray-400;
}
.default-button-text {
@apply text-gray-600;
}
.primary-button-bg {
@apply bg-blue-300 hover:bg-blue-400;
}
.primary-button-text {
@apply text-gray-600;
}
.dark-button-bg {
@apply bg-gray-600 hover:bg-gray-800;
}
.dark-button-text {
@apply text-white;
}
.transparent-button-bg {
@apply bg-transparent hover:bg-transparent;
}
.transparent-button-text {
@apply text-gray-600;
}
/* input fields like input and textarea */
.input-field {
@apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
}
/* groups */
.button-group {
@apply flex gap-4 mt-8;

133
frontend/src/components/LoginPage.tsx
View file

@ -1,81 +1,80 @@
import { useState } from "react";
import {useState} from "react";
import Button from "./basics/Button";
import type { LoginRequestDto } from "../api/dtos/LoginRequestDto";
import type { LoginResponseDto } from "../api/dtos/LoginResponseDto";
import { login } from "../api/points/AuthPoint";
import { getRecipeListUrl } from "../routes";
import { useNavigate } from "react-router-dom";
import type {LoginRequestDto} from "../api/dtos/LoginRequestDto";
import type {LoginResponseDto} from "../api/dtos/LoginResponseDto";
import {login} from "../api/points/AuthPoint";
import {getRecipeListUrl} from "../routes";
import {useNavigate} from "react-router-dom";
import PasswordField from "./basics/PasswordField";
import { ButtonType } from "./basics/BasicButtonDefinitions";
import {ButtonType} from "./basics/BasicButtonDefinitions";
export default function LoginPage() {
const [userName, setUserName] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [userName, setUserName] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const navigate = useNavigate();
const navigate = useNavigate();
/**
* Login
*/
const executeLogin = async () => {
const dto: LoginRequestDto = {
userName,
password,
/**
* Login
*/
const executeLogin = async () => {
const dto: LoginRequestDto = {
userName,
password,
};
try {
console.log("Trying to log in with " + dto.userName);
const loginResponse: LoginResponseDto = await login(dto);
localStorage.setItem("session", JSON.stringify(loginResponse));
console.log("Successfully logged in as " + loginResponse.userData?.userName);
setErrorMessage(null);
// navigate to recipe list after successful login
navigate(getRecipeListUrl());
} catch (err: any) {
console.error("Login failed:", err);
setErrorMessage("Login fehlgeschlagen! Bitte überprüfe Benutzername und Passwort.");
}
};
try {
console.log("Trying to log in with " + dto.userName);
const loginResponse: LoginResponseDto = await login(dto);
localStorage.setItem("session", JSON.stringify(loginResponse));
console.log("Successfully logged in as " + loginResponse.userData?.userName);
setErrorMessage(null);
// navigate to recipe list after successful login
navigate(getRecipeListUrl());
} catch (err: any) {
console.error("Login failed:", err);
setErrorMessage("Login fehlgeschlagen! Bitte überprüfe Benutzername und Passwort.");
}
};
/**
* Catch key events in order to trigger login on enter
*/
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
executeLogin();
}
};
/**
* Catch key events in order to trigger login on enter
*/
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
executeLogin();
}
};
return (
<div className="app-bg">
<div className="flex flex-col gap-3 max-w-sm w-full mx-auto p-6 bg-white rounded-2xl shadow-md">
<h1 className="text-center mb-2">Anmeldung</h1>
return (
<div className="app-bg">
<div className="flex flex-col gap-3 max-w-sm w-full mx-auto p-6 bg-white rounded-2xl shadow-md">
<h2 className="content-title text-center mb-2">Anmeldung</h2>
<input
placeholder="Benutzername"
value={userName}
onChange={(e) => setUserName(e.target.value)}
onKeyDown={handleKeyDown}
/>
<input
className="input-field"
placeholder="Benutzername"
value={userName}
onChange={(e) => setUserName(e.target.value)}
onKeyDown={handleKeyDown}
/>
<PasswordField
onPasswordChanged={setPassword}
onKeyDown={handleKeyDown}
/>
<PasswordField
onPasswordChanged = {setPassword}
onKeyDown={handleKeyDown}
/>
{/* error message */}
{errorMessage && (
<p className="error-text text-center">{errorMessage}</p>
)}
{/* error message */}
{errorMessage && (
<p className="error-text text-center">{errorMessage}</p>
)}
<Button
buttonType={ButtonType.PrimaryButton}
text="Login"
onClick={executeLogin}
/>
</div>
</div>
);
<Button
buttonType={ButtonType.PrimaryButton}
text="Login"
onClick={executeLogin}
/>
</div>
</div>
);
}

47
frontend/src/components/basics/BasicButtonDefinitions.ts
View file

@ -1,38 +1,39 @@
import type { LucideIcon } from "lucide-react";
import type {LucideIcon} from "lucide-react";
/**
* Basic definitions used by all Button types, such as Button.tsx and ButtonLink.tsx
*/
export type BasicButtonProps = {
/** Optional Lucide icon (e.g. Plus, X, Check) */
icon?: LucideIcon;
text?: string;
buttonType?: ButtonType;
/** Optional additional style */
className?: string;
/** Optional Lucide icon (e.g. Plus, X, Check) */
icon?: LucideIcon;
text?: string;
buttonType?: ButtonType;
/** Optional additional style */
className?: string;
}
export const basicButtonStyle = "px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
/**
* Define button types here.
* Export as enum like class.
*/
export const ButtonType = {
DarkButton: {
textColor: "dark-button-text",
backgroundColor: "dark-button-bg",
},
PrimaryButton: {
textColor: "primary-button-text",
backgroundColor: "primary-button-bg",
},
DefaultButton: {
textColor: "default-button-text",
backgroundColor: "default-button-bg",
},
TransparentButton: {
textColor: "transparent-button-text",
backgroundColor: "transparent-button-bg",
},
DarkButton: {
textColor: "text-white",
backgroundColor: "bg-gray-600 hover:bg-gray-800",
},
PrimaryButton: {
textColor: "text-gray-600",
backgroundColor: "bg-blue-300 hover:bg-blue-400",
},
DefaultButton: {
textColor: "text-gray-600",
backgroundColor: "bg-gray-300 hover:bg-gray-400",
},
TransparentButton: {
textColor: "text-gray-600",
backgroundColor: "bg-transparent hover:bg-transparent",
},
} as const;
export type ButtonType = typeof ButtonType[keyof typeof ButtonType];

4
frontend/src/components/basics/Button.tsx
View file

@ -1,5 +1,5 @@
import {defaultIconSize} from "./SvgIcon";
import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions";
type ButtonProps = BasicButtonProps & {
onClick: () => void;
@ -20,7 +20,7 @@ export default function Button({
}: ButtonProps) {
return (
<button
className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
className={`${basicButtonStyle} ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
onClick={onClick}
disabled={disabled}
{...props}

56
frontend/src/components/basics/ButtonLink.tsx
View file

@ -1,37 +1,37 @@
import { Link, type LinkProps } from "react-router-dom"
import { defaultIconSize } from "./SvgIcon"
import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions"
import {Link, type LinkProps} from "react-router-dom"
import {defaultIconSize} from "./SvgIcon"
import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions"
type ButtonLinkProps = LinkProps & BasicButtonProps
& {
to: string
& {
to: string
}
/**
* Link component having the same stile as the button
*/
export default function ButtonLink({
to,
text,
icon: Icon,
buttonType = ButtonType.DefaultButton,
className = "",
...props
}: ButtonLinkProps) {
return (
<Link
to={to}
className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
{...props}
>
<div className="flex items-center gap-2">
{Icon && (
<Icon
size={defaultIconSize}
/>
)}
{text}
</div>
</Link>
)
to,
text,
icon: Icon,
buttonType = ButtonType.DefaultButton,
className = "",
...props
}: ButtonLinkProps) {
return (
<Link
to={to}
className={`${basicButtonStyle} ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
{...props}
>
<div className="flex items-center gap-2">
{Icon && (
<Icon
size={defaultIconSize}
/>
)}
{text}
</div>
</Link>
)
}

2
frontend/src/components/basics/NumberStepControl.tsx
View file

@ -59,7 +59,7 @@ export function NumberStepControl({
pattern="[0-9]*"
value={value}
onChange={handleInputChange}
className="w-16 text-center input-field"
className="w-16 text-center"
/>
<button

36
frontend/src/components/basics/PasswordField.tsx
View file

@ -1,41 +1,41 @@
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
import { defaultIconSize } from "./SvgIcon";
import {Eye, EyeOff} from "lucide-react";
import {useState} from "react";
import {defaultIconSize} from "./SvgIcon";
type PasswordFieldProps = {
onPasswordChanged: (password : string) => void
onPasswordChanged: (password: string) => void
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
}
/**
* Password field component
*/
export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
export default function PasswordField({onPasswordChanged, onKeyDown}: PasswordFieldProps) {
const [showPassword, setShowPassword] = useState(false);
const [password, setPassword] = useState<string>("");
const changePassword = (password : string) => {
const changePassword = (password: string) => {
setPassword(password);
onPasswordChanged(password)
}
return (
<div className="relative">
<input
className="input-field pr-10"
type={showPassword ? "text" : "password"}
placeholder="Passwort"
value={password}
onChange={(e) => changePassword(e.target.value)}
onKeyDown={onKeyDown}
className="pr-10"
type={showPassword ? "text" : "password"}
placeholder="Passwort"
value={password}
onChange={(e) => changePassword(e.target.value)}
onKeyDown={onKeyDown}
/>
{/* Add a little eye icon to the right for showing password */}
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
>
{showPassword ? <EyeOff size={defaultIconSize} /> : <Eye size={defaultIconSize} />}
{showPassword ? <EyeOff size={defaultIconSize}/> : <Eye size={defaultIconSize}/>}
</button>
</div>
);

63
frontend/src/components/basics/SearchField.tsx
View file

@ -1,21 +1,22 @@
import { useState } from "react";
import { Search, X} from "lucide-react";
import { defaultIconSize } from "./SvgIcon";
import {useState} from "react";
import {Search, X} from "lucide-react";
import {defaultIconSize} from "./SvgIcon";
/**
* Custom search field component including a clear search functionality
*/
type SearchFieldProps = {
onSearchStringChanged: (searchString : string) => void
type SearchFieldProps = {
onSearchStringChanged: (searchString: string) => void
}
/**
* @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
* @returns Custom search field component
*/
export default function SearchField({onSearchStringChanged} : SearchFieldProps){
export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
const [currentSearchString, setCurrentSearchString] = useState<string>("")
const changeSearchString = (newSearchString : string) => {
const changeSearchString = (newSearchString: string) => {
console.log(newSearchString);
setCurrentSearchString(newSearchString);
onSearchStringChanged(newSearchString)
@ -23,34 +24,34 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){
return (
<div className="relative">
{/* Input of searchfield
{/* Input of searchfield
Defines border and behavior. Requires extra padding at both sides to
accommodate the icons
*/}
<input
className="input-field pl-10 pr-10"
type="text"
placeholder="Search"
value={currentSearchString}
onChange={ e => changeSearchString(e.target.value) }
/>
{/* Right icon: X
<input
className="pl-10 pr-10"
type="text"
placeholder="Search"
value={currentSearchString}
onChange={e => changeSearchString(e.target.value)}
/>
{/* Right icon: X
Clears search string on click
*/}
<button
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
onClick = { () => changeSearchString("") }
>
<X
size = {defaultIconSize}
/>
</button>
{/* Left icon: Looking glass */}
<div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
<Search
size = {defaultIconSize}
/>
<button
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
onClick={() => changeSearchString("")}
>
<X
size={defaultIconSize}
/>
</button>
{/* Left icon: Looking glass */}
<div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
<Search
size={defaultIconSize}
/>
</div>
</div>
</div>
)
}

3
frontend/src/components/recipes/IngredientGroupListEditor.tsx
View file

@ -34,13 +34,12 @@ export function IngredientGroupListEditor({ingredientGroupList, onChange}: Ingre
}
return (
<div>
<h2 className="section-heading">Zutaten</h2>
<h2>Zutaten</h2>
<div>
{ingredientGroupList.map((ingGrp, index) => (
<div key={index} className="ingredient-group-card mb-4">
<div className="horizontal-input-group columns-2">
<input
className="input-field"
placeholder="Titel (Optional)"
value={ingGrp.title}
onChange={e => handleUpdate(index, "title", e.target.value)}

4
frontend/src/components/recipes/IngredientListEditor.tsx
View file

@ -57,7 +57,6 @@ export function IngredientListEditor({ingredients, onChange}: IngredientListEdit
<div key={index} className="horizontal-input-group">
<input
type="number"
className="input-field"
placeholder="Menge"
value={ing.amount === undefined || ing.amount === null ? "" : ing.amount}
onChange={e => {
@ -66,13 +65,12 @@ export function IngredientListEditor({ingredients, onChange}: IngredientListEdit
}}
/>
<input
className="input-field w-20"
className="w-20"
placeholder="Einheit"
value={ing.unit ?? ""}
onChange={e => handleUpdate(index, "unit", e.target.value)}
/>
<input
className="input-field"
placeholder="Name"
value={ing.name}
onChange={e => handleUpdate(index, "name", e.target.value)}

2
frontend/src/components/recipes/InstructionStepDesktopListItem.tsx
View file

@ -44,7 +44,7 @@ export function InstructionStepDesktopListItem({
</div>
<textarea
className="input-field w-full min-h-[60px] resize-none overflow-hidden"
className="w-full min-h-[60px] resize-none overflow-hidden"
placeholder={`Schritt ${index + 1}`}
value={step.text}
onChange={(e) => onUpdate(index, e.target.value)}

2
frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx
View file

@ -53,7 +53,7 @@ export function InstructionStepListDesktopEditor({
return (
<div>
<h2 className="section-heading mb-2">Zubereitung</h2>
<h2 className="mb-2">Zubereitung</h2>
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext
items={instructionStepList.map((i) => i.internalId)}

2
frontend/src/components/recipes/InstructionStepListMobileEditor.tsx
View file

@ -43,7 +43,7 @@ export function InstructionStepListMobileEditor({
return (
<div>
<h2 className="section-heading mb-2">Zubereitung</h2>
<h2 className="mb-2">Zubereitung</h2>
{/* Instruction list */}
<div className="flex flex-col gap-3">

2
frontend/src/components/recipes/InstructionStepMobileListItem.tsx
View file

@ -74,7 +74,7 @@ export function InstructionStepMobileListItem({
{/* Center column: Instruction step */}
<textarea
className="input-field w-full min-h-[120px] resize-none overflow-hidden"
className="w-full min-h-[120px] resize-none overflow-hidden"
placeholder={`Schritt ${index + 1}`}
value={stepModel.text}
onChange={(e) => onUpdate(index, e.target.value)}

12
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -7,6 +7,7 @@ import ButtonLink from "../basics/ButtonLink"
import {mapRecipeDtoToModel} from "../../mappers/RecipeMapper"
import {NumberStepControl} from "../basics/NumberStepControl.tsx";
import {NumberedListItem} from "../basics/NumberedListItem.tsx";
import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
/**
@ -81,7 +82,7 @@ export default function RecipeDetailPage() {
<div className="content-bg">
{/* Header - remains in position when scrolling */}
<div className="sticky-header">
<h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
<h1>{recipeWorkingCopy.title}</h1>
</div>
{/* Content */}
@ -111,13 +112,13 @@ export default function RecipeDetailPage() {
</div>
{/* Ingredients */}
<h2 className="section-heading">Zutaten</h2>
<h2>Zutaten</h2>
<ul>
{recipeWorkingCopy.ingredientGroupList.map((group, i) => (
<div key={i}>
{/* the title is optional, only print if present */}
{group.title && group.title.trim() !== "" && (
<h3 className="subsection-heading highlight-container-bg mb-2">{group.title}</h3>
<h3 className="highlight-container-bg mb-2">{group.title}</h3>
)}
<ul>
{group.ingredientList.map((ing, j) => (
@ -131,7 +132,7 @@ export default function RecipeDetailPage() {
</ul>
{/* Instructions */}
<h2 className="section-heading">Zubereitung</h2>
<h2>Zubereitung</h2>
<ol className="space-y-4">
{recipe.instructionStepList.map((step, j) => (
<NumberedListItem key={j} index={j} text={step.text}/>
@ -142,12 +143,11 @@ export default function RecipeDetailPage() {
<div className="button-group">
<ButtonLink
to={recipe.id !== undefined ? getRecipeEditUrl(recipe.id) : getRecipeListUrl()} // @todo show error instead
className="basic-button primary-button-bg primary-button-text"
buttonType={ButtonType.PrimaryButton}
text="Bearbeiten"
/>
<ButtonLink
to={getRecipeListUrl()}
className="basic-button default-button-bg default-button-text"
text="Zurueck"
/>
</div>

11
frontend/src/components/recipes/RecipeEditor.tsx
View file

@ -89,25 +89,25 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
{/* Container defining the maximum width of the content */}
<div className="content-bg">
<h1 className="content-title border-b-2 border-gray-300">
<h1 className="border-b-2 border-gray-300">
{recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
</h1>
<div className="content-container">
{/* Title */}
<h2 className="section-heading">Titel</h2>
<h2>Titel</h2>
<input
className={`input-field ${errors.title ? "error-text" : ""}`}
className={`${errors.title ? "error-text" : ""}`}
placeholder="Titel"
value={draft.title}
onChange={e => setDraft({...draft, title: e.target.value})}
/>
{/* Servings */}
<h2 className="section-heading">Portionen</h2>
<h2>Portionen</h2>
<div className="columns-3 gap-2 flex items-center">
<label>Für</label>
<input
type="number"
className="input-field w-20"
className="w-20"
placeholder="1"
value={draft.servings.amount}
onChange={e => {
@ -117,7 +117,6 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
}}
/>
<input
className="input-field"
placeholder="Personen"
value={draft.servings.unit}
onChange={e => {

2
frontend/src/components/recipes/RecipeListPage.tsx
View file

@ -46,7 +46,7 @@ export default function RecipeListPage() {
<div className="content-bg">
{/* Header - remains in position when scrolling */}
<div className="sticky-header">
<h1 className="content-title">Recipes</h1>
<h1>Recipes</h1>
<RecipeListToolbar
onAddClicked={handleAdd}
onSearchStringChanged={setSearchString}