remove styles from buttons

README.md

@@ -30,6 +30,28 @@ Usage
 Pretty short example is given at http://maxim.livejournal.com/421845.html (Russain) along
 with discussion how to design pages with N2O. Example of Login also could be found in [http://github.com/5HT/skyline](http://github.com/5HT/skyline) project.
 
+Styles
+------
+
+Library provide only basic HTML markup for the buttons where its not strictly regulated by provider design guidelines.
+However its easy to provide custom CSS class and/or support any CSS framework on your login page with N2O `#jq{}` action.
+
+Example of styling FB login button with Bootstrap:
+
+```erlang
+event(init) -> 
+  wf:wire(#jq{target=loginfb, method=["classList.add"], args=["'btn', 'btn-primary', 'btn-lg'"]}),
+  ...
+```
+
+Example of styling Github button with Pure.css
+
+```erlang
+event(init) ->
+  wf:wire(#jq{target=github_btn, method=["classList.add"], args=["'pure-button'"]})
+  ...
+```
+
 Credits
 -------
 

src/facebook.erl

@@ -35,11 +35,8 @@ registration_data(Props, facebook, Ori)->
 index(K) -> wf:to_binary(K).
 email_prop(Props, _) -> proplists:get_value(<<"email">>, Props).
 
-login_button() -> application:get_env(avz,facebook_button,
-    #panel{class=["btn-group"], body=#link{id=loginfb,
-                  class=["btn-primary btn-large btn-lg"],
-                  body=[#i{class=[fa,"fa-facebook","fa-lg","icon-facebook","icon-large"]},
-                        <<"Facebook">>], postback={facebook,loginClick} }}).
+login_button() -> 
+  #link{id=loginfb, body=[<<"Facebook">>], postback={facebook,loginClick}}.
 
 sdk() ->
     wf:wire(#api{name=fbLogin, tag=fb}),

src/github.erl

@@ -72,9 +72,8 @@ email_prop(Props, github) ->
         false -> binary_to_list(proplists:get_value(<<"login">>, Props)) ++ "@github"
     end.
 
-login_button() -> application:get_env(avz,github_button,#panel{ class=["btn-group"], body=
-    #link{id=github_btn, class=[btn, "btn-large"], 
-        body=[#i{class=["icon-github", "icon-large"]}, <<"Github">>], postback={github,logingithub} }}).
+login_button() -> 
+  #link{id=github_btn, body=[<<"Github">>], postback={github,logingithub} }.
 
 api_event(_,_,_) -> ok.
 event({github,logingithub}) -> wf:redirect(github:authorize_url()).

src/microsoft.erl

@@ -51,10 +51,8 @@ registration_data(Props, microsoft, Ori)->
 index(K) -> maps:get(K, ?ATTS, wf:to_binary(K)).
 email_prop(Props, _) -> proplists:get_value(maps:get(email,?ATTS), Props).
 
-login_button()-> #link{
-  id=microsoftbtn, class=[btn, "btn-microsoft", "btn-large"], 
-  body=[#i{class=["icon-microsoft", "icon-large"]}, <<"Microsoft">>],
-  postback={microsoft, login}}.
+login_button() -> 
+  #link{id=microsoftbtn, body=[<<"Microsoft">>],postback={microsoft, login}}.
 
 get_access_token(Code) ->
   Params = [

src/twitter.erl

@@ -39,10 +39,8 @@ callback() ->
                  true -> skip  end;
          _ -> skip end.
 
-login_button() -> application:get_env(avz,twitter_button,#panel{class=["btn-group"], body=
-    #link{id=twlogin, class=[btn, "btn-info", "btn-large", "btn-lg"],
-        body=[#i{class=[fa,"fa-twitter","fa-lg","icon-twitter", "icon-large"]}, <<"Twitter">>],
-        postback={twitter,logintwitter}}}).
+login_button() -> 
+  #link{id=twlogin,body=[<<"Twitter">>],postback={twitter,logintwitter}}.
 
 sdk() -> [].
 api_event(_,_,_) -> ok.