Additional Files and Edits

README.md

@@ -77,15 +77,16 @@ You can use this comprehensive [integration guide](http://vercel.com/docs/integr
 
 ## Shopify Customer Accounts
 
-This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](), which will allow a customer to login into their Next.js Shopify Website to update information and view orders. It uses the concepts of Next.js middleware and server actions to implemnt the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
+This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](), which will allow a customer to login into their Next.js Shopify Website to update information and view orders. It uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
 
 The code for this repo is adapted for Next.js from code provided by Shopify
 
 To Set This Up, please follow:
 
-1. Get
+1. icons/client components
-2. Set up URLs
+2. Get
-3.
+3. Set up URLs
+4.
 
 to do: env settings file
 

components/account/account-profile.tsx

@@ -1,10 +1,9 @@
 'use client';
 import clsx from 'clsx';
-import { LogOutIcon, TriangleIcon } from '@heroicons/react/24/outline';
+import { ArrowRightIcon as LogOutIcon } from '@heroicons/react/24/outline';
 import { doLogout } from './actions';
 import LoadingDots from 'components/loading-dots';
 import { useFormState, useFormStatus } from 'react-dom';
-import { Alert, AlertDescription, AlertTitle } from 'components/ui/alert';
 
 function SubmitButton(props: any) {
   const { pending } = useFormStatus();
@@ -28,13 +27,7 @@ function SubmitButton(props: any) {
         </div>
         {pending ? 'Logging out...' : 'Log Out'}
       </button>
-      {props?.message && (
+      {props?.message && <div className="my-5">{props?.message}</div>}
-        <Alert className="my-5" variant="destructive">
-          <TriangleIcon className="h-4 w-4" />
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{props?.message}</AlertDescription>
-        </Alert>
-      )}
     </>
   );
 }

components/auth/login-form.tsx

@@ -1,11 +1,9 @@
 'use client';
-import { ExclamationTriangleIcon, UserIcon as LogInIcon } from '@heroicons/react/24/outline';
+import { UserIcon as LogInIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { doLogin } from './actions';
 import LoadingDots from 'components/loading-dots';
 import { useFormState, useFormStatus } from 'react-dom';
-import { Alert, AlertTitle } from 'components/ui/alert';
-import { Button } from 'components/ui/button';
 
 function SubmitButton(props: any) {
   const { pending } = useFormStatus();
@@ -15,13 +13,8 @@ function SubmitButton(props: any) {
 
   return (
     <>
-      {props?.message && (
+      {props?.message && <div className="my-5">{props?.message}</div>}
-        <Alert className="my-5" variant="destructive">
+      <button
-          <ExclamationTriangleIcon className="mr-2 h-4 w-4" />
-          <AlertTitle>{props?.message}</AlertTitle>
-        </Alert>
-      )}
-      <Button
         onClick={(e: React.FormEvent<HTMLButtonElement>) => {
           if (pending) e.preventDefault();
         }}
@@ -43,7 +36,7 @@ function SubmitButton(props: any) {
             <span>Log-In</span>
           </>
         )}
-      </Button>
+      </button>
     </>
   );
 }

components/auth/login-message.tsx

@@ -1,12 +1,8 @@
-import { TriangleIcon } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from 'components/ui/alert';
-
 export function LoginMessage() {
   return (
-    <Alert variant="destructive">
+    <div>
-      <TriangleIcon className="h-4 w-4" />
+      <h2>Error</h2>
-      <AlertTitle>Error</AlertTitle>
+      <span>Your session has expired. Please log in again.</span>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </div>
-    </Alert>
   );
 }

components/auth/user-icon.tsx

@@ -1,7 +1,6 @@
 'use client';
-import { User2Icon } from 'lucide-react';
+import { UserIcon as User2Icon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import { Button } from 'components/ui/button';
 
 function UserButton(props: any) {
   const buttonClasses =
@@ -10,9 +9,7 @@ function UserButton(props: any) {
 
   return (
     <>
-      <Button
+      <button
-        asChild
-        variant="link"
         aria-label="My Profile"
         className={clsx(buttonClasses, {
           'hover:opacity-90': true
@@ -23,7 +20,7 @@ function UserButton(props: any) {
           <User2Icon className="mr-2 h-4 w-4" />
           <span>Profile</span>
         </a>
-      </Button>
+      </button>
     </>
   );
 }

components/layout/navbar/index.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
+import Login from 'components/auth/login';
 const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
@@ -44,10 +45,27 @@ export default async function Navbar() {
           <Search />
         </div>
         <div className="flex justify-end md:w-1/3">
+          <div className="relative flex items-center">
+            <div className="flex h-full flex-row items-center justify-items-end gap-4">
+              <div
+                className="text-primary relative ml-4 flex cursor-pointer items-center
+                 outline-none transition duration-100 ease-in-out sm:ml-6"
+              >
                 <Suspense fallback={<OpenCart />}>
                   <Cart />
                 </Suspense>
               </div>
+              <div
+                className="text-primary relative ml-4 flex cursor-pointer items-center
+                    outline-none transition duration-100 ease-in-out sm:ml-6"
+              >
+                <Suspense fallback={<p>Login</p>}>
+                  <Login />
+                </Suspense>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </nav>
   );