@@ -44,11 +44,18 @@ const useStyles = makeStyles(
4444 divider : {
4545 width : 'calc(100% - 8px)' ,
4646 } ,
47+ actionButtonWrapper : {
48+ border : '1px solid rgba(0, 0, 0, 0.12)' ,
49+ borderRadius : 8 ,
50+ background : 'white' ,
51+ marginBottom : 8 ,
52+ overflow : 'hidden'
53+ } ,
4754 actionButton : {
4855 fontSize : '1.5rem' ,
4956 color : 'rgba(0, 0, 0, 0.72)' ,
5057 padding : 8 ,
51- marginBottom : 8 ,
58+ borderRadius : 0 ,
5259 '&:hover' : {
5360 color : 'rgba(0, 0, 0, 0.95)' ,
5461 } ,
@@ -95,23 +102,26 @@ export const MermaidDiagramControls = (props: MermaidDiagramControlsProps) => {
95102
96103 return (
97104 < div className = { classes . container } >
98- < IconButton
99- title = "Copy contents"
100- aria-label = "Copy contents"
101- className = { classes . actionButton }
102- onClick = { handleCopyClick }
103- >
104- < FileCopyOutlined />
105- </ IconButton >
106- < IconButton
107- title = "Download as SVG"
108- aria-label = "Download diagram as SVG"
109- className = { classes . actionButton }
110- onClick = { handleSaveClick }
111- >
112- < SaveAltRounded />
113- </ IconButton >
114- 105+ < div className = { classes . actionButtonWrapper } >
106+ < IconButton
107+ title = "Copy contents"
108+ aria-label = "Copy contents"
109+ className = { classes . actionButton }
110+ onClick = { handleCopyClick }
111+ >
112+ < FileCopyOutlined />
113+ </ IconButton >
114+ </ div >
115+ < div className = { classes . actionButtonWrapper } >
116+ < IconButton
117+ title = "Download as SVG"
118+ aria-label = "Download diagram as SVG"
119+ className = { classes . actionButton }
120+ onClick = { handleSaveClick }
121+ >
122+ < SaveAltRounded />
123+ </ IconButton >
124+ </ div >
115125 < div className = { classes . controlButtons } >
116126 < IconButton
117127 onClick = { handleZoomIn }
0 commit comments