Merge branch 'main' of github.com:reearth/reearth-visualizer into fix…

…/timeline-block-speed
reearth · Nov 12, 2024 · 2af0170 · 2af0170
2 parents 1482229 + f4e2eb1
commit 2af0170
Show file tree

Hide file tree

Showing 25 changed files with 125 additions and 64 deletions.
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -53,12 +53,14 @@ ENV REEARTH_WEB_DEVELOPER_MODE=null
 ENV REEARTH_WEB_DOCUMENTATION_URL=null
 ENV REEARTH_WEB_EARLY_ACCESS_ADMINS=[]
 ENV REEARTH_WEB_EXTENSION_URLS=[]
+ENV REEARTH_WEB_FAVICON_URL=
 ENV REEARTH_WEB_IP=null
 ENV REEARTH_WEB_MARKETPLACE_URL=null
 ENV REEARTH_WEB_PASSWORD_POLICY=null
 ENV REEARTH_WEB_PLUGINS=null
 ENV REEARTH_WEB_POLICY=null
 ENV REEARTH_WEB_PUBLISHED=null
+ENV REEARTH_WEB_TITLE=
 
 COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
 COPY --chown=nginx:nginx docker/nginx.conf.template /etc/nginx/templates/nginx.conf.template

diff --git a/web/docker/40-envsubst-on-reearth-config.sh b/web/docker/40-envsubst-on-reearth-config.sh
@@ -2,8 +2,21 @@
 
 set -e
 
-# rewrite index.html to change title and favicon
+# rewrite index.html and published.html to change title and favicon
 _REEARTH_HTML_FILE="/usr/share/nginx/html/index.html"
+_REEARTH_PUBLISHED_HTML_FILE="/usr/share/nginx/html/published.html"
+
+# Rewrite title tag in index.html only if REEARTH_WEB_TITLE is set
+if [ -n "$REEARTH_WEB_TITLE" ]; then
+  sed -i -e "s|<title>.*</title>|<title>${REEARTH_WEB_TITLE}</title>|g" "$_REEARTH_HTML_FILE"
+  sed -i -e "s|<title>.*</title>|<title>${REEARTH_WEB_TITLE}</title>|g" "$_REEARTH_PUBLISHED_HTML_FILE"
+fi
+
+# Rewrite favicon in index.html and published.html only if REEARTH_WEB_FAVICON_URL is set
+if [ -n "$REEARTH_WEB_FAVICON_URL" ]; then
+  sed -i -e "s|<link rel=\"icon\" href=\"[^\"]*\" />|<link rel=\"icon\" href=\"${REEARTH_WEB_FAVICON_URL}\" />|g" "$_REEARTH_HTML_FILE"
+  sed -i -e "s|<link rel=\"icon\" href=\"[^\"]*\" />|<link rel=\"icon\" href=\"${REEARTH_WEB_FAVICON_URL}\" />|g" "$_REEARTH_PUBLISHED_HTML_FILE"
+fi
 
 # generate reearth_config.json
 _REEARTH_CONFIG_TEMPLATE_FILE="/opt/reearth/reearth_config.json.template"

diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -15,9 +15,7 @@ export default function App() {
       <GqlProvider>
         <ThemeProvider>
           <I18nProvider>
-            <Suspense
-              fallback={<Loading animationSize={80} animationColor="#3B3CD0" />}
-            >
+            <Suspense fallback={<Loading includeLogo />}>
               <NotificationBanner />
               <GlobalModal />
               <AppRoutes />

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
@@ -1,4 +1,5 @@
 import { Button, PopupMenu, TextInput } from "@reearth/beta/lib/reearth-ui";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 
@@ -44,7 +45,7 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     <>
       <Card>
         <CardImage
-          backgroundImage={project.imageUrl}
+          backgroundImage={project.imageUrl ?? defaultProjectBackgroundImage}
           onDoubleClick={onProjectOpen}
           onClick={(e) => onProjectSelect?.(e, project.id)}
           isHovered={isHovered ?? false}

diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/LogoWrapper.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/LogoWrapper.tsx
@@ -0,0 +1,21 @@
+import logoWithText from "@reearth/beta/lib/reearth-ui/components/Icon/Icons/LogoWithText.svg";
+import { styled } from "@reearth/services/theme";
+import { FC } from "react";
+
+export const LogoWrapper: FC = () => {
+  return (
+    <Wrapper>
+      <img src={logoWithText} width={128} height={40} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: theme.spacing.normal,
+  minHeight: "90px"
+}));
+
+export default LogoWrapper;
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -12,6 +12,7 @@ import { FC } from "react";
 import StarredProject from "../ContentsContainer/Projects/StarredProject";
 import { TabItems, Workspace } from "../type";
 
+import LogoWrapper from "./LogoWrapper";
 import { Profile } from "./profile";
 
 type Props = {
@@ -37,6 +38,8 @@ const LeftSidePanel: FC<Props> = ({
   return (
     <SidebarWrapper>
       <SidebarMainSection>
+        <LogoWrapper />
+        <SidebarDivider />
         <Profile
           currentUser={currentWorkspace?.name}
           isPersonal={isPersonal}
@@ -45,7 +48,6 @@ const LeftSidePanel: FC<Props> = ({
           onSignOut={onSignOut}
           onWorkspaceChange={onWorkspaceChange}
         />
-        <SidebarDivider />
         <SidebarButtonsWrapper>
           {topTabs?.map((tab) => (
             <SidebarMenuItem

diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
@@ -84,9 +84,6 @@ export const Profile: FC<ProfileProp> = ({
 
   return (
     <Wrapper>
-      <Typography size="body" weight="bold" color={theme.dangerous.strong}>
-        {t("Re:Earth Visualizer")}
-      </Typography>
       <ProfileWrapper>
         {isPersonal && (
           <Avatar>
@@ -114,7 +111,11 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.normal,
   alignContent: "center",
-  padding: theme.spacing.normal
+  paddingLeft: theme.spacing.small,
+  paddingRight: theme.spacing.normal,
+  paddingTop: theme.spacing.largest,
+  paddingBottom: theme.spacing.small,
+  justifyContent: "center"
 }));
 
 const ProfileWrapper = styled("div")(({ theme }) => ({

diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -1,11 +1,11 @@
 import {
+  Icon,
   IconButton,
   PopupMenu,
-  PopupMenuItem,
-  Typography
+  PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
-import { styled, useTheme } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
@@ -33,7 +33,6 @@ const LeftSection: React.FC<Props> = ({
   onWorkspaceChange
 }) => {
   const t = useT();
-  const theme = useTheme();
 
   const menuItems: PopupMenuItem[] = useMemo(
     () => [
@@ -59,13 +58,7 @@ const LeftSection: React.FC<Props> = ({
 
   return (
     <Wrapper>
-      {page !== "editor" && (
-        <StyledLink to={`/`}>
-          <Typography size="body" weight="bold" color={theme.dangerous.strong}>
-            {t("Visualizer")}
-          </Typography>
-        </StyledLink>
-      )}
+      <Icon icon="logo" size={30} />
       <StyledLink
         to={`/dashboard/${currentWorkspace?.id}`}
         disabled={!currentWorkspace?.id}

diff --git a/web/src/beta/features/NotFound/index.tsx b/web/src/beta/features/NotFound/index.tsx
@@ -23,7 +23,7 @@ const NotFound: FC = () => {
           404
         </Typography>
         <Typography size="body" color={theme.content.main}>
-          {t("Oops, This Page Not Found!")}
+          {t("Oops, Page Not Found!")}
         </Typography>
         <Button
           appearance="primary"

diff --git a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
@@ -1,7 +1,7 @@
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import ProjectRemoveModal from "@reearth/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal";
 import { Collapse, Button, Typography } from "@reearth/beta/lib/reearth-ui";
-import defaultBetaProjectImage from "@reearth/beta/ui/assets/defaultBetaProjectImage.png";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
 import { InputField, AssetField, TextareaField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -98,7 +98,9 @@ const GeneralSettings: FC<Props> = ({
                   />
                 </SettingsRowItem>
                 <SettingsRowItem>
-                  <Thumbnail src={localImageUrl || defaultBetaProjectImage} />
+                  <Thumbnail
+                    src={localImageUrl || defaultProjectBackgroundImage}
+                  />
                 </SettingsRowItem>
               </SettingsRow>
               <ButtonWrapper>

diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
@@ -1,6 +1,6 @@
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import { Button, Collapse } from "@reearth/beta/lib/reearth-ui";
-import defaultBetaProjectImage from "@reearth/beta/ui/assets/defaultBetaProjectImage.png";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
 import { AssetField, InputField, SwitchField } from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
@@ -139,7 +139,7 @@ const PublicSettingsDetail: React.FC<Props> = ({
             <StyledImage
               src={
                 !localPublicInfo.publicImage
-                  ? defaultBetaProjectImage
+                  ? defaultProjectBackgroundImage
                   : localPublicInfo.publicImage
               }
             />

diff --git a/web/src/beta/features/Published/NotFound.tsx b/web/src/beta/features/Published/NotFound.tsx
@@ -17,7 +17,7 @@ const NotFound: FC = () => {
           404
         </Typography>
         <Typography size="body" color={theme.content.main}>
-          {t("Oops, This Page Not Found!")}
+          {t("Oops, Page Not Found!")}
         </Typography>
       </EmptyContent>
     </Wrapper>

diff --git a/web/src/beta/features/RootPage/PageWrapper.tsx b/web/src/beta/features/RootPage/PageWrapper.tsx
@@ -1,27 +1,23 @@
-import { Icon } from "@reearth/beta/lib/reearth-ui/components/";
-import { styled, useTheme } from "@reearth/services/theme";
+import { Loading } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
 import {
   brandBlue,
   brandRed
 } from "@reearth/services/theme/reearthTheme/common/colors";
 import React from "react";
-import { RingLoader } from "react-spinners";
 
 export type Props = {
   loading?: boolean;
 };
 
 const RootPage: React.FC<Props> = ({ loading }) => {
-  const theme = useTheme();
-
   return (
     <Wrapper bg={window.REEARTH_CONFIG?.brand?.background}>
       {window.REEARTH_CONFIG?.brand?.logoUrl ? (
         <img src={window.REEARTH_CONFIG.brand.logoUrl} style={{ width: 200 }} />
       ) : (
-        <Icon icon="reearthLogo" size={200} />
+        loading && <Loading includeLogo />
       )}
-      {loading && <RingLoader size={35} color={theme.primary.strong} />}
     </Wrapper>
   );
 };
@@ -31,7 +27,7 @@ const Wrapper = styled.div<{ bg?: string }>(({ bg }) => ({
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  gap: 100,
+  gap: 49,
   height: "100%",
   background:
     bg ||