Styles: Refactor.

notiflix · May 7, 2022 · b2c5911 · b2c5911
1 parent c744a75
commit b2c5911
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 69 deletions.
diff --git a/src/components/layout/Layout.module.scss b/src/components/layout/Layout.module.scss
@@ -1,26 +1,26 @@
 @import "@styles/variables";
 
-.layout {
+.root {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   padding: $header_height 0 0;
+}
 
-  &--home,
-  &--notify,
-  &--report,
-  &--confirm,
-  &--loading,
-  &--block {
-    padding: 0;
-    @include backgroundGradientNight();
-  }
+.home,
+.notify,
+.report,
+.confirm,
+.loading,
+.block {
+  padding: 0;
+  @include backgroundGradientNight();
+}
 
-  &--download,
-  &--documentation {
-    @include backgroundGradientLightGray();
-  }
+.download,
+.documentation {
+  @include backgroundGradientLightGray();
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { IDatabasePageMeta } from '@database/database.i';
 
-import { browserIsInternetExplorer } from '@application/helpers/utilities';
+import { browserIsInternetExplorer, classNames } from '@application/helpers/utilities';
 
 import MetaTags from '@components/meta/MetaTags';
 import Header from '@components/header/Header';
@@ -47,10 +47,7 @@ function Layout({ classNamePrefix, meta, children }: ILayout): JSX.Element {
       {stateIsInternetExplorer && <InternetExplorer />}
       <Noscript />
       <Header classNamePrefix={classNamePrefix} />
-      <main className={[
-        `${styles.layout}`,
-        `${styles[`layout--${classNamePrefix}`] || ''}`,
-      ].join(' ').trim()}>
+      <main className={classNames(styles.root, styles[classNamePrefix])}>
         {children}
       </main>
       <Footer />

diff --git a/src/components/layout/partials/go-to-top/GoToTop.module.scss b/src/components/layout/partials/go-to-top/GoToTop.module.scss
@@ -1,6 +1,6 @@
 @import "@styles/variables";
 
-.button {
+.root {
   transition: $transition_background, $transition_transform;
   position: fixed;
   z-index: 98;
@@ -24,7 +24,7 @@
     background: rgba($color_black, 0.9);
   }
 
-  &--show {
+  &.isVisible {
     transform: translateY(0);
   }
 }
diff --git a/src/components/layout/partials/go-to-top/GoToTop.tsx b/src/components/layout/partials/go-to-top/GoToTop.tsx
@@ -3,6 +3,8 @@ import { FiArrowUp as IconArrowUp } from 'react-icons/fi';
 
 import { attributes as _appContent } from '@database/app/content.md';
 
+import { classNames } from '@application/helpers/utilities';
+
 import styles from '@components/layout/partials/go-to-top/GoToTop.module.scss';
 
 function GoToTop(): JSX.Element {
@@ -15,9 +17,9 @@ function GoToTop(): JSX.Element {
   // GotoTop OnClick Handler: end
 
   // GotoTop Show/Hide: begin
-  const [stateShowGoToTop, setStateShowGoToTop] = useState<boolean>(false);
+  const [stateIsVisible, setStateIsVisible] = useState<boolean>(false);
   const documentScrollListener = (): void => {
-    setStateShowGoToTop(window.document.documentElement?.scrollTop > (window.innerHeight * 1.25));
+    setStateIsVisible(window.document.documentElement?.scrollTop > (window.innerHeight * 1.25));
   };
   useEffect(() => {
     window.document.addEventListener('scroll', documentScrollListener);
@@ -32,10 +34,9 @@ function GoToTop(): JSX.Element {
       aria-label={_dbAppContent?.buttons?.goToTop}
       type="button"
       onClick={goToTopOnClickHandler}
-      className={[
-        `${styles.button}`,
-        `${stateShowGoToTop ? `${styles['button--show'] || ''}` : ''}`,
-      ].join(' ').trim()}
+      className={classNames(styles.root, {
+        [styles.isVisible]: stateIsVisible,
+      })}
     >
       <IconArrowUp />
     </button>

diff --git a/src/components/layout/partials/internet-explorer/InternetExplorer.module.scss b/src/components/layout/partials/internet-explorer/InternetExplorer.module.scss
@@ -1,6 +1,6 @@
 @import "@styles/variables";
 
-.ie {
+.root {
   position: fixed;
   z-index: 9999;
   left: 0;
@@ -16,46 +16,46 @@
   color: $color_white;
   background: rgba($color_theme_dark, 0.99);
   backdrop-filter: blur(0.2rem);
+}
 
-  &__title {
-    width: 100%;
-    text-align: center;
-    font-size: 1.75rem;
-    font-weight: 900;
-    margin: 0 auto 0.5rem;
-  }
+.title {
+  width: 100%;
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: 900;
+  margin: 0 auto 0.5rem;
+}
 
-  &__description {
-    width: 100%;
-    text-align: center;
-    font-size: 0.9rem;
-    font-weight: 300;
-    opacity: 0.75;
-    margin: 0 auto 3rem;
-  }
+.description {
+  width: 100%;
+  text-align: center;
+  font-size: 0.9rem;
+  font-weight: 300;
+  opacity: 0.75;
+  margin: 0 auto 3rem;
+}
 
-  &__link {
-    transition: $transition_color, $transition_background;
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    padding: 0.9rem 1.4rem;
-    border-radius: 2rem;
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: $color_dark;
-    background: $color_white;
+.link {
+  transition: $transition_color, $transition_background;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 0.9rem 1.4rem;
+  border-radius: 2rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: $color_dark;
+  background: $color_white;
 
-    &:hover {
-      color: $color_white;
-      background: $color_dark;
-    }
+  &:hover {
+    color: $color_white;
+    background: $color_dark;
+  }
 
-    &__icon {
-      transform: scale(1.3);
-      margin: 0 0.75rem 0 0;
-    }
+  &Icon {
+    transform: scale(1.3);
+    margin: 0 0.75rem 0 0;
   }
 }
diff --git a/src/components/layout/partials/internet-explorer/InternetExplorer.tsx b/src/components/layout/partials/internet-explorer/InternetExplorer.tsx
@@ -8,16 +8,16 @@ function InternetExplorer(): JSX.Element {
   const { _dbAppContent } = _appContent;
 
   return (
-    <div className={styles.ie}>
-      <h2 className={styles.ie__title}>{_dbAppContent?.browsers?.ieTitle}</h2>
-      <p className={styles.ie__description}>{_dbAppContent?.browsers?.ieDescription}</p>
+    <div className={styles.root}>
+      <h2 className={styles.title}>{_dbAppContent?.browsers?.ieTitle}</h2>
+      <p className={styles.description}>{_dbAppContent?.browsers?.ieDescription}</p>
       <a
-        className={styles.ie__link}
+        className={styles.link}
         href={_dbAppContent?.browsers?.ieLinkUrl}
         target="_blank"
         rel="noreferrer"
       >
-        <IconGitHub className={styles.ie__link__icon} />
+        <IconGitHub className={styles.linkIcon} />
         <span>{_dbAppContent?.browsers?.ieLinkText}</span>
       </a>
     </div>