Merge pull request #605 from dat-land/fix/can-be-title-chenging

fix: Shadow when editing the title to cover the full screen.

app/actions/dat-middleware.js

@@ -88,10 +88,10 @@ export default class DatMiddleware {
     this.listeners.forEach(listener => listener(action))
   }
 
-  async updateTitle ({ key, editValue }) {
+  async updateTitle ({ key, title }) {
     const dat = this.dats[key]
     const filePath = joinPath(dat.path, 'dat.json')
-    const metadata = { ...dat.dat.metadata, title: editValue }
+    const metadata = { ...dat.dat.metadata, title: title }
 
     try {
       await writeFile(filePath, JSON.stringify(metadata))

app/components/title-field.js

@@ -5,12 +5,13 @@ import Icon from './icon'
 import { Plain as PlainButton, Green as GreenButton } from './button'
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
 `
 
 const EditableFieldWrapper = styled.div`
@@ -36,6 +37,10 @@ const EditableFieldWrapper = styled.div`
   }
 `
 
+const ActiveEditableFieldWrapper = styled(EditableFieldWrapper)`
+  z-index: 1;
+`
+
 const InputFieldStyle = styled.input`
   :focus {
     outline: none;
@@ -109,7 +114,7 @@ class TitleField extends Component {
       return (
         <div onClick={e => e.stopPropagation()}>
           <Overlay onClick={() => this.cancel()} />
-          <EditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
+          <ActiveEditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
             {/* why innerRef in following component? check here - styled-components/styled-components#102 */}
             <InputField
               className='bn f6 pl1 normal w-100'
@@ -122,7 +127,7 @@ class TitleField extends Component {
             ) : (
               <PlainButton onClick={() => this.cancel()}>Save</PlainButton>
             )}
-          </EditableFieldWrapper>
+          </ActiveEditableFieldWrapper>
         </div>
       )
     }