Bug fixing, minor style updates, fixed opening new tab on Buy Mooney …

…link

ui/components/layout/Sidebar/ColorsAndSocials.tsx

@@ -19,7 +19,7 @@ const ColorsAndSocials = ({ lightMode, setLightMode }: ColorsAndSocials) => {
       <a
         className="ml-5"
         aria-label="Link to Discord"
-        href="https://discord.com/invite/5nAu7K9aES"
+        href="https://discord.gg/moondao"
         target="_blank"
         rel="noreferrer"
       >

ui/components/layout/Sidebar/Navigation.ts

@@ -16,9 +16,10 @@ export const navigation = [
     icon: HomeIcon,
   },
   {
-    name: 'Buy Mooney',
+    name: 'Buy $MOONEY',
     href: 'https://app.uniswap.org/#/swap?inputCurrency=ETH&outputCurrency=0x20d4DB1946859E2Adb0e5ACC2eac58047aD41395&chain=mainnet',
     icon: WalletIcon,
+    external: true
   },
   {
     name: 'lockTokens',

ui/components/layout/Sidebar/NavigationLink.tsx

@@ -4,12 +4,26 @@ import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+//Checks if the navigation object has a property 'external' set to true, if so returns a link that opens another tab, otherwise checks if the navigation object has children. If it does, it returns the dropdown, if it doesn't it returns an internal navigation link.
+
 const NavigationLink = ({ item }: any) => {
   const router = useRouter()
   const { t } = useTranslation('common')
   return (
     <li className={`list-none`} key={item.name}>
-      {!item.children ? (
+      {item.external ? (
+        <Link href={item.href}    target="_blank"
+        rel="noopener noreferrer">
+          <div
+            className={`
+               text-gray-600 hover:bg-blue-100 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-gray-200
+            group flex items-center rounded-md px-2 py-2 font-medium hover:scale-105 transition-all duration-150 cursor-pointer`}
+          >
+            <item.icon className="mr-3 h-6 w-6 flex-shrink-0 text-blue-500 dark:text-moon-gold" />
+            {t(item.name)}
+          </div>
+        </Link>
+      ) : !item.children ? (
         <Link href={item.href} legacyBehavior>
           <div
             className={`${

ui/components/shopify/Product.tsx

@@ -91,7 +91,7 @@ export default function Product({
   return (
     <div className="w-full lg:max-w-1/3 bg-gray-300 dark:bg-[#1c1c1c80] rounded-lg backdropBlur flex flex-col justify-center items-center p-3 lg:p-1 xl:p-3">
       <div className="flex flex-col items-center lg:gap-5 xl:gap-2">
-        <h2 className="w-full mt-4 font-GoodTimes mx-4 text-center xl:text-left">
+        <h2 className="w-full mt-4 font-GoodTimes mx-4 text-center 2xl:text-left xl:text-lg 2xl:text-xl 2xl:mr-2 bg-gradient-to-b text-transparent bg-clip-text from-moon-blue to-blue-950 dark:from-moon-gold dark:to-amber-600">
           {label}
         </h2>
         <div className="p-2 ">
@@ -109,7 +109,7 @@ export default function Product({
         {/*Product pagination*/}
         <div className="w-full flex justify-center items-center">
           <button
-            className={`rounded-full bg-slate-800 w-8 h-8 lg:w-7 lg:h-7 xl:w-8 xl:h-8 text-white text-xl backdropBlur hover:text-n3blue duration-[0.6s] ease-in-ease-out`}
+            className={`rounded-full bg-slate-800 w-8 h-8 lg:w-7 lg:h-7 2xl:w-8 2xl:h-8 text-white text-xl backdropBlur hover:text-n3blue duration-[0.6s] ease-in-ease-out`}
             onClick={() =>
               preview > 0
                 ? setPreview(preview - 1)
@@ -124,16 +124,16 @@ export default function Product({
                 <button
                   key={'pagination' + i}
                   className={`${
-                    preview === i && 'text-n3blue'
-                  } text-3xl hover:scale-110 px-1 xl:px-2`}
+                    preview === i && 'text-moon-blue dark:text-moon-gold'
+                  } text-3xl hover:scale-110 px-1 2xl:px-2`}
                   onClick={() => setPreview(i)}
                 >
                   .
                 </button>
               ))}
           </div>
           <button
-            className={`rounded-full bg-slate-800 w-8 h-8 lg:w-7 lg:h-7 xl:w-8 xl:h-8 text-white text-xl backdropBlur hover:text-n3blue  duration-[0.6s] ease-in-ease-out`}
+            className={`rounded-full bg-slate-800 w-8 h-8 lg:w-7 lg:h-7 2xl:w-8 2xl:h-8 text-white text-xl backdropBlur hover:text-n3blue  duration-[0.6s] ease-in-ease-out`}
             onClick={() => {
               if (!product?.images) return
               preview < product.images.length - 1
@@ -149,27 +149,27 @@ export default function Product({
       <div className="mt-2 flex flex-col justify-center items-center max-w-3/4">
         <div className="flex justify-center items-center w-full">
           <button
-            className={`absolute left-[3%]  h-9 w-9 lg:h-6 lg:w-6 xl:h-8 xl:w-8 dark:text-gray-100 text-gray-900  text-xl font-medium bg-white hover:bg-n3blue hover:text-white dark:bg-black dark:hover:bg-moon-gold dark:hover:text-black duration-[0.6s] ease-in-ease-out rounded-full border-gray-300 border ${
+            className={`absolute left-[3%]  h-9 w-9 lg:h-6 lg:w-6 2xl:h-8 2xl:w-8 dark:text-gray-100 text-gray-900  text-xl font-medium bg-white hover:bg-n3blue hover:text-white dark:bg-black dark:hover:bg-moon-gold dark:hover:text-black duration-[0.6s] ease-in-ease-out rounded-full border-gray-300 border ${
               quantity <= 0 && 'disable opacity-[0.5] pointer-events-none'
             }`}
             onClick={() => setQuantity(quantity > 0 ? quantity - 1 : 0)}
           >
-            <span className="relative bottom-[2px] lg:bottom-1 xl:bottom-[2px]">
+            <span className="relative bottom-[2px] lg:bottom-1 2xl:bottom-[2px]">
               -
             </span>
           </button>
           {/*Quantity and total */}
           <div className="flex flex-col justify-center items-center gap-1">
             <div className="w-full">
-              <p className="text-title-light dark:text-title-dark lg:text-sm xl:text-base">
+              <p className="text-title-light dark:text-title-dark lg:text-sm 2xl:text-base">
                 {'Quantity:'}
-                <span className="ml-2 text-moon-gold">{quantity}</span>
+                <span className="ml-2 dark:text-moon-gold text-moon-blue">{quantity}</span>
               </p>
             </div>
             <div className="w-full">
-              <p className=" text-title-light dark:text-title-dark lg:text-sm xl:text-base">
+              <p className=" text-title-light dark:text-title-dark lg:text-sm 2xl:text-base">
                 {'Total:'}
-                <span className="ml-2 text-moon-gold ">{`$${
+                <span className="ml-2 dark:text-moon-gold text-moon-blue">{`$${
                   product?.variants
                     ? (product.variants[0].price.amount * quantity).toFixed(2)
                     : 0
@@ -178,10 +178,10 @@ export default function Product({
             </div>
           </div>
           <button
-            className="absolute right-[3%] h-9 w-9 lg:h-6 lg:w-6 xl:h-8 xl:w-8 dark:text-gray-100 text-gray-900 text-xl font-medium bg-white hover:bg-n3blue hover:text-white dark:bg-black dark:hover:bg-moon-gold dark:hover:text-black duration-[0.6s] ease-in-ease-out rounded-full border-gray-300 border"
+            className="absolute right-[3%] h-9 w-9 lg:h-6 lg:w-6 2xl:h-8 2xl:w-8 dark:text-gray-100 text-gray-900 text-xl font-medium bg-white hover:bg-n3blue hover:text-white dark:bg-black dark:hover:bg-moon-gold dark:hover:text-black duration-[0.6s] ease-in-ease-out rounded-full border-gray-300 border"
             onClick={() => setQuantity(quantity + 1)}
           >
-            <span className="relative bottom-[2px] lg:bottom-1 xl:bottom-[2px]">
+            <span className="relative bottom-[2px] lg:bottom-1 2xl:bottom-[2px]">
               +
             </span>
           </button>

ui/pages/lifeship/index.tsx

@@ -69,7 +69,7 @@ export default function Lifeship({ products = [] }: any) {
             <Image src={'/LifeShip_Main_Black.png'} width={45} height={45} alt="Lifeship Logo" className='dark:hidden' />
           </h2>
         </div>
-        <h3 className="mt-5 lg:mt-8 text-detail-light dark:text-detail-dark font-RobotoMono text-xl lg:text-2xl text-center">
+        <h3 className="mt-5 lg:mt-8 text-moon-blue dark:text-detail-dark font-RobotoMono text-xl lg:text-2xl text-center">
           Join us on our first mission to the Moon!
         </h3>
         {state === 0 && (

ui/pages/lock.tsx

@@ -30,6 +30,7 @@ import { NumberType, transformNumber } from '../lib/utils/numbers'
 import Balance from '../components/Balance'
 import TimeRange from '../components/TimeRange'
 import Head from '../components/layout/Head'
+import Header from '../components/layout/Header'
 import L2Toggle from '../components/lock/L2Toggle'
 import { AllowanceWarning } from '../components/thirdweb/AllowanceWarning'
 import LockPresets from '../components/thirdweb/LockPresets'
@@ -230,9 +231,15 @@ export default function Lock() {
     <main className="animate-fadeIn">
       <Head title="Voting Power" />
       <div className="mt-3 px-5 lg:px-10 xl:px-10 py-12 xl:pt-16 component-background w-[336px] rounded-2xl sm:w-[400px] lg:mt-10 lg:w-full lg:max-w-[1080px] border-detail-light dark:border-detail-dark border lg:border-2 shadow-md shadow-detail-light dark:shadow-detail-dark xl:flex xl:flex-col xl:items-center">
-
-
-        <section className="mt-4 xl:mt-6 xl:w-3/4">
+        <div className="xl:w-3/4 pb-1">
+          <span className="sm:hidden">
+            <Header text="Lock $MOONEY" noStar />
+          </span>
+          <span className="hidden sm:block">
+            <Header text="Lock $MOONEY" />
+          </span>
+        </div>
+        <section className="mt-6 xl:mt-6 xl:w-3/4">
           {/*Lock Data*/}
           {hasLock && (
             <>
@@ -287,7 +294,7 @@ export default function Lock() {
           )}
         </section>
 
-        <div className="my-7 lg:my-5 justify-center xl:mt-8 flex xl:w-3/4 xl:justify-normal">
+        <div className="my-7 lg:my-5 justify-center xl:mt-8 flex xl:w-3/4 lg:justify-normal">
           <L2Toggle />
         </div>