Merge branch 'master into stampy-redesign

app/components/ArticlesDropdown/index.tsx

@@ -65,8 +65,8 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   )
 
   return hidden ? null : (
-    <div className="articles-dropdown-container bordered fcol-8">
-      <div className="fcol-5 toc">
+    <div className="articles-dropdown-container bordered col-8">
+      <div className="col-5 toc">
         <ArticlesSection
           category={INTRODUCTORY}
           toc={toc}
@@ -78,7 +78,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
           className={mobile ? 'padding-bottom-40' : ''}
         />
       </div>
-      <div className="fcol-4">
+      <div className="col-4">
         {/*sorted right side*/}
         <div className="default-bold">Browse by category</div>
 

app/components/CategoriesNav/Page.tsx

@@ -15,7 +15,7 @@ interface CategoriesPageProps {
 export const CategoriesPage = ({categories}: CategoriesPageProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={'categoriesPage fcol-12'}>
+    <div className={'categoriesPage col-12'}>
       <h1>Categories</h1>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

app/components/Chatbot/index.tsx

@@ -81,7 +81,7 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
   }
 
   return (
-    <div className="widget-ask col-10">
+    <div className="widget-ask fcol-10">
       {results.length > 0 ? (
         <Button className="full-width suggestion" action={() => handleAsk(results[0].title)}>
           {results[0].title}
@@ -116,8 +116,8 @@ export const WidgetStampy = () => {
 
   const stampyUrl = (question: string) => `/chat/?question=${question.trim()}`
   return (
-    <div className="centered col-9 padding-bottom-128">
-      <div className="col-6 padding-bottom-56">
+    <div className="centered fcol-9 padding-bottom-128">
+      <div className="fcol-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy, our chatbot, any question about AI safety</h2>
       </div>
@@ -180,7 +180,7 @@ const SplashScreen = ({
   <>
     <div className="padding-top-40">
       <StampyIcon />
-      <div className="col-6 padding-bottom-40 padding-top-40">
+      <div className="fcol-6 padding-bottom-40 padding-top-40">
         <h2 className="teal-500">Hi there, I'm Stampy.</h2>
         <h2>I can answer your questions about AI Safety</h2>
       </div>
@@ -314,7 +314,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   })
 
   return (
-    <div className="centered col-10 height-70">
+    <div className="centered fcol-10 height-70">
       {history.length === 0 ? (
         <SplashScreen questions={questions} onQuestion={onQuestion} />
       ) : undefined}

app/components/Error/index.tsx

@@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => {
 
 const Error = ({error}: {error?: ErrorType}) => {
   return (
-    <div className={styles.errorContainer + ' fcol-10'}>
+    <div className={styles.errorContainer + ' col-10'}>
       <h1 className="padding-bottom-24">{errorName(error)}</h1>
       {error?.status && <div>{errors[error.status as keyof typeof errors] || ''}</div>}
     </div>

app/components/Footer/index.tsx

@@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
     <div className="footer" key="footer">
       <hr />
       <div className="footer-contents">
-        <div className="fcol-5">
+        <div className="col-5">
           <p className="large-bold teal-500 padding-bottom-16">
             <a href="/">AISafety.info</a>
           </p>
@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
           </div>
         </div>
 
-        <div className="fcol-3 small">
+        <div className="col-3 small">
           <p className="small-bold padding-bottom-16">Get involved</p>
           <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" />
           <Link to="https://github.com/StampyAI/stampy-ui" title="Code" />
           <Link to="https://get_involved.aisafety.info/" title="Write" />
           <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
         </div>
-        <div className="partners small fcol-4">
+        <div className="partners small col-4">
           <p className="small-bold padding-bottom-16">Partner projects</p>
           <Link to="https://www.aisafety.com/" title="AISafety.com" />
           <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />

app/components/SearchResults/Dropdown.tsx

@@ -27,14 +27,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="container-search-results bordered fcol-5 container-search-results-mobile">
+      <div className="container-search-results bordered col-5 container-search-results-mobile">
         <div className="search-result">No results found</div>
       </div>
     )
   }
 
   return (
-    <div className="container-search-results bordered fcol-5 container-search-results-mobile">
+    <div className="container-search-results bordered col-5 container-search-results-mobile">
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />

app/components/icons-generated/PersonInCircle.tsx

@@ -1,5 +1,5 @@
 import type {SVGProps} from 'react'
-const PersonInCircle = (props: SVGProps<SVGSVGElement>) => (
+const SvgPersonInCircle = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={40} height={40} fill="none" {...props}>
     <circle cx={20} cy={20} r={20} fill="#EDFAF9" />
     <path
@@ -10,4 +10,4 @@ const PersonInCircle = (props: SVGProps<SVGSVGElement>) => (
     />
   </svg>
 )
-export default PersonInCircle
+export default SvgPersonInCircle

app/components/icons-generated/index.ts

@@ -39,8 +39,8 @@ export {default as OpenBook} from './OpenBook'
 export {default as Paper} from './Paper'
 export {default as Pencil} from './Pencil'
 export {default as People} from './People'
+export {default as PersonInCircle} from './PersonInCircle'
 export {default as Person} from './Person'
-export {default as Personincircle} from './PersonInCircle'
 export {default as PlaneSend} from './PlaneSend'
 export {default as QuestionMark} from './QuestionMark'
 export {default as Search} from './Search'

app/root.css

@@ -73,7 +73,7 @@ input {
 }
 body {
   margin: auto;
-  max-width: 1600px;
+  max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */
   min-height: 100vh;
 }
 

app/routes/categories.$.tsx

@@ -56,7 +56,7 @@ export default function Tags() {
                       ? 'No pages found'
                       : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
                   </div>
-                  {selectedTag && <ListTable className="fcol-8" elements={selectedTag.questions} />}
+                  {selectedTag && <ListTable className="col-8" elements={selectedTag.questions} />}
                 </article>
               )}
             </>