feat: update logo, font, radius (#276)

* update default text color * update title size * add padding to dropdown * update bg color * update font family * add create account banner section * change name and font * update banner * update radius to sm every where * Update page.tsx * Update RecipeForm.tsx --------- Co-authored-by: Joar Hansson <[email protected]>
sirisayshello · Nov 20, 2024 · ee00f49 · ee00f49
1 parent 105b5ef
commit ee00f49
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 53 deletions.
diff --git a/src/app/index.css b/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;
 }
diff --git a/src/app/layout.tsx b/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 }],
 };
 

diff --git a/src/app/login/page.tsx b/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>

diff --git a/src/app/page.tsx b/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 }}>

diff --git a/src/app/signup/page.tsx b/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>
 

diff --git a/src/app/theme.ts b/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",

diff --git a/src/components/CreateAccountBanner.tsx b/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>
+  );
+};
diff --git a/src/components/EditIngredientsList.tsx b/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}

diff --git a/src/components/EditInstructionsList.tsx b/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={

diff --git a/src/components/EditRecipeForm.tsx b/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>
 

diff --git a/src/components/IngredientsAndInstructionsToggle.tsx b/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"
         >

diff --git a/src/components/LoginForm.tsx b/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"

diff --git a/src/components/Navbar.tsx b/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 */}

diff --git a/src/components/RecipeCard.tsx b/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}`}