added login design

Stephen-Gordon · Mar 21, 2024 · 606ba5c · 606ba5c
1 parent 7396b14
commit 606ba5c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,8 +1,8 @@
 {
-  "name": "Next-13 PWA",
-  "short_name": "PWA",
-  "theme_color": "#101012",
-  "background_color": "#101012",
+  "name": "Payments",
+  "short_name": "Payments",
+  "theme_color": "#020817",
+  "background_color": "#020817",
   "display": "standalone",
   "orientation": "portrait",
   "scope": "/",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -77,17 +77,20 @@ export default function RootLayout({
       <head>
         <title>Payments, Stephen Gordon</title>
 
-        <meta name='application-name' content='PWA App' />
+        <meta name='application-name' content='Payments' />
         <meta name='apple-mobile-web-app-capable' content='yes' />
-        <meta name='apple-mobile-web-app-status-bar-style' content='default' />
-        <meta name='apple-mobile-web-app-title' content='PWA App' />
-        <meta name='description' content='PWA Payments, Stephen Gordon' />
+        <meta
+          name='apple-mobile-web-app-status-bar-style'
+          content='black-transparent'
+        />
+        <meta name='apple-mobile-web-app-title' content='Payments' />
+        <meta name='description' content='Payments, Stephen Gordon' />
         <meta name='format-detection' content='telephone=no' />
         <meta name='mobile-web-app-capable' content='yes' />
         <meta name='msapplication-config' content='/icons/browserconfig.xml' />
         <meta name='msapplication-TileColor' content='#2B5797' />
         <meta name='msapplication-tap-highlight' content='no' />
-        <meta name='theme-color' content='#101012' />
+        <meta name='theme-color' content='#020817' />
         <link rel='apple-touch-icon' href='/icons/touch-icon-iphone.png' />
         <link
           rel='apple-touch-icon'

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -9,6 +9,9 @@ import { isAndroid } from 'react-device-detect';
 import { useDispatch } from 'react-redux';
 import { Button } from '../components/ui/button';
 
+import { motion } from 'framer-motion';
+import { BackgroundGradientAnimation } from '../components/ui/background-gradient-animation';
+
 const Page = () => {
   const [isInstalled, setIsInstalled] = useState(false);
   const [installationPrompt, setInstallationPrompt] = useState<any>();
@@ -61,18 +64,25 @@ const Page = () => {
 
   return (
     <>
-      <main>
-        <div className='flex h-screen w-screen flex-col items-center justify-center'>
-          <h2 className='my-4 text-xl font-semibold text-gray-800'>Payments</h2>
-          <div className='mt-2 w-1/2'>
-            {!isInstalled && isAndroid ? (
-              <Button onClick={promptToInstall}>Install App</Button>
-            ) : (
-              <Button disabled={!ready || authenticated} onClick={login}>
-                Login
-              </Button>
-            )}
-          </div>
+      <main className='relative'>
+        <div className='absolute -z-50 '> 
+          <BackgroundGradientAnimation/>
+        </div>
+        <div className='grid p-4 justify-center mt-[30vh]'>
+
+                <div className=' space-y-2 text-center'>
+                  <motion.h1 key="create-an-account" initial={{opacity: 0}} animate={{ opacity: 1}} exit={{opacity:0 }} className='text-2xl font-semibold tracking-tight'>
+                    Log in or Sign up
+                  </motion.h1>
+                {/*   <motion.p  initial={{opacity: 0}} animate={{ opacity: 1}} exit={{opacity:0 }} className='text-muted-foreground text-sm'>
+                    Enter your email below to create your account
+                  </motion.p> */}
+                </div>
+                <Button className='mt-4' disabled={!ready || authenticated} onClick={login}>
+                  Login
+                </Button>
+
+
         </div>
       </main>
     </>

diff --git a/src/app/notification/route.ts b/src/app/notification/route.ts
@@ -23,7 +23,7 @@ export const POST = async (req: NextRequest) => {
     const response = await webPush.sendNotification(
       subscription,
       JSON.stringify({
-        title: `PWA Payments`,
+        title: `Payments`,
         message: `${message}`,
       })
     );