fix: bug bounty #2 (#105)

* move reearthLogoColorful to icons, update dashboard logo * fix setting's navigation selected width issue, handling of long names * fix dropdown, update language * fix workspace member add issue * Add ability to disable actions in EditableItem * refactor and fix member list item ui * fix type Co-authored-by: KaWaite <[email protected]> Co-authored-by: rot1024 <[email protected]>
reearth · Oct 21, 2021 · da48150 · da48150
1 parent 964d925
commit da48150
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 192 deletions.
diff --git a/src/components/atoms/Dropdown/index.tsx b/src/components/atoms/Dropdown/index.tsx
@@ -76,52 +76,57 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
+  width: 100%;
 `;
 
 const Parent = styled.div<{ noHover?: boolean; centered?: boolean }>`
   position: relative;
-  min-height: 36px;
+  height: inherit;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: ${props => props.centered && `center;`}
   background-color: ${props => props.theme.header.bg};
   &:hover {
-    ${props =>
-      !props.noHover &&
+    ${({ noHover, theme }) =>
+      !noHover &&
       `
-      background-color: ${props.theme.main.bg};
+      background-color: ${theme.main.bg};
       `}
     }
     `;
 
 const Label = styled.div`
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
+  width: 100%;
 `;
 
 const childTransform = (direction: Direction) => {
   switch (direction) {
     case "down":
-      return "translate(0, 100%)";
+      return "translateY(100%)";
     case "right":
     case "none":
-      return "translate(100%, 0)";
+      return "translateX(100%)";
     default:
-      return "translate(0, 100%)";
+      return "translateY(100%)";
   }
 };
 
 const Child = styled.div<{ direction: Direction }>`
   position: absolute;
+  background-color: ${props => props.theme.header.bg};
+  max-width: 230px;
+  margin: 0 auto;
   left: 0;
-  bottom: ${({ direction }) => (direction === "down" ? "0" : "auto")};
-  min-width: 100%;
+  right: 0;
   top: ${({ direction }) => (direction === "down" ? "auto" : "0")};
+  bottom: ${({ direction }) => (direction === "down" ? "0" : "auto")};
   transform: ${({ direction }) => childTransform(direction)};
   box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);
-  background-color: ${props => props.theme.header.bg};
   z-index: ${props => props.theme.zIndexes.dropDown};
 `;
 

diff --git a/src/components/atoms/Logo/reearthLogoColorful.svg b/src/components/atoms/Logo/reearthLogoColorful.svg
diff --git a/src/components/molecules/Common/Header/profile.tsx b/src/components/molecules/Common/Header/profile.tsx
@@ -65,34 +65,33 @@ const HeaderProfile: React.FC<Props & Partial<LoginProps>> = ({
         ref={dropDownRef}
         openOnClick
         noHoverStyle
+        direction="down"
         hasIcon
         label={<Label user={user} currentTeam={currentTeam} />}>
         <ChildrenWrapper>
-          <Section>
-            <MenuList>
-              <MenuListItem>
-                <MenuListItemLabel
-                  linkTo={`/settings/account`}
-                  text={intl.formatMessage({ defaultMessage: "Account Settings" })}
-                />
-              </MenuListItem>
-              <MenuListItem noHover>
-                <TeamMenu
-                  currentTeam={currentTeam}
-                  teams={teams}
-                  onChangeTeam={onChangeTeam}
-                  openModal={openModal}
-                />
-              </MenuListItem>
-              <MenuListItem>
-                <MenuListItemLabel
-                  icon="logout"
-                  onClick={onSignOut}
-                  text={intl.formatMessage({ defaultMessage: "Logout" })}
-                />
-              </MenuListItem>
-            </MenuList>
-          </Section>
+          <MenuList>
+            <MenuListItem>
+              <MenuListItemLabel
+                linkTo={`/settings/account`}
+                text={intl.formatMessage({ defaultMessage: "Account Settings" })}
+              />
+            </MenuListItem>
+            <MenuListItem noHover>
+              <TeamMenu
+                currentTeam={currentTeam}
+                teams={teams}
+                onChangeTeam={onChangeTeam}
+                openModal={openModal}
+              />
+            </MenuListItem>
+            <MenuListItem>
+              <MenuListItemLabel
+                icon="logout"
+                onClick={onSignOut}
+                text={intl.formatMessage({ defaultMessage: "Log out" })}
+              />
+            </MenuListItem>
+          </MenuList>
         </ChildrenWrapper>
       </StyledDropdown>
     </Wrapper>
@@ -101,15 +100,17 @@ const HeaderProfile: React.FC<Props & Partial<LoginProps>> = ({
 
 const Wrapper = styled.div`
   cursor: pointer;
+  height: 100%;
 `;
 
 const StyledDropdown = styled(Dropdown)`
-  height: 100%;
   padding: 0 24px;
 `;
 
 const ChildrenWrapper = styled.div`
   width: 230px;
+  background-color: ${({ theme }) => theme.header.bg};
+  padding: 0;
 `;
 
 const LabelWrapper = styled.div`
@@ -139,10 +140,6 @@ const LabelUserName = styled(Text)`
   margin-bottom: 2px;
 `;
 
-const Section = styled.div`
-  padding: 0;
-`;
-
 // need to setup avatars with users
 const Avatar = styled.div<{ avatar?: string }>`
   width: 28px;

diff --git a/src/components/molecules/Common/ProjectMenu/index.tsx b/src/components/molecules/Common/ProjectMenu/index.tsx
@@ -58,7 +58,7 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
               <MenuListItemLabel
                 icon="help"
                 onClick={() => window.open("http://docs.reearth.io", "_blank", "noopener")}
-                text={intl.formatMessage({ defaultMessage: "Help" })}
+                text={intl.formatMessage({ defaultMessage: "Documentation" })}
               />
             </MenuListItem>
           </MenuList>

diff --git a/src/components/molecules/Common/TeamMenu/index.tsx b/src/components/molecules/Common/TeamMenu/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from "react";
 import { useIntl } from "react-intl";
 
 import Dropdown, { Ref as DropDownRef } from "@reearth/components/atoms/Dropdown";
+import Flex from "@reearth/components/atoms/Flex";
 import Text from "@reearth/components/atoms/Text";
 import { Team } from "@reearth/components/molecules/Common/Header";
 import {
@@ -30,9 +31,7 @@ const TeamMenu: React.FC<Props> = ({ currentTeam, teams, onChangeTeam, openModal
     [onChangeTeam],
   );
 
-  const label = (
-    <MenuListItemLabel text={intl.formatMessage({ defaultMessage: "Switch Workspace" })} />
-  );
+  const label = <MenuListItemLabel text={intl.formatMessage({ defaultMessage: "Workspaces" })} />;
   const theme = useTheme();
 
   return (
@@ -41,16 +40,21 @@ const TeamMenu: React.FC<Props> = ({ currentTeam, teams, onChangeTeam, openModal
         <MenuList>
           {teams.map(team => (
             <MenuListItem key={team.id} onClick={() => team.id && handleTeamChange(team.id)}>
-              {team.id === currentTeam.id ? (
-                <TeamStatus>
-                  <Text size="m" color={theme.main.text}>
-                    {currentTeam.name}
-                  </Text>
-                  <TeamStatusIcon isActive />
-                </TeamStatus>
-              ) : (
-                <MenuListItemLabel text={team.name} />
-              )}
+              <TeamStatus align="center" justify="space-between">
+                <Text
+                  size="m"
+                  color={theme.main.text}
+                  otherProperties={{
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    minWidth: 0,
+                    flex: 1,
+                  }}>
+                  {team.name}
+                </Text>
+                {team.id === currentTeam.id && <TeamStatusIcon isActive />}
+              </TeamStatus>
             </MenuListItem>
           ))}
           <MenuListItem>
@@ -75,12 +79,11 @@ const TeamMenu: React.FC<Props> = ({ currentTeam, teams, onChangeTeam, openModal
 
 const DropdownInner = styled.div`
   padding: 0;
+  max-width: 230px;
 `;
 
-const TeamStatus = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
+const TeamStatus = styled(Flex)`
+  width: calc(100% - 32px);
   height: 52px;
   padding: 0 16px;
 `;
@@ -89,7 +92,7 @@ const TeamStatusIcon = styled.div<{ isActive: boolean }>`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  margin-left: auto;
+  margin-left: 4px;
   order: 2;
   background-color: ${({ theme }) => theme.main.highlighted};
 `;

diff --git a/src/components/molecules/Dashboard/Logo.tsx b/src/components/molecules/Dashboard/Logo.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import Flex from "@reearth/components/atoms/Flex";
-import logoColorful from "@reearth/components/atoms/Logo/reearthLogoColorful.svg";
+import Icon from "@reearth/components/atoms/Icon";
 import { styled } from "@reearth/theme";
 
 export interface Props {
@@ -11,7 +11,7 @@ export interface Props {
 const Logo: React.FC<Props> = ({ className }) => {
   return (
     <Wrapper align="center" justify="center" className={className}>
-      <StyledImg src={logoColorful} alt="Re:Earth Logo" />
+      <Icon icon="logoColorful" size={122} />
     </Wrapper>
   );
 };
@@ -29,8 +29,4 @@ const Wrapper = styled(Flex)`
   }
 `;
 
-const StyledImg = styled.img`
-  width: 110px;
-`;
-
 export default Logo;