fix: center elements

digitable-lol · Sep 2, 2024 · 9a7972e · 9a7972e
1 parent 6e1b52d
commit 9a7972e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git 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
@@ -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} />
         ) : (