Refactor use cases page styling and modal layout

- Update modal content styling for better responsiveness - Adjust logo sizing and positioning in use case modals - Prevent horizontal scrolling and improve container layout - Fine-tune spacing and alignment of modal elements
2025-11-04 20:05:50 +00:00 · 2025-02-05 10:52:58 -08:00
parent 8c736f534d
commit bb72274165
3 changed files with 76 additions and 33 deletions
--- a/about/uses.page.tsx
+++ b/about/uses.page.tsx
@@ -7,7 +7,7 @@ import arrow from "../static/js/ecosystem/arrow-animation.json";
 export const frontmatter = {
  seo: {
    title: 'Use Cases & Featured Projects',
-    description: "Here’s how the XRP Ledger is used to power innovative technology across the payments and public blockchain landscape.",
+    description: "Here's how the XRP Ledger is used to power innovative technology across the payments and public blockchain landscape.",
  }
 };

@@ -247,7 +247,7 @@ const cardsData = [
    id: "Edge",
    title: "Edge",
    description:
-      "Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you’re always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry’s best customer support.",
+      "Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you're always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry's best customer support.",
    category_id: "wallet",
    category_name: "Wallet",
    link: "https://edge.app/ripple-wallet/",
@@ -430,7 +430,7 @@ const uses = [
    title: "Infrastructure",
    number: 7,
    description:
-      "Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.",
+      "Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more."
  },

  {
@@ -438,49 +438,49 @@ const uses = [
    title: "Developer Tooling",
    number: 4,
    description:
-      "Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.",
+      "Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality."
  },
  {
    id: "interoperability",
    title: "Interoperability",
    number: 1,
    description:
-      "Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.",
+      "Developers and node operators can build and run custom sidechains while leveraging the XRPL's lean and efficient feature set."
  },
  {
    id: "wallet",
    title: "Wallet",
    number: 4,
    description:
-      "Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.",
+      "Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP."
  },
  {
    id: "nfts",
    title: "NFTs",
    number: 7,
    description:
-      "XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).",
+      "XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs)."
  },
  {
    id: "exchanges",
    title: "Exchanges",
    number: 5,
    description:
-      "Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.",
+      "Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities."
  },
  {
    id: "gaming",
    title: "Gaming",
    number: 4,
    description:
-      "The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.",
+      "The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability."
  },
  {
    id: "security",
    title: "Security",
    number: 1,
    description:
-      "Build services and tools that help prevent and combat fraudulent activity with the XRPL.",
+      "Build services and tools that help prevent and combat fraudulent activity with the XRPL."
  },

  {
@@ -488,7 +488,7 @@ const uses = [
    title: "Payments",
    number: 2,
    description:
-      "Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.",
+      "Leverage the efficiency and speed of the XRP Ledger to move value all over the globe."
  },

  {
@@ -496,7 +496,7 @@ const uses = [
    title: "CBDC",
    number: 1,
    description:
-      "A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).",
+      "A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs)."
  },

  {
@@ -504,7 +504,7 @@ const uses = [
    title: "Sustainability",
    number: 1,
    description:
-      "Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).",
+      "Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs)."
  },

  {
@@ -512,7 +512,7 @@ const uses = [
    title: "Custody",
    number: 2,
    description:
-      "Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.",
+      "Use the XRP Ledger to build crypto custody and securely hold, store and use your assets."
  },
 ];

@@ -601,10 +601,9 @@ export default function Uses() {
  }, [theme]);
  const [modalData, setModalData] = React.useState({
    id: "",
-    src: "",
    title: "",
    description: "",
-    number: "",
+    number: ""
  });
  const { View } = useLottie(options);

@@ -791,7 +790,7 @@ export default function Uses() {
            </ul>
          </section>
          <div
-            className={`modal modal-uses ${displayModal ? "d-block" : ""}`}
+            className={`modal modal-uses ${modalData?.id} ${displayModal ? "d-block" : ""}`}
            id="myModal"
          >
            <div
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
--- a/styles/_use-cases.scss
+++ b/styles/_use-cases.scss
@@ -28,19 +28,31 @@ $custody-logos: "gatehub", "bitgo";
    }
  }
 }
-
+.modal-uses.exchanges{
+.logo-item{
+  max-height: 58px;
+  margin: 5px;
+  width: 145px;
+  height: 28px;
+  max-width: none;
+}
+}
 .modal-content-uses {
+  .carbonland-trust{
+    max-width: 218px;
+  }
  .first-ledger-bot{
-    min-height: 80px !important;
+    min-height: 100px !important;
    position: relative;
    bottom: 20px;
    content: url("../img/uses/first-ledger-bot.svg");
  }
  .orchestra-finance{
+    min-height: 56px !important;
    content: url("../img/uses/orchestra-finance.svg");
  }
  .moai-finance{
-    min-height: 80px !important;
+    min-height: 100px !important;
    position: relative;
    bottom: 20px;
    content: url("../img/uses/moai-finance.svg");
@@ -186,20 +198,24 @@ html.light {
 }

 .modal-content-uses {
+  padding-top: 40px;
  position: relative;
-  /* Add position: relative to modal-content-uses */
  background-color: #232325;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
-  padding: 20px;
+  padding: 40px 20px 20px 20px;
  width: 60% !important;
-  height: 60%;
+  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
-  overflow: scroll;
+  overflow-y: hidden;
+
+  @media only screen and (max-width: 1024px) {
+    overflow-y: auto;
+  }
 }

 .modal-content-uses::before {
@@ -293,10 +309,13 @@ html.light {
  border: 0;
  border-top: 1px solid #ccc;
 }
-
+.logo-item.anchain {
+  height: 34px !important;
+  max-width: 146px !important;
+}
 .threezy-logo {
  margin: 4px;
-  max-height: 38px;
+  max-height: 55px !important;
 }

 .blockforce-logo {
@@ -325,16 +344,29 @@ html.light {
 .bottom-row {
  display: flex;
  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;

  @media only screen and (max-width: 768px) {
-    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 10px;
+    margin-bottom: 0;
  }
 }

+.top-row {
+  margin-bottom: 10px;
+}
+
+.bottom-row {
+  margin-top: 10px;
+}
+
 .logo-item {
-  max-height: 30px;
-  max-width: 130px;
-  margin: 10px 11px;
+  max-height: 45px;
+  max-width: 108px;
+  margin: 5px;
 }

 .close {
@@ -362,10 +394,12 @@ html.light {
  @include media-breakpoint-up(lg) {
    grid-template-columns: repeat(4, 1fr);
  }
+
+  @media (max-width: 1220px) and (min-width: 1024px) {
+    grid-template-columns: repeat(3, 1fr); // Adjust to 3 columns for screens between 1024px and 1220px
+  }
 }

-
-
 .use-case-circle {
  display: flex;
  align-items: center;
@@ -947,3 +981,13 @@ html.light {
    display: block;
  }
 }
+
+body, .landing.page-uses {
+  overflow-x: hidden; // Prevent horizontal scrolling
+}
+
+.container-new {
+  max-width: 100%; // Ensure container does not exceed viewport width
+  padding: 0 15px; // Add padding to ensure content is not flush with the edges
+  box-sizing: border-box; // Include padding in the element's total width
+}