enhance: make term page white bg

infracost · Aug 10, 2023 · 126da79 · 126da79
1 parent 7c70b4c
commit 126da79
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 24 deletions.
diff --git a/src/components/GlossarySearch/GlossarySearch.tsx b/src/components/GlossarySearch/GlossarySearch.tsx
@@ -79,22 +79,24 @@ const GlossarySearch = () => {
           </div>
         </div>
       </div>
-      <div className="container glossary-search__content-wrapper">
-        {results.length > 0 ? (
-          <div className="glossary-search__content-list">
-            {sortTermsAlphabetically(results).map((term) => (
-              <React.Fragment key={term.key}>
-                <GlossaryTerm term={term} />
-              </React.Fragment>
-            ))}
-          </div>
-        ) : (
-          <div>
-            <p className="finops-glossary__search-no-results">
-              No results found for <strong>{searchValue}</strong>
-            </p>
-          </div>
-        )}
+      <div className="white-bg">
+        <div className="container glossary-search__content-wrapper">
+          {results.length > 0 ? (
+            <div className="glossary-search__content-list">
+              {sortTermsAlphabetically(results).map((term) => (
+                <React.Fragment key={term.key}>
+                  <GlossaryTerm term={term} />
+                </React.Fragment>
+              ))}
+            </div>
+          ) : (
+            <div>
+              <p className="finops-glossary__search-no-results">
+                No results found for <strong>{searchValue}</strong>
+              </p>
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

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}
     >