chore: improve mobile version of Tools page

src/components/tools/ToolContainer/ToolContainer.module.scss

@@ -173,12 +173,17 @@
   fill: var(--hover-color) !important;
 }
 
-.primaryButton.inDevelopment .buttonBg,
+.primaryButton.inDevelopment .buttonBg {
+  opacity: 1;
+  background-color: #acacac;
+}
+
 .primaryButton.inDevelopment .buttonBg path {
   opacity: 1;
+  fill: #acacac !important;
+  fill-opacity: 1 !important;
 }
 
-.primaryButton.inDevelopment .buttonBg path,
 .primaryButton.inDevelopment:hover .buttonBg path {
   fill: #acacac !important;
   fill-opacity: 1 !important;
@@ -255,11 +260,17 @@
   .container {
     max-width: 100%;
     min-height: 360px;
+    margin: 16px;
+  }
+
+  .backgroundSvg {
+    top: 32px;
   }
 
   .content {
     min-height: 360px;
     padding: 24px 16px 28px;
+    background-size: cover;
   }
 
   .title {

src/hooks/useGlobals.ts

@@ -134,7 +134,9 @@ const initUseGlobals = (articleRef: HTMLElement) => {
   const isDarkTheme = localStorage.getItem('darkTheme') === 'true';
   if (isDarkTheme) {
     document.body.classList.add('darkTheme');
-    articleRef.classList.add('darkTheme');
+    if (articleRef) {
+      articleRef.classList.add('darkTheme');
+    }
     reducer({ isDarkTheme: true });
   }
 

src/layouts/ToolsLayout/ToolsLayout.module.scss

@@ -61,3 +61,34 @@
   top: 823px;
   right: -131px;
 }
+
+@media (max-width: 768px) {
+  .layout {
+    margin-top: 54px;
+  }
+
+  .decorText1 {
+    top: 449px;
+    left: 16px;
+  }
+
+  .decorText2 {
+    top: 918px;
+    right: 20px;
+  }
+
+  .decorText3 {
+    top: 917px;
+    left: 6px;
+  }
+
+  .decorText4 {
+    top: unset;
+    bottom: 454px;
+    right: 93px;
+  }
+
+  .contentInner {
+    gap: 4px;
+  }
+}

src/pages/tools/index.tsx

@@ -1,8 +1,10 @@
 import { GetStaticProps } from 'next';
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 
 import { TStaticProps } from '@local-types/data';
 
+import useGlobals from '@hooks/useGlobals';
+
 import { getTools } from '@api/tools';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +17,16 @@ export type ToolsPageProps = {
   tools?: any | null;
 };
 const ToolsPage: FC<ToolsPageProps> = ({ tools }) => {
+  const [{ initUseGlobals, unmountUseGlobals }, { isDarkTheme }] = useGlobals();
+
+  useEffect(() => {
+    initUseGlobals(null);
+
+    return () => {
+      unmountUseGlobals();
+    };
+  }, []);
+
   const toolsList = tools?.tools_list?.data ?? tools?.tools_list ?? [];
   const sortedToolsList = [...toolsList].sort((a, b) => {
     const attrsA = a?.attributes ?? a;
@@ -49,7 +61,7 @@ const ToolsPage: FC<ToolsPageProps> = ({ tools }) => {
         modifiedDate={tools?.updatedAt}
       />
       <DevToolsEasterEgg />
-      <ToolsLayout>
+      <ToolsLayout isDarkTheme={isDarkTheme}>
         {sortedToolsList.map((tool: any) => {
           const attrs = tool?.attributes ?? tool;
           const title = attrs?.title;