style codeblock for padding, spacing, colors and text style

sirpengi · Jan 11, 2024 · 2c40870 · 2c40870
1 parent 6fb0e3a
commit 2c40870
Showing 1 changed file with 24 additions and 15 deletions.
diff --git 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<CodeBlockSpanNode> 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));