From 9cc2e672e3936a55e31d484180c6c51c9d79a947 Mon Sep 17 00:00:00 2001
From: Depickere Sven <sven.depickere@hotmail.com>
Date: Fri, 21 Apr 2023 14:19:19 +0200
Subject: [PATCH] feat(): Add styling

---
 src/components/Custom/ExtraOperationInformation.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Custom/ExtraOperationInformation.tsx b/src/components/Custom/ExtraOperationInformation.tsx
index b8325291..22e7497f 100644
--- a/src/components/Custom/ExtraOperationInformation.tsx
+++ b/src/components/Custom/ExtraOperationInformation.tsx
@@ -5,17 +5,19 @@ import { observer } from 'mobx-react';
 import { shortenHTTPVerb } from '../../utils';
 
 export interface ExtraOperationInformationProps {
+  description: string;
   httpVerb: string;
   label: string;
 }
 
 export const ExtraOperationInformation = observer((props: ExtraOperationInformationProps) => {
-  const item = props;
-
   return (
-    <div>
-      <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
-      <MenuItemTitle width="calc(100% - 38px)">{item.label}</MenuItemTitle>
+    <div style={{ padding: '12.5px 0', margin: '0.5rem 0' }}>
+      <div>{props.description}</div>
+      <div style={{ display: 'flex' }}>
+        <OperationBadge type={props.httpVerb}>{shortenHTTPVerb(props.httpVerb)}</OperationBadge>
+        <MenuItemTitle width="calc(100% - 38px)">{props.label}</MenuItemTitle>
+      </div>
     </div>
   );
 });