new component

frontend/src/app/components/actionButton/ActionButton.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const ActionButton = ({ icon }) => {
+  return <button className={styles.iconButton}>{icon}</button>;
+};
+
+export default ActionButton;

frontend/src/app/components/actionButton/styles.module.css

@@ -0,0 +1,21 @@
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}