Add admin buttons

Seneca-CDOT · Mar 24, 2021 · 0b2e437 · 0b2e437
1 parent 8ae1d6c
commit 0b2e437
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/src/web/src/components/AdminButtons.tsx b/src/web/src/components/AdminButtons.tsx
@@ -1,40 +1,61 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { IconButton } from '@material-ui/core';
 import FlagIcon from '@material-ui/icons/Flag';
 import DeleteIcon from '@material-ui/icons/Delete';
 import useAuth from '../hooks/use-auth';
 
-const useStyles = makeStyles(() => ({
-  iconDiv: {
+const useStyles = makeStyles((theme: Theme) => ({
+  adminButtons: {
     float: 'right',
+    [theme.breakpoints.down(1200)]: {
+      float: 'none',
+    },
+    [theme.breakpoints.down(1024)]: {
+      float: 'none',
+    },
   },
   iconSpan: {
     paddingLeft: '10px',
     paddingRight: '10px',
+    [theme.breakpoints.down(1200)]: {
+      paddingLeft: '15px',
+      paddingRight: '0px',
+    },
+    [theme.breakpoints.down(1024)]: {
+      paddingLeft: '8px',
+    },
+  },
+  icon: {
+    color: theme.palette.type === 'light' ? '#121d59' : '#e5e5e5',
+    [theme.breakpoints.down(1200)]: {
+      transform: 'scale(0.7)',
+    },
+    '&:hover': {
+      color: theme.palette.type === 'light' ? '#4f96d8' : '#a0d1fb',
+    },
   },
 }));
 
 function AdminButtons() {
   const classes = useStyles();
   const { user } = useAuth();
-
   if (!user?.isAdmin) {
     return null;
   }
 
   return (
-    <div className={classes.iconDiv}>
+    <span className={classes.adminButtons}>
       <span className={classes.iconSpan}>
         <IconButton size="small">
-          <FlagIcon fontSize="large" />
+          <FlagIcon className={classes.icon} fontSize="large" />
         </IconButton>
       </span>
       <span className={classes.iconSpan}>
         <IconButton size="small">
-          <DeleteIcon fontSize="large" />
+          <DeleteIcon className={classes.icon} fontSize="large" />
         </IconButton>
       </span>
-    </div>
+    </span>
   );
 }
 

diff --git a/src/web/src/components/Posts/Post.tsx b/src/web/src/components/Posts/Post.tsx
@@ -140,7 +140,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
       [theme.breakpoints.down(1024)]: {
         fontSize: '1.1em',
-        width: '30vw',
+        width: '40vw',
         height: '5px',
         margin: '-1.6em 0 -1em .5px',
       },
@@ -235,7 +235,6 @@ const PostComponent = ({ postUrl }: Props) => {
   return (
     <Box className={classes.root}>
       <ListSubheader className={classes.postInfo}>
-        <AdminButtons />
         <div className={classes.titleContainer}>
           <Typography variant="h1" title={post.title} id={post.id} className={classes.title}>
             <span
@@ -266,6 +265,7 @@ const PostComponent = ({ postUrl }: Props) => {
                 <a href={post.url} rel="bookmark" className={classes.link}>
                   {`${formatPublishedDate(post.updated)}`}
                 </a>
+                <AdminButtons />
               </h1>
             </div>
           </>

diff --git a/src/web/src/components/Posts/PostInfo.tsx b/src/web/src/components/Posts/PostInfo.tsx
@@ -1,5 +1,6 @@
 import { createStyles, ListSubheader, makeStyles, Theme } from '@material-ui/core';
 import PostAvatar from './PostAvatar';
+import AdminButtons from '../AdminButtons';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -85,6 +86,7 @@ const PostDesktopInfo = ({ authorName, postDate, blogUrl, postUrl }: Props) => {
           </time>
         </a>
       </div>
+      <AdminButtons />
     </ListSubheader>
   );
 };