From b1b615b7e1c4f960236d2a4d88b5afa433bd49eb Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Wed, 21 Feb 2024 21:06:09 +0100
Subject: [PATCH] Use vars in css

---
 app/components/Article/article.css           |  7 +--
 app/components/ArticlesDropdown/dropdown.css | 20 ++-----
 app/components/ArticlesDropdown/index.tsx    |  9 +--
 app/components/ArticlesNav/Menu.tsx          | 55 +++++++++----------
 app/components/ArticlesNav/menu.css          | 40 ++------------
 app/components/Button/button.css             | 23 ++++----
 app/components/CategoriesNav/Menu.tsx        |  7 +--
 app/components/ContentBox/box.css            |  2 +-
 app/components/Footer/footer.css             | 44 +--------------
 app/components/Footer/index.tsx              |  2 +-
 app/components/Grid/grid.css                 | 12 +---
 app/components/Grid/index.tsx                |  2 +-
 app/components/Menu/index.tsx                |  2 +-
 app/components/Menu/menuItem.css             |  7 +--
 app/components/Nav/nav.css                   |  2 +-
 app/components/SearchInput/Input.tsx         |  7 +--
 app/components/SearchInput/input.css         | 58 +++-----------------
 app/components/SearchResults/Dropdown.tsx    |  6 +-
 app/components/SearchResults/dropdown.css    | 41 +-------------
 app/components/Table/listTable.module.css    |  8 +--
 app/components/Widget/stampy.css             |  2 +-
 app/components/pageHeaderText.css            | 17 ------
 app/components/pageSubheaderText.css         | 10 ----
 app/newRoot.css                              | 12 ++--
 24 files changed, 97 insertions(+), 298 deletions(-)
 delete mode 100644 app/components/pageHeaderText.css
 delete mode 100644 app/components/pageSubheaderText.css

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index c6dde0c8..3abd0b15 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -72,9 +72,8 @@ article .link-popup {
   font-style: normal;
   font-weight: 300;
   line-height: 170%; /* 30.6px */
-  margin-left: 10px;
   z-index: 2;
-  transform: translate(-20vw, 40px);
+  transform: translate(-20vw, var(--spacing-40));
   transition:
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
@@ -97,8 +96,8 @@ article .defintion {
 }
 article .link-popup .glossary-popup > img {
   width: 100%;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 article .link-popup.shown {
diff --git a/app/components/ArticlesDropdown/dropdown.css b/app/components/ArticlesDropdown/dropdown.css
index ea96c50e..7a9c94fc 100644
--- a/app/components/ArticlesDropdown/dropdown.css
+++ b/app/components/ArticlesDropdown/dropdown.css
@@ -6,29 +6,19 @@
 
 .articles-dropdown-container {
   z-index: 100;
-  position: absolute;
-  padding: 56px;
-
-  background-color: #fff;
-  width: 756px;
   top: 80px;
-  left: 300px;
+  position: absolute;
+  padding: var(--spacing-56);
   justify-content: space-between;
   display: flex;
 
   transition: visibility 0.2s;
   visibility: hidden;
 }
+
 .articles-dropdown-title.top-margin-large {
-  margin-top: 56px;
+  margin-top: var(--spacing-56);
 }
 .articles-dropdown-entry {
-  margin: 12px 0;
-}
-.articles-dropdown-teal-entry {
-  color: var(--colors-teal-500);
-}
-.dropdown-button {
-  padding: 7px 17px;
-  font-size: 16px;
+  margin: var(--spacing-12) 0;
 }
diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx
index 2e1efefd..5e6e5fd7 100644
--- a/app/components/ArticlesDropdown/index.tsx
+++ b/app/components/ArticlesDropdown/index.tsx
@@ -49,7 +49,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   )
 
   return shown ? null : (
-    <div className="articles-dropdown-container bordered">
+    <div className="articles-dropdown-container bordered col-8">
       <div>
         <ArticlesSection category={INTRODUCTORY} toc={toc} className="padding-bottom-32" />
         <ArticlesSection category={ADVANCED} toc={toc} />
@@ -63,12 +63,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
           ?.sort(sortFuncs['by number of questions'])
           .slice(0, 12)
           .map((tag) => (
-            <Link
-              key={tag.rowId}
-              className="articles-dropdown-teal-entry"
-              to={tagUrl(tag)}
-              text={tag.name}
-            />
+            <Link key={tag.rowId} className="teal-500" to={tagUrl(tag)} text={tag.name} />
           ))}
 
         <Button action={tagsUrl()} className="secondary">
diff --git a/app/components/ArticlesNav/Menu.tsx b/app/components/ArticlesNav/Menu.tsx
index ed793984..d9a06850 100644
--- a/app/components/ArticlesNav/Menu.tsx
+++ b/app/components/ArticlesNav/Menu.tsx
@@ -7,6 +7,7 @@ type Article = {
   article: TOCItem
   path?: string[]
   current?: string
+  hideChildren?: boolean
 }
 
 const DropdownIcon = ({article, path}: Article) => {
@@ -17,28 +18,30 @@ const DropdownIcon = ({article, path}: Article) => {
 }
 
 const Title = ({article, path, current}: Article) => {
-  const selectedClass = article?.pageid === current ? ' selected' : ''
-  if (article.pageid === (path && path[0])) {
-    return (
-      <Link to={questionUrl(article)}>
-        <div className={'article' + selectedClass}>
-          <div className="articles-headerLine">{article?.title}</div>
-        </div>
-      </Link>
-    )
-  }
+  const isHeader = article.pageid === (path && path[0])
+  const classes = [
+    isHeader && 'small-bold',
+    isHeader && 'header',
+    article?.pageid === current && 'selected',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   return (
-    <summary className={'articles-title' + selectedClass}>
+    <summary className={'articles-title ' + classes}>
       {!article.hasText ? article.title : <Link to={questionUrl(article)}>{article.title}</Link>}
-      <DropdownIcon article={article} path={path} />
+      {!isHeader && <DropdownIcon article={article} path={path} />}
     </summary>
   )
 }
 
-const ArticleLevel = ({article, path, current}: Article) => {
+const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
   if (!article.hasText && (!article.children || article.children.length === 0)) return null
-  const isParentClass =
-    article.pageid !== current && (path || []).includes(article.pageid) ? ' parent' : ''
+
+  const currentPage = article.pageid === current
+  const isParent = (path || []).includes(article.pageid)
+  const isParentClass = !hideChildren && !currentPage && isParent ? ' parent' : ''
+
   return (
     <details
       key={article.pageid}
@@ -46,11 +49,13 @@ const ArticleLevel = ({article, path, current}: Article) => {
       className={'article' + isParentClass}
     >
       <Title article={article} path={path} current={current} />
-      <div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
-        {article.children?.map((child) => (
-          <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
-        ))}
-      </div>
+      {!hideChildren && (
+        <div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
+          {article.children?.map((child) => (
+            <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
+          ))}
+        </div>
+      )}
     </details>
   )
 }
@@ -59,10 +64,8 @@ export const ArticlesNav = ({article, path}: Article) => {
   const current = path ? path[path.length - 1] : ''
 
   return (
-    <div className="articles-group">
-      {/* Section Header */}
-      <Title article={article} path={path} current={current} />
-
+    <div className="articles-group col-4-5 bordered small">
+      <ArticleLevel article={article} path={path} current={current} hideChildren />
       <hr />
 
       {article.children?.map((item) => (
@@ -71,7 +74,3 @@ export const ArticlesNav = ({article, path}: Article) => {
     </div>
   )
 }
-
-export const EmtpyArticlesNav = () => {
-  return <div className="articles-group empty"></div>
-}
diff --git a/app/components/ArticlesNav/menu.css b/app/components/ArticlesNav/menu.css
index 92d4149c..5ae65e72 100644
--- a/app/components/ArticlesNav/menu.css
+++ b/app/components/ArticlesNav/menu.css
@@ -2,40 +2,17 @@
   display: none;
 }
 .articles-group {
+  height: fit-content;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-  width: 22.78vw;
-  position: relative;
-  text-align: left;
-  font-size: 16px;
-  border-radius: 6px;
-  border: 1px solid var(--colors-cool-grey-200);
-  height: fit-content;
-  /* max-width: 328px; */
-
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
-.articles-group.empty {
-  border-color: transparent;
-}
-
-.articles-headerLine {
-  font-weight: 600;
-  margin: 8px 0px;
-  padding: 8px 0px 8px 14px; /* top, right, bottom, left */
-}
-
 .articles-title {
-  position: relative;
-  font-size: 16px;
-  letter-spacing: -0.01em;
-  color: var(--text-black);
-  text-align: left;
   display: inline-flex;
   align-items: center;
-  padding: 8px 10px 8px 24px;
+  padding: var(--spacing-8);
   cursor: pointer;
 }
 .articles-group .dropdown-icon {
@@ -54,28 +31,23 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  /*gap: 8px;*/
   align-items: flex-start;
-  margin: 5px;
+  margin: var(--spacing-8);
   position: relative;
   cursor: pointer;
-  /* margin-right: 30px; */
 }
 
 .articles-dropdown {
-  padding-left: 48px;
+  padding-left: var(--spacing-40);
 }
 
-.articles-group .selected {
-  background-color: rgba(237.0000010728836, 250.00000029802322, 249.00000035762787, 1);
-}
 .articles-group .parent::before {
   content: ' ';
   background-image: url(/assets/green-dot.svg);
   background-repeat: no-repeat;
-  width: 31px;
+  width: var(--spacing-32);
   height: 8px;
   position: relative;
   top: 25px;
-  margin-left: -5px;
+  left: -5px;
 }
diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index 7283174b..3e440a9d 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -2,12 +2,12 @@
   cursor: pointer;
   display: inline-flex;
   height: var(--spacing-56, 56px);
-  padding: 7px 21px;
+  padding: var(--spacing-8) var(--spacing-24);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, 4px);
-  box-shadow: 0px 16px 40px 0px rgba(32, 44, 89, 0.05);
-  border-radius: 6px;
+  box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(32, 44, 89, 0.05);
+  border-radius: var(--border-radius);
   box-sizing: border-box;
 }
 
@@ -52,7 +52,7 @@
 
 /* #### Composite button #### */
 .composite-button {
-  box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
+  box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(175, 183, 194, 0.2);
 }
 
 .composite-button > form .button,
@@ -66,16 +66,16 @@
 
 .composite-button > form:first-child .button,
 .composite-button > .button:first-child {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
   border-left-width: 1px;
   border-right: 1px solid transparent;
 }
 
 .composite-button > form:last-child .button,
 .composite-button > .button:last-child {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
   border-right-width: 1px;
   border-left: 1px solid transparent;
 }
@@ -95,14 +95,13 @@
   content: attr(data-tooltip);
   position: absolute;
   transform: translateY(var(--spacing-56, 56px));
-  padding: 5px;
+  padding: var(--spacing-4);
   color: var(--colors-white);
-  background: var(--text-black);
-  background: #333;
+  background: var(--colors-black);
   border-radius: 5px;
   display: none;
   z-index: 1;
-  font-size: 16px;
+  font-size: 16px; /* hard to set via classes, what with this being a pseudoclass */
 }
 
 .tooltip:hover::after {
diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
index 2839a0fb..2308e0ed 100644
--- a/app/components/CategoriesNav/Menu.tsx
+++ b/app/components/CategoriesNav/Menu.tsx
@@ -30,10 +30,9 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
           <Link
             key={tagId}
             to={tagUrl({tagId, name})}
-            className={[
-              styles.categoryTitle,
-              activeCategoryId == tagId ? 'teal-50-background' : '',
-            ].join(' ')}
+            className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
+              ' '
+            )}
           >
             {name} ({questions.length})
           </Link>
diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css
index 42f998c1..df97e00f 100644
--- a/app/components/ContentBox/box.css
+++ b/app/components/ContentBox/box.css
@@ -8,7 +8,7 @@
   padding: var(--spacing-8) var(--spacing-24);
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-4);
 }
 
 .eclipse-team-bottom {
diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
index 96e4b05e..8c19b55e 100644
--- a/app/components/Footer/footer.css
+++ b/app/components/Footer/footer.css
@@ -1,50 +1,12 @@
 .footer {
-  margin-top: 104px;
+  margin-top: var(--spacing-104);
 }
 
-.footer-icon {
-  position: absolute;
-  top: 231px;
-  left: 748px;
-  width: 12px;
-  height: 12px;
-  object-fit: contain;
-}
-
-.footer-description {
-  top: 154px;
-  left: 192px;
-  display: inline-block;
-  max-width: 403px;
-}
-
-.footer-ecosystem {
-  margin: 0;
-}
-
-.footer-box {
-  position: absolute;
-  height: 14.16%;
-  width: 19.44%;
-  top: 35.16%;
-  left: 65.21%;
-  letter-spacing: -0.01em;
-  display: inline-block;
-}
-
-.footer-volunteers {
-  height: 12.33%;
-  top: 35.16%;
-  left: 45.76%;
-  letter-spacing: -0.01em;
-  display: inline-block;
-}
-
-.footer-grid {
+.footer-contents {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: baseline;
-  margin: 104px 13.33vw 80px 13.33vw;
+  margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw;
 }
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index 8f8dd22e..715aad13 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -15,7 +15,7 @@ export const FooterBar: FunctionComponent = () => {
   return (
     <div className="footer" key="footer">
       <hr />
-      <div className="footer-grid">
+      <div className="footer-contents">
         <div className="col-5">
           <p className="large-bold teal-500">
             <a href="/">AISafety.info</a>
diff --git a/app/components/Grid/grid.css b/app/components/Grid/grid.css
index c747ffc2..656e3fd1 100644
--- a/app/components/Grid/grid.css
+++ b/app/components/Grid/grid.css
@@ -1,13 +1,3 @@
-.grid-description {
-  letter-spacing: -0.01em;
-}
-.grid-title {
-  font-size: 22px;
-  letter-spacing: -0.02em;
-  line-height: 150%;
-  font-weight: 600;
-}
-
 .grid-item {
   cursor: pointer;
   text-align: left;
@@ -26,7 +16,7 @@
 }
 
 .grid-item div {
-  padding: 8px;
+  padding: var(--spacing-8);
 }
 
 .grid {
diff --git a/app/components/Grid/index.tsx b/app/components/Grid/index.tsx
index 1170fda0..9360b3a9 100644
--- a/app/components/Grid/index.tsx
+++ b/app/components/Grid/index.tsx
@@ -5,7 +5,7 @@ import './grid.css'
 export const GridBox = ({title, subtitle, icon, pageid}: TOCItem) => (
   <a href={questionUrl({title, pageid})} className="grid-item bordered">
     {icon && <img alt={title} width="72" height="72" src={icon} />}
-    <div className="grid-title">{title}</div>
+    <h3>{title}</h3>
     <div className="grid-description grey">{subtitle}</div>
   </a>
 )
diff --git a/app/components/Menu/index.tsx b/app/components/Menu/index.tsx
index deca8855..233e0124 100644
--- a/app/components/Menu/index.tsx
+++ b/app/components/Menu/index.tsx
@@ -34,7 +34,7 @@ export const MenuItem = ({
           )
         ) : null}
 
-        <span className={['top-menu-text', primary ? '' : 'secondary'].join(' ')}>{text}</span>
+        <span className={['top-menu-text', primary ? '' : 'teal-500'].join(' ')}>{text}</span>
       </Link>
     </li>
   )
diff --git a/app/components/Menu/menuItem.css b/app/components/Menu/menuItem.css
index f5c369be..96afb55b 100644
--- a/app/components/Menu/menuItem.css
+++ b/app/components/Menu/menuItem.css
@@ -2,15 +2,12 @@
   display: flex;
 }
 .top-menu-icon {
-  width: 24px;
+  width: var(--spacing-24);
   max-width: 100%;
   aspect-ratio: 1;
   object-fit: contain;
   object-position: center;
 }
 .top-menu-text {
-  margin-left: 8px;
-}
-.top-menu-text.secondary {
-  color: var(--colors-teal-500);
+  margin-left: var(--spacing-8);
 }
diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css
index eae95f89..89127b9c 100644
--- a/app/components/Nav/nav.css
+++ b/app/components/Nav/nav.css
@@ -28,7 +28,7 @@
 }
 
 .top-menu svg {
-  width: 24px;
+  width: var(--spacing-24);
   max-width: 100%;
   aspect-ratio: 1;
   object-fit: contain;
diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
index 3f27e18e..f686ba92 100644
--- a/app/components/SearchInput/Input.tsx
+++ b/app/components/SearchInput/Input.tsx
@@ -30,9 +30,8 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
   const clear = () => handleSearch('')
 
   return (
-    <div className={`search-box ${expandable ? 'expandable' : ''}`}>
-      <div className="search-inputChild" />
-      <label className="search-content">
+    <div className={`search-box bordered ${expandable ? 'expandable' : ''}`}>
+      <div className="search-content">
         <MagnifyingIcon className="iconsMagnifyingGlass" />
         <input
           name="searchbar"
@@ -47,7 +46,7 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
           value={search}
         />
         {search !== '' && <XIcon className="x-icon" onClick={clear} />}
-      </label>
+      </div>
     </div>
   )
 }
diff --git a/app/components/SearchInput/input.css b/app/components/SearchInput/input.css
index f01c7a45..b2ef14b6 100644
--- a/app/components/SearchInput/input.css
+++ b/app/components/SearchInput/input.css
@@ -1,75 +1,33 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
-
-.iconsMagnifyingGlass {
-  width: 16px;
-  position: relative;
-  height: 16px;
-}
-
 .search-box:focus-within {
   border: 1px solid var(--colors-teal-500);
   box-sizing: border-box;
-  border-radius: 6px;
+  border-radius: var(--border-radius);
+}
+.search-box.expandable:focus-within {
+  width: 21.46vw;
 }
 
 .search-box {
-  flex-grow: 1;
   position: relative;
   height: 48px;
-  text-align: left;
-  font-size: 16px;
-  color: var(--colors-cool-grey-600);
-  width: 100%;
   transition: width 100ms;
 }
 
 .search-box.expandable {
-  width: 256px;
-}
-
-.search-box.expandable:focus-within {
-  width: 384px;
+  width: var(--spacing-288);
 }
 
-.search-inputChild {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
-  border: 1px solid var(--colors-cool-grey-200);
-  box-sizing: border-box;
-}
 .search-content {
-  position: relative;
-  top: calc(50% - 13px);
-  padding-left: 12px;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
+  gap: var(--spacing-8);
+  margin: var(--spacing-8);
 }
 .search-input {
-  position: relative;
-  letter-spacing: -0.01em;
-  width: calc(100% - 62px);
+  width: 100%;
   border: 0;
-  text-align: left;
 }
 .search-input:focus-visible {
   border: 0;
   outline: none;
 }
-
-.x-icon {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  right: 10px;
-}
diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
index 18356409..46e69762 100644
--- a/app/components/SearchResults/Dropdown.tsx
+++ b/app/components/SearchResults/Dropdown.tsx
@@ -25,19 +25,19 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="container-search-results">
+      <div className="container-search-results bordered col-5">
         <div className="search-result">No results found</div>
       </div>
     )
   }
 
   return (
-    <div className="container-search-results">
+    <div className="container-search-results bordered col-5">
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />
           <div className="search-result-content">
-            <div className="search-result-title">{result.title}</div>
+            <h5 className="search-result-title">{result.title}</h5>
             <div className="search-result-description">{result.description}</div>
             <div className="search-result-source">{result.source}</div>
           </div>
diff --git a/app/components/SearchResults/dropdown.css b/app/components/SearchResults/dropdown.css
index 4f00ffe0..14572392 100644
--- a/app/components/SearchResults/dropdown.css
+++ b/app/components/SearchResults/dropdown.css
@@ -1,17 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
-
 .container-search-results {
   position: absolute;
   z-index: 2;
-  text-align: left;
-  font-size: 14px;
-  color: var(--text-black);
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
-  border: 1px solid var(--colors-cool-grey-200);
-  box-sizing: border-box;
-  width: 26.458vw;
   height: 100%;
 }
 
@@ -20,36 +9,12 @@
   flex-direction: row;
   flex-wrap: nowrap;
   border-top: 1px solid var(--colors-cool-grey-200);
-  padding: 32px;
-  gap: 16px;
-  text-decoration: none;
+  padding: var(--spacing-32);
+  gap: var(--spacing-16);
 }
 .search-result:hover {
   background-color: var(--colors-teal-50);
 }
 .search-result svg {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-top: 3px;
-}
-.search-result-title {
-  font-size: 14px;
-  letter-spacing: -0.01em;
-  font-weight: 600;
-  color: var(--text-black);
-  text-align: left;
-  cursor: pointer;
-}
-.search-result-description {
-  font-size: 14px;
-  letter-spacing: -0.01em;
-  color: var(--text-black);
-  text-align: left;
-}
-.search-result-source {
-  font-size: 14px;
-  letter-spacing: -0.01em;
-  color: var(--colors-cool-grey-600);
-  text-align: left;
+  margin-top: var(--spacing-4);
 }
diff --git a/app/components/Table/listTable.module.css b/app/components/Table/listTable.module.css
index 2d87ee97..ae0d4b01 100644
--- a/app/components/Table/listTable.module.css
+++ b/app/components/Table/listTable.module.css
@@ -16,11 +16,11 @@
 
 .container > .entry:last-child {
   border-bottom: none;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .container > .entry:first-child {
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
diff --git a/app/components/Widget/stampy.css b/app/components/Widget/stampy.css
index fea5eb04..33a38589 100644
--- a/app/components/Widget/stampy.css
+++ b/app/components/Widget/stampy.css
@@ -17,7 +17,7 @@
 .widget-ask input {
   display: inline-flex;
   height: var(--spacing-56, 56px);
-  padding: 7px 21px;
+  padding: var(--spacing-8) var(--spacing-24);
 }
 .widget-ask svg {
   position: absolute;
diff --git a/app/components/pageHeaderText.css b/app/components/pageHeaderText.css
deleted file mode 100644
index 4b9c3460..00000000
--- a/app/components/pageHeaderText.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
-
-.container-page-title {
-  position: relative;
-  font-size: 64px;
-  letter-spacing: -0.02em;
-  line-height: 125%;
-  font-weight: 600;
-  color: var(--text-black);
-  text-align: left;
-  display: inline-block;
-  width: 770px;
-  margin-top: 40px;
-}
-.container-page-title p {
-  margin: 0;
-}
diff --git a/app/components/pageSubheaderText.css b/app/components/pageSubheaderText.css
deleted file mode 100644
index 0825e221..00000000
--- a/app/components/pageSubheaderText.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
-.container-page-subtitle {
-  position: relative;
-  font-size: 22px;
-  letter-spacing: -0.02em;
-  line-height: 155%;
-  font-weight: 600;
-  color: var(--colors-cool-grey-600);
-  text-align: left;
-}
diff --git a/app/newRoot.css b/app/newRoot.css
index fed4531d..ae9c9d24 100644
--- a/app/newRoot.css
+++ b/app/newRoot.css
@@ -28,6 +28,7 @@
   --colors-green-500: #40c075;
 
   /* spacing */
+  --border-radius: 6px;
   --spacing-4: 4px;
   --spacing-8: 8px;
   --spacing-12: 12px;
@@ -158,7 +159,7 @@ h2 {
   color: var(--colors-teal-200);
 }
 
-.teal-50-background {
+.selected {
   background: var(--colors-teal-50);
 }
 
@@ -280,6 +281,7 @@ a:not(:hover, :focus-visible) {
 
 hr {
   border: 1px solid var(--colors-cool-grey-200);
+  border-bottom: 0;
   margin: 0;
 }
 
@@ -315,15 +317,15 @@ ul {
 
 /* all other classes */
 .rounded {
-  border-radius: 6px;
-  box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
+  border-radius: var(--border-radius);
+  box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2);
   box-sizing: border-box;
 }
 
 .bordered {
-  border-radius: 6px;
+  border-radius: var(--border-radius);
   background-color: #fff;
-  box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
+  box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2);
   border: 1px solid var(--colors-cool-grey-200);
   box-sizing: border-box;
 }