Replace most single rule emotion usages w/ global atomic css classes

crosshare-org · Apr 19, 2024 · c8eb03a · c8eb03a
1 parent 1fd840f
commit c8eb03a
Show file tree

Hide file tree

Showing 62 changed files with 484 additions and 404 deletions.
diff --git a/app/components/AlternateSolutionEditor.module.css b/app/components/AlternateSolutionEditor.module.css
@@ -0,0 +1,24 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.main {
+  flex: 1 1 auto;
+  overflow: scroll;
+  position: relative;
+}
+
+.container {
+  outline: none;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  flex-wrap: nowrap;
+  container-type: size;
+}
diff --git a/app/components/AlternateSolutionEditor.tsx b/app/components/AlternateSolutionEditor.tsx
@@ -40,6 +40,7 @@ import { isSome } from 'fp-ts/lib/Option';
 import { GridView } from './Grid';
 import { logAsyncErrors } from '../lib/utils';
 import { isTextInput } from '../lib/domUtils';
+import styles from './AlternateSolutionEditor.module.css';
 
 export function AlternateSolutionEditor(props: {
   grid: string[];
@@ -224,40 +225,21 @@ export function AlternateSolutionEditor(props: {
 
   return (
     <>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-        }}
-      >
-        <div css={{ flex: 'none' }}>
+      <div className={styles.page}>
+        <div className="flexNone">
           <TopBar>{topBarChildren}</TopBar>
         </div>
-        <div
-          css={{ flex: '1 1 auto', overflow: 'scroll', position: 'relative' }}
-        >
+        <div className={styles.main}>
           <div
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
-            css={{
-              outline: 'none',
-              display: 'flex',
-              flex: '1 1 auto',
-              flexDirection: 'column',
-              alignItems: 'center',
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              flexWrap: 'nowrap',
-              containerType: 'size',
-            }}
+            className={styles.container}
             ref={containerRef}
           >
             <div
               aria-label="grid"
-              css={{
-                margin: 'auto',
+              className="marginAuto"
+              style={{
                 width: useCQ
                   ? `min(100cqw, 100cqh * ${aspectRatio})`
                   : `min(${cqw}px, ${cqh}px * ${aspectRatio})`,
@@ -279,7 +261,7 @@ export function AlternateSolutionEditor(props: {
             </div>
           </div>
         </div>
-        <div css={{ flex: 'none', width: '100%' }}>
+        <div className="flexNone width100">
           <Keyboard
             toggleKeyboard={toggleKeyboard}
             keyboardHandler={keyboardHandler}

diff --git a/app/components/ArticlePage.module.css b/app/components/ArticlePage.module.css
@@ -0,0 +1,21 @@
+@value huge-and-up from '../lib/definitions.module.css';
+@value max-width from '../lib/definitions.module.css';
+
+.page {
+  margin: 2em 1em;
+}
+
+@media (huge-and-up) {
+  .page {
+    max-width: max-width;
+    margin: 2em auto;
+  }
+}
+
+.markdown {
+  margin-bottom: 2em;
+}
+
+.markdown h2 {
+  margin-top: 1em;
+}
diff --git a/app/components/ArticlePage.tsx b/app/components/ArticlePage.tsx
@@ -2,12 +2,12 @@ import type { Root } from 'hast';
 import Head from 'next/head';
 import { ArticleT } from '../lib/article';
 import { ArticlePageProps } from '../lib/serverOnly';
-import { HUGE_AND_UP, MAX_WIDTH } from '../lib/style';
 import { ContactLinks } from './ContactLinks';
 import { ErrorPage } from './ErrorPage';
 import { Link } from './Link';
 import { Markdown } from './Markdown';
 import { DefaultTopBar } from './TopBar';
+import styles from './ArticlePage.module.css';
 
 export function ArticlePage(props: ArticlePageProps) {
   if ('error' in props) {
@@ -38,19 +38,8 @@ function Article(props: ArticleT & { hast: Root }) {
         />
       </Head>
       <DefaultTopBar />
-      <div
-        css={{
-          margin: '2em 1em',
-          [HUGE_AND_UP]: {
-            maxWidth: MAX_WIDTH,
-            margin: '2em auto',
-          },
-        }}
-      >
-        <Markdown
-          css={{ marginBottom: '2em', '& h2': { marginTop: '1em' } }}
-          hast={props.hast}
-        />
+      <div className={styles.page}>
+        <Markdown className={styles.markdown} hast={props.hast} />
         <p>
           This article is part of a series of posts designed to teach visitors
           about crosswords in general as well as some Crosshare specific

diff --git a/app/components/AuthHelpers.tsx b/app/components/AuthHelpers.tsx
@@ -57,7 +57,7 @@ function renderLoginIfNeeded({
     return (
       <>
         <TopBar />
-        <div css={{ margin: '1em' }}>
+        <div className="margin1em">
           <p>
             Please sign-in with your Google account to continue. We use your
             account to keep track of the puzzles you&apos;ve played and your
@@ -72,7 +72,7 @@ function renderLoginIfNeeded({
     return (
       <>
         <TopBar />
-        <div css={{ margin: '1em' }}>
+        <div className="margin1em">
           <p>
             Please sign-in with your Google account to continue. We use your
             account to keep track of the puzzles you&apos;ve played and your

diff --git a/app/components/BigQuote.module.css b/app/components/BigQuote.module.css
@@ -0,0 +1,34 @@
+@value small-and-up from '../lib/definitions.module.css';
+
+.outer {
+  padding: 2em;
+  background-color: var(--secondary);
+  text-align: center;
+  color: var(--text);
+}
+.wrapper {
+  max-width: 900px;
+  margin: auto;
+}
+
+.wrapper:before {
+  font-family: georgia, serif;
+  content: open-quote;
+  font-size: 6em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+.quote {
+  font-family: georgia, serif;
+  font-size: 20px;
+  font-style: italic;
+}
+@media (small-and-up) {
+  .quote {
+    font-size: 30px;
+  }
+  .attrib {
+    font-size: 20px;
+  }
+}
diff --git a/app/components/BigQuote.tsx b/app/components/BigQuote.tsx
@@ -1,52 +1,13 @@
-import { SMALL_AND_UP } from '../lib/style';
 import { ReactNode } from 'react';
+import styles from './BigQuote.module.css';
 
 export function BigQuote(props: { quote: string; attribution: ReactNode }) {
   return (
-    <div
-      css={{
-        padding: '2em',
-        backgroundColor: 'var(--secondary)',
-        textAlign: 'center',
-        color: 'var(--text)',
-      }}
-    >
-      <div
-        css={{
-          maxWidth: 900,
-          margin: 'auto',
-          '&:before': {
-            fontFamily: 'Georgia, serif',
-            content: 'open-quote',
-            fontSize: '6em',
-            lineHeight: '0.1em',
-            marginRight: '0.25em',
-            verticalAlign: '-0.4em',
-          },
-        }}
-      >
-        <span
-          css={{
-            fontFamily: 'Georgia, serif',
-            fontSize: 20,
-            [SMALL_AND_UP]: {
-              fontSize: 30,
-            },
-            fontStyle: 'italic',
-          }}
-        >
-          {props.quote}
-        </span>
+    <div className={styles.outer}>
+      <div className={styles.wrapper}>
+        <span className={styles.quote}>{props.quote}</span>
         <br />
-        <span
-          css={{
-            [SMALL_AND_UP]: {
-              fontSize: 20,
-            },
-          }}
-        >
-          &mdash; {props.attribution}
-        </span>
+        <span className={styles.attrib}>&mdash; {props.attribution}</span>
       </div>
     </div>
   );

diff --git a/app/components/BioEditor.tsx b/app/components/BioEditor.tsx
@@ -215,7 +215,7 @@ export const BioEditor = (props: BioEditorProps) => {
             <h4>Live Preview:</h4>
             <Markdown hast={markdownToHast({ text: bioText })} />
           </div>
-          <form css={{ margin: '1em 0' }} onSubmit={submitEdit}>
+          <form className="margin1em0" onSubmit={submitEdit}>
             <label css={{ width: '100%', margin: 0 }}>
               Enter new bio text:
               <textarea
@@ -237,10 +237,10 @@ export const BioEditor = (props: BioEditorProps) => {
             >
               {bioText.length}/{BIO_LENGTH_LIMIT}
             </div>
-            <Button type="submit" css={{ marginRight: '0.5em' }} text="Save" />
+            <Button type="submit" className="marginRight0-5em" text="Save" />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsOpen(false);
               }}
@@ -257,7 +257,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.b ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsOpen(true);
                 }}
@@ -282,7 +282,7 @@ export const BioEditor = (props: BioEditorProps) => {
         cover pic is a large photo that appears at the top of your blog page.
       </p>
       <Button
-        css={{ marginRight: '1.5em' }}
+        className="marginRight1-5em"
         onClick={props.addProfilePic}
         text="Edit profile pic"
       />
@@ -297,7 +297,7 @@ export const BioEditor = (props: BioEditorProps) => {
       {props.constructorPage.pp && props.constructorPage.pt ? (
         <>
           <Button
-            css={{ marginRight: '1.5em' }}
+            className="marginRight1-5em"
             onClick={() => {
               setShowPaypalEditor(true);
             }}
@@ -333,7 +333,7 @@ export const BioEditor = (props: BioEditorProps) => {
             <h4>Live Preview:</h4>
             <Markdown inline={true} hast={markdownToHast({ text: sigText })} />
           </div>
-          <form css={{ margin: '1em 0' }} onSubmit={submitSigEdit}>
+          <form className="margin1em0" onSubmit={submitSigEdit}>
             <label css={{ width: '100%', margin: 0 }}>
               Enter new signature:
               <textarea
@@ -357,13 +357,13 @@ export const BioEditor = (props: BioEditorProps) => {
             </div>
             <Button
               type="submit"
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               disabled={sigText.trim().length === 0}
               text="Save"
             />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsSigOpen(false);
               }}
@@ -381,7 +381,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.sig ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsSigOpen(true);
                 }}
@@ -418,11 +418,11 @@ export const BioEditor = (props: BioEditorProps) => {
                 />
               </label>
             </div>
-            <div css={{ marginTop: '2em' }}>
-              <label css={{ width: '100%' }}>
+            <div className="marginTop2em">
+              <label className="width100">
                 <p>Message to show in paypal dialogue:</p>
                 <input
-                  css={{ width: '100%' }}
+                  className="width100"
                   type="text"
                   value={paypalText}
                   onChange={(e) => {
@@ -453,14 +453,14 @@ export const BioEditor = (props: BioEditorProps) => {
       <h4>Social sharing buttons</h4>
       {isShareButtonsOpen ? (
         <>
-          <form css={{ margin: '1em 0' }} onSubmit={submitShareButtonsEdit}>
+          <form className="margin1em0" onSubmit={submitShareButtonsEdit}>
             <p>
               Enter the text that will show up in share dialogs on sites that
               support custom text (the variable <strong>{'{time}'}</strong> will
               get replaced with the sharer&apos;s solve time and{' '}
               <strong>{'{title}'}</strong> with the puzzle&apos;s title):
             </p>
-            <div css={{ margin: '1em 0' }}>
+            <div className="margin1em0">
               <LengthLimitedInput
                 css={{ width: '50%' }}
                 updateValue={setShareButtonsText}
@@ -474,13 +474,13 @@ export const BioEditor = (props: BioEditorProps) => {
             </div>
             <Button
               type="submit"
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               disabled={shareButtonsText.trim().length === 0}
               text="Save"
             />
             <Button
               boring={true}
-              css={{ marginRight: '0.5em' }}
+              className="marginRight0-5em"
               onClick={() => {
                 setIsShareButtonsOpen(false);
               }}
@@ -498,7 +498,7 @@ export const BioEditor = (props: BioEditorProps) => {
           {props.constructorPage.st ? (
             <>
               <Button
-                css={{ marginRight: '1.5em' }}
+                className="marginRight1-5em"
                 onClick={() => {
                   setIsShareButtonsOpen(true);
                 }}