landing redesign

packages/creator-hub/renderer/src/components/CreateButton/component.tsx

@@ -0,0 +1,109 @@
+import { useCallback, useRef, useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import { Button, ButtonGroup, Menu, MenuItem } from 'decentraland-ui2';
+
+import { useWorkspace } from '/@/hooks/useWorkspace';
+import { t } from '/@/modules/store/translation/utils';
+import { CreateProject } from '../Modals/CreateProject';
+
+import type { CreateProjectValue, NewProjectPayload } from './types';
+
+import './styles.css';
+
+export function CreateButton() {
+  const { createProject, getAvailableProject, importProject } = useWorkspace();
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [newProject, setNewProject] = useState<NewProjectPayload | undefined>();
+
+  const handleOpenMenu = useCallback(() => setOpen(true), []);
+  const handleCloseMenu = useCallback(() => setOpen(false), []);
+
+  const handleClickNewScene = useCallback(async () => {
+    setOpen(false);
+    const [error, data] = await getAvailableProject();
+    if (error) return;
+    const { name, path } = data;
+    setNewProject({
+      name,
+      path: path.endsWith(name) ? path.slice(0, -name.length) : path,
+    });
+  }, [getAvailableProject]);
+
+  const handleClickImportScene = useCallback(() => {
+    setOpen(false);
+    importProject();
+  }, [importProject]);
+
+  const handleCreateProject = useCallback(
+    (value: CreateProjectValue) => {
+      if (!newProject) return;
+      createProject({ ...newProject, ...value });
+      setNewProject(undefined);
+    },
+    [createProject, newProject],
+  );
+
+  return (
+    <>
+      <ButtonGroup
+        className="CreateButton"
+        ref={anchorRef}
+        variant="contained"
+        disableRipple
+      >
+        <Button
+          className="CreateButtonMain"
+          data-testid="create-button"
+          startIcon={<AddIcon />}
+          onClick={handleClickNewScene}
+        >
+          {t('navbar.create.label')}
+        </Button>
+        <Button
+          className="CreateButtonToggle"
+          data-testid="create-button-toggle"
+          aria-label={t('navbar.create.label')}
+          aria-haspopup="menu"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={handleOpenMenu}
+        >
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Menu
+        className="CreateButtonMenu"
+        anchorEl={anchorRef.current}
+        open={open}
+        onClose={handleCloseMenu}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <MenuItem
+          data-testid="create-button-new-scene"
+          onClick={handleClickNewScene}
+        >
+          <AddIcon fontSize="small" />
+          {t('navbar.create.new_scene')}
+        </MenuItem>
+        <MenuItem
+          data-testid="create-button-import-scene"
+          onClick={handleClickImportScene}
+        >
+          <FileDownloadOutlinedIcon fontSize="small" />
+          {t('navbar.create.import_scene')}
+        </MenuItem>
+      </Menu>
+      {newProject && (
+        <CreateProject
+          open
+          initialValue={newProject}
+          onClose={() => setNewProject(undefined)}
+          onSubmit={handleCreateProject}
+        />
+      )}
+    </>
+  );
+}

packages/creator-hub/renderer/src/components/CreateButton/index.ts

@@ -0,0 +1 @@
+export { CreateButton } from './component';

packages/creator-hub/renderer/src/components/CreateButton/styles.css

@@ -0,0 +1,43 @@
+.CreateButton.MuiButtonGroup-root {
+  box-shadow: none;
+  border-radius: 6px;
+}
+
+.CreateButton .MuiButton-root {
+  background-color: var(--primary);
+  color: var(--text-on-primary);
+  box-shadow: none;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.CreateButton .MuiButton-root:hover {
+  background-color: var(--primary-hover);
+  box-shadow: none;
+}
+
+.CreateButton .CreateButtonMain {
+  padding: 8px 16px;
+  font-size: 13px;
+}
+
+.CreateButton .CreateButtonToggle {
+  padding: 8px 4px;
+  min-width: 32px;
+  border-left: 1px solid #ffffff33 !important;
+}
+
+.CreateButtonMenu .MuiPaper-root {
+  background-color: var(--card);
+  background-image: none;
+  border-radius: 8px;
+  min-width: 180px;
+  margin-top: 4px;
+}
+
+.CreateButtonMenu .MuiMenuItem-root {
+  font-size: 14px;
+  gap: 12px;
+  padding: 10px 16px;
+}

packages/creator-hub/renderer/src/components/CreateButton/types.ts

@@ -0,0 +1,10 @@
+export type NewProjectPayload = {
+  name: string;
+  path: string;
+  repo?: string;
+};
+
+export type CreateProjectValue = {
+  name: string;
+  path: string;
+};

packages/creator-hub/renderer/src/components/Header/UserMenu/styles.css

@@ -1,7 +1,18 @@
 .Header.Navbar > .user > .SignInButton {
-  background-color: var(--white) !important;
-  color: var(--black) !important;
+  background-color: transparent !important;
+  color: var(--text) !important;
+  border: 1px solid var(--transparent-gray-light);
+  box-shadow: none;
   font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  padding: 7px 16px;
+}
+
+.Header.Navbar > .user > .SignInButton:hover {
+  background-color: var(--transparent-gray-dark) !important;
+  border-color: var(--text);
 }
 
 .Header.Navbar > .user > .AvatarButton:hover {