Replace checkbox with toggle for whether studio is open to all

src/views/studio/l10n.json

@@ -12,6 +12,8 @@
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",
 
+    "studio.openToAll": "Anyone can add projects",
+
     "studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
     "studio.projectsEmptyCanAdd2": "Add your first project!",
     "studio.projectsEmpty1": "This studio has no projects yet.",

src/views/studio/studio-open-to-all.jsx

@@ -2,12 +2,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {selectStudioOpenToAll, selectIsFetchingInfo} from '../../redux/studio';
 import {
     mutateStudioOpenToAll, selectIsMutatingOpenToAll, selectOpenToAllMutationError
 } from '../../redux/studio-mutations';
 
+const ToggleSlider = require('../../components/forms/toggle-slider.jsx');
+
 const StudioOpenToAll = ({
     openToAllError, isFetching, isMutating, openToAll, handleUpdate
 }) => (
@@ -16,16 +19,14 @@ const StudioOpenToAll = ({
             <h4>Fetching...</h4>
         ) : (
             <div>
-                <label>
-                    <input
-                        disabled={isMutating}
-                        type="checkbox"
-                        checked={openToAll}
-                        onChange={e => handleUpdate(e.target.checked)}
-                    />
-                    <span>{openToAll ? 'Open to all' : 'Not open to all'}</span>
-                    {openToAllError && <div>Error mutating openToAll: {openToAllError}</div>}
-                </label>
+                <FormattedMessage id="studio.openToAll" />
+                <ToggleSlider
+                    disabled={isMutating}
+                    checked={openToAll}
+                    className="open-to-all-input"
+                    onChange={e => handleUpdate(e.target.checked)}
+                />
+                {openToAllError && <div>Error mutating openToAll: {openToAllError}</div>}
             </div>
         )}
     </div>

src/views/studio/studio-projects.jsx

@@ -21,8 +21,10 @@ const StudioProjects = ({
     
     return (
         <div className="studio-projects">
-            <h2><FormattedMessage id="studio.projectsHeader" /></h2>
-            {canEditOpenToAll && <StudioOpenToAll />}
+            <div className="studio-header-container">
+                <h2><FormattedMessage id="studio.projectsHeader" /></h2>
+                {canEditOpenToAll && <StudioOpenToAll />}
+            </div>
             {canAddProjects && <StudioProjectAdder />}
             {error && <Debug
                 label="Error"