Remove PostCard focus outline

front/src/components/PostCard.tsx

@@ -151,6 +151,18 @@ const useStyles = makeStyles({
     justifyItems: 'center',
     gap: '0 8px',
   },
+  actionButton: {
+    '&:focus': {
+      outlineStyle: 'none',
+    },
+    '&:focus-visible': {
+      outlineStyle: 'none',
+    },
+    '&::after': {
+      outline: 'none',
+      boxShadow: 'none',
+    },
+  },
   modalOverlay: {
     position: 'fixed',
     top: 0,
@@ -229,6 +241,7 @@ const PostCard = ({
           <Button
             icon={<ArrowUp24Regular />}
             appearance="transparent"
+            className={styles.actionButton}
             onClick={async () => {
               if (hasVoted) {
                 dispatchToast(
@@ -259,6 +272,7 @@ const PostCard = ({
           <Button
             icon={<ArrowDown24Regular />}
             appearance="transparent"
+            className={styles.actionButton}
             onClick={async () => {
               if (hasVoted) {
                 dispatchToast(
@@ -289,11 +303,13 @@ const PostCard = ({
           <Button
             icon={<Comment24Regular />}
             appearance="transparent"
+            className={styles.actionButton}
             onClick={() => setShowComments(!showComments)}
           />
           <Button
             icon={<Warning24Regular />}
             appearance="transparent"
+            className={styles.actionButton}
             onClick={() => setShowReportModal(true)}
           />
         </div>