028070eeb2
* variables defined in light and dark constants in theme. * warning message removed * Fixing create app btn click opening form * blackShades removed and icon color in application card fixed * state change fixed * type of light and dark constants added Co-authored-by: Satbir Singh <satbir121@gmail.com>
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import React, { Fragment } from "react";
|
|
import { CommonComponentProps } from "components/ads/common";
|
|
import { getInitialsAndColorCode } from "utils/AppsmithUtils";
|
|
import { useSelector } from "react-redux";
|
|
import { getThemeDetails } from "selectors/themeSelectors";
|
|
import Text, { TextType } from "components/ads/Text";
|
|
import styled, { createGlobalStyle } from "styled-components";
|
|
import { Position } from "@blueprintjs/core";
|
|
import Menu from "components/ads/Menu";
|
|
import ThemeSwitcher from "./ThemeSwitcher";
|
|
import MenuDivider from "components/ads/MenuDivider";
|
|
import MenuItem from "components/ads/MenuItem";
|
|
import {
|
|
getOnSelectAction,
|
|
DropdownOnSelectActions,
|
|
} from "./CustomizedDropdown/dropdownHelpers";
|
|
import { ReduxActionTypes } from "constants/ReduxActionConstants";
|
|
|
|
type TagProps = CommonComponentProps & {
|
|
onClick?: (text: string) => void;
|
|
userName?: string;
|
|
};
|
|
|
|
const ProfileImage = styled.div<{ backgroundColor?: string }>`
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: ${props => props.backgroundColor};
|
|
`;
|
|
|
|
const ProfileMenuStyle = createGlobalStyle`
|
|
.profile-menu {
|
|
.bp3-popover .bp3-popover-content{
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default function ProfileDropdown(props: TagProps) {
|
|
const themeDetails = useSelector(getThemeDetails);
|
|
|
|
const initialsAndColorCode = getInitialsAndColorCode(
|
|
props.userName,
|
|
themeDetails.theme.colors.appCardColors,
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<ProfileMenuStyle />
|
|
<Menu
|
|
className="profile-menu"
|
|
position={Position.BOTTOM}
|
|
target={
|
|
<ProfileImage backgroundColor={initialsAndColorCode[1]}>
|
|
<Text type={TextType.H6} highlight>
|
|
{initialsAndColorCode[0]}
|
|
</Text>
|
|
</ProfileImage>
|
|
}
|
|
>
|
|
<ThemeSwitcher />
|
|
<MenuDivider />
|
|
<MenuItem
|
|
icon="logout"
|
|
text="Sign Out"
|
|
onSelect={() =>
|
|
getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
|
|
type: ReduxActionTypes.LOGOUT_USER_INIT,
|
|
})
|
|
}
|
|
/>
|
|
</Menu>
|
|
</Fragment>
|
|
);
|
|
}
|