chore: add images

infracost · Aug 23, 2023 · aa0feb3 · aa0feb3
1 parent 0c6f0ee
commit aa0feb3
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 11 deletions.
diff --git a/src/components/GlossarySearch/glossaryTerms.json b/src/components/GlossarySearch/glossaryTerms.json
@@ -451,7 +451,6 @@
   {
     "termTitle": "Chargeback",
     "pageTitle": "Define: Chargeback in FinOps",
-    "imgUrl": "/img/glossary/chargeback.png",
     "slug": "chargeback",
     "definition": "A financial management tool where departments or teams are billed internally for their consumption or use of IT services and resources.",
     "sections": [

diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css
@@ -55,9 +55,16 @@
 	margin-bottom: .5rem;
 }
 
-.glossary-term__def {
+.glossary-term__aside-def {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
 	font-size: smaller;
-	color: var(--faded-text);
+	position: absolute;
+	color: white;
+	bottom: .5rem;
+	left: 1rem;
+	opacity: .5;
 	font-weight: 100;
 }
 

diff --git a/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx
@@ -1,18 +1,24 @@
 import React from 'react';
 import { GlossaryTermType } from '../GlossarySearch';
+import OpenBookIcon from '../icons/OpenBookIcon';
+
+const imgUrlPrefix = '/img/glossary/';
 
 const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => (
   <aside className="glossary-term__aside">
-    {term.imgUrl && (
-      <div>
-        <img className="glossary-term__aside--img" src={term.imgUrl} alt="" />
+    <div className="glossary-term__aside-img-container">
+      <img
+        className="glossary-term__aside-img"
+        src={term.imgUrl ? `${imgUrlPrefix}/${term.imgUrl}` : `${imgUrlPrefix}/generic.png`}
+        alt=""
+      />
+      <div className="glossary-term__aside-def">
+        <OpenBookIcon />
+        <span>Definition</span>
       </div>
-    )}
+    </div>
     <div className="glossary-term__aside-content">
-      <h3 className="glossary-term__header">
-        {term.termTitle}
-        <span className="glossary-term__def">(definition)</span>
-      </h3>
+      <h3 className="glossary-term__header">{term.termTitle}</h3>
       <span className="glossary-term__definition">{term.definition}</span>
     </div>
   </aside>

diff --git a/static/img/glossary/aws.png b/static/img/glossary/aws.png
diff --git a/static/img/glossary/chargeback.png b/static/img/glossary/chargeback.png
diff --git a/static/img/glossary/generic.png b/static/img/glossary/generic.png