   (react/create-element
     [:div {}
      [:div {:style {:position "absolute" :right 2 :top 2}}
-      [:div {:style {:backgroundColor (:button-blue style/colors) :color "#fff" :padding "0.5em" :cursor "pointer"}
-             :onClick #(on-close)}
-       (icons/font-icon {:style {:fontSize "60%"}} :x)]]
+      [comps/Button {:icon :x :onClick #(on-close)}]]
      [:div {:style {:backgroundColor "#fff" :borderBottom (str "1px solid " (:line-gray style/colors))
                     :padding "20px 48px 18px"}}
       [ModalPage {:workspace-id workspace-id :on-close on-close :on-import on-import}]

    [org.broadinstitute.firecloud-ui.utils :as utils]
    ))

(defn create-post-data
  [selected-conf-name
   selected-conf-ns
   selected-conf-snapId
   dest-name
   dest-namespace]
  {"configurationNamespace" selected-conf-ns
   "configurationName" selected-conf-name
   "configurationSnapshotId" (str selected-conf-snapId)
   "destinationNamespace" dest-namespace
   "destinationName" dest-name})

(defn- create-mock-methodconfs-import []
  (map
    (fn [i]
      {:name (str "Configuration " (inc i))
       :url (str "http://agora-ci.broadinstitute.org/configurations/joel_test/jt_test_config/1")
       :namespace (rand-nth ["Broad" "nci" "public" "ISB"])
       :snapshotId (rand-nth (range 100))
       :synopsis (str (rand-nth ["variant caller synopsis", "gene analyzer synopsis", "mutect synopsis"]) " " (inc i))
       :createDate (str "20" (inc i) "-06-10T16:54:26Z")
       :owner (rand-nth ["thibault@broadinstitute.org" "esalinas@broadinstitute.org"])})
    (range (rand-int 50))))

(defn- create-formatted-label-text [label text]
  [:div {:style {:padding "10px 0 10px 0"}}
   [:div {:style {:float "left" :width "180px"}} label ": "] [:div {} text]])

(defn- create-formatted-label-textfield [label textfield]
  [:div {}
   [:div {:style {:float "left" :width "180px" :paddingTop "10px"}} label ": "] [:div {} textfield]])

(defn- create-formatted-header [text]
  [:div {}
   [:div {:style {:fontSize 24 :align "center" :textAlign "center" :paddingBottom "0.5em"}} text]
   [:hr]])

(defn- render-import-button [props refs]
  (let [selected-config (:selected-method-config props)

   (fn [{:keys [state props]}]
     [:div {}
      (cond
        (:selected-method-config @state)
        [ConfigurationImportForm {:selected-method-config (:selected-method-config @state)
                                  :workspace-id (:workspace-id props)
                                  :on-back #(swap! state dissoc :selected-method-config)
                                  :on-import #((:on-import props) %)}]
        (:method-configs @state)
        [ConfigurationsTable {:method-configs (:method-configs @state)
                              :on-config-selected #(swap! state assoc :selected-method-config %)}]
        (:error-message @state) (style/create-server-error-message (:error-message @state))
        :else [comps/Spinner {:text "Loading configurations for import..."}])])
   :component-did-mount
   (fn [{:keys [state]}]
     (utils/call-ajax-orch "/configurations"
       {:on-success (fn [{:keys [parsed-response]}]
                      (swap! state assoc :method-configs parsed-response))
        :on-failure (fn [{:keys [status-text]}]
                      (swap! state assoc :error-message status-text))
        :mock-data (create-mock-methodconfs-import)}))})
