Set focus properties to button elements

4 files changed, 58 insertions, 23 deletions

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