From ffa8e833eac149d3dc9b80d684d9b606b68ef5bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mer=20Fad=C4=B1l=20USTA?= <omerusta@gmail.com>
Date: Fri, 10 Jan 2025 13:31:11 +0300
Subject: [PATCH] Update version command display in documentation (#6522)

* Update version command display in documentation

Modified the version command section to improve clarity and devided logical divs
Title part's visuals is a bit modified to fit in our webpage

* try to fix style

* add commandInfo callout

* convert to callouts

* try dark one
---
 _config.yml              | 3 +++
 _layouts/product.html    | 8 +++++---
 _sass/custom/custom.scss | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/_config.yml b/_config.yml
index 61c5b943e38..097b9f012c1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -58,6 +58,9 @@ callouts:
   note:
     title: Note
     color: blue
+  commandInfo:
+    title: To learn the current version on your system
+    color: grey-dk
 
 
 # jekyll-timeago plugin configuration, see https://github.com/markets/jekyll-timeago
diff --git a/_layouts/product.html b/_layouts/product.html
index 9e1b781e051..ab288e37a62 100644
--- a/_layouts/product.html
+++ b/_layouts/product.html
@@ -179,9 +179,11 @@ <h1>{{ page.title }}</h1>
 {% endif %}
 
 {% if page.versionCommand %}
-<div id="version-command" class="card card-body bg-light">
-  You can check the version that you are currently using by running: <pre>{{page.versionCommand}}</pre>
-</div>
+  <div id="version-command">
+    <blockquote class="commandInfo">
+      <p><pre>{{page.versionCommand}}</pre></p>
+    </blockquote>
+  </div>
 {% endif %}
 
 {% include identifiers.html %}
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 13c4501cfc6..9facb00f36b 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -163,4 +163,4 @@ ul.tag-cloud {
     text-decoration: none;
     position: relative;
   }
-}
\ No newline at end of file
+}