Merge branch 'master' into infinite-scroll

Author: Rajesh-Nagarajan-11

src/collections/integrations/kuma/index.mdx

@@ -320,6 +320,12 @@ components: [
 "colorIcon": "icons/components/mesh-trust/icons/color/mesh-trust-color.svg",
 "whiteIcon": "icons/components/mesh-trust/icons/white/mesh-trust-white.svg",
 "description": "",
+},
+{
+"name": "workload",
+"colorIcon": "icons/components/workload/icons/color/workload-color.svg",
+"whiteIcon": "icons/components/workload/icons/white/workload-white.svg",
+"description": "",
 }]
 featureList: [
   "Lightweight and flexible service mesh",

src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js

@@ -6,9 +6,14 @@ export const WorkshopPageWrapper = styled.div`
 	}
 	.btn-and-status {
 		display: flex;
-		width: 97%;
+		width: 100%;
 		position: absolute;
-		top: 92%;
+		bottom: 0;
+		left: 0;
+		padding: 0.75rem 1rem;
+		align-items: center;
+		box-sizing: border-box;
+		gap: 0.5rem;
 
 		p {
 			color: ${props => props.theme.primaryLightColor};
@@ -54,13 +59,17 @@ export const WorkshopPageWrapper = styled.div`
 		outline: none;
 	}
 
-	.linkAndReadBtns {
+	.left-icons {
 		display: flex;
-		width: 95%;
-		flex-direction: row-reverse;
-		justify-content: space-between;
-		position: absolute;
-		bottom: 0rem;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	a.readmeBtn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-left: auto;
 	}
 
 	.linkAndReadBtns-open {
@@ -106,12 +115,6 @@ export const WorkshopPageWrapper = styled.div`
 		}
 	}
 
-	.externalLink {
-		position: relative;
-		left: 1rem;
-		margin-top: 0.25rem;
-	}
-
 	.text-contents {
 		display: none;
 		width: 100%;
@@ -126,10 +129,6 @@ export const WorkshopPageWrapper = styled.div`
 		padding: 1.5rem;
 	}
 
-	.social-icons {
-		display: flex;
-	}
-
 	.links {
 		display: flex;
 		align-items: center;
@@ -170,6 +169,7 @@ export const WorkshopPageWrapper = styled.div`
 		width: 100%;
 		display: block;
 		height: auto;
+		position: relative;
 		border-radius: 0.3125rem;
 		margin-bottom: 1.25rem;
 		box-shadow: 0rem 0.0625rem 0.3125rem rgba(0, 0, 0, 0.2);

src/sections/Learn/Workshop-grid/index.js

@@ -116,22 +116,19 @@ const WorkshopsPage = () => {
                       </div>
                     </div>
                     <div className={content && ID === id ? "btn-and-status-open" : "btn-and-status"}>
-                      <div className="social-icons">
+                      <div className="left-icons">
                         {frontmatter.slack && frontmatter.status === "delivered" ?
-                          <a href={frontmatter.slack} target = "_blank" rel="noreferrer" className="links">
+                          <a href={frontmatter.slack} target="_blank" rel="noreferrer" className="links">
                             <img src={Slack} alt="Slack"/>
-                                                        Slack
+                            Slack
                           </a> : ""}
+                        <Link to={fields.slug} className="siteLink">
+                          <FaRegWindowMaximize style={{ height: "25px", width: "auto" }} />
+                        </Link>
                       </div>
-                      <div className="linkAndReadBtns">
-                        <div className="expand">
-                          <Link to={fields.slug} className="readmeBtn readmreBtn"> Read More <BsArrowRight className="icon" size={30} /></Link>
-                        </div>
-
-                        <div className="externalLink">
-                          <Link to={fields.slug} className="siteLink"><FaRegWindowMaximize style={{ height: "25px", width: "auto" }} /></Link>
-                        </div>
-                      </div>
+                      <Link to={fields.slug} className="readmeBtn">
+                        Read More <BsArrowRight className="icon" size={30} />
+                      </Link>
                     </div>
                   </div>
                 </Col>