From 1de19956e32eb2119eedbda8c2875cd223e40ec1 Mon Sep 17 00:00:00 2001
From: f0c1s <anubhav@appsmith.com>
Date: Fri, 6 May 2022 15:30:48 +0530
Subject: [PATCH] fix: add visual cue to SSH key regeneration (#13625)

---
 .../gitSync/components/DeployedKeyUI.tsx      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx b/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
index aeed6b1e2e..4c685b69a7 100644
--- a/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
@@ -53,15 +53,25 @@ const FlexRow = styled.div`
   width: 100%;
 `;
 
+const KeyType = styled.span`
+  width: 30%;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--appsmith-color-black-900);
+`;
+
 const KeyText = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  width: calc(100% - 35px);
+  width: 60%;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${Colors.COD_GRAY};
+  color: var(--appsmith-color-black-900);
+  direction: rtl;
+  margin-right: 8px;
 `;
 
 const MoreMenuWrapper = styled.div`
@@ -127,6 +137,8 @@ function DeployedKeyUI(props: DeployedKeyUIProps) {
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showKeyGeneratedMessage, setShowKeyGeneratedMessage] = useState(true);
 
+  const [keyType, keyVal, keyName] = SSHKeyPair.split(" ");
+  const keyText = `${keyVal} ${keyName}`;
   const learnMoreClickHandler = () => {
     AnalyticsUtil.logEvent("GS_GIT_DOCUMENTATION_LINK_CLICK", {
       source: "SSH_KEY_ON_GIT_CONNECTION_TAB",
@@ -158,7 +170,8 @@ function DeployedKeyUI(props: DeployedKeyUIProps) {
               size={20}
               style={{ marginTop: -1, marginRight: 4 }}
             />
-            <KeyText>{SSHKeyPair}</KeyText>
+            <KeyType>{keyType}</KeyType>
+            <KeyText>{keyText}</KeyText>
             {CopySSHKey(showCopied, copyToClipboard)}
           </FlexRow>
         </DeployedKeyContainer>