fix: #82

.sentryclirc

@@ -1,3 +1,6 @@
 [defaults]
 project=snowb
 org=silencleo
+
+[auth]
+token=0e837d2453654b1b9a33ff52bd88554e123de71fb94747898770d027da48bd42

src/app/layout/WorkSpace/modules/ImageGlyphList/ImageGlyph.module.scss

@@ -3,6 +3,8 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  width: 80px;
+  height: 80px;
 }
 .image {
   max-width: 100%;
@@ -15,11 +17,18 @@
   position: absolute;
   left: 0;
   top: 0;
+  flex-direction: column;
 }
 .inputLabel {
   width: 100%;
   height: 100%;
   align-items: flex-end;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.3) 50%,
+    rgba(0, 0, 0, 0.8)
+  );
 
   & input {
     text-align: center;

src/app/layout/WorkSpace/modules/ImageGlyphList/ImageGlyph.tsx

@@ -46,7 +46,7 @@ const ImageGlyph: FunctionComponent<ImageGlyphProps> = (
   return (
     <Paper variant='outlined' className={styles.root}>
       <img className={styles.image} src={glyph.src} alt={glyph.fileName} />
-      <Grid container sx={{ direction: 'column' }} className={styles.actions}>
+      <Grid container className={styles.actions}>
         <Grid
           item
           container
@@ -59,7 +59,7 @@ const ImageGlyph: FunctionComponent<ImageGlyphProps> = (
             onChange={(e) => changeSelect(e.target.checked)}
           />
           <IconButton
-            color='primary'
+            color='info'
             size='small'
             onClick={() => removeImage(glyph)}
           >

src/app/layout/WorkSpace/modules/ImageGlyphList/ImageGlyphList.module.scss

@@ -2,4 +2,5 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
+  gap: 8px;
 }