added new design to settings dialog

web/src/components/Add/AddDialog.jsx

@@ -12,9 +12,10 @@ import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
+import { ButtonWrapper, Header } from 'style/DialogStyles'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
-import { ButtonWrapper, Content, Header } from './style'
+import { Content } from './style'
 import RightSideComponent from './RightSideComponent'
 import LeftSideComponent from './LeftSideComponent'
 
@@ -219,14 +220,7 @@ export default function AddDialog({
   }
 
   return (
-    <Dialog
-      open
-      onClose={handleClose}
-      aria-labelledby='form-dialog-title'
-      fullScreen={fullScreen}
-      fullWidth
-      maxWidth='md'
-    >
+    <Dialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md'>
       <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
 
       <Content isEditMode={isEditMode}>

web/src/components/Add/style.js

@@ -1,19 +1,6 @@
 import { Button } from '@material-ui/core'
 import styled, { css } from 'styled-components'
 
-export const Header = styled.div`
-  ${({ theme: { primary } }) => css`
-    background: ${primary};
-    color: rgba(0, 0, 0, 0.87);
-    font-size: 20px;
-    color: #fff;
-    font-weight: 600;
-    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
-    padding: 15px 24px;
-    position: relative;
-  `}
-`
-
 export const Content = styled.div`
   ${({
     isEditMode,
@@ -349,13 +336,3 @@ export const PosterLanguageSwitch = styled.div`
     }
   `}
 `
-
-export const ButtonWrapper = styled.div`
-  padding: 20px;
-  display: flex;
-  justify-content: flex-end;
-
-  > :not(:last-child) {
-    margin-right: 10px;
-  }
-`