feat: change brand images and colors at the root page (#495)Co-author…

…ed-by: rot1024 <[email protected]> * impl brand chage * Update src/components/molecules/RootPage/index.tsx Co-authored-by: rot1024 <[email protected]> --------- Co-authored-by: rot1024 <[email protected]>
reearth · Feb 28, 2023 · 4f07b93 · 4f07b93
1 parent 93c8051
commit 4f07b93
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;