vercel / nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://subscription-payments.vercel.app/
MIT License
6.08k stars 1.23k forks source link

Changing Logo Signin Page - Styling Broken #186

Closed 1NoobDev closed 1 year ago

1NoobDev commented 1 year ago

I am trying to change the logo on the signup page, and it's looking perfect on localhost, but deployed on a live server my styling is broken.. And changing it back to default -> npm run build, does not fix the styling back to normal..

localhost compared to live server image changed back to default code from github -> npm run build image

how can this be caused/resolved?

I didn't change much code:

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';

import LoadingDots from '@/components/ui/LoadingDots';
import { getURL } from '@/utils/helpers';

const SignIn = () => {
  const router = useRouter();
  const user = useUser();
  const supabaseClient = useSupabaseClient();

  useEffect(() => {
    if (user) {
      router.replace('/account');
    }
  }, [user]);

  if (!user)
    return (
      <div className="flex justify-center height-screen-helper">
        <div className="flex flex-col justify-between max-w-lg p-3 m-auto w-80 ">
          <div className="flex justify-center pb-12 ">

         {/* ONLY CHANGED TO IMG */}
          <img
                  src="/SVG/logo.svg"
                  alt="Ai Logo"
                  className="h-8"
                />

          </div>
          <div className="flex flex-col space-y-4">
            <Auth
              supabaseClient={supabaseClient}
              providers={['github','linkedin']}
              redirectTo={getURL()}
              magicLink={true}
              appearance={{
                theme: ThemeSupa,
                variables: {
                  default: {
                    colors: {
                      brand: '#404040',
                      brandAccent: '#52525b'
                    }
                  }
                }
              }}
              theme="dark"
            />
          </div>
        </div>
      </div>
    );

  return (
    <div className="m-6">
      <LoadingDots />
    </div>
  );
};

export default SignIn;
1NoobDev commented 1 year ago

rebuild on local machine, re-uploaded, rebuild on server -> issue resolved..