Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/src/constants/DefaultTheme.tsx

@@ -637,6 +637,9 @@ type ColorType = {
     bg: ColorPalette;
     color: ColorPalette;
   };
+  profileDropdown: {
+    userName: ColorPalette;
+  };
 };
 
 export const dark: ColorType = {
@@ -849,6 +852,9 @@ export const dark: ColorType = {
     bg: darkShades[3],
     color: darkShades[7],
   },
+  profileDropdown: {
+    userName: darkShades[9],
+  },
 };
 
 export const light: ColorType = {
@@ -1061,6 +1067,9 @@ export const light: ColorType = {
     bg: lightShades[3],
     color: lightShades[7],
   },
+  profileDropdown: {
+    userName: lightShades[9],
+  },
 };
 
 export const theme: Theme = {

app/client/src/pages/common/ProfileDropdown.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { CommonComponentProps } from "components/ads/common";
+import { CommonComponentProps, Classes } from "components/ads/common";
 import { getInitialsAndColorCode } from "utils/AppsmithUtils";
 import { useSelector } from "react-redux";
 import { getThemeDetails } from "selectors/themeSelectors";
@@ -40,6 +40,29 @@ const ProfileMenuStyle = createGlobalStyle`
   }
 `;
 
+const UserInformation = styled.div`
+  padding: ${props => props.theme.spaces[6]}px;
+  display: flex;
+  align-items: center;
+
+  .user-name {
+    flex-basis: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .${Classes.TEXT} {
+      color: ${props => props.theme.colors.profileDropdown.userName};
+    }
+  }
+
+  .user-image {
+    margin-right: ${props => props.theme.spaces[4]}px;
+    div {
+      cursor: default;
+    }
+  }
+`;
+
 export default function ProfileDropdown(props: TagProps) {
   const themeDetails = useSelector(getThemeDetails);
 
@@ -48,20 +71,30 @@ export default function ProfileDropdown(props: TagProps) {
     themeDetails.theme.colors.appCardColors,
   );
 
+  const Profile = (
+    <ProfileImage backgroundColor={initialsAndColorCode[1]}>
+      <Text type={TextType.H6} highlight>
+        {initialsAndColorCode[0]}
+      </Text>
+    </ProfileImage>
+  );
   return (
     <Fragment>
       <ProfileMenuStyle />
       <Menu
         className="profile-menu"
         position={Position.BOTTOM}
-        target={
+        target={Profile}
-          <ProfileImage backgroundColor={initialsAndColorCode[1]}>
-            <Text type={TextType.H6} highlight>
-              {initialsAndColorCode[0]}
-            </Text>
-          </ProfileImage>
-        }
       >
+        <UserInformation>
+          <div className="user-image">{Profile}</div>
+          <div className="user-name">
+            <Text type={TextType.P1} highlight>
+              {props.userName}
+            </Text>
+          </div>
+        </UserInformation>
+        <MenuDivider />
         <ThemeSwitcher />
         <MenuDivider />
         <MenuItem