theme: button svgs use theme. IssuesControl uses Buttons#TooltipIconB…

…utton. (#146)

* projects: restore screenshots

* logo: fix missing display on mobile.

* theme: button svgs use theme.  IssuesControl uses Buttons#TooltipIconButton.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "1.0.0-r253",
+  "version": "1.0.0-r256",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "bugs": {

src/Components/Buttons.jsx

@@ -18,19 +18,19 @@ export function TooltipIconButton({
   title,
   onClick,
   icon,
-  placement='left',
+  placement='right',
   size='medium',
 }) {
   assertDefined(title, icon, onClick)
   const classes = useStyles(useTheme())
   return (
-    <div className={classes.root}>
+    <span className={classes.root}>
       <Tooltip title={title} describeChild placement={placement}>
         <IconButton onClick={onClick} size={size}>
           {icon}
         </IconButton>
       </Tooltip>
-    </div>
+    </span>
   )
 }
 
@@ -146,7 +146,6 @@ const useStyles = makeStyles((theme) => ({
       height: '30px',
       border: 'none',
       borderRadius: '50%',
-      backgroundColor: theme.palette.primary.main,
       fill: theme.palette.primary.contrastText,
     },
   },

src/Components/Dialog.jsx

@@ -3,7 +3,7 @@ import MuiDialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import CheckIcon from '@mui/icons-material/Check'
-import {makeStyles} from '@mui/styles'
+import {makeStyles, useTheme} from '@mui/styles'
 import {TooltipIconButton} from './Buttons'
 import {assertDefined} from '../utils/assert'
 
@@ -27,7 +27,7 @@ export default function Dialog({
   content,
 }) {
   assertDefined(icon, headerText, isDialogDisplayed, setIsDialogDisplayed, content)
-  const classes = {...useStyles(), ...clazzes}
+  const classes = {...useStyles(useTheme()), ...clazzes}
   const close = () => setIsDialogDisplayed(false)
   return (
     <MuiDialog
@@ -44,7 +44,7 @@ export default function Dialog({
 }
 
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
     'textAlign': 'center',
     'fontFamily': 'Helvetica',
@@ -60,9 +60,9 @@ const useStyles = makeStyles({
       width: '30px',
       height: '30px',
       border: 'solid 0.5px grey',
-      fill: 'black',
       borderRadius: '50%',
+      fill: theme.palette.primary.contrastText,
     },
   },
-})
+}))
 

src/Components/IssuesControl.jsx

@@ -3,12 +3,11 @@ import {useLocation, useNavigate} from 'react-router'
 import DialogActions from '@mui/material/DialogActions'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
-import IconButton from '@mui/material/IconButton'
 import MuiDialog from '@mui/material/Dialog'
 import Typography from '@mui/material/Typography'
 import Slide from '@mui/material/Slide'
 import {makeStyles} from '@mui/styles'
-import {ControlButton} from './Buttons'
+import {ControlButton, TooltipIconButton} from './Buttons'
 import debug from '../utils/debug'
 import {
   addHashParams,
@@ -139,23 +138,25 @@ function CommentPanel({body, title, next, navigate}) {
       <DialogActions sx={{justifyContent: 'center'}}>
         <div>
           {count > 0 &&
-           <IconButton
+           <TooltipIconButton
+             title='Back'
              onClick={() => {
                if (count > 0) {
                  setCount(count - 1)
                  navigate(-1)
                }
-             }}>
-             <NavPrevIcon/>
-           </IconButton>}
+             }}
+             icon={<NavPrevIcon/>}
+             placement='left'/>}
           {next &&
-           <IconButton
+           <TooltipIconButton
+             title='Next'
              onClick={() => {
                setCount(count + 1)
                window.location = next
-             }}>
-             <NavNextIcon/>
-           </IconButton>}
+             }}
+             icon={<NavNextIcon/>}
+             placement='right'/>}
         </div>
       </DialogActions>
     </MuiDialog>
@@ -286,7 +287,6 @@ const useStyles = makeStyles({
       width: '25px',
       height: '25px',
       border: 'solid 0.5px grey',
-      fill: 'black',
       borderRadius: '50%',
     },
     '& h1, & p': {