make some progress fixing issues with tailwind

utils/components/checkout.js → components/checkout.js

@@ -3,26 +3,40 @@ function md5(d){return rstr2hex(binl2rstr(binl_md5(rstr2binl(d),8*d.length)))}fu
 
 export function Profile (props) {
 	if(props.loading) {
-		return <p>
-			Loading...
-		</p>;
+		return <div className="shadow-lg rounded-2xl bg-gray-800 p-4">
+			<div className="flex-row gap-4 flex justify-center items-center">
+				<div className="flex-shrink-0">
+					{ /* eslint-disable-next-line @next/next/no-img-element */ }
+					<img className="mx-auto object-cover rounded-full h-16 w-16" alt="profile" src='/images/logo.png' />
+				</div>
+				<div className=" flex flex-col">
+					<span className="text-gray-400 text-xs">
+						Loading...
+					</span>
+					<span className="text-white text-lg font-medium">
+						Loading...
+					</span>
+				</div>
+				<button type="button" onClick={props.signOut} className="py-2 px-4  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
+					Loading...
+				</button>
+			</div>
+		</div>;
 	}
 
 
 	if (props.session) {
 		return <div className="shadow-lg rounded-2xl bg-gray-800 p-4">
 			<div className="flex-row gap-4 flex justify-center items-center">
 				<div className="flex-shrink-0">
-					<a href="#" className="block relative">
-						{ /* eslint-disable-next-line @next/next/no-img-element */ }
-						<img className="mx-auto object-cover rounded-full h-16 w-16" alt="profile" src={'https://www.gravatar.com/avatar/' + md5(props.session.user.email.trim().toLowerCase())} />
-					</a>
+					{ /* eslint-disable-next-line @next/next/no-img-element */ }
+					<img className="mx-auto object-cover rounded-full h-16 w-16" alt="profile" src={'https://www.gravatar.com/avatar/' + md5(props.session.user.email.trim().toLowerCase())} />
 				</div>
 				<div className=" flex flex-col">
 					<span className="text-gray-400 text-xs">
 						Logged in as
 					</span>
-					<span className="text-gray-600 dark:text-white text-lg font-medium">
+					<span className="text-white text-lg font-medium">
 						{props.session.user.email}
 					</span>
 				</div>
@@ -36,8 +50,24 @@ export function Profile (props) {
 		</div>;
 
 	} else {
-		return <p>
-			Not signed in
-		</p>;
+		return <div className="shadow-lg rounded-2xl bg-gray-800 p-4">
+			<div className="flex-row gap-4 flex justify-center items-center">
+				<div className="flex-shrink-0">
+					{ /* eslint-disable-next-line @next/next/no-img-element */ }
+					<img className="mx-auto object-cover rounded-full h-16 w-16" alt="profile" src='/images/logo.png' />
+				</div>
+				<div className=" flex flex-col">
+					<span className="text-gray-400 text-xs">
+						You are currently
+					</span>
+					<span className="text-white text-lg font-medium">
+						not logged in
+					</span>
+				</div>
+				<button type="button" onClick={props.signIn} className="py-2 px-4  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
+					Log In
+				</button>
+			</div>
+		</div>;
 	}
 }

package.json

@@ -23,10 +23,10 @@
 	},
 	"devDependencies": {
 		"@next/eslint-plugin-next": "^11.1.0",
-		"autoprefixer": "^10.2.6",
+		"autoprefixer": "^10.3.1",
 		"eslint": "^7.27.0",
 		"eslint-plugin-react": "^7.24.0",
-		"postcss": "^8.3.0",
+		"postcss": "^8.3.6",
 		"prettier": "^2.3.2",
 		"tailwindcss": "^2.2.7"
 	}

pages/index.js

@@ -28,7 +28,7 @@ export default function Home() {
 				<div id='panorama'></div>
 
 				<div className="absolute left-1/2 top-1/4">
-					<div className="bg-center bg-cover w-32 h-32 hover:scale-110 duration-700" style={ { 'background-image': 'url("/images/logo.png")' } }>
+					<div className="absolute -left-16 bottom-0 bg-center bg-l4c-logo bg-cover w-32 h-32 transform hover:scale-110 duration-700">
 					</div>
 				</div>
 			</main>

pages/shop/index.js

@@ -1,7 +1,7 @@
 import {
 	signIn, signOut, useSession
 } from 'next-auth/client';
-import { Profile } from '../../utils/components/checkout';
+import { Profile } from '../../components/checkout';
 
 export default function Shop() {
 	const [session,

postcss.config.js

@@ -1,5 +1,3 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
 	plugins: {
 		autoprefixer: {},

tailwind.config.js

@@ -1,19 +1,8 @@
 module.exports = {
-	darkMode: true, // or 'media' or 'class'
-	mode: 'jit',
+	darkMode: 'class', // or 'media' or 'class'
 	plugins: [],
-	purge: [
-		'./pages/**/*.{js,ts,jsx,tsx}',
-		'./components/**/*.{js,ts,jsx,tsx}',
-		'./utils/**/*.{js,ts,jsx,tsx}'
-
-	],
-	theme: { // extend: {}
-		colors: {
-			l4c_dark_grey: '#2E2E2E',
-			l4c_green: '#66AA44',
-			l4c_light_grey: '#505050'
-		}
-	},
+	purge: [],
+	// eslint-disable-next-line no-unused-vars
+	theme: { extend: { backgroundImage: theme => ({ 'l4c-logo': 'url(\'/images/logo.png\')' }) } },
 	variants: { extend: {} }
 };