placeholders

src/components/diagram_overview.jsx

@@ -8,7 +8,6 @@ import {
   Form,
   Button,
   Card,
-  TextArea,
   Popover,
   Checkbox,
   Select,
@@ -44,7 +43,6 @@ export default function DiagramOverview(props) {
         >
           {t.fields.map((f, j) => (
             <Form key={j}>
-              <div>
               <Row
                 type="flex"
                 justify="start"
@@ -58,6 +56,7 @@ export default function DiagramOverview(props) {
                     noLabel={true}
                     initValue={f.name}
                     className="m-0"
+                    placeholder="Name"
                   />
                 </Col>
                 <Col span={8}>
@@ -93,17 +92,16 @@ export default function DiagramOverview(props) {
                             label="Default"
                             initValue={f.default}
                             trigger="blur"
+                            placeholder="Set default"
                           />
                           <Form.Input
                             field="check"
                             label="Check Expression"
                             trigger="blur"
+                            placeholder="Set constraint"
                           />
                           <div className="flex justify-between items-center my-3">
-                              <label
-                                htmlFor="increment"
-                                className="font-medium"
-                              >
+                            <label htmlFor="increment" className="font-medium">
                               Autoincrement
                             </label>
                             <Checkbox
@@ -114,17 +112,20 @@ export default function DiagramOverview(props) {
                           <Form.TextArea
                             field="comment"
                             label="Comment"
+                            placeholder="Add comment"
                             initValue={f.comment}
                             autosize
                             rows={2}
                           />
                         </Form>
-                          <div className="flex justify-end mt-2">
-                            <Button icon={<IconDeleteStroked />} type="danger">
+                        <Button
+                          icon={<IconDeleteStroked />}
+                          type="danger"
+                          block
+                        >
                           Delete
                         </Button>
                       </div>
-                        </div>
                     }
                     trigger="click"
                     position="rightTop"
@@ -134,7 +135,6 @@ export default function DiagramOverview(props) {
                   </Popover>
                 </Col>
               </Row>
-              </div>
             </Form>
           ))}
           {t.indices.length > 0 && (
@@ -185,6 +185,7 @@ export default function DiagramOverview(props) {
                                 label="Name"
                                 initValue={idx.name}
                                 trigger="blur"
+                                placeholder="Index name"
                               />
                             </Form>
                             <Button
@@ -229,7 +230,16 @@ export default function DiagramOverview(props) {
           >
             <Collapse>
               <Collapse.Panel header="Comment" itemKey="1">
-                <TextArea autosize rows={1} />
+                <Form>
+                  <Form.TextArea
+                    field="comment"
+                    noLabel={true}
+                    initValue={t.comment}
+                    autosize
+                    placeholder="Add comment"
+                    rows={1}
+                  />
+                </Form>
               </Collapse.Panel>
             </Collapse>
           </Card>