fix(ui): replace dead ui.contentstack.com CDN styles with local sources

ui/index.html

@@ -36,19 +36,6 @@
       rel="stylesheet"
     />
 
-    <link rel="stylesheet" href="https://ui.contentstack.com/contentstack.min.css" />
-    <script
-      type="text/javascript"
-      src="https://ui.contentstack.com/bootstrap.min.js"
-      crossorigin="anonymous"
-      async
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://ui.contentstack.com/contentstack.min.js"
-      async
-    ></script>
-
     <style type="text/css">
       .skip-to-main-content-link {
         position: absolute;

ui/package.json

@@ -11,6 +11,7 @@
     "@types/react-redux": "^7.1.33",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "axios": "^1.16.0",
+    "bootstrap": "^5.3.6",
     "final-form": "^4.20.10",
     "html-react-parser": "^4.2.9",
     "jwt-decode": "^4.0.0",

ui/src/App.tsx

@@ -13,6 +13,12 @@ import AppLayout from './components/layout/AppLayout';
 import { useNetworkCheck } from './components/NetworkProvider';
 
 // Styles
+// Grid + utility classes (d-flex, vh-100, row/col-*, spacing). These used to come from
+// https://ui.contentstack.com/contentstack.min.css, which now returns 402. Kept above the
+// venus import so venus's own px-scale classes (.mb-3, .ml-8 ...) keep winning.
+import 'bootstrap/dist/css/bootstrap-grid.min.css';
+import 'bootstrap/dist/css/bootstrap-utilities.min.css';
+import './scss/legacy-cdn-shim.scss';
 import '@contentstack/venus-components/build/main.css';
 import './scss/App.scss';
 

ui/src/scss/legacy-cdn-shim.scss

@@ -0,0 +1,129 @@
+// Rules recovered from https://ui.contentstack.com/contentstack.min.css, the stylesheet
+// index.html used to load until that host was taken down (now HTTP 402, DEPLOYMENT_DISABLED).
+// It was Bootstrap v5.1.3 plus Contentstack's brand layer; the grid/utility half is covered by
+// the local `bootstrap` dependency, but these non-utility rules had no other source. Declarations
+// below are copied verbatim from an archived copy of that file, limited to classes this app
+// actually uses.
+//
+// Load order matters: this must stay above the venus stylesheet, where the CDN <link> used to sit,
+// so venus keeps winning the same conflicts it won before.
+
+@import 'variables';
+
+// Contentstack's spacing scale went past Bootstrap's 0-5.
+.pt-6 {
+  padding-top: 4rem !important;
+}
+
+// The CDN scoped heading colour inside cards, which outranked the plain `h2` rule in App.scss
+// (`color: $color-base-black-base`). Without it, card headings render pure black instead of
+// Contentstack navy.
+.card {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-font-black;
+  }
+}
+
+// Bootstrap's button base, flattened to the values the CDN's brand layer ended up with
+// (font-weight 600 and font-size 1rem override the 700/1.125rem in Bootstrap's own rule).
+// Only one element uses it: the <Link className="btn primary-btn"> on the home page, which
+// wraps a venus <Button>. It contributes nothing but padding around that button and is a
+// reasonable thing to delete from Home separately - restored here so the fix stays visual-neutral.
+.btn {
+  display: inline-block;
+  padding: 0.8125rem 2.1875rem;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+// Global anchor colour. Without this, every link in the app falls back to the
+// browser default (blue + underline) instead of Contentstack purple.
+a,
+.link {
+  text-decoration: none;
+  color: #7c4dff;
+  cursor: pointer;
+}
+
+a:hover,
+a:focus,
+.link:hover,
+.link:focus {
+  color: #7c4dff;
+  text-decoration: underline;
+}
+
+// Typography helpers.
+small,
+.small {
+  font-size: 0.875em;
+}
+
+.body-4 {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.375;
+}
+
+.body-6 {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.3333333333;
+}
+
+// The trailing arrow that slides right on hover. The original pulled it from
+// ui.contentstack.com/icons/default-link.svg; that asset is recovered here as an inline data URI
+// (same approach as AutoVerticalStepper.scss) so nothing external is needed.
+.link-basic-icon {
+  font-weight: 600;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &::after {
+    content: '';
+    background: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.7698%206.0549C11.0767%205.74796%2011.0767%205.2495%2010.7698%204.94256L6.84101%201.01377C6.53407%200.706835%206.0356%200.706835%205.72867%201.01377C5.42173%201.32071%205.42173%201.81917%205.72867%202.12611L8.31921%204.7142H0.785758C0.351136%204.7142%200%205.06534%200%205.49996C0%205.93458%200.351136%206.28572%200.785758%206.28572H8.31676L5.73112%208.87381C5.42419%209.18075%205.42419%209.67921%205.73112%209.98615C6.03806%2010.2931%206.53653%2010.2931%206.84346%209.98615L10.7723%206.05736L10.7698%206.0549Z%22%20fill%3D%22%237C4DFF%22%2F%3E%3C%2Fsvg%3E')
+      no-repeat;
+    width: 14px;
+    height: 14px;
+    position: relative;
+    left: 8px;
+    top: 2px;
+    padding-left: 15px;
+  }
+
+  &:hover::after {
+    left: 12px;
+    transition: all 0.4s ease;
+  }
+
+  &.link-arrow::after {
+    top: 4px;
+  }
+}
+
+.card .link-basic-icon,
+.card .stretched-link {
+  font-weight: 600 !important;
+}