improve button styling

graphsense · Feb 29, 2024 · fd52b0e · fd52b0e
1 parent cf3a130
commit fd52b0e
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
diff --git a/src/Css/Button.elm b/src/Css/Button.elm
@@ -14,6 +14,11 @@ primary vc =
     button vc ++ vc.theme.button.primary vc.lightmode
 
 
+neutral : Config -> List Style
+neutral vc =
+    button vc ++ vc.theme.button.neutral vc.lightmode
+
+
 danger : Config -> List Style
 danger vc =
     button vc ++ vc.theme.button.danger vc.lightmode

diff --git a/src/Css/Search.elm b/src/Css/Search.elm
@@ -57,4 +57,4 @@ resultLineIcon vc =
 
 button : Config -> List Style
 button vc =
-    vc.theme.search.button
+    vc.theme.search.button vc.lightmode
diff --git a/src/Theme/Button.elm b/src/Theme/Button.elm
@@ -5,6 +5,7 @@ import Css exposing (Style)
 
 type alias Button =
     { button : Bool -> List Style
+    , neutral : Bool -> List Style
     , primary : Bool -> List Style
     , danger : Bool -> List Style
     , disabled : Bool -> List Style
@@ -14,6 +15,7 @@ type alias Button =
 default : Button
 default =
     { button = \_ -> []
+    , neutral = \_ -> []
     , primary = \_ -> []
     , danger = \_ -> []
     , disabled = \_ -> []

diff --git a/src/Theme/Search.elm b/src/Theme/Search.elm
@@ -13,7 +13,7 @@ type alias Search =
     , resultLine : Bool -> List Style
     , resultLineHighlighted : Bool -> List Style
     , resultLineIcon : List Style
-    , button : List Style
+    , button : Bool -> List Style
     }
 
 
@@ -28,5 +28,5 @@ default =
     , resultLine = \_ -> []
     , resultLineHighlighted = \_ -> []
     , resultLineIcon = []
-    , button = []
+    , button = \_ -> []
     }
diff --git a/src/View/Search.elm b/src/View/Search.elm
@@ -79,7 +79,7 @@ search plugins vc sc model =
         , if sc.showIcon then
             button
                 [ [ Css.Button.button vc |> Css.batch
-                  , Css.Button.primary vc |> Css.batch
+                  , Css.Button.neutral vc |> Css.batch
                   , Css.button vc |> Css.batch
                   ]
                     |> css

diff --git a/themes/Iknaio.elm b/themes/Iknaio.elm
@@ -469,7 +469,13 @@ theme =
                     , scaled 1 |> rem |> paddingRight
                     ]
                 |> s_button
-                    []
+                    (\lightmode ->
+                        [ color_backgroundColorWithLightmode lightmode colors.brandDark colors.greyLighter
+                        , property "box-shadow" "none"
+                        , scaled 1 |> rem |> paddingY
+                        , scaled 2 |> rem |> paddingX
+                        ]
+                    )
             )
         |> s_autocomplete
             (Autocomplete.default
@@ -499,26 +505,38 @@ theme =
             (Button.default
                 |> s_button
                     (\lightmode ->
-                        [ fontWeight bold
+                        [ fontWeight normal
                         , textDecoration none
-                        , scaled 1 |> rem |> paddingY
-                        , scaled 2 |> rem |> paddingX
+                        , scaled 2 |> rem |> paddingY
+                        , scaled 5 |> rem |> paddingX
                         , scaled 1 |> rem |> marginX
+                        , shadowSm
                         , borderRadiusSm
                         , border zero
                         , hover
                             [ backgroundColorWithLightmode lightmode colors.brandLighter
                             ]
                         ]
                     )
-                |> s_primary
+                |> s_neutral
                     (\lightmode ->
-                        [ color_backgroundColorWithLightmode lightmode colors.brandDark colors.greyLighter
+                        [ color_backgroundColorWithLightmode lightmode colors.brandText colors.greyLighter
                         , disabled
                             [ colorWithLightmode lightmode colors.brandLight
                             ]
                         ]
                     )
+                |> s_primary
+                    (\lightmode ->
+                        [ color_backgroundColorWithLightmode lightmode colors.brandText colors.brandLight
+                        , disabled
+                            [ color_backgroundColorWithLightmode lightmode colors.grey colors.greyLight
+                            ]
+                        , hover
+                            [ backgroundColorWithLightmode lightmode colors.brandBase
+                            ]
+                        ]
+                    )
                 |> s_danger
                     (\lightmode ->
                         [ color_backgroundColorWithLightmode lightmode colors.brandRed colors.brandWhite