B: use separate svg for hovering over sidebar icon

- stopped using opacity and instead use 4 separate svg for open/closed +
hovered/unhovered states
- update tests

Signed-off-by: Esteban Foronda <eforonda@vmware.com>
Co-authored-by: Bohan Chen <bochen@pivotal.io>

web/elm/src/Assets.elm

@@ -52,8 +52,10 @@ type Asset
     | DownArrow
     | RefreshIcon
     | MessageIcon
-    | SideBarIconClosed
-    | SideBarIconOpened
+    | SideBarIconClosedGrey
+    | SideBarIconOpenedGrey
+    | SideBarIconClosedWhite
+    | SideBarIconOpenedWhite
     | PeopleIcon
     | PipelineIconGrey
     | PipelineIconLightGrey
@@ -300,11 +302,17 @@ toPath asset =
         MessageIcon ->
             basePath ++ [ "baseline-message.svg" ]
 
-        SideBarIconClosed ->
-            basePath ++ [ "baseline-sidebar-closed.svg" ]
+        SideBarIconClosedGrey ->
+            basePath ++ [ "baseline-sidebar-closed-grey.svg" ]
 
-        SideBarIconOpened ->
-            basePath ++ [ "baseline-sidebar-opened.svg" ]
+        SideBarIconOpenedGrey ->
+            basePath ++ [ "baseline-sidebar-opened-grey.svg" ]
+
+        SideBarIconClosedWhite ->
+            basePath ++ [ "baseline-sidebar-closed-white.svg" ]
+
+        SideBarIconOpenedWhite ->
+            basePath ++ [ "baseline-sidebar-opened-white.svg" ]
 
         PeopleIcon ->
             basePath ++ [ "baseline-people.svg" ]

web/elm/src/SideBar/SideBar.elm

@@ -396,14 +396,24 @@ sideBarIcon model =
             isSideBarClickable =
                 hasVisiblePipelines model
 
-            sidebarIcon =
-                if model.sideBarState.isOpen then
-                    Icon.icon
-                        { sizePx = 54, image = Assets.SideBarIconClosed }
+            isOpen =
+                model.sideBarState.isOpen
+
+            isHovered =
+                HoverState.isHovered SideBarIcon model.hovered
+
+            assetSideBarIcon =
+                if isOpen && isHovered then
+                    Assets.SideBarIconClosedWhite
+
+                else if isOpen && not isHovered then
+                    Assets.SideBarIconClosedGrey
+
+                else if not isOpen && isHovered then
+                    Assets.SideBarIconOpenedWhite
 
                 else
-                    Icon.icon
-                        { sizePx = 54, image = Assets.SideBarIconOpened }
+                    Assets.SideBarIconOpenedGrey
         in
         Html.div
             (id "sidebar-icon"
@@ -418,11 +428,9 @@ sideBarIcon model =
                         []
                    )
             )
-            [ sidebarIcon <|
-                (Styles.sideBarIcon <|
-                    isSideBarClickable
-                        && HoverState.isHovered SideBarIcon model.hovered
-                )
+            [ Icon.icon
+                { sizePx = 54, image = assetSideBarIcon }
+                []
             ]
 
 

web/elm/src/SideBar/Styles.elm

@@ -16,7 +16,6 @@ module SideBar.Styles exposing
     , sectionHeader
     , sideBar
     , sideBarHandle
-    , sideBarIcon
     , sideBarMenu
     , starPadding
     , starWidth
@@ -283,17 +282,6 @@ sideBarMenu isClickable =
     ]
 
 
-sideBarIcon : Bool -> List (Html.Attribute msg)
-sideBarIcon isHovered =
-    [ style "opacity" <|
-        if isHovered then
-            "1"
-
-        else
-            "0.5"
-    ]
-
-
 team : List (Html.Attribute msg)
 team =
     [ style "padding-top" "5px", style "line-height" "1.2" ] ++ column

web/elm/tests/AssetsTests.elm

@@ -238,16 +238,26 @@ toStringTests =
                 MessageIcon
                     |> toString
                     |> Expect.equal "/public/images/baseline-message.svg"
-        , test "SidebarIconClosed" <|
+        , test "SidebarIconClosedGrey" <|
             \_ ->
-                SideBarIconClosed
+                SideBarIconClosedGrey
                     |> toString
-                    |> Expect.equal "/public/images/baseline-sidebar-closed.svg"
-        , test "SideBarIconOpened" <|
+                    |> Expect.equal "/public/images/baseline-sidebar-closed-grey.svg"
+        , test "SideBarIconOpenedGrey" <|
             \_ ->
-                SideBarIconOpened
+                SideBarIconOpenedWhite
                     |> toString
-                    |> Expect.equal "/public/images/baseline-sidebar-opened.svg"
+                    |> Expect.equal "/public/images/baseline-sidebar-opened-white.svg"
+        , test "SidebarIconClosedWhite" <|
+            \_ ->
+                SideBarIconClosedWhite
+                    |> toString
+                    |> Expect.equal "/public/images/baseline-sidebar-closed-white.svg"
+        , test "SideBarIconOpenedWhite" <|
+            \_ ->
+                SideBarIconOpenedWhite
+                    |> toString
+                    |> Expect.equal "/public/images/baseline-sidebar-opened-white.svg"
         , test "PeopleIcon" <|
             \_ ->
                 PeopleIcon

web/elm/tests/SideBarFeature.elm

@@ -112,12 +112,12 @@ hasSideBar iAmLookingAtThePage =
                 , query = (\a -> ( a, [] )) >> iAmLookingAtTheSideBarIconContainer
                 , unhoveredSelector =
                     { description = "grey"
-                    , selector = [ containing [ style "opacity" "0.5" ] ]
+                    , selector = sideBarIcon True
                     }
                 , hoverable = Message.SideBarIcon
                 , hoveredSelector =
                     { description = "still grey"
-                    , selector = [ containing [ style "opacity" "0.5" ] ]
+                    , selector = hoveredSideBarIcon True
                     }
                 }
             , test "is not clickable" <|
@@ -142,7 +142,7 @@ hasSideBar iAmLookingAtThePage =
             [ test "icon changes to closed on click" <|
                 given iHaveAnOpenSideBar_
                     >> when iAmLookingAtTheSideBarIcon
-                    >> then_ iSeeAClosededSideBarIcon
+                    >> then_ iSeeAClosedSideBarIcon
             , test "background is the same" <|
                 given iHaveAnOpenSideBar_
                     >> when iAmLookingAtTheSideBarIconContainer
@@ -166,18 +166,17 @@ hasSideBar iAmLookingAtThePage =
                     iAmLookingAtThePage ()
                         |> iAmOnANonPhoneScreen
                         |> myBrowserFetchedPipelines
+                        |> iClickedTheSideBarIcon
                         |> Tuple.first
                 , query = (\a -> ( a, [] )) >> iAmLookingAtTheSideBarIconContainer
                 , unhoveredSelector =
                     { description = "grey"
-
-                    -- TODO: replace selector with the svg name
-                    , selector = [ containing [ style "opacity" "0.5" ] ]
+                    , selector = sideBarIcon False
                     }
                 , hoverable = Message.SideBarIcon
                 , hoveredSelector =
                     { description = "white"
-                    , selector = [ containing [ style "opacity" "1" ] ]
+                    , selector = hoveredSideBarIcon False
                     }
                 }
             ]
@@ -208,12 +207,12 @@ hasSideBar iAmLookingAtThePage =
                 , query = (\a -> ( a, [] )) >> iAmLookingAtTheSideBarIconContainer
                 , unhoveredSelector =
                     { description = "grey"
-                    , selector = [ containing [ style "opacity" "0.5" ] ]
+                    , selector = sideBarIcon True
                     }
                 , hoverable = Message.SideBarIcon
                 , hoveredSelector =
                     { description = "white"
-                    , selector = [ containing [ style "opacity" "1" ] ]
+                    , selector = hoveredSideBarIcon True
                     }
                 }
             ]
@@ -925,7 +924,7 @@ iSeeAnOpenedSideBarIcon =
         sideBarIcon True
 
 
-iSeeAClosededSideBarIcon =
+iSeeAClosedSideBarIcon =
     Query.has <|
         sideBarIcon False
 
@@ -934,13 +933,26 @@ sideBarIcon opened =
     if opened then
         DashboardTests.iconSelector
             { size = sidebarIconWidth
-            , image = Assets.SideBarIconOpened
+            , image = Assets.SideBarIconOpenedGrey
+            }
+
+    else
+        DashboardTests.iconSelector
+            { size = sidebarIconWidth
+            , image = Assets.SideBarIconClosedGrey
             }
 
+
+hoveredSideBarIcon opened =
+    if opened then
+        DashboardTests.iconSelector
+            { size = sidebarIconWidth
+            , image = Assets.SideBarIconOpenedWhite
+            }
     else
         DashboardTests.iconSelector
             { size = sidebarIconWidth
-            , image = Assets.SideBarIconClosed
+            , image = Assets.SideBarIconClosedWhite
             }
 
 
@@ -1044,7 +1056,7 @@ dataRefreshes =
 
 iSeeNoSideBarIcon =
     Query.hasNot <|
-        sideBarIcon False True
+        sideBarIcon False
 
 
 iAmLookingAtTheSideBarIconContainer =