restyle collection rename

static/app-strings.json

@@ -2293,5 +2293,13 @@
   "%free% of %total% available": "%free% of %total% available",
   "Short (< 4 min)": "Short (< 4 min)",
   "Medium (4 - 20 min)": "Medium (4 - 20 min)",
+  "Rename List": "Rename List",
+  "New Name": "New Name",
+  "Rename": "Rename",
+  "New Collection Name": "New Collection Name",
+  "In %collection%": "In %collection%",
+  "Add to %collection%": "Add to %collection%",
+  "Show this channel your appreciation by sending a donation of Credits. ": "Show this channel your appreciation by sending a donation of Credits. ",
+  "%action% %collection%": "%action% %collection%",
   "--end--": "--end--"
 }

ui/component/collectionActions/view.jsx

@@ -29,7 +29,6 @@ type Props = {
   doToggleShuffleList: (string, boolean) => void,
   playNextUri: string,
   firstItem: string,
-  onRenameCollection: () => void,
 };
 
 function CollectionActions(props: Props) {
@@ -49,7 +48,6 @@ function CollectionActions(props: Props) {
     firstItem,
     showEdit,
     setShowEdit,
-    onRenameCollection,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
   const { push } = useHistory();
@@ -122,17 +120,6 @@ function CollectionActions(props: Props) {
       {!isBuiltin &&
         (isMyCollection ? (
           <>
-            {!uri && (
-              <Button
-                title={__('Rename')}
-                label={__('Rename')}
-                className={classnames('button--file-action')}
-                onClick={onRenameCollection}
-                icon={ICONS.EDIT}
-                iconSize={18}
-                disabled={claimIsPending}
-              />
-            )}
             <Button
               title={uri ? __('Update') : __('Publish')}
               label={uri ? __('Update') : __('Publish')}

ui/page/collection/view.jsx

@@ -159,26 +159,24 @@ export default function CollectionPage(props: Props) {
           <FormField
             autoFocus
             type="text"
+            className={'editable-text__field'}
             name="rename_collection"
             value={newName}
-            label={__('New Collection Name')}
             inputButton={
               <>
                 <Button
-                  button={'alt'}
                   icon={ICONS.COMPLETE}
-                  className={'button-toggle'}
                   disabled={!(newName || '').trim() || collectionName === newName}
                   onClick={handleRenameCollection}
+                  className={'editable-text__input-button'}
                 />
                 <Button
-                  button={'alt'}
-                  className={'button-toggle'}
                   icon={ICONS.REMOVE}
                   onClick={() => {
                     setIsRenamingList(false);
                     setNewName(collectionName);
                   }}
+                  className={'editable-text__input-button'}
                 />
               </>
             }
@@ -195,6 +193,12 @@ export default function CollectionPage(props: Props) {
               className="icon--margin-right"
             />
             {collectionName}
+            {!uri && (
+              <>
+                {' '}
+                <Button icon={ICONS.EDIT} onClick={() => setIsRenamingList(true)} />
+              </>
+            )}
           </span>
         )
       }
@@ -210,7 +214,6 @@ export default function CollectionPage(props: Props) {
           collectionUrls={collectionUrls}
           setShowEdit={setShowEdit}
           showEdit={showEdit}
-          onRenameCollection={() => setIsRenamingList(true)}
         />
       }
       actions={

ui/scss/component/_form-field.scss

@@ -141,12 +141,12 @@ input-submit {
     border-bottom-right-radius: 0;
     border-right: none;
   }
-
-  & > *:nth-child(2) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border: 1px solid var(--color-input-border);
-  }
+  //
+  //& > *:nth-child(2) {
+  //  border-top-left-radius: 0;
+  //  border-bottom-left-radius: 0;
+  //  border: 1px solid var(--color-input-border);
+  //}
 }
 
 .checkbox,
@@ -737,3 +737,29 @@ fieldset-section {
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
   box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
 }
+
+.editable-text__field {
+  height: 1.6rem;
+  border-radius: unset;
+  border: unset;
+  border-bottom: 2px solid;
+  color: var(--color-text);
+  border-color: var(--color-text);
+  padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+}
+
+.editable-text__input-button {
+  height: 1.6rem;
+  border-radius: unset;
+  border: unset;
+  color: var(--color-text);
+  border-color: var(--color-text);
+  padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+  input-submit {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+    border: unset;
+  }
+}