How to get Microsoft Teams card to display correctly - botframework

Question

I'm building a Microsoft Teams app with the botbuilder in typescript. Everything is working fine except the UI is not matching exactly what I want. Im using an adaptive card to render my responses to the user and typically the adaptive card has a top border (seen below is black) but mine doesnt have it and i'm trying to figure out how i can make it work.
I want my card to have the black border on top as shown here for in github's bot:
See image
This is what mine currently shows:
see image
below is my code to render the card. What i'm i doing wrong?
await context.sendActivity({ attachments: [
CardFactory.adaptiveCard({
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"msteams": {
"width": "Full"
},
"body": [
{
"type": "TextBlock",
"text": "My card doesnt have the border.",
"wrap": true
}
]
})
] });

Answer 1

I figured it out and it was a simple fix. The code now looks like this.
"body": [
{
"type": "TextBlock",
"text": "My card doesnt have the border.",
"wrap": true,
"style": {
"borderTopWidth": 1,
"borderTopColor": "#000"
}
}
] });

Answer 2

I finally figured out the solution. I had to the office 365 connector card to get that color strip. FINALLY!
Here's the code sample for Nodejs/typescript:
CardFactory.o365ConnectorCard({
"title": "card title",
"text": "card text",
"summary": "O365 card summary",
"themeColor": "#E67A9E",
"sections": [
{
"text": "This is some <strong>bold</strong> text"
},
{
"text": "This is some <em>italic</em> text"
},
{
"text": "This is some <strike>strikethrough</strike> text"
},
{
"text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
},
{
"text": "bullet list <ul><li>text</li><li>text</li></ul>"
},
{
"text": "ordered list <ol><li>text</li><li>text</li></ol>"
},
{
"text": "hyperlink Bing"
},
{
"text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
},
{
"text": "preformatted text <pre>text</pre>"
},
{
"text": "Paragraphs <p>Line a</p><p>Line b</p>"
},
{
"text": "<blockquote>Blockquote text</blockquote>"
}
]
})