From 4f07b93a726d8ccdfdd5af15274912732e5dcc88 Mon Sep 17 00:00:00 2001
From: HideBa <49897538+HideBa@users.noreply.github.com>
Date: Tue, 28 Feb 2023 14:25:11 +0900
Subject: [PATCH] feat: change brand images and colors at the root page
 (#495)Co-authored-by: rot1024 <aayhrot@gmail.com>

* impl brand chage

* Update src/components/molecules/RootPage/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

---------

Co-authored-by: rot1024 <aayhrot@gmail.com>
---
 src/components/molecules/Dashboard/Logo.tsx   |  4 ++--
 .../molecules/Dashboard/QuickStart.tsx        |  2 +-
 src/components/molecules/RootPage/index.tsx   | 22 ++++++++++++-------
 .../molecules/Settings/Navigation/index.tsx   |  4 ++--
 src/config/index.ts                           |  6 +++--
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/molecules/Dashboard/Logo.tsx b/src/components/molecules/Dashboard/Logo.tsx
index 46d714138d..9b8091f832 100644
--- a/src/components/molecules/Dashboard/Logo.tsx
+++ b/src/components/molecules/Dashboard/Logo.tsx
@@ -11,8 +11,8 @@ export interface Props {
 const Logo: React.FC<Props> = ({ className }) => {
   return (
     <Wrapper align="center" justify="center" className={className}>
-      {window.REEARTH_CONFIG?.logoUrl ? (
-        <img src={window.REEARTH_CONFIG.logoUrl} style={{ maxWidth: "100%" }} />
+      {window.REEARTH_CONFIG?.brand?.logoUrl ? (
+        <img src={window.REEARTH_CONFIG.brand.logoUrl} style={{ maxWidth: "100%" }} />
       ) : (
         <Icon icon="logoColorful" size={122} />
       )}
diff --git a/src/components/molecules/Dashboard/QuickStart.tsx b/src/components/molecules/Dashboard/QuickStart.tsx
index 444a09276b..395a1ec4bd 100644
--- a/src/components/molecules/Dashboard/QuickStart.tsx
+++ b/src/components/molecules/Dashboard/QuickStart.tsx
@@ -70,7 +70,7 @@ const QuickStart: React.FC<Props> = ({
             direction="column"
             align="center"
             justify="center"
-            linearGradient={window.REEARTH_CONFIG?.linearGradient}
+            linearGradient={window.REEARTH_CONFIG?.brand?.background}
             onClick={() => setProjCreateOpen(true)}>
             <StyledIcon icon="newProject" size={70} />
             <Text size="m" weight="bold" customColor>
diff --git a/src/components/molecules/RootPage/index.tsx b/src/components/molecules/RootPage/index.tsx
index 410e93dc72..d477bf194d 100644
--- a/src/components/molecules/RootPage/index.tsx
+++ b/src/components/molecules/RootPage/index.tsx
@@ -12,21 +12,27 @@ export type Props = {
 const RootPage: React.FC<Props> = ({ loading }) => {
   const theme = useTheme();
   return (
-    <Wrapper justify="center" align="center" direction="column">
-      <StyledIcon icon="logo" size={200} />
+    <Wrapper
+      justify="center"
+      align="center"
+      direction="column"
+      gap={100}
+      bg={window.REEARTH_CONFIG?.brand?.background}>
+      {window.REEARTH_CONFIG?.brand?.logoUrl ? (
+        <img src={window.REEARTH_CONFIG.brand.logoUrl} style={{ width: 200 }} />
+      ) : (
+        <Icon icon="logo" size={200} />
+      )}
       {loading && <RingLoader size={35} color={theme.main.strongText} />}
     </Wrapper>
   );
 };
 
-const Wrapper = styled(Flex)`
+const Wrapper = styled(Flex)<{ bg?: string }>`
   height: 100%;
-  background: ${({ theme }) =>
+  background: ${({ theme, bg }) =>
+    bg ||
     `linear-gradient(70deg, ${theme.main.brandBlue} 10%, ${theme.main.brandRed} 60%, ${theme.main.brandBlue} 90%)`};
 `;
 
-const StyledIcon = styled(Icon)`
-  margin-bottom: 100px;
-`;
-
 export default RootPage;
diff --git a/src/components/molecules/Settings/Navigation/index.tsx b/src/components/molecules/Settings/Navigation/index.tsx
index fbda4a711a..52c733dbde 100644
--- a/src/components/molecules/Settings/Navigation/index.tsx
+++ b/src/components/molecules/Settings/Navigation/index.tsx
@@ -31,8 +31,8 @@ const Navigation: React.FC<Props> = ({ team, project }) => {
   return (
     <Wrapper>
       <LogoWrapper>
-        {window.REEARTH_CONFIG?.logoUrl ? (
-          <img src={window.REEARTH_CONFIG.logoUrl} style={{ maxWidth: "100%" }} />
+        {window.REEARTH_CONFIG?.brand?.logoUrl ? (
+          <img src={window.REEARTH_CONFIG.brand.logoUrl} style={{ maxWidth: "100%" }} />
         ) : (
           <Icon icon="logoColorful" size={110} />
         )}
diff --git a/src/config/index.ts b/src/config/index.ts
index 8abaaba38c..be0c8fc202 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -15,8 +15,10 @@ export type Config = {
   sentryDsn?: string;
   sentryEnv?: string;
   cesiumIonAccessToken?: string;
-  logoUrl?: string;
-  linearGradient?: string;
+  brand?: {
+    logoUrl?: string;
+    background?: string;
+  };
   passwordPolicy?: {
     tooShort?: RegExp;
     tooLong?: RegExp;