From d56f7d8144ccb8d3f6ec9c8be0e8461931949a3f Mon Sep 17 00:00:00 2001
From: Artur Janas <artur@infracost.io>
Date: Tue, 22 Aug 2023 13:37:53 +0100
Subject: [PATCH] chore: improve styling

---
 .../GlossarySearch/GlossaryCard.css           | 11 ++++------
 .../GlossarySearch/GlossaryCard.tsx           | 14 ++++++-------
 .../GlossarySearch/GlossarySearch.css         |  6 ++++++
 src/components/GlossarySearch/index.tsx       |  6 +++++-
 .../GlossaryTermPage/GlossaryTermPage.css     | 17 ++++++++++------
 .../GlossaryTermPageAside.tsx                 |  8 ++------
 src/components/icons/OpenBookIcon.tsx         | 20 +++++++++++++++++++
 7 files changed, 54 insertions(+), 28 deletions(-)
 create mode 100644 src/components/icons/OpenBookIcon.tsx

diff --git a/src/components/GlossarySearch/GlossaryCard.css b/src/components/GlossarySearch/GlossaryCard.css
index d6507a36..e1c46a88 100644
--- a/src/components/GlossarySearch/GlossaryCard.css
+++ b/src/components/GlossarySearch/GlossaryCard.css
@@ -3,19 +3,19 @@
 .glossary-term__card {
 	display: flex;
 	flex-direction: column;
+	justify-content: space-between;
 	gap: .5rem;
-	padding: 1rem;
+	padding: 1rem 1.5rem;
 	border: 1px solid var(--border-color);
 	border-radius: 8px;
 	transition: all 0.2s ease-in-out;
-	background-color: var(--nu10);
 	border: 1px solid var(--border-light);
 }
 
 
 .glossary-term__card-title {
 	font-size: 1.5rem;
-	margin-bottom: 0;
+	margin-bottom: .5rem;
 	font-weight: bold;
 	display: flex;
 	gap: 0.5rem;
@@ -30,7 +30,7 @@
 }
 
 .glossary-term__card:hover {
-	background-color: #eeeef7;
+	background-color: #fafafa;
 	transform: translateY(-.25rem) scale(1.02);
 }
 
@@ -44,7 +44,6 @@
   background-position: 0 0;
   display: inline;
   transition: .2s ease-in;
-	padding-left: 1.5rem;
 
 }
 
@@ -57,8 +56,6 @@
 	align-items: center;
 	gap: 0.325rem;
 	width: fit-content;
-	padding-left: 1.5rem;
-
 }
 
 .glossary-term__card-link:hover .arrow-icon {
diff --git a/src/components/GlossarySearch/GlossaryCard.tsx b/src/components/GlossarySearch/GlossaryCard.tsx
index 1ed7e320..1ee1a7a3 100644
--- a/src/components/GlossarySearch/GlossaryCard.tsx
+++ b/src/components/GlossarySearch/GlossaryCard.tsx
@@ -2,18 +2,16 @@ import React from 'react';
 import { GlossaryTermType } from './index';
 import './GlossaryCard.css';
 import ArrowIcon from '../icons/ArrowIcon';
-import BookIcon from '../icons/BookIcon';
 
 const GlossaryTerm = ({ term }: { term: GlossaryTermType }) => (
   <div className="glossary-term__card">
-    <div className="glossary-term__card-header">
-      <h2 className="glossary-term__card-title">
-        <BookIcon />
-        {term.termTitle}
-      </h2>
-    </div>
+    <div>
+      <div className="glossary-term__card-header">
+        <h2 className="glossary-term__card-title">{term.termTitle}</h2>
+      </div>
 
-    <div className="glossary-term__card-description">{term.definition}</div>
+      <div className="glossary-term__card-description">{term.definition}</div>
+    </div>
 
     {term.slug && (
       <a
diff --git a/src/components/GlossarySearch/GlossarySearch.css b/src/components/GlossarySearch/GlossarySearch.css
index c7245a7e..6b0cf731 100644
--- a/src/components/GlossarySearch/GlossarySearch.css
+++ b/src/components/GlossarySearch/GlossarySearch.css
@@ -8,6 +8,12 @@
 	justify-content: center;
 }
 
+.glossary-search__intro-container .tagline {
+	display: flex;
+	gap: .5rem;
+	align-items: center;
+}
+
 /* Content */
 .glossary-search__content-wrapper {
 	padding: 4rem 1.5rem;
diff --git a/src/components/GlossarySearch/index.tsx b/src/components/GlossarySearch/index.tsx
index aff03c30..160b2f8f 100644
--- a/src/components/GlossarySearch/index.tsx
+++ b/src/components/GlossarySearch/index.tsx
@@ -5,6 +5,7 @@ import SearchIcon from '../icons/SearchIcon';
 import useSearch from '../utils/UseSearch';
 import GlossaryTerm from './GlossaryCard';
 import Kbd from '../Kbd';
+import OpenBookIcon from '../icons/OpenBookIcon';
 
 type GlossaryPageSection = {
   title: string;
@@ -66,7 +67,10 @@ const GlossarySearch = () => {
     <>
       <div className="intro">
         <div className="container glossary-search__intro-container">
-          <h1 className="tagline">FinOps Glossary</h1>
+          <h1 className="tagline">
+            <OpenBookIcon size={{ width: '24px', height: '24px' }} />
+            FinOps Glossary
+          </h1>
           <div className="finops-glossary__search">
             <input
               value={searchValue.replace(/['"]+/g, '')}
diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css
index d8e61e07..dac76a71 100644
--- a/src/components/GlossaryTermPage/GlossaryTermPage.css
+++ b/src/components/GlossaryTermPage/GlossaryTermPage.css
@@ -2,7 +2,7 @@
 
 .glossary-term__page-container {
 	display: grid;
-	grid-template-columns: 3fr 1fr;
+	grid-template-columns: 2fr 1fr;
 }
 
 .glossary-term__article {	
@@ -15,15 +15,14 @@
 .glossary-term__content {	
 	display: flex;
 	flex-direction: column;
-	gap: 2rem;
+	gap: 1rem;
 	padding: 0 4rem 4rem 0;
 }
 
 .glossary-term__aside {	
 	display: flex;
 	flex-direction: column;
-	padding: 1.5rem;
-	background-color: var(--nu10);
+	padding: 1rem;
 	border: 1px solid var(--border-light);
 	border-radius: 8px;
 	height: fit-content;
@@ -33,19 +32,25 @@
 	display: flex;
 	align-items: baseline;
 	gap: 0.5rem;
+	margin-bottom: 0;
+}
+
+.glossary-term__definition {
+	margin: .4rem 0
 }
 
 
 @media (max-width: 1080px) {
-	.glossary-term__page {
+	.glossary-term__page-container {
 		grid-template-columns: 1fr;
 	}
 	.glossary-term__content {	
-		padding:  1.5rem;
+		padding: 0 1.5rem 1.5rem 1.5rem;
 	}
 	.glossary-term__aside {
 		order: -1;
 		margin: 0;
+		padding-left: 1.5rem;
 	}
 	.glossary-term__content,
 	.glossary-term__aside {
diff --git a/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx
index ac9cf616..738d35ca 100644
--- a/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx
+++ b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import { GlossaryTermType } from '../GlossarySearch';
-import BookIcon from '../icons/BookIcon';
 
 const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => (
   <aside className="glossary-term__aside">
-    <h3 className="glossary-term__header">
-      <BookIcon />
-      Definition
-    </h3>
-    <p>{term.definition}</p>
+    <h3 className="glossary-term__header">{term.termTitle}</h3>
+    <span className="glossary-term__definition">{term.definition}</span>
   </aside>
 );
 
diff --git a/src/components/icons/OpenBookIcon.tsx b/src/components/icons/OpenBookIcon.tsx
new file mode 100644
index 00000000..b158915a
--- /dev/null
+++ b/src/components/icons/OpenBookIcon.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const OpenBookIcon = ({ size }: { size?: { width: string; height: string } }) => (
+  <svg
+    focusable="false"
+    className="book-icon"
+    aria-hidden="true"
+    width={size ? size.width : '16px'}
+    height={size ? size.height : '16px'}
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M19 2L14 6.5V17.5L19 13V2M6.5 5C4.55 5 2.45 5.4 1 6.5V21.16C1 21.41 1.25 21.66 1.5 21.66C1.6 21.66 1.65 21.59 1.75 21.59C3.1 20.94 5.05 20.5 6.5 20.5C8.45 20.5 10.55 20.9 12 22C13.35 21.15 15.8 20.5 17.5 20.5C19.15 20.5 20.85 20.81 22.25 21.56C22.35 21.61 22.4 21.59 22.5 21.59C22.75 21.59 23 21.34 23 21.09V6.5C22.4 6.05 21.75 5.75 21 5.5V19C19.9 18.65 18.7 18.5 17.5 18.5C15.8 18.5 13.35 19.15 12 20V6.5C10.55 5.4 8.45 5 6.5 5Z"
+    ></path>
+  </svg>
+);
+
+export default OpenBookIcon;