From d1b028583c3b5b751b4c1b84e3529074e0bccc83 Mon Sep 17 00:00:00 2001
From: Margarita Golubeva <margaret.golubeva@gmail.com>
Date: Thu, 13 Jun 2024 20:17:49 +0300
Subject: [PATCH] refactor: update Not Found page

---
 .../NotFoundPage/view/NotFoundPageView.ts     |  2 +-
 .../view/notFoundPageView.module.scss         | 33 +++++--------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/pages/NotFoundPage/view/NotFoundPageView.ts b/src/pages/NotFoundPage/view/NotFoundPageView.ts
index b3fc9692..1b56f654 100644
--- a/src/pages/NotFoundPage/view/NotFoundPageView.ts
+++ b/src/pages/NotFoundPage/view/NotFoundPageView.ts
@@ -60,7 +60,7 @@ class NotFoundPageView {
   private createPageLogo(): HTMLDivElement {
     this.logo = createBaseElement({ cssClasses: [styles.pageLogo], tag: 'div' });
     const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.LOGO));
+    svg.append(createSVGUse(SVG_DETAILS.NOT_FOUND));
     this.logo.append(svg);
     return this.logo;
   }
diff --git a/src/pages/NotFoundPage/view/notFoundPageView.module.scss b/src/pages/NotFoundPage/view/notFoundPageView.module.scss
index 689641d7..eccd1c2c 100644
--- a/src/pages/NotFoundPage/view/notFoundPageView.module.scss
+++ b/src/pages/NotFoundPage/view/notFoundPageView.module.scss
@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .notFoundPage {
   position: relative;
   display: flex;
@@ -30,21 +32,22 @@
   margin: 0 auto;
 
   svg {
-    width: var(--large-offset);
-    height: var(--large-offset);
-    fill: var(--steam-green-800);
+    width: calc(var(--extra-large-offset) * 2);
+    height: calc(var(--extra-large-offset) * 2);
   }
 }
 
 .pageTitle {
   display: flex;
-  margin: 0 auto;
+  align-self: center;
   font: var(--extra-medium-font);
   letter-spacing: var(--one);
   color: var(--steam-green-800);
 }
 
 .pageDescription {
+  align-self: center;
+  padding: var(--extra-small-offset);
   font: var(--regular-font) '*' 1.5;
   letter-spacing: var(--one);
   text-align: center;
@@ -52,25 +55,7 @@
 }
 
 .toMainButton {
-  align-self: center;
-  border-radius: var(--small-br);
-  padding: calc(var(--extra-small-offset) / 2) var(--small-offset);
-  width: max-content;
-  font: var(--bold-font);
-  letter-spacing: var(--one);
-  color: var(--white);
-  background-color: var(--steam-green-800);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-
-  &:focus {
-    background-color: var(--steam-green-700);
-  }
+  @include green-btn;
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--steam-green-700);
-    }
-  }
+  align-self: center;
 }