From e31b64fcdb5d6c2e21003de45475e45ac36d7ad7 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Thu, 8 Jun 2023 11:06:38 +0900
Subject: [PATCH 1/8] Chore(web): Add ActionItem

---
 .../components/ActionItem/index.stories.tsx   | 15 +++++++
 web/src/beta/components/ActionItem/index.tsx  | 44 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 web/src/beta/components/ActionItem/index.stories.tsx
 create mode 100644 web/src/beta/components/ActionItem/index.tsx

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
new file mode 100644
index 0000000000..c6dd773f96
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ActionItem from ".";
+
+export default {
+  component: ActionItem,
+} as Meta;
+
+type Story = StoryObj<typeof ActionItem>;
+
+export const Default: Story = {
+  args: {
+    title: "NewPage",
+  },
+};
diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
new file mode 100644
index 0000000000..b45b7bf265
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -0,0 +1,44 @@
+import styled from "@emotion/styled";
+import { FC } from "react";
+
+import Icon from "../Icon";
+
+type Props = {
+  icon: string;
+  title: string;
+  onClick?: () => void;
+};
+
+const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
+  return (
+    <Box onClick={onClick}>
+      <Icon icon={icon} style={{ width: "8px", height: "8px" }} />
+      <Text>{title}</Text>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 8px;
+
+  height: 28px;
+
+  background: #232226;
+  :hover {
+    background: #2b2a2f;
+  }
+`;
+
+const Text = styled.text`
+  font-family: "Noto Sans";
+  font-weight: 400;
+  font-size: 12px;
+
+  color: #c7c5c5;
+`;
+
+export default ActionItem;

From 9a960811f1f2e23168d0827e7b93ab9620771974 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Fri, 9 Jun 2023 14:46:50 +0900
Subject: [PATCH 2/8] Fix(web): use Text and stories use render not args

The square icon will be visible after you merge the "StorytellingPageSectionItem".
In my opinion, I didn't add a square here either because adding it to icons would cause conflicts.
---
 .../beta/components/ActionItem/index.stories.tsx    |  4 +---
 web/src/beta/components/ActionItem/index.tsx        | 13 ++++---------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
index c6dd773f96..2d90b47c20 100644
--- a/web/src/beta/components/ActionItem/index.stories.tsx
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -9,7 +9,5 @@ export default {
 type Story = StoryObj<typeof ActionItem>;
 
 export const Default: Story = {
-  args: {
-    title: "NewPage",
-  },
+  render: () => <ActionItem title={"New Page"} icon={"square"} />,
 };
diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
index b45b7bf265..a6fe98dd5f 100644
--- a/web/src/beta/components/ActionItem/index.tsx
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { FC } from "react";
 
 import Icon from "../Icon";
+import Text from "../Text";
 
 type Props = {
   icon: string;
@@ -13,7 +14,9 @@ const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
   return (
     <Box onClick={onClick}>
       <Icon icon={icon} style={{ width: "8px", height: "8px" }} />
-      <Text>{title}</Text>
+      <Text size={"s"} color={"#c7c5c5"}>
+        {title}
+      </Text>
     </Box>
   );
 };
@@ -33,12 +36,4 @@ const Box = styled.div`
   }
 `;
 
-const Text = styled.text`
-  font-family: "Noto Sans";
-  font-weight: 400;
-  font-size: 12px;
-
-  color: #c7c5c5;
-`;
-
 export default ActionItem;

From db905267f3e35bf43c07e76e1f04ff74f3b617e0 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:04:19 +0900
Subject: [PATCH 3/8] Fix(web): Modification by feedback on ActionItem

---
 web/src/beta/components/ActionItem/index.stories.tsx | 3 ++-
 web/src/beta/components/ActionItem/index.tsx         | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
index 2d90b47c20..6492358100 100644
--- a/web/src/beta/components/ActionItem/index.stories.tsx
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 
 import ActionItem from ".";
@@ -9,5 +10,5 @@ export default {
 type Story = StoryObj<typeof ActionItem>;
 
 export const Default: Story = {
-  render: () => <ActionItem title={"New Page"} icon={"square"} />,
+  render: () => <ActionItem title={"New Page"} icon={"square"} onClick={action("onClick")} />,
 };
diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
index a6fe98dd5f..f2155f9a60 100644
--- a/web/src/beta/components/ActionItem/index.tsx
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -1,6 +1,7 @@
-import styled from "@emotion/styled";
 import { FC } from "react";
 
+import { styled } from "@reearth/services/theme";
+
 import Icon from "../Icon";
 import Text from "../Text";
 
@@ -13,7 +14,7 @@ type Props = {
 const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
   return (
     <Box onClick={onClick}>
-      <Icon icon={icon} style={{ width: "8px", height: "8px" }} />
+      <Icon icon={icon} size={8} />
       <Text size={"s"} color={"#c7c5c5"}>
         {title}
       </Text>
@@ -30,9 +31,9 @@ const Box = styled.div`
 
   height: 28px;
 
-  background: #232226;
+  background: ${props => props.theme.main.paleBg};
   :hover {
-    background: #2b2a2f;
+    background: ${props => props.theme.main.bg};
   }
 `;
 

From c35ec785f2c787fdc140b2f17cb6659178859ec6 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Wed, 14 Jun 2023 14:39:55 +0900
Subject: [PATCH 4/8] Fix(web): render to args

---
 web/src/beta/components/ActionItem/index.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
index 6492358100..9f23e4443f 100644
--- a/web/src/beta/components/ActionItem/index.stories.tsx
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -10,5 +10,9 @@ export default {
 type Story = StoryObj<typeof ActionItem>;
 
 export const Default: Story = {
-  render: () => <ActionItem title={"New Page"} icon={"square"} onClick={action("onClick")} />,
+  args: {
+    title: "New Page",
+    icon: "square",
+    onClick: action("onClick"),
+  },
 };

From cff6f2b2203f9286a25e363dce6b56f10678ea9d Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <JAESUNG_PARK@tsyscom.co.jp>
Date: Fri, 16 Jun 2023 09:17:34 +0900
Subject: [PATCH 5/8] Fix(web) : story delete action function

---
 web/src/beta/components/ActionItem/index.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
index 9f23e4443f..a1a837d4d9 100644
--- a/web/src/beta/components/ActionItem/index.stories.tsx
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -1,4 +1,3 @@
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 
 import ActionItem from ".";
@@ -13,6 +12,5 @@ export const Default: Story = {
   args: {
     title: "New Page",
     icon: "square",
-    onClick: action("onClick"),
   },
 };

From 030b52fcafdb23ab95ffefa43cf20c83455642e8 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Mon, 19 Jun 2023 17:00:48 +0900
Subject: [PATCH 6/8] Fix(web): modified by feedback

---
 web/src/beta/components/ActionItem/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
index f2155f9a60..680d23083e 100644
--- a/web/src/beta/components/ActionItem/index.tsx
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -15,7 +15,7 @@ const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
   return (
     <Box onClick={onClick}>
       <Icon icon={icon} size={8} />
-      <Text size={"s"} color={"#c7c5c5"}>
+      <Text size={"s"} color={"#c7c5c5"} otherProperties={{ wordBreak: "break-all" }}>
         {title}
       </Text>
     </Box>
@@ -29,7 +29,7 @@ const Box = styled.div`
   padding: 4px 12px;
   gap: 8px;
 
-  height: 28px;
+  min-height: 28px;
 
   background: ${props => props.theme.main.paleBg};
   :hover {

From c166131470ed65b3ab8f3ea273b6d4a422a28133 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Tue, 20 Jun 2023 18:06:03 +0900
Subject: [PATCH 7/8] Fix(web): changed color theme

---
 web/src/beta/components/ActionItem/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
index 680d23083e..872ae27a23 100644
--- a/web/src/beta/components/ActionItem/index.tsx
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { styled } from "@reearth/services/theme";
+import { styled, useTheme } from "@reearth/services/theme";
 
 import Icon from "../Icon";
 import Text from "../Text";
@@ -12,10 +12,15 @@ type Props = {
 };
 
 const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
+  const theme = useTheme();
+
   return (
     <Box onClick={onClick}>
       <Icon icon={icon} size={8} />
-      <Text size={"s"} color={"#c7c5c5"} otherProperties={{ wordBreak: "break-all" }}>
+      <Text
+        size={"footnote"}
+        color={theme.general.content.main}
+        otherProperties={{ wordBreak: "break-all" }}>
         {title}
       </Text>
     </Box>
@@ -31,9 +36,9 @@ const Box = styled.div`
 
   min-height: 28px;
 
-  background: ${props => props.theme.main.paleBg};
+  background: ${props => props.theme.general.bg.main};
   :hover {
-    background: ${props => props.theme.main.bg};
+    background: ${props => props.theme.general.bg.weak};
   }
 `;
 

From d13dbc655582d39b802a110d133ddd7883986709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <>
Date: Mon, 26 Jun 2023 09:43:37 +0900
Subject: [PATCH 8/8] Fix(web): add style property

---
 web/src/beta/components/ActionItem/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
index 872ae27a23..7bd2daceda 100644
--- a/web/src/beta/components/ActionItem/index.tsx
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -40,6 +40,8 @@ const Box = styled.div`
   :hover {
     background: ${props => props.theme.general.bg.weak};
   }
+  user-select: none;
+  cursor: pointer;
 `;
 
 export default ActionItem;