From d5e02d4f4df12264d35dc409c065c111e44c1b74 Mon Sep 17 00:00:00 2001
From: Clint George <clintbgeorge@gmail.com>
Date: Tue, 9 Jul 2024 22:04:41 +0530
Subject: [PATCH 1/3] Made changes to the styling /learn page

Signed-off-by: Clint George <clintbgeorge@gmail.com>
---
 src/sections/Learn/learnpage.style.js | 87 +++++++++++++++------------
 1 file changed, 48 insertions(+), 39 deletions(-)

diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js
index 885d745e6569..8be224caf7f8 100644
--- a/src/sections/Learn/learnpage.style.js
+++ b/src/sections/Learn/learnpage.style.js
@@ -1,48 +1,57 @@
 import styled from "styled-components";
 
 export const LearnPageWrapper = styled.div`
-    .page-header-section {
-        height: 35rem;
-        text-align: center;
-        background: rgb(71,126,150);
-        background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        h1 {            
-            color: white;
-        }
-        h3 {
-            margin-top: 1rem;
-            margin-left: 5rem;
-            margin-right: 5rem;
-            color: white;
-            font-size: 1.5rem;
-            font-weight: 300;
-            @media screen and (max-width: 445px) {
-              margin-left: 0;
-              margin-right: 0;
-              font-size: 1.3rem;
-            }
-          }
+  .page-header-section {
+    height: 30rem;
+    text-align: center;
+    background: rgb(71, 126, 150);
+    background: linear-gradient(
+      250deg,
+      rgba(71, 126, 150, 1) 0%,
+      rgba(0, 179, 159, 1) 35%,
+      rgba(60, 73, 79, 1) 100%
+    );
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    h1 {
+      color: white;
+      margin-left: 5vw;
+      margin-right: 5vw;
     }
+    h3 {
+      margin-top: 1rem;
+      margin-left: 5rem;
+      margin-right: 5rem;
+      padding-left: 1.2rem;
+      padding-right: 1.2rem;
+      color: white;
+      font-size: 1.5rem;
+      font-weight: 300;
+      @media screen and (max-width: 445px) {
+        margin-left: 0;
+        margin-right: 0;
+        font-size: 1.3rem;
+      }
+    }
+  }
 
-    .join-community{
-        width: 100%;
-        max-width: 100%;
-        height: 28rem;
-        background-position: bottom;
+  .join-community {
+    width: 100%;
+    max-width: 100%;
+    height: 28rem;
+    background-position: bottom;
 
-        @media screen and (min-width: 1800px) {
-            height: 34rem;
-            background-position-y: -56vw;
-        }
+    @media screen and (min-width: 1800px) {
+      height: 34rem;
+      background-position-y: -56vw;
     }
+  }
 
-    .join-community_text-and_button{
-        p{
-            max-width: 22rem;
-        }
+  .join-community_text-and_button {
+    p {
+      max-width: 22rem;
     }
-`;
\ No newline at end of file
+  }
+`;

From bdda7e2915ce0637ee37000c9712d295efe4a0bc Mon Sep 17 00:00:00 2001
From: Clint George <clintbgeorge@gmail.com>
Date: Wed, 10 Jul 2024 17:58:28 +0530
Subject: [PATCH 2/3] Added minor changes

Signed-off-by: Clint George <clintbgeorge@gmail.com>
---
 .../Learn/LearnPage-Sections/books.js         | 236 ++++++++++--------
 src/sections/Learn/learnpage.style.js         |   2 +-
 2 files changed, 126 insertions(+), 112 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
index 505656ce493e..94f3fa68d538 100644
--- a/src/sections/Learn/LearnPage-Sections/books.js
+++ b/src/sections/Learn/LearnPage-Sections/books.js
@@ -7,128 +7,131 @@ import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import styled from "styled-components";
 
 const BooksListWrapper = styled.div`
-    Button:hover {
-      box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour};
+  Button:hover {
+    box-shadow: 0 2px 10px ${(props) => props.theme.whiteFourToBlackFour};
+  }
+  .book-heading {
+    text-align: center;
+    // background-color: red;
+    margin: 2.5rem 5vw;
+    color: ${(props) => props.theme.text};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  .books-card {
+    display: flex;
+    margin: 1rem auto 2rem auto;
+    padding: 1rem 0;
+    min-height: 15.5rem;
+    max-width: 50.5rem;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
+    .books-image {
+      height: 12rem;
+      margin: auto;
+      text-align: center;
+      filter: brightness(0.9);
+
+      img {
+        max-width: 18rem;
+        height: inherit;
+      }
     }
-    .book-heading {
-        text-align: center;
-        margin: 5rem 0
-        color: ${props => props.theme.text};
+    .books-details {
+      padding: 0 1rem;
+      margin: auto;
+      h2 {
+        margin: 0.5rem 0;
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-    .books-card {
-        display: flex;
-        margin: 1rem auto;
-        min-height: 15.5rem;
-        max-width: 50.5rem;
+      }
+      p {
+        color: ${(props) => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
-        .books-image {
-            height: 12rem;
-            margin: auto;
-            text-align: center;
-            filter: brightness(0.9);
-
-            img {
-                max-width: 18rem;
-                height: inherit;
-            }
-        }
-        .books-details {
-            padding: 0 1rem;
-            margin: auto;
-            h2 {
-                margin: 0.5rem 0;
-                transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-            }
-            p{
-              color: ${props => props.theme.text};
-              transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-            }
-        }
-        .arrow_icon{
-            height: 2.5rem;
-            min-width: 2.5rem;
-            margin: auto 0;
-            padding: 0;
-            font-size: 1.25rem;
-            border-radius: 2rem;
-            transition: all 0.2s;
-        }
-        .books-page_link {
-            display: flex;
-            color: inherit;
-            padding: 0 0.75rem;
-        }
-        &:hover{
-            box-shadow: 0px 0px 20px ${props => props.theme.whiteNineToBlackOne};
-            .arrow_icon{
-                left: 0.2rem;
-                color: white;
-            }
-        }
+      }
     }
-
-    .see-more-button {
-        margin: 4rem 0 0;
-        text-align: center;
+    .arrow_icon {
+      height: 2.5rem;
+      min-width: 2.5rem;
+      margin: auto 0;
+      padding: 0;
+      font-size: 1.25rem;
+      border-radius: 2rem;
+      transition: all 0.2s;
+    }
+    .books-page_link {
+      display: flex;
+      color: inherit;
+      padding: 0 0.75rem;
+    }
+    &:hover {
+      box-shadow: 0px 0px 20px ${(props) => props.theme.whiteNineToBlackOne};
+      .arrow_icon {
+        left: 0.2rem;
+        color: white;
       }
+    }
+  }
 
-    @media screen and (max-width: 600px) {
-        .books-card {
-            display: block;
-            margin: 0.5rem auto;
-            .books-details {
-                overflow: hidden;
-                p {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-            .arrow_icon{
-                display: block;
-                min-width: 6rem;
-                margin: auto;
-            }
-            .books-page_link {
-                display: block;
-                color: inherit;
-                padding: 1rem 0rem;
-            }
+  .see-more-button {
+    margin: 4rem 0 0;
+    text-align: center;
+  }
+
+  @media screen and (max-width: 600px) {
+    .books-card {
+      display: block;
+      margin: 0.5rem auto;
+      .books-details {
+        overflow: hidden;
+        p {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
+      }
+      .arrow_icon {
+        display: block;
+        min-width: 6rem;
+        margin: auto;
+      }
+      .books-page_link {
+        display: block;
+        color: inherit;
+        padding: 1rem 0rem;
+      }
     }
+  }
 `;
 
 const BooksSection = () => {
   const data = useStaticQuery(
     graphql`
-            query booksList {
-                allMdx(
-                    filter: { fields: { collection: { eq: "service-mesh-books" } }, frontmatter: { published: { eq: true } } }
-                    sort: { fields: [frontmatter___date], order: ASC }
-                    limit: 2
-                ) 
-                {
-                    nodes {
-                        id
-                        frontmatter {
-                            title
-                            author
-                            abstract
-                            thumbnail{
-                                extension
-                                publicURL
-                            }
-                        }
-                        fields {
-                            slug
-                        }
-                    }
-                }
+      query booksList {
+        allMdx(
+          filter: {
+            fields: { collection: { eq: "service-mesh-books" } }
+            frontmatter: { published: { eq: true } }
+          }
+          sort: { fields: [frontmatter___date], order: ASC }
+          limit: 2
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              author
+              abstract
+              thumbnail {
+                extension
+                publicURL
+              }
+            }
+            fields {
+              slug
             }
-        `
+          }
+        }
+      }
+    `
   );
 
   return (
@@ -138,21 +141,32 @@ const BooksSection = () => {
         <div className="books-list">
           {data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
             <div className="books-card" key={id}>
-              <Link className="books-page_link" to={fields.slug} >
+              <Link className="books-page_link" to={fields.slug}>
                 <div className="books-image">
-                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                  <img
+                    src={frontmatter.thumbnail.publicURL}
+                    alt={frontmatter.title}
+                  />
                 </div>
                 <div className="books-details">
                   <h2>{frontmatter.title}</h2>
                   <p>{frontmatter.abstract}</p>
                 </div>
-                <Button secondary title={<FaArrowRight />} className="arrow_icon" />
+                <Button
+                  secondary
+                  title={<FaArrowRight />}
+                  className="arrow_icon"
+                />
               </Link>
             </div>
           ))}
         </div>
         <div className="see-more-button">
-          <Button primary title="Checkout all service mesh books" url="/learn/service-mesh-books" />
+          <Button
+            primary
+            title="Checkout all service mesh books"
+            url="/learn/service-mesh-books"
+          />
         </div>
       </Container>
     </BooksListWrapper>
diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js
index 8be224caf7f8..1f9b6bb0bb9e 100644
--- a/src/sections/Learn/learnpage.style.js
+++ b/src/sections/Learn/learnpage.style.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const LearnPageWrapper = styled.div`
   .page-header-section {
-    height: 30rem;
+    height: 20rem;
     text-align: center;
     background: rgb(71, 126, 150);
     background: linear-gradient(

From 4542d38b90cf23b3f17123a8be81d7d0f2d5eb50 Mon Sep 17 00:00:00 2001
From: Clint George <clintbgeorge@gmail.com>
Date: Wed, 24 Jul 2024 18:54:00 +0530
Subject: [PATCH 3/3] Removed the linting

Signed-off-by: Clint George <clintbgeorge@gmail.com>
---
 .../Learn/LearnPage-Sections/books.js         | 239 ++++++++----------
 src/sections/Learn/learnpage.style.js         |  94 ++++---
 2 files changed, 153 insertions(+), 180 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
index 94f3fa68d538..c95e3414a899 100644
--- a/src/sections/Learn/LearnPage-Sections/books.js
+++ b/src/sections/Learn/LearnPage-Sections/books.js
@@ -7,131 +7,124 @@ import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import styled from "styled-components";
 
 const BooksListWrapper = styled.div`
-  Button:hover {
-    box-shadow: 0 2px 10px ${(props) => props.theme.whiteFourToBlackFour};
-  }
-  .book-heading {
-    text-align: center;
-    // background-color: red;
-    margin: 2.5rem 5vw;
-    color: ${(props) => props.theme.text};
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-  .books-card {
-    display: flex;
-    margin: 1rem auto 2rem auto;
-    padding: 1rem 0;
-    min-height: 15.5rem;
-    max-width: 50.5rem;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
-    .books-image {
-      height: 12rem;
-      margin: auto;
-      text-align: center;
-      filter: brightness(0.9);
-
-      img {
-        max-width: 18rem;
-        height: inherit;
-      }
+    Button:hover {
+      box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour};
     }
-    .books-details {
-      padding: 0 1rem;
-      margin: auto;
-      h2 {
-        margin: 0.5rem 0;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      }
-      p {
-        color: ${(props) => props.theme.text};
+    .book-heading {
+        text-align: center;
+        margin: 2.5rem 5vw;
+        color: ${props => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      }
-    }
-    .arrow_icon {
-      height: 2.5rem;
-      min-width: 2.5rem;
-      margin: auto 0;
-      padding: 0;
-      font-size: 1.25rem;
-      border-radius: 2rem;
-      transition: all 0.2s;
-    }
-    .books-page_link {
-      display: flex;
-      color: inherit;
-      padding: 0 0.75rem;
     }
-    &:hover {
-      box-shadow: 0px 0px 20px ${(props) => props.theme.whiteNineToBlackOne};
-      .arrow_icon {
-        left: 0.2rem;
-        color: white;
-      }
-    }
-  }
-
-  .see-more-button {
-    margin: 4rem 0 0;
-    text-align: center;
-  }
-
-  @media screen and (max-width: 600px) {
     .books-card {
-      display: block;
-      margin: 0.5rem auto;
-      .books-details {
-        overflow: hidden;
-        p {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+        display: flex;
+        margin: 1rem auto 2rem auto;
+        padding: 1rem 0;
+        min-height: 15.5rem;
+        max-width: 50.5rem;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        .books-image {
+            height: 12rem;
+            margin: auto;
+            text-align: center;
+            filter: brightness(0.9);
+            img {
+                max-width: 18rem;
+                height: inherit;
+            }
         }
+        .books-details {
+            padding: 0 1rem;
+            margin: auto;
+            h2 {
+                margin: 0.5rem 0;
+                transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+            }
+            p{
+              color: ${props => props.theme.text};
+              transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+            }
+        }
+        .arrow_icon{
+            height: 2.5rem;
+            min-width: 2.5rem;
+            margin: auto 0;
+            padding: 0;
+            font-size: 1.25rem;
+            border-radius: 2rem;
+            transition: all 0.2s;
+        }
+        .books-page_link {
+            display: flex;
+            color: inherit;
+            padding: 0 0.75rem;
+        }
+        &:hover{
+            box-shadow: 0px 0px 20px ${props => props.theme.whiteNineToBlackOne};
+            .arrow_icon{
+                left: 0.2rem;
+                color: white;
+            }
+        }
+    }
+    .see-more-button {
+        margin: 4rem 0 0;
+        text-align: center;
       }
-      .arrow_icon {
-        display: block;
-        min-width: 6rem;
-        margin: auto;
-      }
-      .books-page_link {
-        display: block;
-        color: inherit;
-        padding: 1rem 0rem;
-      }
+    @media screen and (max-width: 600px) {
+        .books-card {
+            display: block;
+            margin: 0.5rem auto;
+            .books-details {
+                overflow: hidden;
+                p {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+            .arrow_icon{
+                display: block;
+                min-width: 6rem;
+                margin: auto;
+            }
+            .books-page_link {
+                display: block;
+                color: inherit;
+                padding: 1rem 0rem;
+            }
+        }
     }
-  }
 `;
 
 const BooksSection = () => {
   const data = useStaticQuery(
     graphql`
-      query booksList {
-        allMdx(
-          filter: {
-            fields: { collection: { eq: "service-mesh-books" } }
-            frontmatter: { published: { eq: true } }
-          }
-          sort: { fields: [frontmatter___date], order: ASC }
-          limit: 2
-        ) {
-          nodes {
-            id
-            frontmatter {
-              title
-              author
-              abstract
-              thumbnail {
-                extension
-                publicURL
-              }
+            query booksList {
+                allMdx(
+                    filter: { fields: { collection: { eq: "service-mesh-books" } }, frontmatter: { published: { eq: true } } }
+                    sort: { fields: [frontmatter___date], order: ASC }
+                    limit: 2
+                ) 
+                {
+                    nodes {
+                        id
+                        frontmatter {
+                            title
+                            author
+                            abstract
+                            thumbnail{
+                                extension
+                                publicURL
+                            }
+                        }
+                        fields {
+                            slug
+                        }
+                    }
+                }
             }
-            fields {
-              slug
-            }
-          }
-        }
-      }
-    `
+        `
   );
 
   return (
@@ -141,36 +134,24 @@ const BooksSection = () => {
         <div className="books-list">
           {data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
             <div className="books-card" key={id}>
-              <Link className="books-page_link" to={fields.slug}>
+              <Link className="books-page_link" to={fields.slug} >
                 <div className="books-image">
-                  <img
-                    src={frontmatter.thumbnail.publicURL}
-                    alt={frontmatter.title}
-                  />
+                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
                 </div>
                 <div className="books-details">
                   <h2>{frontmatter.title}</h2>
                   <p>{frontmatter.abstract}</p>
                 </div>
-                <Button
-                  secondary
-                  title={<FaArrowRight />}
-                  className="arrow_icon"
-                />
+                <Button secondary title={<FaArrowRight />} className="arrow_icon" />
               </Link>
             </div>
           ))}
         </div>
         <div className="see-more-button">
-          <Button
-            primary
-            title="Checkout all service mesh books"
-            url="/learn/service-mesh-books"
-          />
+          <Button primary title="Checkout all service mesh books" url="/learn/service-mesh-books" />
         </div>
       </Container>
     </BooksListWrapper>
   );
 };
-
-export default BooksSection;
+export default BooksSection;
\ No newline at end of file
diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js
index 1f9b6bb0bb9e..b6d1553fb112 100644
--- a/src/sections/Learn/learnpage.style.js
+++ b/src/sections/Learn/learnpage.style.js
@@ -1,57 +1,49 @@
 import styled from "styled-components";
 
 export const LearnPageWrapper = styled.div`
-  .page-header-section {
-    height: 20rem;
-    text-align: center;
-    background: rgb(71, 126, 150);
-    background: linear-gradient(
-      250deg,
-      rgba(71, 126, 150, 1) 0%,
-      rgba(0, 179, 159, 1) 35%,
-      rgba(60, 73, 79, 1) 100%
-    );
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    h1 {
-      color: white;
-      margin-left: 5vw;
-      margin-right: 5vw;
+    .page-header-section {
+        height: 20rem;
+        text-align: center;
+        background: rgb(71,126,150);
+        background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        h1 {            
+            color: white;
+            margin-left: 5vw;
+            margin-right: 5vw;
+        }
+        h3 {
+            margin-top: 1rem;
+            margin-left: 5rem;
+            margin-right: 5rem;
+            padding-left: 1.2rem;
+            padding-right: 1.2rem;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 300;
+            @media screen and (max-width: 445px) {
+              margin-left: 0;
+              margin-right: 0;
+              font-size: 1.3rem;
+            }
+          }
     }
-    h3 {
-      margin-top: 1rem;
-      margin-left: 5rem;
-      margin-right: 5rem;
-      padding-left: 1.2rem;
-      padding-right: 1.2rem;
-      color: white;
-      font-size: 1.5rem;
-      font-weight: 300;
-      @media screen and (max-width: 445px) {
-        margin-left: 0;
-        margin-right: 0;
-        font-size: 1.3rem;
-      }
+    .join-community{
+        width: 100%;
+        max-width: 100%;
+        height: 28rem;
+        background-position: bottom;
+        @media screen and (min-width: 1800px) {
+            height: 34rem;
+            background-position-y: -56vw;
+        }
     }
-  }
-
-  .join-community {
-    width: 100%;
-    max-width: 100%;
-    height: 28rem;
-    background-position: bottom;
-
-    @media screen and (min-width: 1800px) {
-      height: 34rem;
-      background-position-y: -56vw;
-    }
-  }
-
-  .join-community_text-and_button {
-    p {
-      max-width: 22rem;
+    .join-community_text-and_button{
+        p{
+            max-width: 22rem;
+        }
     }
-  }
-`;
+`;
\ No newline at end of file