From 2b5c38dc7cc6f241f2561c560c913ff711650bca 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

---
 src/components/GlossarySearch/GlossaryCard.css  | 11 ++++-------
 src/components/GlossarySearch/GlossaryCard.tsx  | 14 ++++++--------
 .../GlossaryTermPage/GlossaryTermPage.css       | 17 +++++++++++------
 .../GlossaryTermPage/GlossaryTermPageAside.tsx  |  8 ++------
 4 files changed, 23 insertions(+), 27 deletions(-)

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/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>
 );