fix: mobile layout

Author: hyochan

app/[lang]/(common)/Header/index.tsx

@@ -251,9 +251,19 @@ export default function Header(props: Props): ReactElement {
   const {t, lang} = props;
   const supabase = useMemo(() => getSupabaseBrowserClient(), []);
 
-  const [isDark, setIsDark] = useState(() => isDarkMode());
+  const [isDark, setIsDark] = useState(true);
   const {login, changeLogin} = useAuthContext();
 
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      const dark = isDarkMode();
+      if (!dark) {
+        setIsDark(false);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const navLinks: NavLink[] = !!login
     ? [
         {

app/[lang]/(home)/Hero/index.tsx

@@ -124,7 +124,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
   return (
     <div
       className={clsx(
-        'self-stretch bg-paper relative',
+        'self-stretch bg-paper-light dark:bg-paper-dark relative',
         'flex flex-col justify-center items-center',
         'max-[425px]:p-0',
       )}
@@ -133,11 +133,11 @@ function Hero({t, statsInfo}: Props): ReactElement {
         className={clsx(
           'self-stretch px-14',
           'flex flex-col align-start justify-start',
-          'max-[425px]:px-8',
+          'max-[768px]:px-6 max-[480px]:px-4',
           'min-[1200px]:self-center min-[1200px]:w-[1200px]',
         )}
       >
-        <p className="h1 text-[44px] text-left font-bold mt-[80px] mb-8 text-contrast-light dark:text-contrast-dark">
+        <p className="h1 text-[44px] text-left font-bold mt-[80px] mb-8 max-[480px]:mt-8 max-[480px]:text-[32px] text-contrast-light dark:text-contrast-dark">
           {t.developerPowerMeter}
         </p>
         <p className="body1 text-[20px] text-left mb-[36px] text-gray5 dark:text-gray3">

app/[lang]/(home)/Home.tsx

@@ -25,7 +25,7 @@ function Home({t, statsInfo}: Props): ReactElement {
   initAmplitude();
 
   return (
-    <div className={clsx('flex-1 w-screen', 'flex flex-col')}>
+    <div className={clsx('flex-1 w-full', 'flex flex-col')}>
       <Hero t={t} statsInfo={statsInfo} />
       <SectionHowItWorks t={t} />
       <SectionFooter t={t} />

app/[lang]/(home)/SectionFooter.tsx

@@ -22,7 +22,7 @@ export default function SectionFooter({t}: Props): ReactElement {
   return (
     <div
       className={clsx(
-        'self-stretch bg-paper bg-cover',
+        'self-stretch bg-paper-light dark:bg-paper-dark bg-cover',
         'flex flex-col justify-center items-center',
         'md:p-0',
       )}
@@ -40,7 +40,8 @@ export default function SectionFooter({t}: Props): ReactElement {
       >
         <p
           className={clsx(
-            'text-white leading-8 text-[24px] text-center mt-12 mb-20',
+            'text-white leading-8 text-[24px] text-center mt-12 mb-20 px-6',
+            'max-[480px]:text-[18px] max-[480px]:leading-7 max-[480px]:px-8',
             inter.className,
           )}
         >

app/[lang]/(home)/SectionHowItWorks.tsx

@@ -44,7 +44,7 @@ export default function SectionHowItWorks({t}: Props): ReactElement {
   return (
     <div
       className={clsx(
-        'self-stretch bg-paper bg-cover',
+        'self-stretch bg-paper-light dark:bg-paper-dark bg-cover',
         'flex flex-col justify-center items-center',
         'py-20 px-6',
       )}

app/[lang]/layout.tsx

@@ -33,7 +33,13 @@ export default async function LangLayout(props: Props): Promise<ReactElement> {
           'min-w-0 overflow-x-hidden',
         )}
       >
-        <div className={clsx('h-[calc(100vh-56px)]', 'flex w-full min-w-0')}>
+        <div
+          className={clsx(
+            'h-[calc(100vh-56px)]',
+            'flex w-full min-w-0',
+            'overflow-y-auto',
+          )}
+        >
           {children}
         </div>
         <Header

app/[lang]/leaderboards/GithubUserList.tsx

@@ -251,7 +251,7 @@ export default function GithubUserList({t, initialData}: Props): ReactElement {
         className="p-6 max-[480px]:p-4"
         classNames={{
           tHead:
-            'bg-paper backdrop-blur-xl border-b border-black/10 dark:border-white/10 px-2 pb-2 -mx-6 -mt-6 px-6 pt-6 rounded-t-[20px] max-[480px]:-mx-4 max-[480px]:-mt-4 max-[480px]:px-4 max-[480px]:pt-4 max-[480px]:rounded-t-[16px]',
+            'bg-paper-light dark:bg-paper-dark backdrop-blur-xl border-b border-black/10 dark:border-white/10 px-2 pb-2 -mx-6 -mt-6 px-6 pt-6 rounded-t-[20px] max-[480px]:-mx-4 max-[480px]:-mt-4 max-[480px]:px-4 max-[480px]:pt-4 max-[480px]:rounded-t-[16px]',
             tBodyRow:
               'hover:bg-black/10 dark:hover:bg-white/5 transition-all duration-200 rounded-[8px] my-1',
           }}

app/[lang]/leaderboards/page.tsx

@@ -36,12 +36,12 @@ export default async function Page(props: Props): Promise<ReactElement> {
   const userPlugins = plugin ? await getUserPlugins({plugin}) : [];
 
   return (
-    <div className={clsx('flex-1 bg-paper overflow-hidden', 'flex flex-col')}>
+    <div className={clsx('flex-1 bg-paper-light dark:bg-paper-dark overflow-hidden', 'flex flex-col')}>
       <div
         className={clsx(
           'mt-4 mb-[32px] px-6 w-full',
           'flex flex-row items-center gap-4',
-          'max-[768px]:flex-col max-[480px]:mb-6 max-[480px]:mt-2',
+          'max-[768px]:flex-col max-[480px]:mb-6 max-[480px]:mt-8 max-[480px]:px-4',
         )}
       >
           <H1

app/[lang]/loading.tsx

@@ -10,7 +10,7 @@ function Loading(): ReactElement {
   return (
     <div
       className={clsx(
-        'flex-1 self-stretch p-4 bg-paper',
+        'flex-1 self-stretch p-4 bg-paper-light dark:bg-paper-dark',
         'flex flex-row justify-center items-center',
       )}
     >

app/[lang]/sign-in/page.tsx

@@ -48,7 +48,7 @@ export default async function Page(props: Props): Promise<ReactElement> {
     <div
       className={clsx(
         'bg-modal-background pb-20',
-        'flex-1 bg-paper overflow-hidden',
+        'flex-1 bg-paper-light dark:bg-paper-dark overflow-hidden',
         'max-md:px-4',
         'flex flex-col justify-center items-center',
       )}