From 06e6dfac2146142c4d2e8acc63d169a736f7c66e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr=20Gorej?= <vladimir.gorej@gmail.com>
Date: Tue, 16 Apr 2024 12:22:11 +0200
Subject: [PATCH] feat(request-snippets): use active class modifier for active
 snippet (#9826)

---
 .../plugins/request-snippets/request-snippets.jsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/core/plugins/request-snippets/request-snippets.jsx b/src/core/plugins/request-snippets/request-snippets.jsx
index 60d3fcd601b..6ce78ea615e 100644
--- a/src/core/plugins/request-snippets/request-snippets.jsx
+++ b/src/core/plugins/request-snippets/request-snippets.jsx
@@ -1,4 +1,5 @@
 import React, { useRef, useEffect, useState } from "react"
+import classNames from "classnames"
 import PropTypes from "prop-types"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 
@@ -117,9 +118,16 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) =>
           <div style={{ paddingLeft: "15px", paddingRight: "10px", width: "100%", display: "flex" }}>
             {
               snippetGenerators.entrySeq().map(([key, gen]) => {
-                return (<div style={handleGetBtnStyle(key)} className="btn" key={key} onClick={() => handleGenChange(key)}>
-                  <h4 style={key === activeLanguage ? { color: "white", } : {}}>{gen.get("title")}</h4>
-                </div>)
+                return (
+                  <div
+                    className={classNames("btn", {"curl-command--active": key === activeLanguage })}
+                    style={handleGetBtnStyle(key)}
+                    key={key}
+                    onClick={() => handleGenChange(key)}
+                  >
+                    <h4 style={key === activeLanguage ? { color: "white", } : {}}>{gen.get("title")}</h4>
+                  </div>
+                )
               })
             }
           </div>