chore: improve styling

infracost · Aug 22, 2023 · d56f7d8 · d56f7d8
1 parent 5b3e762
commit d56f7d8
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;