Improve styling and respect prefers-reduced-motion

Author: hilverd

CHANGELOG.md

@@ -12,6 +12,9 @@ This applies from version 0.5.0 onwards, as some versions before that have broke
 ## [Unreleased]
 
 ### Added
+
+- Improve styling and respect `prefers-reduced-motion`.
+
 ### Changed
 ### Fixed
 

src/Components/Button.elm

@@ -3,7 +3,6 @@ module Components.Button exposing (emptyState, primary, radio, rounded, secondar
 import Accessibility exposing (Attribute)
 import Accessibility.Aria
 import Accessibility.Key
-import Extras.HtmlTree exposing (HtmlTree(..))
 import Html exposing (Html)
 import Html.Attributes exposing (class)
 
@@ -21,10 +20,17 @@ withAdditionalAttributes attributes additionalAttributes children =
         children
 
 
-primary : List (Attribute msg) -> List (Html msg) -> Html msg
-primary =
+primary : Bool -> List (Attribute msg) -> List (Html msg) -> Html msg
+primary enabled =
     withAdditionalAttributes
-        [ class "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300" ]
+        [ if enabled then
+            class "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300"
+
+          else
+            class "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white dark:text-gray-400 bg-indigo-400 dark:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300"
+        , Html.Attributes.disabled <| not enabled
+        , Accessibility.Key.tabbable enabled
+        ]
 
 
 secondary : List (Attribute msg) -> List (Html msg) -> Html msg
@@ -79,7 +85,7 @@ toggle on labelId additionalAttributes children =
         (class "flex items-center" :: additionalAttributes)
         [ Accessibility.button
             [ Html.Attributes.type_ "button"
-            , class "relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300"
+            , class "relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer motion-reduce:transition-none transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300"
             , class <|
                 if on then
                     "bg-indigo-600 dark:bg-indigo-400"
@@ -92,7 +98,7 @@ toggle on labelId additionalAttributes children =
             ]
             [ Accessibility.span
                 [ Accessibility.Aria.hidden True
-                , class "pointer-events-none inline-block h-5 w-5 rounded-full bg-white dark:bg-gray-700 shadow transform ring-0 transition ease-in-out duration-200"
+                , class "pointer-events-none inline-block h-5 w-5 rounded-full bg-white dark:bg-gray-700 shadow transform motion-reduce:transform-none ring-0 transition ease-in-out duration-200"
                 , class <|
                     if on then
                         "translate-x-5"
@@ -119,7 +125,7 @@ radio name_ value_ checked_ tabbable additionalAttributes =
         name_
         value_
         checked_
-        ([ class "h-4 w-4 dark:bg-gray-200 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300 "
+        ([ class "h-4 w-4 dark:bg-gray-200 text-indigo-600 dark:text-amber-700 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 dark:focus:ring-indigo-800 dark:focus:ring-offset-indigo-300 "
          , Accessibility.Key.tabbable tabbable
          ]
             ++ additionalAttributes

src/Components/DropdownMenu.elm

@@ -1,4 +1,16 @@
-module Components.DropdownMenu exposing (Choice, Model, Msg, choice, hidden, id, init, subscriptions, update, view, visible)
+module Components.DropdownMenu exposing
+    ( Choice
+    , Model
+    , Msg
+    , choice
+    , hidden
+    , id
+    , init
+    , subscriptions
+    , update
+    , view
+    , visible
+    )
 
 import Accessibility exposing (..)
 import Accessibility.Aria
@@ -9,7 +21,6 @@ import Browser.Events as Events
 import Components.Button
 import Extras.HtmlAttribute
 import Extras.HtmlEvents
-import Extras.HtmlTree exposing (HtmlTree(..))
 import Html
 import Html.Attributes exposing (attribute, class, href)
 import Html.Events
@@ -287,10 +298,10 @@ view toParentMsg model body_ choices =
             , class "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black dark:ring-gray-600 ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
             , class "hidden" |> Extras.HtmlAttribute.showIf (model_.visibility == Invisible)
             , if model_.visibility == Visible then
-                class "transition ease-out duration-100 transform opacity-100 scale-100"
+                class "transition motion-reduce:transition-none ease-out duration-100 transform motion-reduce:transform-none opacity-100 scale-100"
 
               else
-                class "transition ease-in duration-75 transform opacity-0 scale-95"
+                class "transition motion-reduce:transition-none ease-in duration-75 transform motion-reduce:transform-none opacity-0 scale-95"
             , Accessibility.Role.menu
             , Accessibility.Key.tabbable False
             ]

src/Pages/CreateOrEdit.elm

@@ -717,7 +717,7 @@ viewCreateFormFooter model showValidationErrors errorMessageWhileSaving glossary
                     PageMsg.NavigateToListAll { common | loadedGlossaryItems = Ok glossaryItems }
                 ]
                 [ text "Cancel" ]
-            , Components.Button.primary
+            , Components.Button.primary True
                 [ class "ml-3"
                 , Html.Events.onClick <| PageMsg.Internal Save
                 ]

src/Pages/EditTitleAndAbout.elm

@@ -476,7 +476,7 @@ viewCreateFormFooter model showValidationErrors errorMessageWhileSaving glossary
                     PageMsg.NavigateToListAll { common | loadedGlossaryItems = Ok glossaryItems }
                 ]
                 [ text "Cancel" ]
-            , Components.Button.primary
+            , Components.Button.primary True
                 [ class "ml-3"
                 , Html.Events.onClick <| PageMsg.Internal Save
                 ]

src/Pages/ListAll.elm

@@ -742,7 +742,7 @@ viewConfirmDeleteModal maybeIndexOfItemToDelete =
                     ]
                 , div
                     [ class "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse" ]
-                    [ Components.Button.primary
+                    [ Components.Button.primary True
                         [ class "w-full bg-red-600 dark:bg-red-400 hover:bg-red-700 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm dark:text-gray-800 "
                         , Extras.HtmlAttribute.showMaybe
                             (Html.Events.onClick << PageMsg.Internal << Delete)