Set focus properties to button elements

10 files changed, 84 insertions, 41 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index adbe50f..126a231 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,9 +5,6 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
-greenSuccess :: C.Color
-greenSuccess = C.green
-
 redError :: C.Color
 redError = C.red
 
@@ -15,7 +12,7 @@ red :: C.Color
 red = C.rgb 207 92 86
 
 green :: C.Color
-green = C.rgb 169 220 175
+green = C.rgb 159 210 165
 
 blue :: C.Color
 blue = C.rgb 108 162 164
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 6c4ab90..94df14b 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -20,8 +20,14 @@ blockPercentMargin = (100 - blockPercentWidth) / 2
 blockMarginBottom :: Size Abs
 blockMarginBottom = px 50
 
-rowHeight :: Size Abs
-rowHeight = px 60
+rowHeightPx :: Integer
+rowHeightPx = 60
 
 inputHeight :: Integer
 inputHeight = 40
+
+focusLighten :: Color -> Color
+focusLighten color = color +. 20
+
+focusDarken :: Color -> Color
+focusDarken color = color -. 20
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 9f5a4fc..c41d06f 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -24,6 +24,8 @@ global = do
     minWidth (px 550)
     fontFamily ["Cantarell"] [sansSerif]
 
+  a ? cursor pointer
+
   allKeyframes
 
   signInDesign
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 5ef3fb0..a45a7b2 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -6,8 +6,6 @@ module Design.Header
 
 import Clay
 
-import Data.Monoid ((<>))
-
 import Design.Color as C
 import Design.Constants
 
@@ -39,3 +37,4 @@ headerDesign =
       color C.white
       fontSize iconFontSize
       hover & i ? transform (scale 1.2 1.2)
+      focus & i ? transform (scale 1.2 1.2)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 40218f8..f4c19fa 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -27,19 +27,22 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Color -> Color -> Size Abs -> Css
-defaultButton backgroundCol textCol h = do
+defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
+defaultButton backgroundCol textCol h focusOp = do
   backgroundColor backgroundCol
   color textCol
   borderRadius radius radius radius radius
   verticalAlign middle
   cursor pointer
   lineHeight h
+  height h
   textAlign (alignSide sideCenter)
+  hover & backgroundColor (focusOp backgroundCol)
+  focus & backgroundColor (focusOp backgroundCol)
 
-iconButton :: Color -> Color -> Size Abs -> Css
-iconButton backgroundCol textCol h = do
-  defaultButton backgroundCol textCol h
+iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
+iconButton backgroundCol textCol h focusOp = do
+  defaultButton backgroundCol textCol h focusOp
   i <> span ? do
     height h
     lineHeight h
@@ -49,11 +52,10 @@ iconButton backgroundCol textCol h = do
   i ? do
     marginLeft (px 15)
     marginRight (px 20)
-  hover & i ? transform (scale 1.2 1.2)
 
 defaultInput :: Integer -> Css
-defaultInput inputHeight = do
-  height (px inputHeight)
+defaultInput h = do
+  height (px h)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius radius radius radius radius
   border solid (px 1) C.darkGrey
@@ -72,7 +74,7 @@ expandBlock headerBackground headerColor headerHeight = do
   marginLeft (pct blockPercentMargin)
   marginRight (pct blockPercentMargin)
   ".header" ? do
-    defaultButton headerBackground headerColor headerHeight
+    defaultButton headerBackground headerColor headerHeight focusLighten
     width (pct 100)
     fontSize (px 18)
     borderRadius radius radius radius radius
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
index 3bdfb65..ef0603c 100644
--- a/src/server/Design/LoggedIn/Add.hs
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -43,6 +43,9 @@ addDesign =
         borderRadius radius (px 0) (px 0) radius
         "width" -: "calc(100% - 40px)"
       "input:focus + label" ? backgroundColor C.grey
+      hover & do
+        input ? borderColor C.grey
+        label ? backgroundColor C.grey
 
     ".name" ? minWidth (px 150)
 
@@ -51,18 +54,24 @@ addDesign =
       marginRight (pct blockPercentMargin)
 
       (".punctual" <> ".monthly") ? do
-        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
+        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
         paddingLeft (px 15)
         paddingRight (px 15)
         ".selected" & do
           backgroundColor C.blue
           color C.white
 
+      hover & (".punctual" <> ".monthly") ?
+        ".selected" & backgroundColor (focusLighten C.blue)
+
+      focus & (".punctual" <> ".monthly") ?
+        ".selected" & backgroundColor (focusLighten C.blue)
+
       ".punctual" ? borderRadius radius radius 0 0
       ".monthly" ? borderRadius 0 0 radius radius
 
     button # ".add" ? do
-      defaultButton C.red C.white (px inputHeight)
+      defaultButton C.red C.white (px inputHeight) focusLighten
       paddingLeft (px 15)
       paddingRight (px 15)
       i ? marginLeft (px 10)
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
index 66a9b06..8ef42cd 100644
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -22,7 +22,8 @@ expandablesDesign =
       right blockPadding
       bottom (px 2)
 
-    ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+    ".monthlyPayments" ? do
+      expandBlock C.blue C.white (px inputHeight)
 
     ".account" ? do
       expandBlock C.green C.white (px inputHeight)
@@ -35,7 +36,7 @@ expandablesDesign =
         backgroundColor C.lightGrey
         padding (px 0) (px 20) (px 0) (px 20)
         position relative
-        lineHeight rowHeight
+        lineHeight (px rowHeightPx)
 
         input ? do
           defaultInput inputHeight
@@ -50,10 +51,10 @@ expandablesDesign =
           marginTop (px (-5))
 
         ".validateIncomeEdition" <> ".editIncomeEdition" ?
-          defaultButton C.red C.white (px inputHeight)
+          defaultButton C.red C.white (px inputHeight) focusLighten
 
         ".undoIncomeEdition" ?
-          defaultButton C.blue C.white (px inputHeight)
+          defaultButton C.blue C.white (px inputHeight) focusLighten
 
         ".error" ? do
           color C.redError
diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs
index c42e9f3..f7946b8 100644
--- a/src/server/Design/LoggedIn/Pages.hs
+++ b/src/server/Design/LoggedIn/Pages.hs
@@ -19,17 +19,12 @@ pagesDesign =
     clearFix
 
     ".page" ? do
+      defaultButton C.white C.darkGrey (px 50) focusDarken
       display inlineBlock
       border solid (px 2) C.darkGrey
-      color C.darkGrey
-      borderRadius radius radius radius radius
       marginRight (px 10)
-      let h = 50
       paddingLeft (px 10)
       paddingRight (px 10)
-      height (px h)
-      lineHeight (px h)
-      textAlign (alignSide (sideCenter))
       fontWeight bold
 
       ":not(.current)" & cursor pointer
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
index 2876fa1..d9fc318 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -12,6 +12,7 @@ import qualified Clay.Display as D
 import Design.Color as C
 import Design.Media
 import Design.Constants
+import Design.Helper
 
 tableDesign :: Css
 tableDesign =
@@ -33,20 +34,48 @@ tableDesign =
       lineHeight headerHeight
 
     ".row" ? do
-      fontSize (px 20)
-      cursor pointer
-      lineHeight rowHeight
-      nthChild "odd" & backgroundColor C.lightGrey
+      fontSize (px 18)
+      lineHeight (px rowHeightPx)
+
+      hover & do
+        let (borderW, triangleW, triangleH) = (4, 6, 8)
+        ".cell:first-child::before" ? do
+          display block
+          content (stringContent "")
+          position absolute
+          top (px 0)
+          left (px 0)
+
+          width (px borderW)
+          height (px rowHeightPx)
+          backgroundColor C.green
+
+        ".cell:first-child::after" ? do
+          display block
+          content (stringContent "")
+          position absolute
+          top (px (rowHeightPx `Prelude.div` 2 - triangleH))
+          left (px borderW)
+
+          width (px 0)
+          height (px 0)
+          borderTop solid (px triangleH) transparent
+          borderBottom solid (px triangleH) transparent
+          borderLeft solid (px triangleW) C.green
+
+      nthChild "odd" & do
+        backgroundColor C.lightGrey
       ".edition" & do
         backgroundColor C.paymentFocus
-        ".delete" ? visibility visible
+        ".delete" |> button ? visibility visible
 
     ".cell" ? do
       display tableCell
+      position relative
       ".category" & width (pct 40)
       ".cost" & do
         width (pct 17)
-        ".refund" & color C.greenSuccess
+        ".refund" & color C.green
       ".user" & width (pct 20)
       ".date" & do
         width (pct 20)
@@ -57,12 +86,13 @@ tableDesign =
           ".shortDate" ? display none
           ".longDate" ? display inline
       ".delete" & do
+        position relative
         width (pct 3)
-        height rowHeight
         textAlign (alignSide sideCenter)
-        backgroundColor C.red
-        visibility hidden
         button ? do
+          defaultButton C.red C.white (px rowHeightPx) focusLighten
+          position absolute
+          top (px 0)
+          right (px 0)
           width (pct 100)
-          height (pct 100)
-          color C.white
+          visibility hidden
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index a90832e..a565ee4 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -8,6 +8,7 @@ import Clay
 
 import Design.Color as C
 import Design.Helper
+import Design.Constants
 
 signInDesign :: Css
 signInDesign =
@@ -17,9 +18,10 @@ signInDesign =
     button ? do
       display block
       margin (em 5) auto (em 2) auto
-      iconButton C.blue C.white (em 2.5)
+      iconButton C.blue C.white (em 2.5) focusLighten
       fontSize (em 1.5)
       position relative
+      ".waitingServer" & ("cursor" -: "not-allowed")
 
     ".error" ? do
       textAlign (alignSide sideCenter)