fix: add stack icon and fix title style

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

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/application/frontend/src/assets/stack.svg b/application/frontend/src/assets/stack.svg
diff --git a/application/frontend/src/pages/project/Project.tsx b/application/frontend/src/pages/project/Project.tsx
@@ -4,7 +4,7 @@ import HomeIcon from "@mui/icons-material/Home"
 import SearchIcon from "@mui/icons-material/Search"
 
 import settings from "src/assets/settings.svg"
-import { CreateProjectButton } from "src/components/CreateProjectButton"
+// import { CreateProjectButton } from "src/components/CreateProjectButton"
 import { NavButton } from "src/components/NavButton"
 import { ProjectCard } from "src/components/ProjectCard"
 import { SearchBar } from "src/components/SearchBar"

diff --git a/application/frontend/src/pages/report/Report.styled.tsx b/application/frontend/src/pages/report/Report.styled.tsx
@@ -27,3 +27,15 @@ export const HeaderRightContainer = styled.div`
   display: flex;
   align-items: center;
 `
+
+export const TitleSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`
+export const StyledTitle = styled.div`
+  font-size: 34px;
+  font-weight: 600;
+  color: rgba(29, 27, 32, 1);
+`
diff --git a/application/frontend/src/pages/report/Report.tsx b/application/frontend/src/pages/report/Report.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react"
 import HomeIcon from "@mui/icons-material/Home"
 import { Container, Grid } from "@mui/material"
 
+import stack from "src/assets/stack.svg"
 import CreateReportButton from "src/components/CreateReportButton/CreateReportButton"
 import { NavButton } from "src/components/NavButton"
 import ReportOverlay from "src/components/ReportOverlay/ReportOverlay"
@@ -11,7 +12,7 @@ import ReportsTable from "src/components/ReportsTable/ReportsTable"
 import { SearchBar } from "src/components/SearchBar"
 import { ViewModeToggle } from "src/components/ViewModeToggle"
 
-import { Header, StyledContainer, Title } from "./Report.styled"
+import { Header, StyledContainer, StyledTitle, Title, TitleSection } from "./Report.styled"
 
 const stageColors = {
   Initial: "rgba(0, 122, 255, 1)",
@@ -105,14 +106,17 @@ export const ReportPage: React.FC = () => {
   return (
     <StyledContainer>
       <Container maxWidth="lg">
-        <NavButton to="/" icon={<HomeIcon fontSize="small" />}>
+        <NavButton to="/projects" icon={<HomeIcon fontSize="small" />}>
           Home
         </NavButton>
-        /<NavButton to="/projects">Проект название проекта</NavButton>
+        /<NavButton to="/">Проект название проекта</NavButton>
         <Header container>
           <Grid item>
             <> </>
-            <Title variant="h5">Reports</Title>
+            <TitleSection>
+              <img src={stack} alt="Stack" style={{ width: 40, height: 40 }} />
+              <StyledTitle>Список проектов</StyledTitle>
+            </TitleSection>
           </Grid>
           <Grid item xs={12} sm={6} container justifyContent="flex-end">
             <CreateReportButton onClick={handleCreateReport} />