NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 19:51:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix alignment of Message.tiny

Browse Source
This commit is contained in:
Aaron VonderHaar 2020-04-28 13:07:04 -07:00
parent fb6e4222ae
commit caf39b6889
1 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/Nri/Ui/Message/V1.elm
View File

@ -105,21 +105,21 @@ tiny theme content =
case theme of case theme of
Error -> Error ->
[ exclamation Colors.purple [ exclamation Colors.purple
, alertString Colors.purple content , tinyAlertString Colors.purple content
] ]
Alert -> Alert ->
[ exclamation Colors.red [ exclamation Colors.red
, alertString Colors.redDark content , tinyAlertString Colors.redDark content
] ]
Tip -> Tip ->
[ iconContainer [ color Colors.yellow ] (NriSvg.toHtml SpriteSheet.bulb) [ tinyIconContainer [ color Colors.yellow ] (NriSvg.toHtml SpriteSheet.bulb)
, alertString Colors.navy content , tinyAlertString Colors.navy content
] ]
Success -> Success ->
[ iconContainer [ tinyIconContainer
[ color Colors.white [ color Colors.white
, backgroundColor Colors.green , backgroundColor Colors.green
] ]
@ -127,19 +127,20 @@ tiny theme content =
[ css [ width (px 12), marginTop (px 1) ] ] [ css [ width (px 12), marginTop (px 1) ] ]
[ NriSvg.toHtml SpriteSheet.checkmark ] [ NriSvg.toHtml SpriteSheet.checkmark ]
) )
, alertString Colors.greenDarkest content , tinyAlertString Colors.greenDarkest content
] ]
Custom config -> Custom config ->
[ iconContainer [ color config.color ] (NriSvg.toHtml config.icon) [ tinyIconContainer [ color config.color ] (NriSvg.toHtml config.icon)
, alertString config.color content , tinyAlertString config.color content
] ]
in in
Nri.Ui.styled div Nri.Ui.styled div
"Nri-Ui-Message-V1--tiny" "Nri-Ui-Message-V1--tiny"
[ displayFlex [ displayFlex
, justifyContent start , justifyContent start
, alignItems flexStart
--, alignItems center
, paddingTop (px 6) , paddingTop (px 6)
, paddingBottom (px 8) , paddingBottom (px 8)
] ]
@ -438,7 +439,7 @@ somethingWentWrong errorMessageForEngineers =
exclamation : Color -> Html msg exclamation : Color -> Html msg
exclamation iconColor = exclamation iconColor =
iconContainer tinyIconContainer
[ color Colors.white [ color Colors.white
, backgroundColor iconColor , backgroundColor iconColor
] ]
@ -451,10 +452,13 @@ exclamation iconColor =
) )
iconContainer : List Style -> Html msg -> Html msg tinyIconContainer : List Style -> Html msg -> Html msg
iconContainer styles icon = tinyIconContainer styles icon =
Nri.Ui.styled div styled div
"Nri-Ui-Message-V1--iconContainer" []
[]
[ Nri.Ui.styled div
"Nri-Ui-Message-V1--tinyIconContainer"
(styles (styles
++ [ -- Content positioning ++ [ -- Content positioning
displayFlex displayFlex
@ -472,11 +476,17 @@ iconContainer styles icon =
) )
[] []
[ icon ] [ icon ]
]
alertString : ColorValue compatible -> Content msg -> Html msg tinyAlertString : ColorValue compatible -> Content msg -> Html msg
alertString textColor content = tinyAlertString textColor content =
Nri.Ui.styled div styled div
[ displayFlex
, alignItems center
]
[]
[ Nri.Ui.styled div
"Nri-Ui-Message-V1--alert" "Nri-Ui-Message-V1--alert"
[ color textColor [ color textColor
, Fonts.baseFont , Fonts.baseFont
@ -503,6 +513,7 @@ alertString textColor content =
] ]
[] []
(contentToHtml content) (contentToHtml content)
]
inCircle : inCircle :