From 9035ce1e3c57792c4b1c46ac30f0a338017e43da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20P=C3=A9rez=20V=C3=A1zquez?= <yagoperez@outlook.com>
Date: Mon, 24 Jan 2022 17:34:34 +0100
Subject: [PATCH 1/2] Change field from readonly to disabled

---
 .../Apps/components/AddAppForm/index.tsx      | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
index 6558a4751b..2a4f72c1da 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
@@ -1,9 +1,8 @@
-import { Icon, Link, Loader, Text, TextField } from '@gnosis.pm/safe-react-components'
+import { theme, Icon, Link, Loader, Text, TextField } from '@gnosis.pm/safe-react-components'
 import { useState, ReactElement, useCallback, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import styled from 'styled-components'
 import { SafeApp } from 'src/routes/safe/components/Apps/types'
-
 import GnoForm from 'src/components/forms/GnoForm'
 import Img from 'src/components/layout/Img'
 import { Modal } from 'src/components/Modal'
@@ -19,6 +18,22 @@ const FORM_ID = 'add-apps-form'
 const StyledTextFileAppName = styled(TextField)`
   && {
     width: 385px;
+    .MuiFormLabel-root {
+      &.Mui-disabled {
+        color: rgba(0, 0, 0, 0.54);
+        &.Mui-error {
+          color: ${theme.colors.error};
+        }
+      }
+    }
+    .MuiInputBase-root {
+      .MuiFilledInput-input {
+        color: rgba(0, 0, 0, 0.54);
+      }
+      &:before {
+        border-bottom-style: inset;
+      }
+    }
   }
 `
 
@@ -141,7 +156,7 @@ const AddApp = ({ appList, closeModal, onAddApp }: AddAppProps): ReactElement =>
               )}
               <StyledTextFileAppName
                 label="App name"
-                readOnly
+                disabled
                 meta={{ error: fetchError }}
                 value={isLoading ? 'Loading...' : appInfo.name === DEFAULT_APP_INFO.name ? '' : appInfo.name}
                 onChange={() => {}}

From 64d59c3841a483c03839b5aabc16c1fc85e82c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20P=C3=A9rez=20V=C3=A1zquez?= <yagoperez@outlook.com>
Date: Tue, 25 Jan 2022 11:48:47 +0100
Subject: [PATCH 2/2] Use theme from Provider

---
 .../safe/components/Apps/components/AddAppForm/index.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
index 2a4f72c1da..14642ef860 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
@@ -1,4 +1,4 @@
-import { theme, Icon, Link, Loader, Text, TextField } from '@gnosis.pm/safe-react-components'
+import { Icon, Link, Loader, Text, TextField } from '@gnosis.pm/safe-react-components'
 import { useState, ReactElement, useCallback, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import styled from 'styled-components'
@@ -22,7 +22,7 @@ const StyledTextFileAppName = styled(TextField)`
       &.Mui-disabled {
         color: rgba(0, 0, 0, 0.54);
         &.Mui-error {
-          color: ${theme.colors.error};
+          color: ${(props) => props.theme.colors.error};
         }
       }
     }