디자인 조금 변경

Author: joostory

src/renderer/components/blog/content/type/TextContentViewer.js

@@ -16,7 +16,9 @@ const useStyles = makeStyles(theme => ({
     background: theme.palette.content.background,
     width: theme.palette.content.maxWidth,
     boxShadow: theme.shadows[1],
-    borderRadius: theme.spacing(0.5)
+    borderRadius: theme.spacing(0.5),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
   },
   title: {
     paddingTop: theme.spacing(5),
@@ -28,9 +30,24 @@ const useStyles = makeStyles(theme => ({
     textAlign: 'center',
     color: theme.palette.content.text
   },
-  postInfoButton: {
+  divContainer: {
+    position: 'relative',
+    paddingTop: 9
+  },
+  btnBox: {
+    position: 'absolute',
+    left: '50%',
+    top: 0,
+    transform: 'translate(-50%, 0)',
+    backgroundColor: '#fff',
+    padding: '0 10px'
+  },
+  btnPostInfo: {
     color: theme.palette.content.text
   },
+  icoPostInfo: {
+    fontSize: 18
+  },
   divider: {
     backgroundColor: theme.palette.content.divider
   },
@@ -75,17 +92,21 @@ export default function TextContentViewer({ onRequestEditPost }) {
           <Typography component='span'>
             {dayjs(post.date).format('YYYY-MM-DD HH:mm')}
           </Typography>
-          <IconButton className={classes.postInfoButton} href={post.url} tooltip="브라우저에서 보기" size='small'>
-            <OpenInBrowser />
+        </Box>
+      </Container>
+
+      <Container disableGutters={false} className={classes.divContainer}>
+        <Box className={classes.btnBox}>
+          <IconButton className={classes.btnPostInfo} href={post.url} tooltip="브라우저에서 보기" size='small'>
+            <OpenInBrowser className={classes.icoPostInfo} />
           </IconButton>
-          <IconButton className={classes.postInfoButton} onClick={onRequestEditPost} tooltip="수정하기" size='small'>
-            <Edit />
+          <IconButton className={classes.btnPostInfo} onClick={onRequestEditPost} tooltip="수정하기" size='small'>
+            <Edit className={classes.icoPostInfo} />
           </IconButton>
         </Box>
+        <Divider className={classes.divider} />
       </Container>
 
-      <Divider className={classes.divider} />
-
       <Container disableGutters={true} className={classes.contentContainer}>
         <div ref={viewerContent}
           className="content"

src/renderer/components/blog/sidebar/Header.js

@@ -5,7 +5,7 @@ import {
   makeStyles,
   Badge, IconButton
 } from '@material-ui/core'
-import { Menu, MoreHoriz, MoreVert } from '@material-ui/icons'
+import { Menu, MoreHoriz, ArrowDropDown } from '@material-ui/icons'
 import Providers from '../../../constants/Providers'
 
 const useStyle = makeStyles(theme => ({
@@ -45,7 +45,7 @@ export default function Header({onSelectBlog}) {
 	return (
 		<Toolbar className={classes.root}>
       <Badge
-        overlap='circle'
+        overlap='circular'
         anchorOrigin={{vertical:'bottom',horizontal:'right'}}
         badgeContent={<Avatar src={provider.logo} className={classes.smallAvatar} />}
       >
@@ -55,7 +55,7 @@ export default function Header({onSelectBlog}) {
 			<Typography className={classes.title}>
 				{currentBlog.title}
 			</Typography>
-      <IconButton onClick={onSelectBlog}><MoreHoriz /></IconButton>
+      <IconButton onClick={onSelectBlog}><ArrowDropDown /></IconButton>
 		</Toolbar>
 	)
 }