diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 94112e2..52a9a80 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -12,7 +12,7 @@ import Link from "next/link";
export default function About() {
return (
<Center>
- <Stack pb={"xl"} maw={"60ch"}>
+ <Stack mb="4rem" maw={"60ch"}>
<Stack mt={"xl"}>
<Title ta="center">About us</Title>
<Text>
diff --git a/src/app/dashboard/[slug]/edit/page.tsx b/src/app/dashboard/[slug]/edit/page.tsx
index 963ba8e..46d04e3 100644
--- a/src/app/dashboard/[slug]/edit/page.tsx
+++ b/src/app/dashboard/[slug]/edit/page.tsx
@@ -3,6 +3,7 @@ import { EditRecipeForm } from "@/components/EditRecipeForm";
import { getAuth } from "@/lib/auth";
import prisma from "@/lib/db";
import { getUserTags } from "@/lib/queries";
+import { Space } from "@mantine/core";
import { notFound } from "next/navigation";
export default async function EditRecipePage({
@@ -36,6 +37,7 @@ export default async function EditRecipePage({
<Breadcrumbs />
<EditRecipeForm recipe={convertedRecipe} userTags={userTags} />
+ <Space h="4rem" />
</>
);
}
diff --git a/src/app/dashboard/[slug]/page.tsx b/src/app/dashboard/[slug]/page.tsx
index 7884796..5e9f1d8 100644
--- a/src/app/dashboard/[slug]/page.tsx
+++ b/src/app/dashboard/[slug]/page.tsx
@@ -1,6 +1,15 @@
import prisma from "@/lib/db";
import Link from "next/link";
-import { Anchor, Group, Stack, Title, Text, Box, Badge } from "@mantine/core";
+import {
+ Anchor,
+ Group,
+ Stack,
+ Title,
+ Text,
+ Box,
+ Badge,
+ Space,
+} from "@mantine/core";
import { IngredientsAndInstructionsToggle } from "@/components/IngredientsAndInstructionsToggle";
import { getAuth } from "@/lib/auth";
@@ -8,6 +17,7 @@ import { notFound } from "next/navigation";
import { ScreenAwakeToggle } from "@/components/ScreenAwakeToggle";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import EditRecipeButton from "@/components/EditRecipeButton";
+import { IconClockHour4, IconToolsKitchen2 } from "@tabler/icons-react";
export default async function RecipePage({
searchParams,
@@ -68,8 +78,15 @@ export default async function RecipePage({
{recipe.author}
</Anchor>
</Text>
- <Text size="xs">Total time: {recipe.time}</Text>
- <Text size="xs">Servings: {recipe.yield}</Text>
+ <Group gap={"xs"}>
+ <IconClockHour4 size={16} />
+ <Text size="xs">Total time: {recipe.time}</Text>
+ </Group>
+
+ <Group gap={"xs"}>
+ <IconToolsKitchen2 size={16} />
+ <Text size="xs">Servings: {recipe.yield}</Text>
+ </Group>
</Group>
{/* The ScreenAwakeToggle is rendered inside IngredientsAndInstructionsToggle on small screens */}
@@ -81,7 +98,7 @@ export default async function RecipePage({
<IngredientsAndInstructionsToggle recipe={convertedRecipe} />
</Box>
- <Group pb={"xl"}>
+ <Group>
{recipe.tags?.map((tagRelation, index) => (
<Badge
key={index}
@@ -97,6 +114,7 @@ export default async function RecipePage({
</Badge>
))}
</Group>
+ <Space h="4rem" />
</>
);
}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 34ac821..4d57bc8 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -39,7 +39,7 @@ export default async function Dashboard() {
</Group>
</Box>
<RecipesList tags={tags} recipes={convertedRecipes} />
- <Space h="xl" />
+ <Space h="4rem" />
</>
);
}
diff --git a/src/app/welcome/page.tsx b/src/app/welcome/page.tsx
index c2d249e..36494da 100644
--- a/src/app/welcome/page.tsx
+++ b/src/app/welcome/page.tsx
@@ -32,7 +32,7 @@ export default async function Welcome() {
</Box>
<RecipeForm session={session} userTags={userTags} />
<RecipesList recipes={convertedRecipes} title="Your latest recipes" />
- <Space h="xl" />
+ <Space h="4rem" />
</Flex>
);
}
diff --git a/src/components/EditRecipeForm.tsx b/src/components/EditRecipeForm.tsx
index 4d965c7..dcd8d6c 100644
--- a/src/components/EditRecipeForm.tsx
+++ b/src/components/EditRecipeForm.tsx
@@ -9,7 +9,6 @@ import {
Flex,
Group,
Paper,
- Space,
TagsInput,
Text,
TextInput,
@@ -238,7 +237,7 @@ export const EditRecipeForm = ({ recipe, userTags }: EditRecipeProps) => {
{/* General info */}
- <Fieldset radius={"sm"} mb="md" legend="Recipe information">
+ <Fieldset radius={"sm"} mt="lg" mb="lg" legend="Recipe information">
<TextInput
radius={"sm"}
label="Title"
@@ -281,7 +280,7 @@ export const EditRecipeForm = ({ recipe, userTags }: EditRecipeProps) => {
view={view}
/>
- <Fieldset radius={"sm"} mb="md" legend="Tags">
+ <Fieldset radius={"sm"} legend="Tags">
<TagsInput
radius={"sm"}
label="Recipe tags"
@@ -294,8 +293,6 @@ export const EditRecipeForm = ({ recipe, userTags }: EditRecipeProps) => {
comboboxProps={{ dropdownPadding: 8 }}
/>
</Fieldset>
-
- <Space h="md" />
</form>
</>
);
diff --git a/src/components/IngredientsAndInstructionsToggle.tsx b/src/components/IngredientsAndInstructionsToggle.tsx
index 244523c..11bb69f 100644
--- a/src/components/IngredientsAndInstructionsToggle.tsx
+++ b/src/components/IngredientsAndInstructionsToggle.tsx
@@ -13,7 +13,7 @@ import { useState } from "react";
import RenderedInstructions from "./RenderedInstructions";
import RenderedIngredients from "./RenderedIngredients";
import { ScreenAwakeToggle } from "./ScreenAwakeToggle";
-import { IconLadle, IconMushroom } from "@tabler/icons-react";
+import { IconCarrot, IconLadle } from "@tabler/icons-react";
type IngAndInstToggleProps = {
recipe: UserRecipe;
@@ -122,9 +122,7 @@ export const IngredientsAndInstructionsToggle = ({
label: (
<>
<Center style={{ gap: 10 }}>
- <IconMushroom
- style={{ width: rem(16), height: rem(16) }}
- />
+ <IconCarrot style={{ width: rem(16), height: rem(16) }} />
<Text size="sm" visibleFrom="xs">
Ingredients
</Text>
diff --git a/src/components/RecipeForm.tsx b/src/components/RecipeForm.tsx
index 2c9aff6..6c31bd1 100644
--- a/src/components/RecipeForm.tsx
+++ b/src/components/RecipeForm.tsx
@@ -188,7 +188,6 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
component="section"
style={{ justifySelf: "flex-start" }}
>
-
<Divider my="md" />
<Box
@@ -227,9 +226,8 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
{/* Only shown when there is no scraped recipe, user is not logged in and no notifications are on screen */}
<Transition
mounted={
- !recipe?.ingredients &&
- !session &&
- notificationsStore.notifications.length === 0
+ (!session && notificationsStore.notifications.length === 0) ||
+ (!session && !!recipe)
}
transition="slide-down"
duration={300}
@@ -241,7 +239,6 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
</Box>
)}
</Transition>
- {recipe && <CreateAccountBanner />}
</Stack>
);
};