From 8608431490c28410226dd6b7c406c6fac5e5ca56 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Thu, 14 Dec 2023 15:58:40 +0000
Subject: [PATCH] feat: add conditional mation logo by default

---
 .../web/src/components/DefaultLogo/index.tsx  | 22 +++++++++++++++++++
 packages/web/src/components/Logo/index.tsx    |  9 ++------
 .../MationLogo/assets/mation-logo.svg         |  3 +++
 .../web/src/components/MationLogo/index.tsx   |  8 +++++++
 4 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 packages/web/src/components/DefaultLogo/index.tsx
 create mode 100644 packages/web/src/components/MationLogo/assets/mation-logo.svg
 create mode 100644 packages/web/src/components/MationLogo/index.tsx

diff --git a/packages/web/src/components/DefaultLogo/index.tsx b/packages/web/src/components/DefaultLogo/index.tsx
new file mode 100644
index 00000000..8c989fc3
--- /dev/null
+++ b/packages/web/src/components/DefaultLogo/index.tsx
@@ -0,0 +1,22 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import MationLogo from 'components/MationLogo';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
+
+const DefaultLogo = () => {
+  const { isMation, loading } = useAutomatischInfo();
+
+  if (loading) return <React.Fragment />;
+
+  if (isMation) return <MationLogo />;
+
+  return (
+    <Typography variant="h6" component="h1" data-test="typography-logo" noWrap>
+      <FormattedMessage id="brandText" />
+    </Typography>
+  );
+};
+
+export default DefaultLogo;
diff --git a/packages/web/src/components/Logo/index.tsx b/packages/web/src/components/Logo/index.tsx
index a6c36259..441fb5ee 100644
--- a/packages/web/src/components/Logo/index.tsx
+++ b/packages/web/src/components/Logo/index.tsx
@@ -1,8 +1,7 @@
-import Typography from '@mui/material/Typography';
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import CustomLogo from 'components/CustomLogo/index.ee';
+import DefaultLogo from 'components/DefaultLogo';
 import useConfig from 'hooks/useConfig';
 
 const Logo = () => {
@@ -13,11 +12,7 @@ const Logo = () => {
 
   if (logoSvgData) return <CustomLogo />;
 
-  return (
-    <Typography variant="h6" component="h1" data-test="typography-logo" noWrap>
-      <FormattedMessage id="brandText" />
-    </Typography>
-  );
+  return <DefaultLogo />;
 };
 
 export default Logo;
diff --git a/packages/web/src/components/MationLogo/assets/mation-logo.svg b/packages/web/src/components/MationLogo/assets/mation-logo.svg
new file mode 100644
index 00000000..37b70a51
--- /dev/null
+++ b/packages/web/src/components/MationLogo/assets/mation-logo.svg
@@ -0,0 +1,3 @@
+<svg width="115" height="22" viewBox="0 0 411 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.991 15.3555C281.231 15.3555 284.669 11.918 284.669 7.67773C284.669 3.43744 281.231 0 276.991 0C272.751 0 269.313 3.43744 269.313 7.67773C269.313 11.918 272.751 15.3555 276.991 15.3555ZM367.497 50.0315C367.497 41.5346 374.385 34.6464 382.882 34.6464C391.379 34.6464 398.267 41.5346 398.267 50.0315V71.2076H409.851V50.0315C409.851 35.1371 397.777 23.0627 382.882 23.0627C367.988 23.0627 355.914 35.1371 355.914 50.0315V71.2076H367.497V50.0315ZM271.199 71.2071V28.8539H282.783V71.2071H271.199ZM237.933 34.6464V71.2076H249.517V34.6464H259.608V23.0627H249.517V7.67718H237.933V23.0627H227.843V34.6464H237.933ZM176.899 50.0296C176.899 58.5265 183.787 65.4146 192.284 65.4146V76.9983C177.389 76.9983 165.315 64.924 165.315 50.0296C165.315 35.1351 177.389 23.0608 192.284 23.0608C207.178 23.0608 219.252 35.1359 219.252 50.0303L219.253 71.2068H207.669L207.669 50.0303C207.669 41.5334 200.781 34.6445 192.284 34.6445C183.787 34.6445 176.899 41.5326 176.899 50.0296ZM71.0145 50.0315C71.0145 41.5346 77.9026 34.6464 86.3995 34.6464C94.8965 34.6464 101.785 41.5346 101.785 50.0315V71.2071H113.368V50.0315C113.368 41.5346 120.256 34.6464 128.753 34.6464C137.25 34.6464 144.138 41.5346 144.138 50.0315L144.138 71.2071H155.722L155.722 50.0315C155.722 35.1371 143.647 23.0627 128.753 23.0627C120.165 23.0627 112.515 27.0767 107.576 33.3308C102.637 27.0767 94.9873 23.0627 86.3995 23.0627C71.5051 23.0627 59.4308 35.1371 59.4308 50.0315V71.2071H71.0145V50.0315ZM44.0459 65.4162V76.9999H1.69178V65.4162H44.0459ZM292.376 50.0305C292.376 64.925 304.45 76.9993 319.345 76.9993C334.239 76.9993 346.313 64.9257 346.313 50.0313C346.313 35.1369 334.239 23.0618 319.345 23.0618C304.45 23.0618 292.376 35.1361 292.376 50.0305ZM319.345 65.4157C310.848 65.4157 303.96 58.5276 303.96 50.0306C303.96 41.5337 310.848 34.6456 319.345 34.6456C327.842 34.6456 334.729 41.5345 334.729 50.0314C334.729 58.5283 327.842 65.4157 319.345 65.4157Z" fill="#ffffff"/>
+</svg>
diff --git a/packages/web/src/components/MationLogo/index.tsx b/packages/web/src/components/MationLogo/index.tsx
new file mode 100644
index 00000000..c83b91a6
--- /dev/null
+++ b/packages/web/src/components/MationLogo/index.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ReactComponent as MationLogoSvg } from './assets/mation-logo.svg';
+
+const MationLogo = () => {
+  return <MationLogoSvg />;
+};
+
+export default MationLogo;