Blokh/feat/backoffice image (#505)

* feat(added env of image url): added env of image url which is fetched by env var

* feat: minor refactoring

* fixed minor bugs

* fixed minor bugs

apps/backoffice-v2/src/common/components/organisms/Header/Header.Logo.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 import { BallerineLogo } from '../../atoms/icons';
 import { Link } from 'react-router-dom';
+import { env } from '../../../env/env';
 
 /**
  * @description {@link BallerineLogo} with navigation to "/" on click.
@@ -13,7 +14,11 @@ export const Logo: FunctionComponent = () => {
         to={`/en`}
         className={`btn-ghost btn flex gap-x-3 text-2xl  normal-case focus:outline-primary`}
       >
-        <BallerineLogo />
+        {!!env.IMAGE_LOGO_URL ? (
+          <img className={`h-20 w-40`} src={env.IMAGE_LOGO_URL} />
+        ) : (
+          <BallerineLogo />
+        )}
       </Link>
     </h1>
   );

apps/backoffice-v2/src/common/env/schema.ts

@@ -16,4 +16,5 @@ export const EnvSchema = z.object({
     .transform(v => v * 1000)
     .or(z.literal(false))
     .catch(undefined),
+  IMAGE_LOGO_URL: z.string()
 });

apps/backoffice-v2/src/pages/Entities/components/Cases/Cases.tsx

@@ -66,7 +66,7 @@ export const Cases: FunctionComponent<ICasesProps> & ICasesChildren = ({
           </div>
         </div>
         <div className={`flex items-center justify-between`}>
-          <div className="dropdown dropdown-bottom dropdown-hover z-[60]">
+          <div className="dropdown-hover dropdown dropdown-bottom z-[60]">
             <button
               className={`btn-ghost btn-sm btn h-[2.125rem] gap-2 border-neutral/10 text-xs focus-visible:outline-primary theme-dark:border-neutral/50`}
               tabIndex={0}

apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx

@@ -22,6 +22,7 @@ import { FormItem } from '../../common/components/organisms/Form/Form.Item';
 import { FormLabel } from '../../common/components/organisms/Form/Form.Label';
 import { FormControl } from '../../common/components/organisms/Form/Form.Control';
 import { FormMessage } from '../../common/components/organisms/Form/Form.Message';
+import { env } from '../../common/env/env';
 
 export const SignIn: FunctionComponent = () => {
   const SignInSchema = z.object({
@@ -58,7 +59,7 @@ export const SignIn: FunctionComponent = () => {
   return (
     <section className={`flex h-full flex-col items-center justify-center`}>
       <div className={`mb-16`}>
-        <BallerineLogo />
+        {!!env.IMAGE_LOGO_URL ? <img className={`w-40`} src={env.IMAGE_LOGO_URL} /> : <BallerineLogo />}
       </div>
       <Card className={`w-full max-w-lg`}>
         <CardHeader className={`mb-2 text-center text-4xl font-bold`}>Sign In</CardHeader>