Tailwindify

frontend/src/app/(navfooter)/new/NewScratchForm.tsx

@@ -18,7 +18,28 @@ import basicSetup from "@/lib/codemirror/basic-setup";
 import { cpp } from "@/lib/codemirror/cpp";
 import getTranslation from "@/lib/i18n/translate";
 
-import styles from "./new.module.scss";
+interface FormLabelProps {
+    children: React.ReactNode;
+    htmlFor?: string;
+    small?: string;
+}
+
+function FormLabel({ children, htmlFor, small }: FormLabelProps) {
+    const Tag = htmlFor ? "label" : "p";
+    return (
+        <Tag
+            className="m-0 block p-2.5 font-semibold text-[0.9em] text-[color:var(--g1700)]"
+            {...(htmlFor && { htmlFor })}
+        >
+            {children}
+            {small && (
+                <small className="pl-2 font-normal text-[0.8em] text-[color:var(--g800)]">
+                    {small}
+                </small>
+            )}
+        </Tag>
+    );
+}
 
 function getLabels(asm: string): string[] {
     const lines = asm.split("\n");
@@ -260,7 +281,7 @@ export default function NewScratchForm({
     return (
         <div>
             <div>
-                <p className={styles.label}>Platform</p>
+                <FormLabel>Platform</FormLabel>
                 <PlatformSelect
                     platforms={serverCompilers.platforms}
                     value={platform}
@@ -272,26 +293,28 @@ export default function NewScratchForm({
             </div>
 
             <div>
-                <p className={styles.label}>Compiler</p>
-                <div className={styles.compilerContainer}>
-                    <div>
-                        <span className={styles.compilerChoiceHeading}>
+                <FormLabel>Compiler</FormLabel>
+                <div className="flex cursor-default select-none items-center justify-between max-[400px]:flex-col">
+                    <div className="flex w-full flex-1 flex-col">
+                        <span className="px-2.5 py-0.5 text-[0.8rem] text-[color:var(--g800)]">
                             Select a compiler
                         </span>
                         <Select
-                            className={styles.compilerChoiceSelect}
+                            className="w-full"
                             options={compilerChoiceOptions}
                             value={compilerId}
                             onChange={setCompiler}
                         />
                     </div>
-                    <div className={styles.compilerChoiceOr}>or</div>
-                    <div>
-                        <span className={styles.compilerChoiceHeading}>
+                    <div className="flex-0 px-2 py-2 text-center text-[0.8rem] text-[color:var(--g500)] min-[400px]:px-4">
+                        or
+                    </div>
+                    <div className="flex w-full flex-1 flex-col">
+                        <span className="px-2.5 py-0.5 text-[0.8rem] text-[color:var(--g800)]">
                             Select a preset
                         </span>
                         <PresetSelect
-                            className={styles.compilerChoiceSelect}
+                            className="w-full"
                             platform={platform}
                             presetId={presetId}
                             setPreset={setPreset}
@@ -305,10 +328,12 @@ export default function NewScratchForm({
             </div>
 
             <div>
-                <label className={styles.label} htmlFor="label">
-                    Diff label{" "}
-                    <small>(asm label from which the diff will begin)</small>
-                </label>
+                <FormLabel
+                    htmlFor="label"
+                    small="(asm label from which the diff will begin)"
+                >
+                    Diff label
+                </FormLabel>
                 <input
                     name="label"
                     type="text"
@@ -317,34 +342,28 @@ export default function NewScratchForm({
                     onChange={(e) =>
                         setLabel((e.target as HTMLInputElement).value)
                     }
-                    className={styles.textInput}
+                    className="w-full rounded border border-[color:var(--g500)] bg-[color:var(--g200)] px-2.5 py-2 font-mono text-[0.8rem] text-[color:var(--g1200)] placeholder-[color:var(--g700)] outline-none"
                     autoCorrect="off"
                     autoCapitalize="off"
                     spellCheck={false}
                 />
             </div>
-            <div className={styles.editorContainer}>
-                <p className={styles.label}>
-                    Target assembly <small>(required)</small>
-                </p>
+            <div className="flex h-[200px] flex-col">
+                <FormLabel small="(required)">Target assembly</FormLabel>
                 <CodeMirror
-                    className={styles.editor}
+                    className="w-full flex-1 overflow-hidden rounded border border-[color:var(--g500)] bg-[color:var(--g200)] [&_.cm-editor]:h-full"
                     value={asm}
                     valueVersion={valueVersion}
                     onChange={setAsm}
                     extensions={basicSetup}
                 />
             </div>
-            <div className={styles.editorContainer}>
-                <p className={styles.label}>
-                    Context{" "}
-                    <small>
-                        (any typedefs, structs, and declarations you would like
-                        to include go here; typically generated with m2ctx.py)
-                    </small>
-                </p>
+            <div className="flex h-[200px] flex-col">
+                <FormLabel small="(any typedefs, structs, and declarations you would like to include go here; typically generated with m2ctx.py)">
+                    Context
+                </FormLabel>
                 <CodeMirror
-                    className={styles.editor}
+                    className="w-full flex-1 overflow-hidden rounded border border-[color:var(--g500)] bg-[color:var(--g200)] [&_.cm-editor]:h-full"
                     value={context}
                     valueVersion={valueVersion}
                     onChange={setContext}
@@ -362,12 +381,18 @@ export default function NewScratchForm({
                 >
                     Create scratch
                 </AsyncButton>
-                <p className={styles.privacyNotice}>
+                <p className="pt-4 text-[0.9rem] text-[color:var(--g1200)]">
                     decomp.me will store any data you submit and link it to your
                     session.
                     <br />
                     For more information, see our{" "}
-                    <Link href="/privacy">privacy policy</Link>.
+                    <Link
+                        href="/privacy"
+                        className="text-[color:var(--link)] hover:underline"
+                    >
+                        privacy policy
+                    </Link>
+                    .
                 </p>
             </div>
         </div>

frontend/src/app/(navfooter)/settings/appearance/ExampleCodeMirror.tsx

@@ -4,8 +4,6 @@ import CodeMirror from "@/components/Editor/CodeMirror";
 import basicSetup from "@/lib/codemirror/basic-setup";
 import { cpp } from "@/lib/codemirror/cpp";
 
-import styles from "./ExampleCodeMirror.module.scss";
-
 const EXAMPLE_C_CODE = `#include "common.h"
 
 typedef struct Vec2b {
@@ -114,7 +112,7 @@ void step_game_loop(void) {
 
 export default function ExampleCodeMirror() {
     return (
-        <div className={styles.container}>
+        <div className="overflow-hidden [&_.cm-editor]:h-[200px]">
             <CodeMirror
                 value={EXAMPLE_C_CODE}
                 valueVersion={0}

frontend/src/components/Select.tsx

@@ -2,8 +2,6 @@ import type { ReactNode, ChangeEventHandler } from "react";
 
 import { ChevronDownIcon } from "@primer/octicons-react";
 
-import styles from "./Select.module.scss";
-
 export type Props = {
     className?: string;
     onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -18,12 +16,18 @@ export default function Select({
     value,
 }: Props) {
     return (
-        <div className={`${styles.group} ${className}`}>
-            <select onChange={onChange} value={value}>
+        <div
+            className={`relative inline-flex select-none rounded border border-[var(--g400)] bg-[var(--g200)] px-[10px] py-2 text-[0.8rem] text-[var(--g1600)] ${className}`}
+        >
+            <select
+                onChange={onChange}
+                value={value}
+                className="!outline-0 flex-1 appearance-none border-0 bg-transparent pr-8 outline-none [&_option]:bg-[var(--g200)] [&_option]:text-[var(--g1600)]"
+            >
                 {children}
             </select>
 
-            <div className={styles.icon}>
+            <div className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-[0.6em]">
                 <ChevronDownIcon size={16} />
             </div>
         </div>