fix: add hover style for table rows

packages/app/src/components/views/Form/style.less

@@ -2,4 +2,8 @@
   max-width: 368px;
   margin: 0 auto;
   padding-top: 100px;
+}
+
+.ant-form-item-with-help {
+  margin-bottom: 24px;
 }

packages/app/src/components/views/SimpleTable.tsx

@@ -144,6 +144,7 @@ export function SimpleTable(props: SimpleTableProps) {
           data, 
           mutate,
           rowKey,
+          isFieldComponent,
           onMoved: async ({resourceKey, target}) => {
             await api.resource(name).sort({
               associatedKey,

packages/app/src/components/views/SortableTable/index.tsx

@@ -21,9 +21,10 @@ interface Props {
   mutate: any,
   rowKey: any, 
   onMoved: any,
+  isFieldComponent?: boolean;
 }
 
-export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
+export const components = ({data = {}, rowKey, mutate, onMoved, isFieldComponent}: Props) => {
   return {
     body: {
       wrapper: props => (
@@ -51,7 +52,7 @@ export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
       row: ({ className, style, ...restProps }) => {
         // function findIndex base on Table rowKey props and should always be a right array index
         const index = findIndex(data.list, (x: any) => x[rowKey] === restProps['data-row-key']);
-        return <SortableItem index={index} {...restProps} />;
+        return <SortableItem index={index} className={`${className}${isFieldComponent ? '': ' row-clickable'}`} style={style} {...restProps} />;
       },
     },
   };

packages/app/src/components/views/Table.tsx

@@ -138,6 +138,7 @@ export function Table(props: TableProps) {
           data, 
           mutate,
           rowKey,
+          isFieldComponent,
           onMoved: async ({resourceKey, target}) => {
             await api.resource(name).sort({
               associatedKey,

packages/app/src/components/views/style.less

@@ -21,4 +21,14 @@
 
 .ant-form-item-label {
   font-weight: 500;
+}
+
+
+.row-clickable {
+  cursor: pointer;
+}
+
+.ant-table-tbody > tr.row-clickable:hover > td {
+  background: #e6f7ff;
+  border-color: rgba(0, 0, 0, 0.03);
 }