Styling up login modal

app/assets/javascripts/templates/authentication.html.haml

@@ -1,4 +1,4 @@
-#login-modal{"ng-controller" => "AuthenticationCtrl"}
+%div{"ng-controller" => "AuthenticationCtrl"}
   %tabset
     %ng-include{src: "'login.html'"}
     %ng-include{src: "'signup.html'"}

app/assets/javascripts/templates/forgot.html.haml

@@ -16,7 +16,7 @@
         
       .row
         .large-12.columns
-          %label{for: "email"} Email
+          %label{for: "email"} Your email
           %input.title.input-text{name: "email", 
             type: "email",
             tabindex: 1,

app/assets/javascripts/templates/login.html.haml

@@ -24,14 +24,14 @@
           "ng-model" => "spree_user.password"}
     .row
       .large-12.columns
-        %label{for: "remember_me"} Remember Me
         %input{name: "remember_me", 
         type: "checkbox", 
         value: "1",
         "ng-model" => "spree_user.remember_me"}
+        %label{for: "remember_me"} Remember Me
     .row
       .large-12.columns
         %input.button.primary{name: "commit", 
           tabindex: "3", 
           type: "submit", 
-          value: "Login"}
+          value: "Log in"}

app/assets/javascripts/templates/signup.html.haml

@@ -1,11 +1,11 @@
 %tab#sign-up-content{"ng-controller" => "SignupCtrl", 
-  heading: "Signup", 
+  heading: "Sign up", 
   active: "active(path)",
   select: "select(path)"}
   %form{"ng-submit" => "submit()"}
     .row
       .large-12.columns
-        %label{for: "email"} Email
+        %label{for: "email"} Your email
         %input.title.input-text{name: "email", 
           type: "email",
           tabindex: 1,
@@ -14,7 +14,7 @@
           {{ errors.email.join(' ') }}
     .row
       .large-12.columns
-        %label{for: "password"} Password
+        %label{for: "password"} Choose a password
         %input.title.input-text{name: "password", 
           type: "password",
           autocomplete: "off",
@@ -24,7 +24,7 @@
           {{ errors.password.join(' ') }}
     .row
       .large-12.columns
-        %label{for: "password"} Password Confirmation
+        %label{for: "password"} Confirm password
         %input.title.input-text{name: "password_confirmation", 
           type: "password",
           autocomplete: "off",
@@ -35,4 +35,4 @@
         %input.button.primary{name: "commit", 
           tabindex: "3", 
           type: "submit", 
-          value: "Signup"}
+          value: "Sign up now"}

app/assets/stylesheets/darkswarm/login-modal.css.sass

@@ -0,0 +1,4 @@
+.login-modal
+  background: #efefef
+  .tabs-content
+    background: #fff

app/assets/stylesheets/darkswarm/ui.css.sass

@@ -39,6 +39,16 @@
   background-color: rgba(0, 0, 0, 0.1)
   text-shadow: 0 1px 0 #fff
 
+//rewrite default primary style
+
+.button.primary
+  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
+  background: $clr-brick
+  color: white
+
+.button.primary:hover, .button.primary:active, .button.primary:focus 
+  background: $clr-brick-bright
+  text-shadow: 0 1px 0 $clr-brick
 
 // Responsive 
 @media screen and (min-width: 768px)