From a50bd0a9ef1def057492b6df6bff257138a661fc Mon Sep 17 00:00:00 2001
From: MaryWylde <marykhachatryan13@gmail.com>
Date: Wed, 1 Apr 2026 14:51:12 +0400
Subject: [PATCH] chore: improve mobile version of Tools page

---
 .../ToolContainer/ToolContainer.module.scss   | 15 +++++++--
 src/hooks/useGlobals.ts                       |  4 ++-
 .../ToolsLayout/ToolsLayout.module.scss       | 31 +++++++++++++++++++
 src/pages/tools/index.tsx                     | 16 ++++++++--
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/components/tools/ToolContainer/ToolContainer.module.scss b/src/components/tools/ToolContainer/ToolContainer.module.scss
index d4a10b4..625b09f 100644
--- a/src/components/tools/ToolContainer/ToolContainer.module.scss
+++ b/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 {
diff --git a/src/hooks/useGlobals.ts b/src/hooks/useGlobals.ts
index ee79e32..2b08736 100644
--- a/src/hooks/useGlobals.ts
+++ b/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 });
   }
 
diff --git a/src/layouts/ToolsLayout/ToolsLayout.module.scss b/src/layouts/ToolsLayout/ToolsLayout.module.scss
index a644141..9b8c9d3 100644
--- a/src/layouts/ToolsLayout/ToolsLayout.module.scss
+++ b/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;
+  }
+}
diff --git a/src/pages/tools/index.tsx b/src/pages/tools/index.tsx
index d60491b..a03a7a7 100644
--- a/src/pages/tools/index.tsx
+++ b/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;