clean up fcol-x lefovers from merge

StampyAI · May 26, 2024 · 02a4246 · 02a4246
1 parent 534abab
commit 02a4246
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 57 deletions.
diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
@@ -71,7 +71,7 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
   }
 
   return (
-    <div className="widget-ask fcol-10">
+    <div className="widget-ask col-10">
       {results.length > 0 ? (
         <Button className="full-width suggestion" action={() => handleAsk(results[0].title)}>
           <p className="default">{results[0].title}</p>
@@ -106,8 +106,8 @@ export const WidgetStampy = ({className}: {className?: string}) => {
 
   const stampyUrl = (question: string) => `/chat/?question=${question.trim()}`
   return (
-    <div className={`centered fcol-9 padding-bottom-128 ${className || ''}`}>
-      <div className="fcol-6 padding-bottom-56">
+    <div className={`centered col-9 padding-bottom-128 ${className || ''}`}>
+      <div className="col-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy, our chatbot, any question about AI safety</h2>
       </div>
@@ -169,7 +169,7 @@ const SplashScreen = ({
 }) => (
   <div className="padding-top-40">
     <IconStampyLarge />
-    <div className="fcol-6 padding-bottom-40 padding-top-40">
+    <div className="col-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>
@@ -299,7 +299,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   })
 
   return (
-    <div className="centered fcol-10 height-70">
+    <div className="centered col-10 height-70">
       {history.length === 0 ? (
         <SplashScreen questions={questions} onQuestion={onQuestion} />
       ) : undefined}

diff --git a/app/components/Feedback/Form.tsx b/app/components/Feedback/Form.tsx
@@ -39,7 +39,7 @@ const FeedbackForm = ({onSubmit, onClose, options}: FeedbackFormProps) => {
     <div
       ref={clickCheckerRef}
       onClick={() => setNumClicks((current) => current + 1)}
-      className="fcol-5 feedback-form bordered"
+      className="col-5 feedback-form bordered"
     >
       <span className="black small padding-bottom-32">What was the problem?</span>
       {options?.map((option) => (

diff --git a/app/components/Menu/menuItem.css b/app/components/Menu/menuItem.css
@@ -1,5 +1,6 @@
 .top-menu-link {
   display: flex;
+  white-space: nowrap;
 }
 .top-menu-icon {
   width: var(--spacing-24);

diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css
@@ -5,7 +5,6 @@
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
-  flex-wrap: wrap;
   align-items: center;
 }
 

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
@@ -27,7 +27,7 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="full-width container-search-results bordered fcol-5 container-search-results-mobile">
+      <div className="full-width container-search-results bordered col-5 container-search-results-mobile">
         <div className="search-result">No results found</div>
       </div>
     )

diff --git a/app/root.css b/app/root.css
@@ -43,7 +43,7 @@
   --spacing-104: clamp(56px, 10.6vw, 104px);
   --spacing-128: clamp(56px, 13.8vw, 128px);
   --spacing-192: clamp(80px, 17vw, 192px);
-  --spacing-288: clamp(128px, 25.6vw, 288px);
+  --spacing-288: clamp(128px, 20vw, 288px);
 }
 
 /* CSS Reset */
@@ -373,40 +373,6 @@ h2 {
   width: clamp(0px, 73.33vw, 1344px);
 }
 
-.fcol-2 {
-  flex: 2;
-}
-.fcol-3 {
-  flex: 3;
-}
-.fcol-4 {
-  flex: 4;
-}
-.fcol-5 {
-  flex: 5;
-}
-.fcol-6 {
-  flex: 6;
-}
-.fcol-7 {
-  flex: 7;
-}
-.fcol-8 {
-  flex: 8;
-}
-.fcol-9 {
-  flex: 9;
-}
-.fcol-10 {
-  flex: 10;
-}
-.fcol-11 {
-  flex: 11;
-}
-.fcol-12 {
-  flex: 12;
-}
-
 .full-width {
   width: 100%;
 }
@@ -498,7 +464,7 @@ svg {
 
 /* defines the standard left and right margins */
 .page-body {
-  padding: 0px 13.333vw;
+  padding: 0px var(--spacing-128);
 }
 
 /* all other classes */
@@ -542,20 +508,8 @@ svg {
 /* mobile */
 
 @media (max-width: 780px) {
-  :root {
-    --spacing-24: 16px;
-    --spacing-32: 24px;
-    --spacing-40: 24px;
-    --spacing-56: 24px;
-    --spacing-80: 40px;
-    --spacing-104: 56px;
-    --spacing-128: 56px;
-    --spacing-192: 80px;
-    --spacing-288: 128px;
-  }
-
   .page-body {
-    padding: 0px 6.4vw;
+    padding: 0px var(--spacing-48);
   }
 
   /* typography tags */