refactor: update Not Found page

stardustmeg · Jun 13, 2024 · d1b0285 · d1b0285
1 parent 2ffdcec
commit d1b0285
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 25 deletions.
diff --git 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
@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .notFoundPage {
   position: relative;
   display: flex;
@@ -30,47 +32,30 @@
   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;
   color: var(--noble-gray-700);
 }
 
 .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;
 }