auto connect toggle in manage tab

src/library/Page/Wrapper.ts

@@ -14,11 +14,11 @@ export const Wrapper = styled.div`
 
 export const PageContentWrapper = styled.div`
   margin-top: 0.5rem;
-  max-width: 1100px;
+  max-width: 750px;
   width: 100%;
 
   > h2 {
-    color: var(--text-color-secondary);
+    color: var(--text-color-primary);
     margin-bottom: 0.6rem;
   }
 `;

src/library/Settings/Wrappers.ts

@@ -3,12 +3,6 @@
 
 import styled from 'styled-components';
 
-export const SettingsWrapper = styled.div`
-  margin-top: 0.5rem;
-  max-width: 750px;
-  width: 100%;
-`;
-
 export const SettingsHeaderWrapper = styled.div`
   width: 100%;
   display: flex;

src/screens/Default/Connect/AutoConnect.tsx → src/screens/Default/AutoConnect.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @rossbulat/console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { AutoConnectWrapper } from './Wrappers';
+import { AutoConnectWrapper } from './Connect/Wrappers';
 import { Switch } from 'library/Switch';
 import { useTabs } from 'contexts/Tabs';
 

src/screens/Default/Connect/Wrappers.ts

@@ -9,7 +9,6 @@ export const AutoConnectWrapper = styled.div`
   align-items: center;
   margin-top: 0.45rem;
   padding: 0 0.2rem;
-  max-width: 750px;
   width: 100%;
 
   > h4 {
@@ -20,7 +19,6 @@ export const AutoConnectWrapper = styled.div`
 `;
 
 export const SearchChainWrapper = styled.div`
-  max-width: 750px;
   width: 100%;
 `;
 
@@ -30,7 +28,6 @@ export const ChainListWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 0.5rem;
-  max-width: 750px;
   width: 100%;
 
   > h4 {

src/screens/Default/Connect/index.tsx

@@ -2,13 +2,14 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { ChainList } from './ChainList';
-import { AutoConnect } from './AutoConnect';
+import { AutoConnect } from '../AutoConnect';
 import { SearchChain } from './SearchChain';
+import { PageContentWrapper } from 'library/Page/Wrapper';
 
 export const Connect = () => (
-  <>
+  <PageContentWrapper>
     <AutoConnect />
     <SearchChain />
     <ChainList />
-  </>
+  </PageContentWrapper>
 );

src/screens/Default/ManageTab/index.tsx

@@ -1,17 +1,20 @@
 // Copyright 2024 @rossbulat/console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import {
-  SettingsHeaderWrapper,
-  SettingsWrapper,
-} from 'library/Settings/Wrappers';
+import { SettingsHeaderWrapper } from 'library/Settings/Wrappers';
 import { RenameTab } from './RenameTab';
+import { PageContentWrapper } from 'library/Page/Wrapper';
+import { AutoConnect } from '../AutoConnect';
 
 export const ManageTab = () => (
-  <SettingsWrapper>
+  <PageContentWrapper>
     <SettingsHeaderWrapper>
       <h2>Manage Tab</h2>
+      <div>
+        <AutoConnect />
+      </div>
     </SettingsHeaderWrapper>
+
     <RenameTab />
-  </SettingsWrapper>
+  </PageContentWrapper>
 );

src/screens/Settings/index.tsx

@@ -1,18 +1,18 @@
 // Copyright 2024 @rossbulat/console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { SettingsWrapper } from 'library/Settings/Wrappers';
 import { TagSettings } from './TagSettings';
 import { useSection } from 'library/Page/provider';
 import { TabSettings } from './TabSettings';
+import { PageContentWrapper } from 'library/Page/Wrapper';
 
 export const Settings = () => {
   const { activeSection } = useSection();
 
   return (
-    <SettingsWrapper>
+    <PageContentWrapper>
       {activeSection === 0 && <TabSettings />}
       {activeSection === 1 && <TagSettings />}
-    </SettingsWrapper>
+    </PageContentWrapper>
   );
 };