Set focus properties to button elements

1 files changed, 41 insertions, 11 deletions

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