enhance: make term page white bg

infracost · Aug 10, 2023 · 92bf1c1 · 92bf1c1
1 parent 7c70b4c
commit 92bf1c1
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/src/components/GlossarySearch/GlossaryTerm.css b/src/components/GlossarySearch/GlossaryTerm.css
@@ -66,8 +66,8 @@
 	display: flex;
 	flex-direction: column;
 	padding: 1.5rem;
-	background-color: var(--nu50);
-	border: 1px solid var(--border-color);
+	background-color: var(--nu10);
+	border: 1px solid var(--border-light);
 	border-radius: 8px;
 	height: fit-content;
 }

diff --git a/src/components/GlossaryTerm/GlossaryTermPage.tsx b/src/components/GlossaryTerm/GlossaryTermPage.tsx
@@ -5,7 +5,11 @@ const GlossaryTermPage = ({
 }: {
   children: ReactElement | ReactElement[];
 }) => {
-  return <main className="container glossary-term__page">{children}</main>;
+  return (
+    <main className="white-bg">
+      <div className="glossary-term__page container">{children}</div>
+    </main>
+  );
 };
 
 export default GlossaryTermPage;
diff --git a/src/components/GlossaryTerm/GlossaryTermPageIntro.tsx b/src/components/GlossaryTerm/GlossaryTermPageIntro.tsx
@@ -17,8 +17,10 @@ const GlossaryTermPageIntro = ({
           <h1 className="tagline">{title}</h1>
         </div>
       </div>
-      <div className="container intro__back-button">
-        <BackButton toPath={toPath} toText={toText} />
+      <div className="white-bg">
+        <div className="container intro__back-button">
+          <BackButton toPath={toPath} toText={toText} />
+        </div>
       </div>
     </>
   );

diff --git a/src/css/base.css b/src/css/base.css
@@ -121,6 +121,15 @@ h6 {
 	background-color: var(--nu60);
 }
 
+.white-bg {
+  background-color: white;
+  color: var(--text-color-dark) 
+}
+
+.white-bg h3 {
+  color: var(--text-color-dark) 
+}
+
 .close {
   color: var(--nu-10);
   opacity: 1;

diff --git a/src/css/components.css b/src/css/components.css
@@ -224,8 +224,8 @@ kbd {
 }
 
 .intro__back-button {
-  margin-top: 2rem;
-  margin-bottom: 2rem;  
+  padding-top: 2rem;
+  padding-bottom: 2rem;  
 }
 
 /* USED BY */

diff --git a/src/pages/glossary/finops.tsx b/src/pages/glossary/finops.tsx
@@ -13,7 +13,7 @@ const Finops = () => {
     <PageLayout
       title="FinOps - Infracost Glossary"
       description="What is FinOps in cloud computing?"
-      pageClass="finops default-page-bg"
+      pageClass="finops"
       hideCTA={true}
       noIndex={false}
     >