feat: update logo, font, radius

src/app/index.css

@@ -1,3 +1,4 @@
 :root[data-mantine-color-scheme="light"] {
   --mantine-color-body: var(--mantine-color-cream-0) !important;
+  --mantine-color-text: var(--mantine-color-dark-5) !important;
 }

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { ModalsProvider } from "@mantine/modals";
 import "./index.css";
 
 export const metadata: Metadata = {
-  title: "Recipe Declutter",
-  description: "Declutter your favorite recipes here!",
+  title: "Savorly",
+  description: "Declutter and save your favorite recipes here!",
   icons: [{ rel: "icon", url: Favicon.src }],
 };
 

src/app/login/page.tsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 
 export default function Login() {
   return (
-    <Box py="4rem">
-      <Title ta="center" mb="xl">
+    <Box py="2rem">
+      <Title ta="center" mb="xl" fz={"h2"}>
         Welcome back!
       </Title>
 
@@ -15,7 +15,7 @@ export default function Login() {
         Don&apos;t have an account?{" "}
         <span>
           <Anchor component={Link} href="/signup" fw="bold">
-            Create one
+            Create one here
           </Anchor>
         </span>
       </Text>

src/app/page.tsx

@@ -1,19 +1,19 @@
 import { RecipeForm } from "@/components/RecipeForm";
-import { Box, Flex, Space, Text, Title } from "@mantine/core";
+import { Box, Flex, Space, Stack, Text, Title } from "@mantine/core";
 
 export default function Home() {
   return (
-    <Flex direction="column" h="100%">
+    <Flex direction="column">
       <Box mt="xl">
-        <Flex gap="md" direction="column">
-          <Title fz={{ base: "54px", xs: "60px" }}>
-            Welcome to <br /> Recipe Declutter!
+        <Stack gap="md">
+          <Title fz={{ base: "40px", xs: "60px" }}>
+            Declutter your recipes <br /> with Savorly!
           </Title>
           <Text>
             Paste, click, and get the essentials — your ingredients and
             instructions at your fingertips.
           </Text>
-        </Flex>
+        </Stack>
         <Space h="xl" />
       </Box>
       <Box style={{ flex: 1 }}>

src/app/signup/page.tsx

@@ -5,8 +5,8 @@ import Link from "next/link";
 export default function SignUp() {
   return (
     <>
-      <Box py="4rem">
-        <Title ta="center" mb="xl">
+      <Box py="2rem">
+        <Title ta="center" mb="xl" fz={"h2"}>
           Welcome to Recipe Declutter!
         </Title>
 

src/app/theme.ts

@@ -1,17 +1,19 @@
 import { createTheme } from "@mantine/core";
-import { Poppins, Grand_Hotel, Karla } from "next/font/google";
+import { Poppins, Galada, Karla } from "next/font/google";
+
 
 const poppins = Poppins({
   subsets: ["latin"],
   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
+
+const galada = Galada({ subsets: ["latin"], weight: ["400"] });
+
 const karla = Karla({
   subsets: ["latin"],
 });
 
-const grandHotel = Grand_Hotel({ subsets: ["latin"], weight: ["400"] });
-
 export const theme = createTheme({
   colors: {
     dustyRed: [
@@ -62,13 +64,19 @@ export const theme = createTheme({
 
   headings: {
     fontFamily: `${poppins.style.fontFamily}, sans-serif`,
+    sizes: {
+      h1: {
+        fontSize: "48px",
+      },
+      h2: { fontSize: "24px" },
+    },
   },
 
   // all text except headings:
   fontFamily: `${karla.style.fontFamily}, sans-serif`,
 
   other: {
-    fontFamily: `${grandHotel.style.fontFamily}, sans-serif`,
+    fontFamily: `${galada.style.fontFamily}, sans-serif`,
     fontSizes: {
       base: "18px",
       xs: "24px",

src/components/CreateAccountBanner.tsx

@@ -0,0 +1,52 @@
+import { Paper, Flex, Box, Title, Button, Stack, Text } from "@mantine/core";
+import { IconChefHat, IconCarrot, IconCheese } from "@tabler/icons-react";
+import Link from "next/link";
+
+export const CreateAccountBanner = () => {
+  return (
+    <Paper
+      component="section"
+      p="xl"
+      bg={"var(--mantine-color-default)"}
+      radius={"sm"}
+      shadow="xs"
+    >
+      <Flex justify="space-between" gap={"sm"}>
+        <Box>
+          <Title mb={"md"} order={2}>
+            Save, Edit & Organize Recipes
+          </Title>
+          <Text maw={"60ch"}>
+            Unlock the full experience by creating an account. Keep your recipes
+            saved, customized, and perfectly organized.
+          </Text>
+          <Button component={Link} href={"/signup"} mt={"xl"}>
+            Create Free Account
+          </Button>
+        </Box>
+        <Stack m={"auto"} align="center" justify="center" gap={0}>
+          <Flex direction={{ base: "column", sm: "row" }}>
+            <IconChefHat
+              style={{
+                color: "var(--mantine-color-dustyRed-7)",
+                rotate: "-15deg",
+              }}
+              size={60}
+              stroke={1}
+            />
+            <IconCarrot
+              style={{ color: "var(--mantine-color-dustyRed-7)" }}
+              size={60}
+              stroke={1}
+            />
+          </Flex>
+          <IconCheese
+            style={{ color: "var(--mantine-color-dustyRed-7)" }}
+            size={60}
+            stroke={1}
+          />
+        </Stack>
+      </Flex>
+    </Paper>
+  );
+};

src/components/EditIngredientsList.tsx

@@ -85,7 +85,7 @@ export const EditIngredientsList = ({
                           <IconMenu size="1.2rem" />
                         </Flex>
                         <TextInput
-                          radius={"md"}
+                          radius={"sm"}
                           style={{ width: "100%" }}
                           placeholder={`Ingredient ${index + 1}`}
                           value={ingredient.text}

src/components/EditInstructionsList.tsx

@@ -67,10 +67,10 @@ export const EditInstructionsList = ({
       {hasSections ? (
         <>
           {sectionedInstructions.map((section, sectionIndex) => (
-            <Card key={sectionIndex} shadow="sm" mb="md" radius={"md"}>
+            <Card key={sectionIndex} shadow="sm" mb="md" radius={"sm"}>
               <Group wrap="nowrap" align="flex-start">
                 <TextInput
-                  radius={"md"}
+                  radius={"sm"}
                   description="Section title"
                   style={{ width: "100%" }}
                   placeholder="Section title"
@@ -126,7 +126,7 @@ export const EditInstructionsList = ({
                                 </Flex>
 
                                 <Textarea
-                                  radius={"md"}
+                                  radius={"sm"}
                                   autosize
                                   minRows={1}
                                   rightSection={
@@ -218,7 +218,7 @@ export const EditInstructionsList = ({
                               <IconMenu size="1.2rem" />
                             </Flex>
                             <Textarea
-                              radius={"md"}
+                              radius={"sm"}
                               autosize
                               minRows={1}
                               rightSection={

src/components/EditRecipeForm.tsx

@@ -240,20 +240,20 @@ export const EditRecipeForm = ({ recipe, userTags }: EditRecipeProps) => {
 
         <Fieldset radius={"sm"} mb="md" legend="Recipe information">
           <TextInput
-            radius={"md"}
+            radius={"sm"}
             label="Title"
             placeholder="Recipe title"
             {...form.getInputProps("title")}
           />
           <TextInput
-            radius={"md"}
+            radius={"sm"}
             mt={"md"}
             label="Total time"
             placeholder="Total time to cook"
             {...form.getInputProps("time")}
           />
           <TextInput
-            radius={"md"}
+            radius={"sm"}
             mt={"md"}
             label="Servings"
             placeholder="Serving size"
@@ -283,15 +283,15 @@ export const EditRecipeForm = ({ recipe, userTags }: EditRecipeProps) => {
 
         <Fieldset radius={"sm"} mb="md" legend="Tags">
           <TagsInput
-            radius={"md"}
+            radius={"sm"}
             label="Recipe tags"
             placeholder="Press Enter to submit a tag"
             value={tags}
             defaultValue={existingTags}
             data={allUserTags}
             onChange={setTags}
             mb="md"
-            styles={{ dropdown: { borderRadius: "24px" } }}
+            comboboxProps={{ dropdownPadding: 8 }}
           />
         </Fieldset>
 

src/components/IngredientsAndInstructionsToggle.tsx

@@ -65,7 +65,7 @@ export const IngredientsAndInstructionsToggle = ({
         <Paper
           bg={"var(--mantine-color-default)"}
           miw={"30%"}
-          radius={"xs"}
+          radius={"sm"}
           p="md"
           shadow="xs"
         >
@@ -82,7 +82,7 @@ export const IngredientsAndInstructionsToggle = ({
         </Paper>
         <Paper
           bg={"var(--mantine-color-default)"}
-          radius={"xs"}
+          radius={"sm"}
           p="md"
           shadow="xs"
         >

src/components/LoginForm.tsx

@@ -84,6 +84,7 @@ export default function LoginForm() {
   return (
     <>
       <Paper
+        bg={"var(--mantine-color-default)"}
         p={{ base: "md", sm: "xl" }}
         withBorder
         shadow="md"

src/components/Navbar.tsx

@@ -61,7 +61,7 @@ export const Navbar = () => {
     <Box component="header" bg={theme.primaryColor} h={"56px"}>
       <Container {...containerProps} size="md">
         {/* Burger menu */}
-        <Group>
+        <Group align="center" justify="center">
           <Burger
             hiddenFrom="xs"
             color="cream.0"
@@ -76,8 +76,8 @@ export const Navbar = () => {
           >
             <Group>
               <Drawer.CloseButton m={0} />
-              <Text size="xl" fw={700}>
-                Recipe Declutter
+              <Text size="xl" fw={700} ff={theme.other.fontFamily}>
+                Savorly
               </Text>
             </Group>
             <Divider mt={16} mb={16} />
@@ -104,7 +104,7 @@ export const Navbar = () => {
               fz={theme.other.fontSizes}
               pr={"lg"}
             >
-              Recipe Declutter
+              Savorly
             </Text>
           </Anchor>
           {/* Burger menu content if big screen */}

src/components/RecipeCard.tsx

@@ -4,7 +4,13 @@ import Link from "next/link";
 
 export const RecipeCard = ({ recipe }: { recipe: UserRecipe }) => {
   return (
-    <Paper withBorder radius={"sm"} p="md" h={"100%"}>
+    <Paper
+      withBorder
+      radius={"sm"}
+      p="md"
+      h={"100%"}
+      bg={"var(--mantine-color-default)"}
+    >
       <Anchor
         component={Link}
         href={`/dashboard/${recipe.slug}?id=${recipe.id}`}

src/components/RecipeForm.tsx

@@ -9,25 +9,24 @@ import {
   Box,
   Title,
   Divider,
-  Alert,
   Stack,
   Transition,
+  Space,
 } from "@mantine/core";
 import { useField } from "@mantine/form";
 import { useNotifications } from "@mantine/notifications";
 
 import { IngredientsAndInstructionsToggle } from "./IngredientsAndInstructionsToggle";
 import { SaveRecipeModal } from "./SaveRecipeModal";
 import { Session } from "next-auth";
-import { IconChefHat } from "@tabler/icons-react";
-import Link from "next/link";
 import {
   showLoadingNotification,
   updateNotificationAsError,
   updateNotificationAsSuccess,
 } from "@/lib/notifications";
 import { ScreenAwakeToggle } from "./ScreenAwakeToggle";
 import { Confetti } from "./Confetti";
+import { CreateAccountBanner } from "./CreateAccountBanner";
 
 type RecipeFormProps = {
   session?: Session | null;
@@ -141,6 +140,8 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
     }
   }
 
+  const hasResult = recipe?.ingredients && recipe.instructions.length > 0;
+
   return (
     <Stack
       // Styling dependent on whether banner should be displayed on the bottom (space-between),
@@ -179,8 +180,15 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
 
       {/* recipe section */}
       {confetti && <Confetti />}
-      {recipe?.ingredients && recipe.instructions.length > 0 && (
-        <Box component="section" style={{ justifySelf: "flex-start" }}>
+
+      {!hasResult && <Space h={{ base: "4rem", xs: "8rem" }} />}
+      {hasResult && (
+        <Box
+          mb={"md"}
+          component="section"
+          style={{ justifySelf: "flex-start" }}
+        >
+
           <Divider my="md" />
 
           <Box
@@ -229,22 +237,11 @@ export const RecipeForm = ({ session, userTags }: RecipeFormProps) => {
       >
         {(styles) => (
           <Box mt="auto" style={styles}>
-            <Alert
-              variant="light"
-              title="Save, Edit & Organize Recipes"
-              icon={<IconChefHat />}
-            >
-              <Box>
-                Unlock the full experience by creating an account. Keep your
-                recipes saved, customized, and perfectly organized.
-              </Box>
-              <Button component={Link} href={"/signup"} mt={"md"}>
-                Create Free Account
-              </Button>
-            </Alert>
+            <CreateAccountBanner />
           </Box>
         )}
       </Transition>
+      {recipe && <CreateAccountBanner />}
     </Stack>
   );
 };

src/components/SignUpForm.tsx

@@ -126,6 +126,7 @@ export default function SignUpForm() {
 
   return (
     <Paper
+      bg={"var(--mantine-color-default)"}
       p={{ base: "md", sm: "xl" }}
       withBorder
       shadow="md"

src/components/TagsFilter.tsx

@@ -22,7 +22,8 @@ export default function TagsFilter({
       onChange={onTagsChange}
       searchable
       clearable
-      style={{ width: "100%", dropdown: { borderRadius: "24px" } }}
+      style={{ width: "100%" }}
+      comboboxProps={{ dropdownPadding: 8 }}
     />
   );
 }