refactor css and tsx files

code/frontend/src/components/Username.tsx

@@ -0,0 +1,46 @@
+import { Popover, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import "./username.css";
+
+export default function Username({ username }: { username: string }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = () => {
+    setAnchorEl(null);
+  };
+
+  const isPopoverOpen = Boolean(anchorEl);
+  const id = isPopoverOpen ? "simple-popover" : undefined;
+
+  useEffect(() => {
+    console.log("Username component mounted");
+  }, []);
+  return (
+    <>
+      <Popover
+        className="profile-popover"
+        onClose={closePopover}
+        id={id}
+        open={isPopoverOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Typography sx={{ p: 1 }}>{username}</Typography>
+      </Popover>
+      <span className="profile-username body-bold" onClick={openPopover}>
+        {username}
+      </span>
+    </>
+  );
+}

code/frontend/src/components/username.css

@@ -0,0 +1,10 @@
+.profile-username {
+  color: var(--Rotkehlchen-orange-default);
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.profile-popover {
+  padding: 1rem;
+}