StampyAI · mruwnik · Feb 17, 2024 · Feb 16, 2024
diff --git a/app/assets/icons/bot.svg b/app/assets/icons/bot.svg
diff --git a/app/components/Article/KeepGoing/index.tsx b/app/components/Article/KeepGoing/index.tsx
@@ -16,7 +16,7 @@ type NextArticleProps = {
 const NextArticle = ({section, next, first}: NextArticleProps) =>
   next && (
     <>
-      <h2>Keep going! &#128073;</h2>
+      <h2 className="padding-bottom-40">Keep going! &#128073;</h2>
       <div className="padding-bottom-24">
         {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} article in{' '}
         {section?.category}
@@ -46,18 +46,24 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
   }
 
   return (
-    <div className="keepGoing">
+    <div>
       {!skipNext && (
         <NextArticle section={section} next={next} first={section?.pageid === pageid} />
       )}
 
       {next && hasRelated && !skipNext && (
-        <div className="padding-bottom-24">Or jump to a related question</div>
+        <div className="padding-bottom-56">Or jump to a related question</div>
       )}
       {hasRelated && !skipNext && (
-        <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />
+        <div className="padding-bottom-40">
+          <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />
+        </div>
+      )}
+      {skipNext && (
+        <div className="padding-bottom-40">
+          <ListTable elements={getArticle(pageid)?.children?.map(formatRelated) || []} />
+        </div>
       )}
-      {skipNext && <ListTable elements={getArticle(pageid)?.children?.map(formatRelated) || []} />}
     </div>
   )
 }

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -1,12 +1,10 @@
 article {
   max-width: 47.43vw;
+  margin: auto;
 }
 
 .article-wrapper {
-  padding-top: var(--spacing-40);
-  margin-left: 5.56vw;
-  margin-right: 13.33vw;
-  gap: 10.69vw;
+  padding: var(--spacing-80);
 }
 
 article .meta {
@@ -35,14 +33,15 @@ article .tags {
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--spacing-8);
+  margin-top: var(--spacing-40);
 }
 
 article .tag {
   display: inline-block;
   background-color: var(--colors-teal-50);
   border-color: var(--colors-teal-100);
   color: var(--colors-teal-500);
-  padding: 0 var(--spacing-8);
+  padding: 0 var(--spacing-16);
 }
 
 article .tag:hover {

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -21,7 +21,7 @@ const ArticleFooter = (question: Question) => {
 
   return (
     !isLoading(question) && (
-      <div className="footer-comtainer">
+      <div className="footer-comtainer padding-bottom-40">
         {date && <div className="grey"> {`Updated ${date}`}</div>}
         <div className="flex-double">
           <Button

diff --git a/app/components/ArticlesNav/menu.css b/app/components/ArticlesNav/menu.css
@@ -10,6 +10,7 @@
   font-size: 16px;
   border-radius: 6px;
   border: 1px solid var(--colors-cool-grey-200);
+  height: fit-content;
   /* max-width: 328px; */
 
   overflow-y: scroll;
@@ -38,20 +39,15 @@
   cursor: pointer;
 }
 .articles-group .dropdown-icon {
-  background-image: url(/assets/arrow.svg);
+  background-image: url(/assets/chevron-right.svg);
   background-repeat: no-repeat;
-  background-position-x: center;
-  padding-right: 16px;
-  background-position-y: center;
-  height: 24px;
-  transform: rotate(270deg);
+  height: var(--spacing-12);
+  margin-left: var(--spacing-8);
+  padding-left: var(--spacing-16);
 }
 .articles-group .article[open] .dropdown-icon {
-  background-position-x: right;
-  padding-right: 16px;
-  background-position-y: center;
-  height: 13px;
-  transform: rotate(0deg);
+  transform: rotate(90deg);
+  margin-top: var(--spacing-4);
 }
 
 .articles-group .article {

diff --git a/app/components/ContentBox/index.tsx b/app/components/ContentBox/index.tsx
@@ -24,7 +24,7 @@ export const ContentBox = ({
   return (
     <div className={`main-container-box-table bordered ${className || ''}`}>
       <div className="content-box-description">
-        <h2>{title}</h2>
+        <h2 className="padding-bottom-32">{title}</h2>
         <Button action={action} className="bordered content-box-table-button teal-500">
           {actionTitle}
         </Button>

diff --git a/app/components/Grid/grid.css b/app/components/Grid/grid.css
@@ -11,7 +11,9 @@
 .grid-item {
   cursor: pointer;
   text-align: left;
-  padding: 32.5px 32px;
+  padding: var(--spacing-32) var(--spacing-32);
+  min-width: var(--spacing-288);
+  min-height: var(--spacing-288);
   text-decoration: none;
 }
 
@@ -29,7 +31,7 @@
 
 .grid {
   display: grid;
-  gap: 50px 50px;
+  gap: var(--spacing-56) var(--spacing-56);
   grid-template-columns: repeat(3, 1fr);
   justify-content: space-around;
 }
diff --git a/app/components/Nav/index.tsx b/app/components/Nav/index.tsx
@@ -1,7 +1,7 @@
 import {Link} from '@remix-run/react'
 import {MenuItem} from '~/components/Menu'
 import OpenBookIcon from '~/components/icons-generated/OpenBook'
-import ChatBoxIcon from '~/components/icons-generated/Chatbot'
+import BotIcon from '~/components/icons-generated/Bot'
 import AISafetyIcon from '~/components/icons-generated/Aisafety'
 import ArticlesDropdown from '~/components/ArticlesDropdown'
 import type {TOCItem} from '~/routes/questions.toc'
@@ -32,7 +32,7 @@ export const Nav = ({toc, categories}: NavProps) => {
           <MenuItem
             primary={true}
             link="https://chat.aisafety.info"
-            icon={<ChatBoxIcon />}
+            icon={<BotIcon />}
             text="Stampy chatbot"
           />
           <li className="top-menu-item">

diff --git a/app/components/Table/listTable.module.css b/app/components/Table/listTable.module.css
@@ -10,6 +10,9 @@
 .entry:hover {
   background-color: var(--colors-teal-50);
 }
+.entry svg {
+  min-width: var(--spacing-16);
+}
 
 .container > .entry:last-child {
   border-bottom: none;

diff --git a/app/components/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx
@@ -40,7 +40,6 @@ export const WidgetStampy = () => {
           />
         </div>
         <div className={'send-button-group'}>
-          <div className={'send-button'} />
           <SendIcon />
         </div>
       </div>

diff --git a/app/components/icons-generated/Bot.tsx b/app/components/icons-generated/Bot.tsx
@@ -1,19 +1,19 @@
 import type {SVGProps} from 'react'
 const SvgBot = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
     <path
-      stroke="#788492"
+      stroke="#1D9089"
       strokeLinecap="square"
       strokeLinejoin="round"
-      d="M2 4.5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5z"
+      d="M3 4.5a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h18a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5z"
     />
-    <path stroke="#788492" strokeLinecap="round" d="M5.5 7.5v1M10.5 7.5v1" />
+    <path stroke="#1D9089" strokeLinecap="round" d="M8 9v2M15.5 9v2" />
     <path
-      fill="#788492"
-      d="m5.146 4.354.354.353L6.207 4l-.353-.354zm-.792-2.208a.5.5 0 1 0-.708.708zm1.5 1.5-1.5-1.5-.708.708 1.5 1.5zM10.854 4.354l-.354.353L9.793 4l.353-.354zm.792-2.208a.5.5 0 0 1 .708.708zm-1.5 1.5 1.5-1.5.708.708-1.5 1.5z"
+      fill="#1D9089"
+      d="M7.646 4.354 8 4.707 8.707 4l-.353-.354zM6.354 1.646a.5.5 0 1 0-.708.708zm2 2-2-2-.708.708 2 2zM16.354 4.354 16 4.707 15.293 4l.353-.354zm1.292-2.708a.5.5 0 0 1 .708.708zm-2 2 2-2 .708.708-2 2z"
     />
-    <circle cx={12} cy={2.5} r={1} fill="#788492" />
-    <circle cx={4} cy={2.5} r={1} fill="#788492" />
+    <circle cx={18} cy={2} r={1} fill="#1D9089" />
+    <circle cx={6} cy={2} r={1} fill="#1D9089" />
   </svg>
 )
 export default SvgBot
diff --git a/app/components/icons-generated/Group.tsx b/app/components/icons-generated/Group.tsx
@@ -1,6 +1,6 @@
 import type {SVGProps} from 'react'
 const SvgGroup = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={539} height={'100%'} fill="none" {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" width={539} height={348} fill="none" {...props}>
     <mask
       id="group_svg__a"
       width={539}
@@ -12,7 +12,7 @@ const SvgGroup = (props: SVGProps<SVGSVGElement>) => (
         maskType: 'alpha',
       }}
     >
-      <path fill="#1A817C" d="M0 0h539v348H0z" />
+      <rect width={539} height="100%" fill="#1A817C" />
     </mask>
     <g mask="url(#group_svg__a)">
       <g filter="url(#group_svg__b)">

diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts
@@ -19,6 +19,7 @@ export {default as Edit} from './Edit'
 export {default as Ellipsis} from './Ellipsis'
 export {default as Flag} from './Flag'
 export {default as Followup} from './Followup'
+export {default as Group} from './Group'
 export {default as GroupTopEcplise} from './GroupTopEcplise'
 export {default as Hide} from './Hide'
 export {default as Like} from './Like'

diff --git a/app/hooks/useToC.tsx b/app/hooks/useToC.tsx
@@ -36,9 +36,9 @@ const useToC = () => {
       next?: TOCItem
     }
     const findNext = (prev: string | undefined, item: TOCItem): NextItem => {
-      if (pageid === prev) return {current: prev, next: item}
+      if (item.hasText && pageid === prev) return {current: prev, next: item}
 
-      let previous: string | undefined = item.pageid
+      let previous: string | undefined = item.hasText ? item.pageid : prev
       for (const child of item.children || []) {
         const {next, current} = findNext(previous, child)
         if (next) return {next, current}

diff --git a/app/routes/$questionId.tsx b/app/routes/$questionId.tsx
@@ -2,7 +2,7 @@ import {Await, useLoaderData, useParams} from '@remix-run/react'
 import {Suspense, useEffect, useState} from 'react'
 import Page from '~/components/Page'
 import {loader} from '~/routes/questions.$questionId'
-import {ArticlesNav, EmtpyArticlesNav} from '~/components/ArticlesNav/Menu'
+import {ArticlesNav} from '~/components/ArticlesNav/Menu'
 import Article from '~/components/Article'
 import Error from '~/components/Error'
 import {fetchGlossary} from '~/routes/questions.glossary'
@@ -37,11 +37,7 @@ export default function RenderArticle() {
   return (
     <Page>
       <div className="flex-container flex-double article-wrapper">
-        {section ? (
-          <ArticlesNav current={pageid} article={section} path={getPath(pageid)} />
-        ) : (
-          <EmtpyArticlesNav />
-        )}
+        {section && <ArticlesNav current={pageid} article={section} path={getPath(pageid)} />}
         <Suspense
           key={pageid}
           fallback={<Article question={dummyQuestion(getArticle(pageid)?.title)} />}

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -42,8 +42,8 @@ export default function App() {
 
         <WidgetStampy />
 
-        <div className="top-margin-large" />
-        <h3 className="grey">Advanced content</h3>
+        <div className="padding-bottom-80" />
+        <h3 className="grey large-bold padding-bottom-32">Advanced content</h3>
         <Grid gridBoxes={toc} />
       </div>
     </Page>