Merge pull request #5577 from surajgjadhav/fix/surajgjadhav/5568

fix(5568): Sistent buttons spacing
layer5io · Jul 4, 2024 · 93c0926 · 93c0926
2 parents e3af054 + 692002f
commit 93c0926
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js
@@ -18,11 +18,9 @@ const codes = [
   import { Button } from "@layer5/sistent";
      
   <SistentThemeProvider>
-    <div>
-      <Button variant="contained">Filled</Button>
-      <Button variant="outlined">Outlined</Button>
-      <Button variant="text">Text</Button>
-    </div>
+    <Button variant="contained">Filled</Button>
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="text">Text</Button>
   </SistentThemeProvider>`,
 ];
 
@@ -42,27 +40,47 @@ const SistentAbout = () => {
               <h2>About Sistent</h2>
             </a>
             <p>
-            Sistent is the Layer5 Design System - an open source design system that offers building blocks to create consistent, accessible, and user-friendly interfaces. It's aimed at developers who want to design applications aligned with the same brand and ensure a uniform user experience across different products.
+              Sistent is the Layer5 Design System - an open source design system
+              that offers building blocks to create consistent, accessible, and
+              user-friendly interfaces. It's aimed at developers who want to
+              design applications aligned with the same brand and ensure a
+              uniform user experience across different products.
             </p>
             <p>
-            Sistent leverages Material UI libraries and provides a custom theme on top of it for a consistent look and feel. It includes components, icons, and design tokens that developers can readily integrate into their applications. By using Sistent, developers can save time and effort while maintaining a high-quality user experience throughout Layer5 products.
+              Sistent leverages Material UI libraries and provides a custom
+              theme on top of it for a consistent look and feel. It includes
+              components, icons, and design tokens that developers can readily
+              integrate into their applications. By using Sistent, developers
+              can save time and effort while maintaining a high-quality user
+              experience throughout Layer5 products.
             </p>
             <p>
-              <b>Sistent provides a consistent user experience across Layer5 projects and any frontend software projects that choose to use Sistent, too.</b>
+              <b>
+                Sistent provides a consistent user experience across Layer5
+                projects and any frontend software projects that choose to use
+                Sistent, too.
+              </b>
             </p>
             <p>
-              'Sistent' is a play on words to ensure that we have a <i>consistent</i> theme, components, design tokens, etc across all of the apps that will be using this library. Sistent is a design system that uses the <b>MUI v5 components</b> and a <b>custom theme provider </b> instead of using the default theme from MUI v5.
+              'Sistent' is a play on words to ensure that we have a{" "}
+              <i>consistent</i> theme, components, design tokens, etc across all
+              of the apps that will be using this library. Sistent is a design
+              system that uses the <b>MUI v5 components</b> and a{" "}
+              <b>custom theme provider </b> instead of using the default theme
+              from MUI v5.
             </p>
 
             <p>
-              Sistent is built with Typescript and Reactjs and contains components and a large collection of icons that can be reused across projects. If you’re interested in joining the project (please do!), let us know, and we will  help you get started on contributing.
+              Sistent is built with Typescript and Reactjs and contains
+              components and a large collection of icons that can be reused
+              across projects. If you’re interested in joining the project
+              (please do!), let us know, and we will help you get started on
+              contributing.
             </p>
             <a id="Installation">
               <h2>Installation and Quickstart</h2>
             </a>
-            <p>
-              To install the Sistent NPM package, run:
-            </p>
+            <p>To install the Sistent NPM package, run:</p>
             <div className="showcase">
               <CodeBlock name="installation" code={codes[0]} />
             </div>
@@ -75,11 +93,9 @@ const SistentAbout = () => {
             <div className="showcase">
               <div className="items">
                 <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                  <div>
-                    <Button variant="contained">Filled</Button>
-                    <Button variant="outlined">Outlined</Button>
-                    <Button variant="text">Text</Button>
-                  </div>
+                  <Button variant="contained">Filled</Button>
+                  <Button variant="outlined">Outlined</Button>
+                  <Button variant="text">Text</Button>
                 </SistentThemeProvider>
               </div>
               <CodeBlock name="checkbox" code={codes[1]} />

diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js
@@ -140,11 +140,7 @@ export const ButtonCode = () => {
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <Button
-                  variant="contained"
-                  size="medium"
-                  className="size-button"
-                >
+                <Button variant="contained" size="medium">
                   48px Height
                 </Button>
                 <Button variant="contained" size="large">

diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -810,6 +810,7 @@ const SistentWrapper = styled.div`
       align-items: center;
       justify-content: center;
       padding: 5rem;
+      gap: 1rem;
     }
 
     .show-code {
@@ -821,10 +822,6 @@ const SistentWrapper = styled.div`
       font-size: 0.9rem;
       overflow: auto;
     }
-
-    .size-button {
-      margin-right: 1rem;
-    }
   }
 `;