refactor: enhance modal component structure and styling by Souradip121 · Pull Request #6337 · layer5io/layer5

Souradip121 · 2025-03-21T19:17:47Z

Description

This PR fixes #6292

Notes for Reviewers

Signed commits

Yes, I signed my commits.

l5io · 2025-03-21T19:36:07Z

🚀 Preview for commit 00a8240 at: https://67ddbf4b017ffe286b34e41d--layer5.netlify.app

l5io · 2025-03-23T16:47:30Z

🚀 Preview for commit 97afb04 at: https://67e03a9684018c4a5a759f22--layer5.netlify.app

vishalvivekm

@Souradip121
please fix failing Eslist checks
https://github.com/layer5io/layer5/actions/runs/14020899270/job/39252725942?pr=6337

Also add it to agenda items for weekly websites meeting [Monday, 24th March | 5:30 PM IST]
meeting minutes.

Souradip121 · 2025-03-23T18:53:14Z

I am facing issues, I have ran using GATSBY_CPU_COUNT=2 make site and over github codespaces with 16GB RAM, with details as follows

Then after running with command GATSBY_CPU_COUNT=2 make site

I really want to contribute, anyone who can help kindly help I have read both blogs
https://discuss.layer5.io/t/problems-with-setting-up-layer5-for-development/6613
https://discuss.layer5.io/t/problems-with-running-local-development-server-for-layer5-development/6780

l5io · 2025-03-24T20:45:02Z

🚀 Preview for commit 3f70933 at: https://67e1c3f417b1b30e64351e3a--layer5.netlify.app

Souradip121 · 2025-03-25T19:58:28Z

I have updated the PR @vishalvivekm you can check

Souradip121 · 2025-03-27T13:47:45Z

I have added the guidance section, also the getting started containing the import statements are as below

l5io · 2025-03-27T13:55:47Z

🚀 Preview for commit eeb4c0c at: https://67e5584754c6b33a415c1750--layer5.netlify.app

vishalvivekm · 2025-03-31T09:17:28Z

@Souradip121
Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST

adding it as an agenda item to the meeting minutes.

l5io · 2025-03-31T09:30:04Z

🚀 Preview for commit afdca78 at: https://67ea6050f55cc03954f740b8--layer5.netlify.app

vishalvivekm · 2025-03-31T09:53:22Z

+                  <thead>
+                    <tr>
+                      <th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "2px solid #ddd" }}>Prop</th>
+                      <th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "2px solid #ddd" }}>Type</th>
+                      <th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "2px solid #ddd" }}>Default</th>
+                      <th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "2px solid #ddd" }}>Description</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}><code>open</code></td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>boolean</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>false</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>Controls the visibility of the modal</td>
+                    </tr>
+                    <tr>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}><code>closeModal</code></td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>function</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>required</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>Callback function triggered when the modal is closed</td>
+                    </tr>
+                    <tr>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}><code>title</code></td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>string</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>&quot;&quot;</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>Text displayed in the modal header</td>
+                    </tr>
+                    <tr>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}><code>children</code></td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>node</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>required</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>Content to be rendered inside the modal</td>
+                    </tr>
+                    <tr>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}><code>disableBackdropClick</code></td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>boolean</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>false</td>
+                      <td style={{ padding: "8px 12px", borderBottom: "1px solid #ddd" }}>If true, clicking the backdrop will not close the modal</td>


I guess, if we'd be better getting rid of these many repeated inline sytles @Souradip121, thoughts ?

vishalvivekm · 2025-03-31T09:54:22Z

+            </a>
+            <div className="showcase">
+              <div className="table-responsive">
+                <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: "20px" }}>


same here and at any number of places in the changes @Souradip121

vishalvivekm

too many inline styles

l5io · 2025-04-01T07:07:34Z

🚀 Preview for commit d17d351 at: https://67eb9074054f9b7bf013f76d--layer5.netlify.app

Signed-off-by: l5io <ci@layer5.io> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: GARY121github <harshprakash000@gmail.com> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: Lee Calcote <lee.calcote@layer5.io> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: l5io <ci@layer5.io> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: vr-varad <varadgupta21@gmail.com> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: Aditya Raj <adityaraj20112005@gmail.com> This reverts commit 3ea772a. Removed Extra = Appearing Before Email on Lee Calcote’s Bio Page Signed-off-by: Aditya Raj <adityaraj20112005@gmail.com> Signed-off-by: Souradip Pal <souradip1000@gmail.com>

Signed-off-by: vr-varad <varadgupta21@gmail.com> Signed-off-by: Souradip Pal <souradip1000@gmail.com>