Style part profile editable state

web/src/components/Breadcrumb/Breadcrumb.js

@@ -1,16 +1,21 @@
 import { getActiveClasses } from "get-active-classes"
 
-const Breadcrumb = ({ userName, partTitle, className }) => {
+import InputText from 'src/components/InputText'
+
+const Breadcrumb = ({ userName, partTitle, onPartTitleChange, className }) => {
   return (
     <h3 className={getActiveClasses("text-2xl font-roboto", className)}>
       <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">.</div>
-      <span className="text-gray-500">
+      <span className={getActiveClasses({"text-gray-500": !onPartTitleChange, 'text-gray-400': onPartTitleChange})}>
         {userName}
       </span>
       <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20" >.</div>
-      <span className="text-indigo-800">
-        {partTitle}
-      </span>
+      <InputText
+        value={partTitle}
+        onChange={onPartTitleChange}
+        isEditable={onPartTitleChange}
+        className={getActiveClasses("text-indigo-800 text-2xl", {'-ml-2': !onPartTitleChange})}
+      />
     </h3>
   )
 }