Merge branch 'master' into add_max_width

Author: vr-varad

package-lock.json

@@ -42,7 +42,7 @@
     "@mui/icons-material": "^6.4.6",
     "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
-    "@sistent/sistent": "^0.15.6",
+    "@sistent/sistent": "^0.15.7",
     "@svgr/webpack": "^8.0.1",
     "@types/mui-datatables": "^4.3.12",
     "ajv": "^8.17.1",

package.json

@@ -38,7 +38,7 @@ export const getAddOns = (theme) => [
         maxUnits: 5000,
         pricing: [
           { learners: 250, monthlyPerUser: 1.29, yearlyPerUser: 1.05, currency: "$" },
-          { learners: 500, monthlyPerUser: 0.80, yearlyPerUser: 0.67, currency: "$" },
+          { learners: 500, monthlyPerUser: 0.84, yearlyPerUser: 0.67, currency: "$" },
           { learners: 1000, monthlyPerUser: 0.49, yearlyPerUser: 0.49, currency: "$" },
           { learners: 2500, monthlyPerUser: 0.44, yearlyPerUser: 0.44, currency: "$" },
           // { learners: "2500+", monthlyPerUser: "contact us", yearlyPerUser: "contact us", currency: "$" },

src/components/Pricing/PricingAddons/pricingData.js

@@ -18,69 +18,81 @@ export const content = [
   { id: 11, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
   { id: 12, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
 
-  { id: 13, link: "/projects/sistent/components/box", text: "Box" },
-  { id: 14, link: "/projects/sistent/components/box/guidance", text: "Box" },
-  { id: 15, link: "/projects/sistent/components/box/code", text: "Box" },
+  { id: 13, link: "/projects/sistent/components/badge", text: "Badge" },
+  { id: 14, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
+  { id: 15, link: "/projects/sistent/components/badge/code", text: "Badge" },
 
-  { id: 16, link: "/projects/sistent/components/button", text: "Button" },
-  { id: 17, link: "/projects/sistent/components/button/guidance", text: "Button" },
-  { id: 18, link: "/projects/sistent/components/button/code", text: "Button" },
+  { id: 16, link: "/projects/sistent/components/box", text: "Box" },
+  { id: 17, link: "/projects/sistent/components/box/guidance", text: "Box" },
+  { id: 18, link: "/projects/sistent/components/box/code", text: "Box" },
 
-  { id: 19, link: "/projects/sistent/components/button-group", text: "Button Group" },
-  { id: 20, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
-  { id: 21, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
+  { id: 19, link: "/projects/sistent/components/button", text: "Button" },
+  { id: 20, link: "/projects/sistent/components/button/guidance", text: "Button" },
+  { id: 21, link: "/projects/sistent/components/button/code", text: "Button" },
 
-  { id: 22, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 23, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 24, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  { id: 22, link: "/projects/sistent/components/button-group", text: "Button Group" },
+  { id: 23, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
+  { id: 24, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
-  { id: 25, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 26, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 27, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 25, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 26, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 27, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 28, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 28, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 29, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 30, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 29, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 30, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 31, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 31, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 32, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 33, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 32, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 33, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 34, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 34, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 35, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 36, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 37, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 35, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 36, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 37, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 38, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 39, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 40, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 38, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 39, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 40, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 41, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 42, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 43, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 41, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 42, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 43, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 44, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 45, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 46, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 44, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 45, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 46, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 47, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 48, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 49, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 47, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 48, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 49, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 50, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 51, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 52, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 50, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 51, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 52, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 53, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 54, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 55, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 53, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 54, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 55, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 56, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 57, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 58, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 56, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 57, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 58, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 59, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 60, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 61, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 59, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 60, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 61, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+
+  { id: 62, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 63, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 64, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+
+  { id: 63, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 64, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 65, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+
+  { id: 66, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 67, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 68, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 ];

src/components/SistentNavigation/content.js

@@ -122,14 +122,17 @@ export const NewcomersGuideWrapper = styled.section`
     .community-collage {
       text-align: center ;
       min-width: 45vmin;
-      
+      margin-bottom: 1rem;
     }
     .community-img{
       text-align:center;
     }
     .table-wrapper{
       text-align: center;
       margin-bottom: 4rem;
+      h5 {
+        margin-bottom: 2.5rem;
+      }
     }
     .book-container {
     display: flex;
@@ -152,13 +155,14 @@ export const NewcomersGuideWrapper = styled.section`
   }
 
   .book {
-    min-width: 200px;
-    min-height: 300px;
+    width: 200px;
+    height: 300px;
     position: relative;
     transform-style: preserve-3d;
     transform: rotateY(-30deg);
     transition: 1s ease;
     animation: 1s ease 0s 1 initAnimation;
+    overflow: visible;
   }
 
   .book:hover {
@@ -170,10 +174,18 @@ export const NewcomersGuideWrapper = styled.section`
     top: 0;
     left: 0;
     background-color: #171a12;
-    width: 200px;
-    height: 300px;
+    width: 100%;
+    height: 100%;
     transform: translateZ(25px);
     border-radius: 0 2px 2px 0;
+    overflow: visible;
+  }
+  
+  .book > :first-child img {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
   }
 
   .book::before {
@@ -182,7 +194,7 @@ export const NewcomersGuideWrapper = styled.section`
     left: 0;
     top: 3px;
     width: 48px;
-    height: 294px;
+    height: calc(100% - 6px);
     transform: translateX(172px) rotateY(90deg);
     background: linear-gradient(
       90deg,
@@ -215,8 +227,8 @@ export const NewcomersGuideWrapper = styled.section`
     top: 0;
     left: 0;
     content: " ";
-    width: 200px;
-    height: 300px;
+    width: 100%;
+    height: 100%;
     transform: translateZ(-25px);
     background-color: #292929;
     border-radius: 0 2px 2px 0;
@@ -244,7 +256,19 @@ export const NewcomersGuideWrapper = styled.section`
         h2 {
           margin-top: -1.5rem;
         }
+      }  
+      /* For "Explore the Meshery Community" section */
+      .community-collage {
+        order: 2;
+      }
+      /* For "Finding an Issue" section - apply to Col */
+      .col-finding-an-issue {
+        order: 2;
+      }
+      .col-newcomers-form {
+        margin-bottom: 1.5rem;
       }
+  }  
   }
 `;
 

src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js

@@ -1,47 +1,78 @@
 import styled from "styled-components";
 
 export const TutorialsTableWrapper = styled.div`
-  box-shadow:0 2px 16px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   
-  table{
-    display: table;
+  table {
     width: 100%;
-    height: auto;
+    min-width: 600px;
     border-collapse: collapse;
-    margin: 3.75rem auto;
+    margin: 0 auto 2rem auto;
+    
+    @media (max-width: 375px) {
+      margin: 0.5rem auto;
+    }
+    
     th {
       color: white;
+      background-color: ${props => props.theme.secondaryColor};
     }
+    
     th, tr {
-      height: 3.75rem;
+      height: 3rem;
       vertical-align: middle;
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      
+      @media (max-width: 375px) {
+        height: 2.5rem;
+      }
     }
+    
     tr:nth-child(odd) {
       background-color: ${props => props.theme.grey212121ToWhite};
     }
-    th {
-      background-color: ${props => props.theme.secondaryColor};
-    }
+    
     th, td {
       border-bottom: 1px solid #F0F0F0;
       padding: 0 0.625rem;
-      p{
-        margin: 0.5rem 0;
+      
+      @media (max-width: 375px) {
+        padding: 0 0.375rem;
       }
+      
+      p {
+        margin: 0.25rem 0;
+      }
+      
       span {
         display: block;
       }
     }
-    }
-    .newBadge {
+  }
+  
+  .newBadge {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
+    
     img {
       height: 26px;
       width: auto;
+      
+      @media (max-width: 375px) {
+        height: 20px;
+      }
     }
   }
+  
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: ${props => props.theme.secondaryColor};
+    border-radius: 4px;
+  }
 `;

src/sections/Community/Newcomers-guide/Tutorials-table/TutorialsTable.style.js

@@ -82,10 +82,10 @@ const NewcomersGuide = () => {
               <h3>Fill in the Community Member Form</h3>
               <p>Help us get to know you, so that we can highlight projects and initiatives that align with your interests. Fill-in a community member form. Gain access to community resources.</p>
             </Col>
-            <Col $sm={12} $lg={6}>
+            <Col $sm={12} $lg={6} className="col-newcomers-form">
               <Button $primary className="newcomers-form" title="Submit a Member Form" $url="/newcomer" $external={false} />
             </Col>
-            <Col $sm={12} $lg={6}>
+            <Col $sm={12} $lg={6} className="col-finding-an-issue">
               <div className="finding-an-issue">
                 <StaticImage src={CommunityImage2} alt="Five Working Image" />
               </div>