style: style profile hover modal

sparcs-kaist · Nov 28, 2024 · e9bf14a · e9bf14a
1 parent 5d5769e
commit e9bf14a
Showing 1 changed file with 31 additions and 28 deletions.
diff --git a/packages/web/src/components/molecules/Profile.tsx b/packages/web/src/components/molecules/Profile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Divider } from "@biseo/web/components/atoms";
+import { Divider } from "@biseo/web/components/atoms";
 import {
   text,
   align,
@@ -12,50 +12,53 @@ import {
   gap,
   padding,
   justify,
+  row,
+  colors,
 } from "@biseo/web/styles";
+import { LogOut } from "lucide-react";
+import { css } from "@emotion/react";
 
 type Props = {
   displayName: string;
   onLogout: () => void;
 };
 
+const buttonStyle = css`
+  ${w("fill")}
+  ${h(32)}
+  ${row}
+  ${align.center}
+  ${justify.start}
+  ${padding.horizontal(16)}
+  ${gap(8)}
+
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    ${bg.gray100}
+  }
+`;
+
 export const Profile: React.FC<Props> = ({ displayName, onLogout }) => (
   <div
     css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]}
   >
     <div css={[h(5)]} />
     <div
-      css={[
-        border.gray200,
-        round.md,
-        w(100),
-        column,
-        align.center,
-        gap(4),
-        padding.vertical(5),
-        bg.white,
-        "box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06)",
-      ]}
+      css={[border.gray300, round.md, w(130), column, align.center, bg.white]}
     >
-      <div
-        css={[
-          round.md,
-          w(100),
-          h(18),
-          padding.horizontal(8),
-          padding.vertical(2),
-          justify.between,
-          align.center,
-        ]}
-      >
-        <div css={[text.option2, text.gray600, "text-align: center"]}>
+      <div css={[round.md, w(130), h(32), row, justify.center, align.center]}>
+        <div css={[text.body, text.gray600, "text-align: center"]}>
           {displayName}
         </div>
       </div>
-      <Divider />
-      <Button w={90} h={20} padHorizontal={8} onClick={onLogout}>
-        <div css={[text.option2, text.blue600]}>로그아웃</div>
-      </Button>
+      <Divider color="gray200" />
+      <button type="button" onClick={onLogout} css={buttonStyle}>
+        <LogOut size={14} color={colors.gray500} />
+        <div css={[text.body, text.gray500]}>로그아웃</div>
+      </button>
     </div>
   </div>
 );