Add new style for inline code (#9936)

Add new style for inline code

res/css/_spacing.pcss

@@ -16,6 +16,7 @@ limitations under the License.
 
 /* 1rem :: 10px */
 
+$spacing-2: 2px;
 $spacing-4: 4px;
 $spacing-8: 8px;
 $spacing-12: 12px;

res/css/views/rooms/_EventTile.pcss

@@ -551,6 +551,18 @@ $left-gutter: 64px;
             background-color: $codeblock-background-color;
         }
 
+        code:not(pre *) {
+            background-color: $inlinecode-background-color;
+            border: 1px solid $inlinecode-border-color;
+            border-radius: 4px;
+            // The horizontal padding is added by gfm.css .markdown-body
+            padding: $spacing-2 0;
+            // Avoid inline code blocks to be sticked when on multiple lines
+            line-height: $font-22px;
+            // Avoid the border to be glued to the other words
+            margin-right: $spacing-2;
+        }
+
         code {
             white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
         }

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -49,6 +49,14 @@ limitations under the License.
         :is(ol, ul) + br:last-of-type {
             display: none;
         }
+
+        code {
+            font-family: $monospace-font-family !important;
+            background-color: $inlinecode-background-color;
+            border: 1px solid $inlinecode-border-color;
+            border-radius: 4px;
+            padding: $spacing-2;
+        }
     }
 
     .mx_WysiwygComposer_Editor_content_placeholder::before {