From 5c0f17cc3d7c6d3dfb4c95f820da1df2cfb688a2 Mon Sep 17 00:00:00 2001
From: Tony Vi <winogradovaa@gmail.com>
Date: Tue, 28 Feb 2023 14:23:15 +0200
Subject: [PATCH] fix(GoalForm): sync tags container background

---
 src/components/GoalForm.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/GoalForm.tsx b/src/components/GoalForm.tsx
index 429dcb584..37d870560 100644
--- a/src/components/GoalForm.tsx
+++ b/src/components/GoalForm.tsx
@@ -112,10 +112,15 @@ interface GoalFormProps {
     onSumbit: (fields: GoalFormType) => void;
 }
 
-const StyledTagsContainer = styled.div`
-    padding-top: 50px;
+const StyledTagsContainer = styled.div<{ focused?: boolean }>`
+    padding-top: 45px;
     padding-left: ${gapS};
-    background-color: ${gray2};
+
+    ${({ focused }) =>
+        focused &&
+        `
+            background-color: ${gray2};
+        `}
 `;
 
 export const GoalForm: React.FC<GoalFormProps> = ({
@@ -220,7 +225,7 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                         )}
                     />
 
-                    <StyledTagsContainer>
+                    <StyledTagsContainer focused={descriptionFocused}>
                         {tagsWatcher?.map((tag) => (
                             <Tag key={tag.id} title={tag.title} onHide={onTagDeleteProvider(tag)} />
                         ))}
@@ -274,7 +279,6 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                                 control={control}
                                 render={({ field }) => (
                                     <EstimateComboBox
-                                        text={t('Schedule')}
                                         placeholder={t('Date input mask placeholder')}
                                         mask={t('Date input mask')}
                                         defaultValuePlaceholder={estimate ?? estimatedMeta({ locale })}
@@ -304,7 +308,6 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                                 control={control}
                                 render={({ field }) => (
                                     <TagComboBox
-                                        text="Tags"
                                         disabled={busy || (tagsWatcher || []).length >= tagsLimit}
                                         placeholder={t('Enter tag title')}
                                         error={errorsResolver(field.name)}