refactor(create-page): styling

src/pages/create/index.tsx

@@ -6,7 +6,6 @@ import {
   IconButton,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   Table,
   TableBody,
@@ -705,26 +704,16 @@ export const CreatePage = () => {
       <Container className={styles.container}>
         <StickySideColumns
           left={
-            <>
+            <div className={styles.flexWrap}>
               <TextField
                 label="Title"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 variant="outlined"
               />
-
-              <Box>
-                <MuiFileInput
-                  fullWidth
-                  multiple
-                  placeholder="Choose Files"
-                  value={selectedFiles}
-                  onChange={(value) => handleSelectFiles(value)}
-                />
-
-                {selectedFiles.length > 0 && (
-                  <ul>
-                    {selectedFiles.map((file, index) => (
+              <ul className={styles.paperGroup}>
+                {selectedFiles.length > 0 &&
+                  selectedFiles.map((file, index) => (
                     <li key={index}>
                       <Typography component="label">{file.name}</Typography>
                       <IconButton onClick={() => handleRemoveFile(file)}>
@@ -733,17 +722,21 @@ export const CreatePage = () => {
                     </li>
                   ))}
               </ul>
-                )}
-              </Box>
-            </>
+              <MuiFileInput
+                fullWidth
+                multiple
+                placeholder="Choose Files"
+                value={selectedFiles}
+                onChange={(value) => handleSelectFiles(value)}
+              />
+            </div>
           }
           right={
-            <>
+            <div className={styles.flexWrap}>
               <Typography component="label" variant="h6">
                 Add Counterparts
               </Typography>
-              <Box className={styles.inputBlock}>
-                <Box className={styles.inputBlock}>
+              <Box className={styles.paperGroup}>
                 <TextField
                   label="nip05 / npub"
                   value={userInput}
@@ -769,9 +762,6 @@ export const CreatePage = () => {
                   </Select>
                 </FormControl>
 
-                  <Box
-                    sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}
-                  >
                 <Button
                   disabled={!userInput}
                   onClick={handleAddUser}
@@ -780,9 +770,8 @@ export const CreatePage = () => {
                   Add
                 </Button>
               </Box>
-                </Box>
-              </Box>
 
+              <div className={styles.paperGroup}>
                 <DisplayUser
                   metadata={metadata}
                   users={users}
@@ -790,14 +779,12 @@ export const CreatePage = () => {
                   handleRemoveUser={handleRemoveUser}
                   moveSigner={moveSigner}
                 />
-              <Box
-                sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}
-              >
+
                 <Button onClick={handleCreate} variant="contained">
                   Create
                 </Button>
-              </Box>
-            </>
+              </div>
+            </div>
           }
         >
           <DrawPDFFields
@@ -828,7 +815,7 @@ const DisplayUser = ({
   moveSigner
 }: DisplayUsersProps) => {
   return (
-    <TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
+    <TableContainer>
       <Table>
         <TableHead>
           <TableRow>

src/pages/create/style.module.scss

@@ -1,11 +1,18 @@
 @import '../../styles/colors.scss';
 
-.container {
-  .inputBlock {
+.flexWrap {
   display: flex;
   flex-direction: column;
-    gap: 25px;
-  }
+  gap: 15px;
+}
+
+.paperGroup {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
 .subHeader {