BDEVEXP - 1200

* Made changes to UI as per provided figma.

src/components/Operation/Operation.tsx

@@ -4,8 +4,6 @@ import { OperationPanel } from '../RightPanelContent/OperationPanel';
 
 import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';
 
-import { ShareLink } from '../../common-elements/linkify';
-
 import { OperationModel as OperationType } from '../../services/models';
 import styled from '../../styled-components';
 import { Endpoint } from '../Endpoint/Endpoint';
@@ -13,10 +11,12 @@ import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocument
 import { Extensions } from '../Fields/Extensions';
 import { Markdown } from '../Markdown/Markdown';
 
+import { shortenHTTPVerb } from '../../utils';
 import { OptionsContext } from '../OptionsProvider';
 import { Parameters } from '../Parameters/Parameters';
 import { ResponsesList } from '../Responses/ResponsesList';
 import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
+import { OperationBadge } from '../SideMenu';
 
 const OperationRow = styled(Row)`
   backface-visibility: hidden;
@@ -46,6 +46,29 @@ export class Operation extends React.Component<OperationProps> {
         {options => (
           <OperationRow>
             <MiddlePanel>
+              <div style={{display: 'flex'}}>
+                <div style={{zoom: '125%'}}>
+                  <OperationBadge type={operation.httpVerb}>{shortenHTTPVerb(operation.httpVerb)}</OperationBadge>
+                </div>
+                <div style={{margin: '-24px 0 0 7px'}}>
+                  <div style={{fontWeight: 'bolder'}}>
+                    <H2>
+                      {/*<ShareLink to={operation.id}/>*/}
+                      {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
+                    </H2>
+                  </div>
+                  <div style={{marginTop: '-20px'}}>
+                    {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true}/>}
+                    {hasDescription && (
+                      <Description>
+                        {description !== undefined && <Markdown source={description}/>}
+                        {externalDocs && <ExternalDocumentation externalDocs={externalDocs}/>}
+                      </Description>
+                    )}
+                  </div>
+                </div>
+              </div>
+              {/*<OperationBadge type={operation.httpVerb}>{shortenHTTPVerb(operation.httpVerb)}</OperationBadge>
               <H2>
                 <ShareLink to={operation.id}/>
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
@@ -56,7 +79,7 @@ export class Operation extends React.Component<OperationProps> {
                   {description !== undefined && <Markdown source={description}/>}
                   {externalDocs && <ExternalDocumentation externalDocs={externalDocs}/>}
                 </Description>
-              )}
+              )}*/}
               <Extensions extensions={operation.extensions}/>
               <SecurityRequirements securities={operation.security}/>
               <Parameters parameters={operation.parameters} body={operation.requestBody}/>

src/components/Responses/styled.elements.ts

@@ -6,7 +6,7 @@ import { ResponseTitle } from './ResponseTitle';
 
 export const StyledResponseTitle = styled(ResponseTitle)`
   padding: 10px;
-  border-radius: 2px;
+  border-radius: 6px;
   margin-bottom: 4px;
   line-height: 1.5em;
   background-color: #f2f2f2;

src/theme.ts

@@ -126,6 +126,7 @@ const defaultTheme: ThemeInterface = {
     width: '260px',
     backgroundColor: '#F3F6FB',
     textColor: '#232E72',
+    activeTextColor: '#232E72',
     groupItems: {
       textTransform: 'uppercase',
     },
@@ -308,6 +309,7 @@ export interface ResolvedThemeInterface {
     width: string;
     backgroundColor: string;
     textColor: string;
+    activeTextColor: string;
     groupItems: {
       textTransform: string;
     };