From 2333cae59939553d2d00abb1c27e002da500baa8 Mon Sep 17 00:00:00 2001
From: Yash Chavda <yashchavda2004@gmail.com>
Date: Mon, 11 Nov 2024 15:06:43 +0530
Subject: [PATCH 1/3] Made the colors boxes wrap

Signed-off-by: Yash Chavda <yashchavda2004@gmail.com>
---
 src/sections/Company/Brand/Brand-components/catalog.js          | 2 +-
 src/sections/Company/Brand/Brand-components/community.js        | 2 +-
 src/sections/Company/Brand/Brand-components/imagehub.js         | 2 +-
 src/sections/Company/Brand/Brand-components/kanvas.js           | 2 +-
 src/sections/Company/Brand/Brand-components/layer5.js           | 2 +-
 src/sections/Company/Brand/Brand-components/meshery-operator.js | 2 +-
 src/sections/Company/Brand/Brand-components/meshery.js          | 2 +-
 src/sections/Company/Brand/Brand-components/meshmark.js         | 2 +-
 src/sections/Company/Brand/Brand-components/meshmaster.js       | 2 +-
 src/sections/Company/Brand/Brand-components/meshsync.js         | 2 +-
 .../Company/Brand/Brand-components/servicemeshpatterns.js       | 2 +-
 src/sections/Company/Brand/Brand-components/smp.js              | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/sections/Company/Brand/Brand-components/catalog.js b/src/sections/Company/Brand/Brand-components/catalog.js
index abad4d3ee11d..12f8b63d8230 100644
--- a/src/sections/Company/Brand/Brand-components/catalog.js
+++ b/src/sections/Company/Brand/Brand-components/catalog.js
@@ -123,7 +123,7 @@ const Catalog = () => {
               white when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox
               name="Caribbean Green"
diff --git a/src/sections/Company/Brand/Brand-components/community.js b/src/sections/Company/Brand/Brand-components/community.js
index dea3e2b08c31..e226c535d057 100644
--- a/src/sections/Company/Brand/Brand-components/community.js
+++ b/src/sections/Company/Brand/Brand-components/community.js
@@ -79,7 +79,7 @@ const CommunityBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
           <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/imagehub.js b/src/sections/Company/Brand/Brand-components/imagehub.js
index 67950529c768..e8673b9d8cd9 100644
--- a/src/sections/Company/Brand/Brand-components/imagehub.js
+++ b/src/sections/Company/Brand/Brand-components/imagehub.js
@@ -71,7 +71,7 @@ const ImageHubBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/kanvas.js b/src/sections/Company/Brand/Brand-components/kanvas.js
index a728ca2ca27e..0b64ade61a06 100644
--- a/src/sections/Company/Brand/Brand-components/kanvas.js
+++ b/src/sections/Company/Brand/Brand-components/kanvas.js
@@ -85,7 +85,7 @@ const KanvasBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
diff --git a/src/sections/Company/Brand/Brand-components/layer5.js b/src/sections/Company/Brand/Brand-components/layer5.js
index 23ffc4730ba7..88f3bd897a6f 100644
--- a/src/sections/Company/Brand/Brand-components/layer5.js
+++ b/src/sections/Company/Brand/Brand-components/layer5.js
@@ -85,7 +85,7 @@ const Layer5Brand = () => {
               when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Saffron" R="235" G="192" B="23" colorCode="#EBC017" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js
index 824e335d041f..49799413499c 100644
--- a/src/sections/Company/Brand/Brand-components/meshery-operator.js
+++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js
@@ -78,7 +78,7 @@ const MesheryOperatorBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery.js b/src/sections/Company/Brand/Brand-components/meshery.js
index 4b3882b7f02d..e19a22d7f515 100644
--- a/src/sections/Company/Brand/Brand-components/meshery.js
+++ b/src/sections/Company/Brand/Brand-components/meshery.js
@@ -81,7 +81,7 @@ const MesheryBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmark.js b/src/sections/Company/Brand/Brand-components/meshmark.js
index 02d3d4c4370d..d5d2863bc857 100644
--- a/src/sections/Company/Brand/Brand-components/meshmark.js
+++ b/src/sections/Company/Brand/Brand-components/meshmark.js
@@ -118,7 +118,7 @@ const MeshMarkBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmaster.js b/src/sections/Company/Brand/Brand-components/meshmaster.js
index 38ee3cd79a68..55b291ae34d9 100644
--- a/src/sections/Company/Brand/Brand-components/meshmaster.js
+++ b/src/sections/Company/Brand/Brand-components/meshmaster.js
@@ -77,7 +77,7 @@ const MeshMasterBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js
index 54ebd4daa10f..80a1c5d6b8f8 100644
--- a/src/sections/Company/Brand/Brand-components/meshsync.js
+++ b/src/sections/Company/Brand/Brand-components/meshsync.js
@@ -78,7 +78,7 @@ const MeshSyncBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
index 7e37c24b9587..7388b47fa289 100644
--- a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
+++ b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
@@ -78,7 +78,7 @@ const ServiceMeshPatterns = () => {
             using project colors as the background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index eeac312a412c..a018a8f91389 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -104,7 +104,7 @@ const SMPBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />

From e9a905b0133d382a111b2588aee4cd0c4dfe4b3d Mon Sep 17 00:00:00 2001
From: Yash Chavda <yashchavda2004@gmail.com>
Date: Mon, 11 Nov 2024 15:19:38 +0530
Subject: [PATCH 2/3] Made the colors boxes wrap

Signed-off-by: Yash Chavda <yashchavda2004@gmail.com>
---
 src/sections/Company/Brand/Brand-components/smp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index a018a8f91389..16dcc293a3ac 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -104,7 +104,7 @@ const SMPBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{display: "flex", flexWrap:"wrap"}} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />

From 50947777e9a28f1fd4c94566a7eac3800c98a616 Mon Sep 17 00:00:00 2001
From: Yash Chavda <yashchavda2004@gmail.com>
Date: Mon, 11 Nov 2024 16:27:33 +0530
Subject: [PATCH 3/3] Made the colors boxes wrap

Signed-off-by: Yash Chavda <yashchavda2004@gmail.com>
---
 src/sections/Company/Brand/Brand-components/imagehub.js         | 2 +-
 src/sections/Company/Brand/Brand-components/kanvas.js           | 2 +-
 src/sections/Company/Brand/Brand-components/layer5.js           | 2 +-
 src/sections/Company/Brand/Brand-components/meshery-operator.js | 2 +-
 src/sections/Company/Brand/Brand-components/meshery.js          | 2 +-
 src/sections/Company/Brand/Brand-components/meshmark.js         | 2 +-
 src/sections/Company/Brand/Brand-components/meshmaster.js       | 2 +-
 src/sections/Company/Brand/Brand-components/meshsync.js         | 2 +-
 .../Company/Brand/Brand-components/servicemeshpatterns.js       | 2 +-
 src/sections/Company/Brand/Brand-components/smp.js              | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/sections/Company/Brand/Brand-components/imagehub.js b/src/sections/Company/Brand/Brand-components/imagehub.js
index e8673b9d8cd9..01d3f4a6bcc6 100644
--- a/src/sections/Company/Brand/Brand-components/imagehub.js
+++ b/src/sections/Company/Brand/Brand-components/imagehub.js
@@ -71,7 +71,7 @@ const ImageHubBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+        <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/kanvas.js b/src/sections/Company/Brand/Brand-components/kanvas.js
index 0b64ade61a06..a0e04e778d8c 100644
--- a/src/sections/Company/Brand/Brand-components/kanvas.js
+++ b/src/sections/Company/Brand/Brand-components/kanvas.js
@@ -85,7 +85,7 @@ const KanvasBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
diff --git a/src/sections/Company/Brand/Brand-components/layer5.js b/src/sections/Company/Brand/Brand-components/layer5.js
index 88f3bd897a6f..049f90af2202 100644
--- a/src/sections/Company/Brand/Brand-components/layer5.js
+++ b/src/sections/Company/Brand/Brand-components/layer5.js
@@ -85,7 +85,7 @@ const Layer5Brand = () => {
               when using project colors as the background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Saffron" R="235" G="192" B="23" colorCode="#EBC017" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js
index 49799413499c..fc59cc06fb2e 100644
--- a/src/sections/Company/Brand/Brand-components/meshery-operator.js
+++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js
@@ -78,7 +78,7 @@ const MesheryOperatorBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery.js b/src/sections/Company/Brand/Brand-components/meshery.js
index e19a22d7f515..917a476fde37 100644
--- a/src/sections/Company/Brand/Brand-components/meshery.js
+++ b/src/sections/Company/Brand/Brand-components/meshery.js
@@ -81,7 +81,7 @@ const MesheryBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+        <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmark.js b/src/sections/Company/Brand/Brand-components/meshmark.js
index d5d2863bc857..c41efc40466b 100644
--- a/src/sections/Company/Brand/Brand-components/meshmark.js
+++ b/src/sections/Company/Brand/Brand-components/meshmark.js
@@ -118,7 +118,7 @@ const MeshMarkBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmaster.js b/src/sections/Company/Brand/Brand-components/meshmaster.js
index 55b291ae34d9..5559c936b534 100644
--- a/src/sections/Company/Brand/Brand-components/meshmaster.js
+++ b/src/sections/Company/Brand/Brand-components/meshmaster.js
@@ -77,7 +77,7 @@ const MeshMasterBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+        <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js
index 80a1c5d6b8f8..2faebb89c028 100644
--- a/src/sections/Company/Brand/Brand-components/meshsync.js
+++ b/src/sections/Company/Brand/Brand-components/meshsync.js
@@ -78,7 +78,7 @@ const MeshSyncBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
index 7388b47fa289..ec06dbf4cdeb 100644
--- a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
+++ b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
@@ -78,7 +78,7 @@ const ServiceMeshPatterns = () => {
             using project colors as the background.
           </p>
         </Col>
-        <Row style={{display: "flex", flexWrap: "wrap"}} className="color-code-wrapper">
+        <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index 16dcc293a3ac..36566dfec06b 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -104,7 +104,7 @@ const SMPBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row style={{display: "flex", flexWrap:"wrap"}} className="color-code-wrapper">
+          <Row style={{ display: "flex", flexWrap: "wrap" }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />