wrap file symbol for frontend

Author: jrief

client/browser/FinderFileSelect.tsx

@@ -168,7 +168,9 @@ export default function FinderFileSelect(props) {
 		<slot ref={slotRef} />
 		<div className="finder-file-select">
 			<figure>{selectedFile ? <>
-				<img src={selectedFile.thumbnail_url} onClick={openDialog} onDragEnter={openDialog} />
+				<div>
+					<img src={selectedFile.thumbnail_url} onClick={openDialog} onDragEnter={openDialog} />
+				</div>
 				<figcaption>
 					<dl>
 						<dt>{gettext("Name")}:</dt>
@@ -189,9 +191,9 @@ export default function FinderFileSelect(props) {
 					<button className="remove-file-button" type="button" onClick={removeFile}>{gettext("Remove")}</button>
 				</figcaption>
 			</> :
-				<span onClick={openDialog} onDragEnter={openDialog}>
+				<div onClick={openDialog} onDragEnter={openDialog}>
 					<p>{gettext("Select File")}</p>
-				</span>
+				</div>
 			}</figure>
 		</div>
 		<dialog ref={dialogRef}>

client/browser/FinderFolderSelect.tsx

@@ -147,7 +147,9 @@ export default function FinderFolderSelect(props) {
 		<slot ref={slotRef} />
 		<div className="finder-file-select">
 			<figure>{selectedFolder ? <>
-				<img src={folderIconUrl} onClick={openDialog} onDragEnter={openDialog} />
+				<div>
+					<img src={folderIconUrl} onClick={openDialog} onDragEnter={openDialog} />
+				</div>
 				<figcaption>
 					<dl>
 						<dt>{gettext("Name")}:</dt>
@@ -164,9 +166,9 @@ export default function FinderFolderSelect(props) {
 					<button className="remove-file-button" type="button" onClick={removeFolder}>{gettext("Remove")}</button>
 				</figcaption>
 			</> :
-				<span onClick={openDialog} onDragEnter={openDialog}>
+				<div onClick={openDialog} onDragEnter={openDialog}>
 					<p>{gettext("Select Folder")}</p>
-				</span>
+				</div>
 			}</figure>
 		</div>
 		<dialog ref={dialogRef}>

client/scss/finder-browser.scss

@@ -13,7 +13,7 @@
 		padding: 0;
 		outline: gray thin dotted;
 
-		>img, >span {
+		>div {
 			width: 180px;
 			height: 180px;
 			border-radius: 0.125rem;
@@ -25,6 +25,11 @@
 			&:hover {
 				cursor: pointer;
 			}
+
+			img[src$=".svg"] {
+				width: 80%;
+				height: 80%;
+			}
 		}
 
 		>figcaption {