diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart index e108ee15f8..4c1a4da491 100644 --- a/lib/widgets/content.dart +++ b/lib/widgets/content.dart @@ -19,6 +19,12 @@ import 'text.dart'; /// The font size for message content in a plain unstyled paragraph. const double kBaseFontSize = 14; +/// The font size for content in a code block. +// This value in web comes from Bootstrap v2.3.2 +// base style for pre elements. +const double _kBaseCodeFontSize = 13; + + /// The entire content of a message, aka its body. /// /// This does not include metadata like the sender's name and avatar, the time, @@ -307,18 +313,21 @@ class CodeBlock extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( - decoration: BoxDecoration( - color: Colors.white, - border: Border.all( - width: 1, - color: const HSLColor.fromAHSL(0.15, 0, 0, 0).toColor()), - borderRadius: BorderRadius.circular(4)), - child: SingleChildScrollViewWithScrollbar( - scrollDirection: Axis.horizontal, - child: Padding( - padding: const EdgeInsets.fromLTRB(7, 5, 7, 3), - child: Text.rich(_buildNodes(node.spans))))); + return Padding( + // TODO: collapse padding between message elements + padding: const EdgeInsets.symmetric(vertical: 5), + child: Container( + decoration: BoxDecoration( + color: const Color.fromRGBO(0, 0, 0, 0.04), + borderRadius: BorderRadius.circular(4)), + child: SingleChildScrollViewWithScrollbar( + scrollDirection: Axis.horizontal, + child: Padding( + // Web has a 1px transparent border that effectively serves as + // extra 1px padding. + padding: const EdgeInsets.fromLTRB(7 + 1, 5 + 1, 7 + 1, 3 + 1), + child: Text.rich(_buildNodes(node.spans))))), + ); } InlineSpan _buildNodes(List nodes) { @@ -587,7 +596,7 @@ class _InlineContentBuilder { final _kInlineCodeStyle = kMonospaceTextStyle .merge(const TextStyle( backgroundColor: Color(0xffeeeeee), - fontSize: 0.825 * kBaseFontSize)) + fontSize: 0.825 * _kBaseCodeFontSize)) .merge( // TODO(a11y) pass a BuildContext, to handle platform request for bold text. // To get one, the result of this whole computation (to the TextStyle @@ -598,8 +607,8 @@ final _kInlineCodeStyle = kMonospaceTextStyle final _kCodeBlockStyle = kMonospaceTextStyle .merge(const TextStyle( - backgroundColor: Color.fromRGBO(255, 255, 255, 1), - fontSize: 0.825 * kBaseFontSize)) + fontSize: 0.825 * _kBaseCodeFontSize, + height: 1.4)) .merge( // TODO(a11y) pass a BuildContext; see comment in _kInlineCodeStyle above. weightVariableTextStyle(null));