StampyAI · mruwnik · Feb 22, 2024 · Feb 21, 2024
diff --git 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
@@ -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
@@ -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
@@ -7,6 +7,7 @@ type Article = {
   article: TOCItem
   path?: string[]
   current?: string
+  hideChildren?: boolean
 }
 
 const DropdownIcon = ({article, path}: Article) => {
@@ -17,40 +18,44 @@ 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}
       open={path?.includes(article.pageid)}
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>