Fix environment page header (#1510)

Fix env page header
kubeshop · Nov 16, 2022 · e527bee · e527bee
1 parent 66ba350
commit e527bee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/web/src/pages/Environments/Environment.styled.tsx b/web/src/pages/Environments/Environment.styled.tsx
@@ -13,7 +13,7 @@ export const PageHeader = styled.div`
 
 export const TitleText = styled(Typography.Title).attrs({level: 1})`
   && {
-    margin: 14px 0;
+    margin: 0;
   }
 `;
 
@@ -41,14 +41,17 @@ export const HeaderContainer = styled.div`
   justify-content: space-between;
   padding-bottom: 8px;
 `;
+
 export const VariablesText = styled(Typography)`
   flex-basis: 50%;
 `;
+
 export const HeaderText = styled(Typography)`
   flex-basis: 50%;
   font-weight: bold;
   padding-left: 8px;
 `;
+
 export const HeaderTextRight = styled(Typography)`
   flex-basis: 50%;
   font-weight: bold;
@@ -101,3 +104,9 @@ export const TextContainer = styled.div`
   white-space: nowrap;
   overflow: hidden;
 `;
+
+export const MainHeaderContainer = styled.div`
+  border-bottom: ${({theme}) => `1px solid ${theme.color.borderLight}`};
+  padding: 23px 0;
+  width: 100%;
+`;
diff --git a/web/src/pages/Environments/EnvironmentContent.tsx b/web/src/pages/Environments/EnvironmentContent.tsx
@@ -40,7 +40,10 @@ const EnvironmentContent = () => {
 
   return (
     <S.Wrapper>
-      <S.TitleText>All Environments</S.TitleText>
+      <S.MainHeaderContainer>
+        <S.TitleText>All Environments</S.TitleText>
+      </S.MainHeaderContainer>
+
       <S.PageHeader>
         <SearchInput onSearch={onSearch} placeholder="Search environment" />
         <S.ActionContainer>
@@ -49,6 +52,7 @@ const EnvironmentContent = () => {
           </S.CreateEnvironmentButton>
         </S.ActionContainer>
       </S.PageHeader>
+
       <EnvironmentList onDelete={handleOnDelete} onEdit={handleOnEdit} query={query} />
       <EnvironmentModal isOpen={isModalOpen} onClose={handleOnModalClose} environment={environment} />
     </S.Wrapper>