Switch to SettingsContainer in all settings views

1 files changed, 3 insertions, 8 deletions

diff --git a/gui/src/renderer/components/InterfaceSettings.tsx b/gui/src/renderer/components/InterfaceSettings.tsx
index bc7f823e7c..4598c1058e 100644
--- a/gui/src/renderer/components/InterfaceSettings.tsx
+++ b/gui/src/renderer/components/InterfaceSettings.tsx
@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -10,7 +9,7 @@ import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -20,10 +19,6 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -42,7 +37,7 @@ export default function InterfaceSettings() {
   return (
     <BackAction action={pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -89,7 +84,7 @@ export default function InterfaceSettings() {
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );