🚧 dialog表示の根本完成

TODO: ダイアログの表示を完成させる
wappon28dev · Oct 29, 2024 · c12d24b · c12d24b
1 parent 4311593
commit c12d24b
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 50 deletions.
diff --git a/src/components/sva/datePicker.ts b/src/components/sva/datePicker.ts
@@ -10,10 +10,9 @@ export const svaDatePicker = sva({
       alignItems: "center",
       gap: "8px",
       padding: "8px",
-      border: "1px solid",
-      borderColor: "gray.300",
       borderRadius: "md",
-      backgroundColor: "white",
+      backgroundColor: "wkb.bg",
+      shadow: "md",
       _hover: {
         borderColor: "gray.400",
       },
@@ -24,6 +23,7 @@ export const svaDatePicker = sva({
     input: {
       fontSize: "16px",
       color: "gray.700",
+      bg: "wkb.bg",
       padding: "0 8px",
       width: "100%",
       _focus: {
@@ -80,10 +80,10 @@ export const svaDatePicker = sva({
       width: "100%",
     },
     tableCell: {
-      width: "14.285%", // 7日分で100%を均等に分ける
+      width: "14.285%",
       height: "36px",
-      textAlign: "center", // テキストを中央揃え
-      verticalAlign: "middle", // 縦方向も中央揃え
+      textAlign: "center",
+      verticalAlign: "middle",
       cursor: "pointer",
       _hover: {
         backgroundColor: "gray.100",
@@ -97,8 +97,7 @@ export const svaDatePicker = sva({
       fontWeight: "bold",
       color: "gray.500",
       display: "flex",
-      justifyContent: "space-between",
-      width: "100%",
+      width: "1%",
     },
     prevTrigger: {
       display: "flex",

diff --git a/src/components/sva/formDialog.ts b/src/components/sva/formDialog.ts
@@ -0,0 +1,57 @@
+import { dialogAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+/**
+ * Ark UI の [Popover コンポーネント](https://ark-ui.com/react/docs/components/popover) の基底スタイル
+ *
+ * 書き方 refs:
+ * - https://panda-css.com/docs/concepts/slot-recipes
+ * - https://ark-ui.com/react/docs/guides/styling#styling-with-panda-css
+ * - https://speakerdeck.com/ikumatadokoro/panda-css-to-ark-ui-dehazimeruge-ren-kai-fa?slide=31
+ */
+export const svaFormDialog = sva({
+  className: "formDialog",
+  slots: dialogAnatomy.keys(),
+  base: {
+    content: {
+      backgroundColor: "wkb-neutral.0",
+      borderRadius: "md",
+      boxShadow: "md",
+      padding: "md",
+      position: "fixed",
+      zIndex: "modalContent",
+      top: "50%",
+      left: "50%",
+      width: "90%",
+      height: "90%",
+      transform: "translate(-50%, -50%)",
+      rounded: "md",
+      // fade in animation
+      animation: "fadeIn 0.3s",
+      p: 4,
+    },
+    title: {
+      fontSize: "lg",
+      fontWeight: "bold",
+      marginBottom: "md",
+      mb: 4,
+    },
+    description: {
+      marginBottom: "md",
+      fontSize: "md",
+    },
+    trigger: {
+      cursor: "pointer",
+    },
+    backdrop: {
+      animation: "fadeIn 0.3s",
+      backgroundColor: "wkb-neutral.0/20",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: "modal",
+    },
+  },
+});
diff --git a/src/components/sva/numberInput.ts b/src/components/sva/numberInput.ts
@@ -11,6 +11,7 @@ export const svaNumberInput = sva({
       borderRadius: "md",
       backgroundColor: "wkb.bg",
       textAlign: "right",
+      width: "100%",
       _hover: {
         borderColor: "gray.400",
       },
@@ -19,7 +20,7 @@ export const svaNumberInput = sva({
       },
     },
     input: {
-      fontSize: "4xl",
+      fontSize: "6xl",
       color: "gray.700",
       textAlign: "right",
       width: "100%",

diff --git a/src/components/sva/textArea.ts b/src/components/sva/textArea.ts
@@ -19,32 +19,36 @@ export const svaTextArea = sva({
       gridTemplateColumns: "1fr",
       width: "100%",
       margin: "auto",
-      padding: "1rem",
-      backgroundColor: "gray.200",
       borderRadius: "md",
     },
     textarea: {
-      p: "2",
-      bg: "wkb.bg-overlay",
+      bg: "wkb.bg",
       rounded: "md",
       shadow: "md",
       duration: "200ms",
       width: "100%",
+      minHeight: "200px",
+      outline: "none",
+      p: "1rem",
+      _focus: {
+        outline: "solid 2px wkb.primary",
+      },
     },
     select: {
-      p: "2",
-      bg: "wkb.bg-overlay",
+      bg: "wkb.bg",
       border: "1px solid",
-      borderColor: "wkb-neutral.0",
+      borderColor: "wkb.bg",
       rounded: "md",
       shadow: "md",
       duration: "200ms",
     },
     input: {
-      p: "2",
+      minHeight: "48px",
       bg: "wkb.bg",
       rounded: "md",
+      shadow: "md",
       width: "100%",
+      p: "1rem",
       _open: {
         //
       },