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