fix: only display banner if no session and minor layout updates (#283)

* add consistent margin bottom on pages * add icons for time and servings * update banner condition * update icon to carrot
sirisayshello · Nov 20, 2024 · 7655a59 · 7655a59
1 parent a59dd80
commit 7655a59
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 21 deletions.
diff --git 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
@@ -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
@@ -1,13 +1,23 @@
 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";
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };