Parity of Response formatter menu dropdown with Bruno app (#33) (#35)

Co-authored-by: Vineet Sharma (vasharma05) <vineet@usebruno.com>

Author: arpit-bruno

packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponseFormatter/PreviewToggleHeader/StyledWrapper.ts

@@ -4,9 +4,8 @@ export const StyledWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1.5rem;
-  min-width: 11.875rem;
-  padding: 0.25rem;
+  gap: 0.75rem;
+  padding: 0.35rem 0.625rem;
 
   .preview-toggle-label {
     font-size: 0.8125rem;
@@ -16,11 +15,11 @@ export const StyledWrapper = styled.div`
   .preview-toggle {
     position: relative;
     flex-shrink: 0;
-    width: 2.125rem;
-    height: 1.125rem;
+    width: 2rem;
+    height: 1rem;
     padding: 0;
     border: none;
-    border-radius: 0.5625rem;
+    border-radius: 1.5rem;
     cursor: pointer;
     background: var(--oc-background-surface2);
     transition: background 0.15s ease;
@@ -32,10 +31,10 @@ export const StyledWrapper = styled.div`
 
   .preview-toggle-knob {
     position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 0.875rem;
-    height: 0.875rem;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 0.75rem;
+    height: 0.75rem;
     border-radius: 50%;
     background: var(--oc-background-base);
     transition: left 0.15s ease;

packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponseFormatter/ResponseFormatter.tsx

@@ -52,12 +52,18 @@ const ResponseFormatSelector: React.FC<ResponseFormatSelectorProps> = ({
       itemToText={(item: MenuDropdownItem) => (
         <span className="inline-flex items-center gap-1.5">
           {TriggerIcon && (
-            <TriggerIcon size={14} stroke={1.5} aria-hidden data-testid="response-format-selector-trigger-icon" />
+            <TriggerIcon
+              size={14}
+              stroke={1.5}
+              aria-hidden
+              data-testid="response-format-selector-trigger-icon"
+              style={{ color: 'var(--oc-brand)' }}
+            />
           )}
           {item.label}
         </span>
       )}
-      placement="bottom-start"
+      placement="bottom-end"
       header={<PreviewToggleHeader checked={showPreview} onChange={toggleView} />}
       testId="response-format-selector"
     />

packages/bruno-api-docs/src/ui/MenuDropdown/StyledWrapper.ts

@@ -173,11 +173,6 @@ export const StyledWrapper = styled.div`
     margin: 0.25rem 0;
   }
 
-  .dropdown-header-container,
-  .dropdown-footer-container {
-    padding: 0.25rem 0.625rem;
-  }
-
   .dropdown-divider {
     height: 1px;
     background-color: var(--oc-dropdown-separator);
@@ -225,10 +220,6 @@ export const TriggerButton = styled.button`
   &:hover {
     color: var(--oc-text);
   }
-  &[aria-expanded='true'] {
-    color: var(--oc-accents-primary);
-    border-color: var(--oc-accents-primary);
-  }
   &:focus-visible {
     outline: 2px solid var(--oc-accents-primary);
     outline-offset: 1px;