From b972e2387619742fa8b44029b90fa6e8b86b8842 Mon Sep 17 00:00:00 2001
From: Shlomo <osseonews@osseonews.com>
Date: Mon, 4 Mar 2024 21:11:59 +0000
Subject: [PATCH] Additional Files and Edits

---
 README.md                              |  9 +++++----
 components/account/account-profile.tsx | 11 ++---------
 components/auth/login-form.tsx         | 15 ++++-----------
 components/auth/login-message.tsx      | 12 ++++--------
 components/auth/user-icon.tsx          |  9 +++------
 components/layout/navbar/index.tsx     | 24 +++++++++++++++++++++---
 6 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 8f4262e7e..d2f6ddc16 100644
--- a/README.md
+++ b/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
-2. Set up URLs
-3.
+1. icons/client components
+2. Get
+3. Set up URLs
+4.
 
 to do: env settings file
 
diff --git a/components/account/account-profile.tsx b/components/account/account-profile.tsx
index b560fe3a7..92bc2d867 100644
--- a/components/account/account-profile.tsx
+++ b/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 && (
-        <Alert className="my-5" variant="destructive">
-          <TriangleIcon className="h-4 w-4" />
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{props?.message}</AlertDescription>
-        </Alert>
-      )}
+      {props?.message && <div className="my-5">{props?.message}</div>}
     </>
   );
 }
diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
index 3730c5296..845c036e8 100644
--- a/components/auth/login-form.tsx
+++ b/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 && (
-        <Alert className="my-5" variant="destructive">
-          <ExclamationTriangleIcon className="mr-2 h-4 w-4" />
-          <AlertTitle>{props?.message}</AlertTitle>
-        </Alert>
-      )}
-      <Button
+      {props?.message && <div className="my-5">{props?.message}</div>}
+      <button
         onClick={(e: React.FormEvent<HTMLButtonElement>) => {
           if (pending) e.preventDefault();
         }}
@@ -43,7 +36,7 @@ function SubmitButton(props: any) {
             <span>Log-In</span>
           </>
         )}
-      </Button>
+      </button>
     </>
   );
 }
diff --git a/components/auth/login-message.tsx b/components/auth/login-message.tsx
index c2ee33461..f32d8bd1c 100644
--- a/components/auth/login-message.tsx
+++ b/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">
-      <TriangleIcon className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
+    <div>
+      <h2>Error</h2>
+      <span>Your session has expired. Please log in again.</span>
+    </div>
   );
 }
diff --git a/components/auth/user-icon.tsx b/components/auth/user-icon.tsx
index 40e3ded66..fa39fdece 100644
--- a/components/auth/user-icon.tsx
+++ b/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
-        asChild
-        variant="link"
+      <button
         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>
     </>
   );
 }
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 0058d5ec8..9c240fa06 100644
--- a/components/layout/navbar/index.tsx
+++ b/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,9 +45,26 @@ export default async function Navbar() {
           <Search />
         </div>
         <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
+          <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>