Fix: App name UI in edit and deploy mode (#2216)

app/client/src/components/ads/EditableText.tsx

@@ -269,13 +269,15 @@ export const EditableText = (props: EditableTextProps) => {
           onCancel={onConfirm}
         />
 
-        <IconWrapper className="icon-wrapper">
-          {savingState === SavingState.STARTED ? (
+        {savingState === SavingState.STARTED ? (
+          <IconWrapper className="icon-wrapper">
             <Spinner size={IconSize.XL} />
-          ) : value ? (
+          </IconWrapper>
+        ) : value && !props.hideEditIcon ? (
+          <IconWrapper className="icon-wrapper">
             <Icon name={iconName} size={IconSize.XL} />
-          ) : null}
-        </IconWrapper>
+          </IconWrapper>
+        ) : null}
       </TextContainer>
       {isEditing && !!isInvalid ? (
         <Text className="error-message" type={TextType.P2}>

app/client/src/components/ads/EditableTextWrapper.tsx

@@ -15,13 +15,14 @@ const Container = styled.div<{
   savingState: SavingState;
   isInvalid: boolean;
 }>`
+  position: relative;
   .editable-text-container {
     justify-content: center;
   }
 
   &&& .${Classes.EDITABLE_TEXT}, .icon-wrapper {
-    padding: 5px 10px;
-    height: 25px;
+    padding: 5px 0px;
+    height: 31px;
     background-color: ${(props) =>
       (props.isInvalid && props.isEditing) ||
       props.savingState === SavingState.ERROR
@@ -29,15 +30,14 @@ const Container = styled.div<{
         : "transparent"};
   }
 
-  &&&& .${Classes.EDITABLE_TEXT} {
+  &&&& .${Classes.EDITABLE_TEXT}:hover {
     ${(props) =>
       !props.isEditing
         ? `
-      padding-left: 0px;
-      padding-right: 0px;
       border-bottom-style: solid; 
       border-bottom-width: 1px;
       width: fit-content;
+      max-width: 194px;
     `
         : null}
   }
@@ -47,6 +47,8 @@ const Container = styled.div<{
       !props.isEditing
         ? `
         min-width: 0px !important;
+        height: auto !important;
+        line-height: ${props.theme.typography.h4.lineHeight}px !important;
     `
         : null}
   }
@@ -57,15 +59,15 @@ const Container = styled.div<{
     font-size: ${(props) => props.theme.typography.h4.fontSize}px;
     line-height: ${(props) => props.theme.typography.h4.lineHeight}px;
     letter-spacing: ${(props) => props.theme.typography.h4.letterSpacing}px;
-    font-weight: ${(props) => props.theme.typography.h4.fontWeight}px;
-  }
-
-  .error-message {
-    margin-top: 2px;
+    font-weight: ${(props) => props.theme.typography.h4.fontWeight};
+    padding-right: 0px;
   }
 
   .icon-wrapper {
     padding-bottom: 0px;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 `;
 

app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx

@@ -33,6 +33,8 @@ import { getCurrentUser } from "selectors/usersSelectors";
 import { ANONYMOUS_USERNAME, User } from "constants/userConstants";
 import { isEllipsisActive } from "utils/helpers";
 import TooltipComponent from "components/ads/Tooltip";
+import Text, { TextType } from "components/ads/Text";
+import { Classes } from "components/ads/common";
 
 const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
   background: ${Colors.BALTIC_SEA};
@@ -40,6 +42,13 @@ const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
   color: white;
   flex-direction: column;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
+  .${Classes.TEXT} {
+    max-width: 194px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #d4d4d4;
+  }
 `;
 
 const HeaderRow = styled.div<{ justify: string }>`
@@ -82,13 +91,6 @@ const ShareButton = styled(Button)`
   color: white !important;
 `;
 
-const StyledApplicationName = styled.span`
-  font-size: 15px;
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 14px;
-`;
-
 const PageTab = styled(NavLink)`
   display: flex;
   height: 30px;
@@ -236,11 +238,9 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
             <AppsmithLogoImg src={AppsmithLogo} alt="Appsmith logo" />
           </Link>
         </HeaderSection>
-        <HeaderSection justify={"center"}>
+        <HeaderSection justify={"center"} className="current-app-name">
           {currentApplicationDetails && (
-            <StyledApplicationName>
-              {currentApplicationDetails.name}
-            </StyledApplicationName>
+            <Text type={TextType.H4}>{currentApplicationDetails.name}</Text>
           )}
         </HeaderSection>
         <HeaderSection justify={"flex-end"}>