From 9a7972e25ea30a4bc1d6fbe78995825718ed66b8 Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Wed, 21 Aug 2024 18:26:22 +0300
Subject: [PATCH] fix: center elements

---
 .../src/pages/report/Report.styled.tsx        |  9 ++++++++
 .../frontend/src/pages/report/Report.tsx      | 23 ++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/application/frontend/src/pages/report/Report.styled.tsx b/application/frontend/src/pages/report/Report.styled.tsx
index cbdd534..89192f0 100644
--- a/application/frontend/src/pages/report/Report.styled.tsx
+++ b/application/frontend/src/pages/report/Report.styled.tsx
@@ -34,8 +34,17 @@ export const TitleSection = styled.div`
   gap: 16px;
   flex: 1;
 `
+
 export const StyledTitle = styled.div`
   font-size: 34px;
   font-weight: 600;
   color: rgba(29, 27, 32, 1);
 `
+
+export const SearchViewContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 24px;
+`
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
index 064566d..7f82931 100644
--- a/application/frontend/src/pages/report/Report.tsx
+++ b/application/frontend/src/pages/report/Report.tsx
@@ -12,7 +12,13 @@ import ReportsTable from "src/components/ReportsTable/ReportsTable"
 import { SearchBar } from "src/components/SearchBar"
 import { ViewModeToggle } from "src/components/ViewModeToggle"
 
-import { Header, StyledContainer, StyledTitle, Title, TitleSection } from "./Report.styled"
+import {
+  Header,
+  SearchViewContainer,
+  StyledContainer,
+  StyledTitle,
+  TitleSection,
+} from "./Report.styled"
 
 const stageColors = {
   Initial: "rgba(0, 122, 255, 1)",
@@ -112,7 +118,6 @@ export const ReportPage: React.FC = () => {
         /<NavButton to="/">Проект название проекта</NavButton>
         <Header container>
           <Grid item>
-            <> </>
             <TitleSection>
               <img src={stack} alt="Stack" style={{ width: 40, height: 40 }} />
               <StyledTitle>Список проектов</StyledTitle>
@@ -122,12 +127,14 @@ export const ReportPage: React.FC = () => {
             <CreateReportButton onClick={handleCreateReport} />
           </Grid>
         </Header>
-        <SearchBar
-          searchQuery={searchQuery}
-          onSearchChange={handleSearchChange}
-          onClearSearch={clearSearch}
-        />
-        <ViewModeToggle viewMode={viewMode} onToggleViewMode={toggleViewMode} />{" "}
+        <SearchViewContainer>
+          <SearchBar
+            searchQuery={searchQuery}
+            onSearchChange={handleSearchChange}
+            onClearSearch={clearSearch}
+          />
+          <ViewModeToggle viewMode={viewMode} onToggleViewMode={toggleViewMode} />
+        </SearchViewContainer>
         {viewMode === "list" ? (
           <ReportsTable reports={reports} />
         ) : (