Move recenter button

[cosmicpotato137]

closes: #508

I'm done with the styling, but for some reason anything in the overlay layer can't be interacted with. All events go straight to the universe.

[Rassl]

Please update icon, or it will be affected with upcoming changes

[Rassl]

Please use svgLibBuilder.js, all icons are generated by script, otherwise your changes will be affected with new Icon update. To use this script, just add desired svg Icon to public/svg-icons with proper name, and run node ./svgLibBuilder.js

Styling of Icon should be though parenst color and font-size

[Rassl]

Can you please, use Button from material-ui ?, size="large" is what you need, it has all hover/active effects applied, just change width, border-radius

[cosmicpotato137]

I was able to get the svg generation to work. However, when using material-ui button I am unable to get it to render properly or to be intractable. This is what I'm trying right now:

import { Button } from '@mui/material'

export const Overlay = () => {
    ...
    <CameraCenterButton
      disabled={false}
      href=""
      onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
      size="large"
      startIcon={<CameraCenterIcon/>}
    />
...
)}

const CameraCenterButton = styled(Button)`
  position: absolute;
  right: 20px;
  top: 102px;
  z-index: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  padding: 8px 8px 9px 8px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  background: var(--BG-1, #23252f);
`;

[Rassl]

import { Button } from '@mui/material'

it is not interactive, because its parent wrapper has pointer-events: none css property, to make it work, just add pointer-events: all to the button styles

[Rassl]

const CameraCenterButton = styled(Button)`
&& {
position: absolute;
right: 20px;
bottom: 102px;
padding: 0;
width: 32px;
min-width: auto;
justify-content: center;
align-items: center;
pointer-events: all;

.MuiButton-startIcon {
  margin-left: 0;
}

}
`

[cosmicpotato137]

Thanks for the help! all the changes should be ready, but let me know if I should change anything else. I wasn't seeing any hover effects applied so I added them manually and tried to match the style of the layout change buttons below. If there's a better way to go about this let me know!

[Rassl]

hove effects are applied at theme level, so you can remove those here, also background it not required, it is also set on theme options. Just copy past code that I provided, should work fine

[cosmicpotato137]

Just removed hover effects!

[Rassl]

LGTM

[tomsmith8]

@kevkevinpal Ok to merge?