Change styles. Change Header

FrontEnd/src/components/Header/Header.scss

@@ -1,6 +1,6 @@
 header {
- display: flex;
- justify-content: space-between;
+ // display: flex;
+ // justify-content: space-between;
  width: 100%;
  max-width: 1247px;
  margin: 0 auto;
@@ -12,14 +12,16 @@ header {
  .nav_head{
  display: flex;
  justify-content: space-between;
- margin-top: 3rem;
+ // align-self: center;
+ // margin-top: 3rem;
+ padding: 0;
  .navbar{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items:center;
- margin-right: 16rem;
-
+ margin: 0;
+ // margin-right: 16rem;
 
  li{
  margin-left: 3rem;
@@ -34,6 +36,12 @@ header {
  }
  }
  }
+ .user{
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items:center;
+ }
 
  .icons_header{
  display: flex;

FrontEnd/src/components/Header/Header.tsx

@@ -7,25 +7,28 @@ import './Header.scss'
 export function Header(): JSX.Element {
  return (
  <header>
- <Logo />
  <nav className='nav_head'>
+ <Logo />
  <ul className="navbar">
  <li><Link to={"/"} className='main main_active'>Главная</Link> </li>
  <li><Link to={"/poll"}>Опрос</Link></li>
  <li><Link to={"/about"}>О нас</Link></li>
- <li><Link to={"/cart"}>Корзина</Link></li>
  </ul>
- <ul className="user">
- <li><Link to={"/favorite"}>Избранное</Link> </li>
- <li><Link to={"/ordersList"}>Заказы</Link></li>
- <li><Link to={"/settings"}>Настройки</Link></li>
- </ul>
- <div className='icons_header'>
- <Button className='btn_login'>Войти</Button>
- <img src='src\Assets\cart.png' className='btn_cart'/>
+ <div className="user">
+ <ul >
+ <li><Link to={"/favorite"}>Избранное</Link> </li>
+ <li><Link to={"/ordersList"}>Заказы</Link></li>
+ <li><Link to={"/settings"}>Настройки</Link></li>
+ </ul>
+ <div className='icons_header'>
+ <Button className='btn_login'>Войти</Button>
+ <Link to={"/cart"}>
+ <img src='src\Assets\cart.png' className='btn_cart' alt='cart' />
+ </Link>
+ </div>
  </div>
  </nav>
  {/*TODO add login*/}
- </header>
+ </header >
  )
 }

FrontEnd/src/components/News/News.tsx

@@ -7,6 +7,7 @@ import './style.css'
 //*
 export function News(): JSX.Element {
  return (
- <div>News</div>
+ // <img src="News.png" alt="News" id='news'/>
+ <div>NEWS</div>
  )
 }

FrontEnd/src/components/ProductCard_mini/ProductCard_mini.scss

@@ -3,7 +3,7 @@
  // flex-flow: column wrap;
  // justify-content: space-between;
  // max-width: 100px;
- 
+
  width: 11rem;
  height: 21rem;
  display: flex;
@@ -16,13 +16,20 @@
  flex-flow: column wrap;
  // max-width: 200px;
  }
+
  .action {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
- }
-}
-
-
 
+ .toCart_btn {
+ width: 133px;
+ height: 40px;
 
+ background: #D96BFF;
+ box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
+ border-radius: 8px;
+ border: #D96BFF solid 2px;
+ }
+ }
+}

FrontEnd/src/components/ProductCard_mini/ProductCard_mini.tsx

@@ -19,7 +19,7 @@ export function ProductCard_mini({ id, image, title, price }:TCard): JSX.Element
  </section>
  </Link>
  <div className='action'>
- <button>В корзину</button>
+ <button className='toCart_btn'>В корзину</button>
  <img src="EmptyHeart.svg" alt="favorite" />
  </div>
  </div>

FrontEnd/src/components/Products/Products.scss

@@ -1,14 +1,14 @@
 .cards {
- /* display: flex;
+ display: flex;
  flex-flow: row wrap;
- justify-content: space-between; */
- // width: 79%;
+ justify-content: space-between;
+  // width: 79%;
  // height: 500px;
  // //float: left;
  // display: flex;
  // justify-content: space-between;
  // flex-flow: row wrap;
- border: 1px solid silver;
- 
- 
+ // border: 1px solid silver;
+
+
 }