Minimizer fix (#1349)

* Add BackgroundWrapper component to use the ada logo in a background. See https://cardano.org/docs/components/background-wrapper/ for details * Adjust size * Fix minimizer issues for BackgroundWrapper
cardano-foundation · Oct 30, 2024 · fd9c28a · fd9c28a
1 parent 11c71db
commit fd9c28a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 105 deletions.
diff --git a/src/components/BackgroundWrapper/index.js b/src/components/BackgroundWrapper/index.js
@@ -12,31 +12,11 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 // while it is usually fine to have a <BoundaryBox as a child of a <BackgroundWrapper>
 
 export default function BackgroundWrapper({ children, backgroundType }) {
-  // Use backgroundType to dynamically change the class for the background
-  let wrapperClassName;
 
-  switch (backgroundType) {
-    case "solidGrey":
-      wrapperClassName = styles.backgroundSolidGrey;
-      break;
-    case "solidBlue":
-      wrapperClassName = styles.backgroundSolidBlue;
-      break;
-    case "zoom":
-      wrapperClassName = styles.backgroundZoom;
-      break;
-    case "gradientDark":
-      wrapperClassName = styles.backgroundGradientDark;
-      break;
-    case "gradientLight":
-      wrapperClassName = styles.backgroundGradientLight;
-      break;
-    case "ada":
-      wrapperClassName = styles.backgroundAda;
-      break;
-    default:
-      wrapperClassName = styles.backgroundNone;
-  }
 
+  // this version of the BackgroundWrapper only uses the ada background
+  // see https://cardano.org/docs/components/background-wrapper for details
+  let wrapperClassName = styles.backgroundAda;
+
   return <div className={wrapperClassName}>{children}</div>;
 }
diff --git a/src/components/BackgroundWrapper/styles.module.css b/src/components/BackgroundWrapper/styles.module.css
@@ -1,84 +1,3 @@
-/** backgroundNone */
-
-.backgroundNone {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-/** backgroundSolidGrey */
-
-.backgroundSolidGrey {
-  background-color: #f5f5f5;
-  /*padding: 20px;*/
-}
-
-[data-theme="dark"] {
-  .backgroundSolidGrey {
-    background-color: #242526;
-  }
-}
-
-/** backgroundSolidBlue */
-
-.backgroundSolidBlue {
-  background-color: #5281f7;
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-[data-theme="dark"] {
-  .backgroundSolidBlue {
-    background-color: #5281f7; /* fixme: darker */
-  }
-}
-
-/** backgroundZoom */
-
-.backgroundZoom {
-  /*background-image: url("/img/hero-header-dots.webp");*/
-  background-size: 500px;
-  background-repeat: no-repeat;
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-[data-theme="dark"] {
-  .backgroundZoom {
-    /*background-image: url("/img/hero-header-dots-dark.webp");*/
-  }
-}
-
-/** backgroundZoomMini */
-
-.backgroundGradientDark {
-  background-image: linear-gradient(315deg, #0133ae, #335cbe);
-}
-
-[data-theme="dark"] {
-  .backgroundGradientDark {
-    background-image: linear-gradient(315deg, #0133ae, #0b1f4f);
-  }
-}
-
-/** backgroundGradientLight */
-
-.backgroundGradientLight {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  background-image: linear-gradient(
-    315deg,
-    rgb(91, 123, 202),
-    rgb(10, 56, 166)
-  );
-}
-
-[data-theme="dark"] {
-  .backgroundGradientLight {
-    background-image: linear-gradient(315deg, rgb(43, 89, 205), rgb(0, 24, 80));
-  }
-}
-
-/** backgroundAda */
 
 .backgroundAda {
   position: relative;