Fix misaligned flip journal button positioning

Author: hylu-dev

root/bujots-front/src/components/JournalBack.tsx

@@ -1,15 +1,17 @@
 import { ReactElement, ReactNode } from "react";
 import { motion } from 'framer-motion'
 import JournalLayout from "./journal/JournalLayout";
+import Button from "./common/Button";
+import { NavigateFunction, useNavigate } from "react-router-dom";
 
 type Props = {
     children: ReactNode | ReactElement;
 };
 
 const JournalBack = ({ children }: Props) => {
+    const navigate: NavigateFunction = useNavigate();
 
     return <>
-
         <JournalLayout>
             <motion.div className="col-start-2 col-end-3 row-start-2 row-end-3"
                 initial={{ opacity: 0 }}
@@ -24,10 +26,17 @@ const JournalBack = ({ children }: Props) => {
                     }}
                 >
                     <div className='basis-0 grow-[5] p-5'>
-                        <div className='h-full flex flex-col justify-end items-end'>
-                            <div className="relative rounded shadow bg-cover-label p-5 flex basis-0 max-h-fit max-w-fit flex-col items-center justify-end">
+                        <div className='relative h-full flex flex-col justify-end items-end'>
+                            <div className="rounded shadow bg-cover-label p-5 flex basis-0 max-h-fit max-w-fit flex-col items-center justify-end">
                                 {children}
                             </div>
+                            <Button
+                                styles={"absolute -left-0 -bottom-0 bg-cover-dark text-cover-light rounded p-1"}
+                                handler={() => navigate('/')}>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="w-6 h-6">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3" />
+                                </svg>
+                            </Button>
                         </div>
                     </div>
                     <div className='bg-spine-pattern basis-0 grow-[1]'

root/bujots-front/src/components/JournalCover.tsx

@@ -1,12 +1,15 @@
 import { ReactElement, ReactNode } from "react";
 import { motion } from 'framer-motion'
 import JournalLayout from "./journal/JournalLayout";
+import Button from "./common/Button";
+import { NavigateFunction, useNavigate } from "react-router-dom";
 
 type Props = {
     children: ReactNode | ReactElement;
 };
 
 const JournalCover = ({ children }: Props) => {
+    const navigate: NavigateFunction = useNavigate();
 
     return <>
 
@@ -36,6 +39,13 @@ const JournalCover = ({ children }: Props) => {
                             </div>
                             <div className="relative flex basis-0 grow-[2] flex-col items-center">
                                 {children}
+                                <Button
+                                    styles={"absolute -right-0 -bottom-0 bg-cover-dark text-cover-light rounded p-1"}
+                                    handler={() => navigate('/register')}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="w-6 h-6">
+                                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+                                    </svg>
+                                </Button>
                             </div>
                         </div>
 

root/bujots-front/src/pages/Login.tsx

@@ -73,14 +73,6 @@ export default function Login() {
                     type={"submit"}
                 >{isLoading ? <Spinner size={1} ringColor='#c29c75' spinColor='#5c4d3b'></Spinner> : "Login"}</Button>
             </form>
-
-            <Button
-                styles={"absolute -right-0 -bottom-0 bg-cover-dark text-cover-light rounded p-1"}
-                handler={() => navigate('/register')}>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="w-6 h-6">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
-                </svg>
-            </Button>
         </JournalCover>
     </>
 }

root/bujots-front/src/pages/Register.tsx

@@ -63,14 +63,6 @@ export default function Register() {
                     type={"submit"}
                 >{isLoading ? <Spinner size={1} ringColor='#c29c75' spinColor='#5c4d3b' /> : "Create"}</Button>
             </form>
-            <Button
-                styles={"absolute -left-28 -bottom-0 bg-cover-dark text-cover-light rounded p-1"}
-                handler={() => navigate('/')}>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="w-6 h-6">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3" />
-                </svg>
-
-            </Button>
         </JournalBack>
     </>
 }