refactor(create-page): styling

src/pages/create/index.tsx

@@ -6,7 +6,6 @@ import {
   IconButton,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   Table,
   TableBody,
@@ -705,99 +704,87 @@ 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) => (
-                      <li key={index}>
-                        <Typography component="label">{file.name}</Typography>
-                        <IconButton onClick={() => handleRemoveFile(file)}>
-                          <Clear style={{ color: 'red' }} />{' '}
-                        </IconButton>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </Box>
-            </>
+              <ul className={styles.paperGroup}>
+                {selectedFiles.length > 0 &&
+                  selectedFiles.map((file, index) => (
+                    <li key={index}>
+                      <Typography component="label">{file.name}</Typography>
+                      <IconButton onClick={() => handleRemoveFile(file)}>
+                        <Clear style={{ color: 'red' }} />{' '}
+                      </IconButton>
+                    </li>
+                  ))}
+              </ul>
+              <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}>
-                  <TextField
-                    label="nip05 / npub"
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    helperText={error}
-                    error={!!error}
-                  />
-                  <FormControl fullWidth>
-                    <InputLabel id="select-role-label">Role</InputLabel>
-                    <Select
-                      labelId="select-role-label"
-                      id="demo-simple-select"
-                      value={userRole}
-                      label="Role"
-                      onChange={(e) => setUserRole(e.target.value as UserRole)}
-                    >
-                      <MenuItem value={UserRole.signer}>
-                        {UserRole.signer}
-                      </MenuItem>
-                      <MenuItem value={UserRole.viewer}>
-                        {UserRole.viewer}
-                      </MenuItem>
-                    </Select>
-                  </FormControl>
-
-                  <Box
-                    sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}
+              <Box className={styles.paperGroup}>
+                <TextField
+                  label="nip05 / npub"
+                  value={userInput}
+                  onChange={(e) => setUserInput(e.target.value)}
+                  helperText={error}
+                  error={!!error}
+                />
+                <FormControl fullWidth>
+                  <InputLabel id="select-role-label">Role</InputLabel>
+                  <Select
+                    labelId="select-role-label"
+                    id="demo-simple-select"
+                    value={userRole}
+                    label="Role"
+                    onChange={(e) => setUserRole(e.target.value as UserRole)}
                   >
-                    <Button
-                      disabled={!userInput}
-                      onClick={handleAddUser}
-                      variant="contained"
-                    >
-                      Add
-                    </Button>
-                  </Box>
-                </Box>
+                    <MenuItem value={UserRole.signer}>
+                      {UserRole.signer}
+                    </MenuItem>
+                    <MenuItem value={UserRole.viewer}>
+                      {UserRole.viewer}
+                    </MenuItem>
+                  </Select>
+                </FormControl>
+
+                <Button
+                  disabled={!userInput}
+                  onClick={handleAddUser}
+                  variant="contained"
+                >
+                  Add
+                </Button>
               </Box>
 
-              <DisplayUser
-                metadata={metadata}
-                users={users}
-                handleUserRoleChange={handleUserRoleChange}
-                handleRemoveUser={handleRemoveUser}
-                moveSigner={moveSigner}
-              />
-              <Box
-                sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}
-              >
+              <div className={styles.paperGroup}>
+                <DisplayUser
+                  metadata={metadata}
+                  users={users}
+                  handleUserRoleChange={handleUserRoleChange}
+                  handleRemoveUser={handleRemoveUser}
+                  moveSigner={moveSigner}
+                />
+
                 <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 {
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-  }
+.flexWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.paperGroup {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
 .subHeader {