fix: edit app name and desc (#767)

Author: leduyhien152

.changeset/silver-dryers-bathe.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/theme": minor
+---
+
+Fix ContentEditable style

apps/mochi-web/components/app/detail/AppDetailStatistics.tsx

@@ -22,6 +22,7 @@ import { Control, Controller } from 'react-hook-form'
 import { AppDetailFormValues } from '~types/app'
 import { ChangeEvent, useState, useRef } from 'react'
 import { API, GET_PATHS } from '~constants/api'
+import clsx from 'clsx'
 import { StatisticsBox } from '../StatisticsBox'
 
 interface Props {
@@ -119,7 +120,11 @@ export const AppDetailStatistics = ({
                     <FormLabel>Display name</FormLabel>
                     <ContentEditable
                       {...field}
-                      className="text-sm font-medium"
+                      className={clsx('text-sm font-medium', {
+                        'border border-divider rounded px-3.5 py-2.5':
+                          editing === field.name,
+                      })}
+                      placeholder="Provide a name for your app..."
                       disabled={editing !== field.name}
                       onBlur={() => setEditing('')}
                       ref={(ref) => {
@@ -158,7 +163,10 @@ export const AppDetailStatistics = ({
                     <FormLabel>Description</FormLabel>
                     <ContentEditable
                       {...field}
-                      className="text-sm font-medium"
+                      className={clsx('text-sm font-medium', {
+                        'border border-divider rounded px-3.5 py-2.5':
+                          editing === field.name,
+                      })}
                       placeholder="Provide a description for your app..."
                       disabled={editing !== field.name}
                       onBlur={() => setEditing('')}

apps/mochi-web/pages/applications/[id].tsx

@@ -10,7 +10,6 @@ import { AppDetailUrl } from '~cpn/app/detail/AppDetailUrl'
 import {
   DtoUpdateApplicationInfoRequest,
   ViewApplication,
-  ViewApplicationResponse,
   ViewFullApplicationResponse,
 } from '~types/mochi-pay-schema'
 import { API, GET_PATHS } from '~constants/api'
@@ -157,8 +156,8 @@ const App: NextPageWithLayout = () => {
       body,
       GET_PATHS.UPDATE_APPLICATION_DETAIL(profileId, appId),
     )
-      .json((r: ViewApplicationResponse) => {
-        resetApp(r.data)
+      .json(() => {
+        refresh()
       })
       .catch((e) => {
         const err = JSON.parse(e.message)

packages/theme/src/components/content-editable.ts

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 
 const contentEditableClsx = ({ className = '' }: { className?: string } = {}) =>
   clsx(
-    'outline-none break-all empty:before:content-[attr(placeholder)] before:text-text-secondary before:font-normal',
+    'outline-none break-all empty:before:content-[attr(placeholder)] before:text-text-disabled before:font-normal',
     className,
   )