DOKY-194 Create component for Logo (#127)

Refactor logo component usage across pages Replace hardcoded logo references with the newly created reusable `Logo` component in multiple pages. This improves maintainability and consistency of the logo display throughout the application.
hanna-eismant · Dec 10, 2024 · d00f4e8 · d00f4e8
1 parent 329361b
commit d00f4e8
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 4 deletions.
diff --git a/app-server/doky-front/src/components/Logo/Logo.jsx b/app-server/doky-front/src/components/Logo/Logo.jsx
@@ -0,0 +1,5 @@
+import React, {memo} from 'react';
+
+const Logo = () => <img className='mb-3 mt-3 img-fluid' alt="Logo" src='/logo-color-bg.svg'/>;
+
+export default memo(Logo);
diff --git a/app-server/doky-front/src/components/Logo/index.js b/app-server/doky-front/src/components/Logo/index.js
@@ -0,0 +1,3 @@
+import Logo from './Logo.jsx';
+
+export default Logo;
diff --git a/app-server/doky-front/src/pages/Login/Login.jsx b/app-server/doky-front/src/pages/Login/Login.jsx
@@ -5,6 +5,7 @@ import {FormInput} from '../../components';
 import AlertError from '../../components/AlertError.jsx';
 import {useLogin} from './useLogin.js';
 import {useForm} from '../../hooks/useForm.js';
+import Logo from '../../components/Logo/Logo.jsx';
 
 const initialFormData = {
   uid: '',
@@ -27,7 +28,7 @@ const Login = () => {
       {globalError ? <AlertError message={globalError}/> : ''}
       <div className='d-flex align-items-center justify-content-center'>
         <form onSubmit={handleSubmit} className='col-3'>
-          <img className='mb-3 mt-3 img-fluid' src='/logo-color-bg.svg'/>
+          <Logo/>
           <FormInput id='uid' label='Email' type='text' value={data.uid} onChange={uid.setValue}
             errors={uid.errors}/>
           <FormInput id='password' label='Password' type='password' value={data.password} onChange={password.setValue}

diff --git a/app-server/doky-front/src/pages/Register/Register.jsx b/app-server/doky-front/src/pages/Register/Register.jsx
@@ -5,6 +5,7 @@ import {useRegister} from './useRegister.js';
 import {useForm} from '../../hooks/useForm.js';
 import {FormInput} from '../../components';
 import AlertError from '../../components/AlertError.jsx';
+import Logo from '../../components/Logo/Logo.jsx';
 
 const initialFormData = {
   uid: '',
@@ -29,7 +30,7 @@ const Register = () => {
       {globalError ? <AlertError message={globalError}/> : ''}
       <div className="d-flex align-items-center justify-content-center">
         <form onSubmit={handleSubmit} className="col-3">
-          <img className="mb-3 mt-3 img-fluid" src="/logo-color-bg.svg"/>
+          <Logo/>
           <FormInput id="uid" label="Email" type="text" value={data.uid} onChange={uid.setValue}
             errors={uid.errors}/>
           <FormInput id="password" label="Password" type="password" value={data.password} onChange={password.setValue}

diff --git a/app-server/doky-front/src/pages/ResetPassword/ResetPassword.jsx b/app-server/doky-front/src/pages/ResetPassword/ResetPassword.jsx
@@ -4,6 +4,7 @@ import {Link} from 'react-router-dom';
 import React, {useState} from 'react';
 import {useForm} from '../../hooks/useForm.js';
 import {useRequestResetPassword} from './useRequestResetPassword.js';
+import Logo from '../../components/Logo/Logo.jsx';
 
 const initialFormData = {
   email: ''
@@ -30,7 +31,7 @@ const ResetPassword = () => {
       {globalError ? <AlertError message={globalError}/> : ''}
       <div className='d-flex align-items-center justify-content-center'>
         <div className='col-3'>
-          <img alt='doky logo' className='mb-3 mt-3 img-fluid' src='/logo-color-bg.svg'/>
+          <Logo/>
 
           {isSent && !globalError ? (
             <div className='mt-3 row text-center'>

diff --git a/app-server/doky-front/src/pages/UpdatePassword/UpdatePassword.jsx b/app-server/doky-front/src/pages/UpdatePassword/UpdatePassword.jsx
@@ -4,6 +4,7 @@ import {Link, useNavigate, useSearchParams} from 'react-router-dom';
 import React from 'react';
 import {useForm} from '../../hooks/useForm.js';
 import {useUpdatePassword} from './useUpdatePassword.js';
+import Logo from '../../components/Logo/Logo.jsx';
 
 const initialFormData = {
   password: '',
@@ -36,7 +37,7 @@ const UpdatePassword = () => {
       {globalError ? <AlertError message={globalError}/> : ''}
       <div className='d-flex align-items-center justify-content-center'>
         <div className='col-3'>
-          <img alt='doky logo' className='mb-3 mt-3 img-fluid' src='/logo-color-bg.svg'/>
+          <Logo/>
           <form onSubmit={handleSubmit}>
             <FormInput id='password' label='Password' type='password' value={data.password}
               onChange={password.setValue}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Logo from './Logo.jsx';

		export default Logo;