From 3be4828d63767f344045b98afacbf2203584b5b5 Mon Sep 17 00:00:00 2001
From: devrk96 <rohit.kumawat@primathon.in>
Date: Mon, 25 Jan 2021 12:51:54 +0530
Subject: [PATCH] Fix: App name UI in edit and deploy mode (#2216)

---
 .../src/components/ads/EditableText.tsx       | 12 +++++-----
 .../components/ads/EditableTextWrapper.tsx    | 22 ++++++++++---------
 .../AppViewer/viewer/AppViewerHeader.tsx      | 22 +++++++++----------
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index 6afa528566..6346f67c16 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/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}>
diff --git a/app/client/src/components/ads/EditableTextWrapper.tsx b/app/client/src/components/ads/EditableTextWrapper.tsx
index 41d9a93931..7c8fa701b0 100644
--- a/app/client/src/components/ads/EditableTextWrapper.tsx
+++ b/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;
   }
 `;
 
diff --git a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
index f55cca55ba..35daeb5ecf 100644
--- a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
+++ b/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"}>