🔀 Merge pull request #25 from Ayush272002/sid-visual-fixes

🎨 Theming and configs

components/custom/footer.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 const Footer = () => {
   return (
     <footer className="text-center mt-8">
-      <p className="text-gray-500">
-        &copy; 2024 Ticket Chain. All rights reserved.
+      <p className="text-light-purple text-opacity-75">
+        &copy; 2024 TicketChain. All rights reserved.
       </p>
     </footer>
   );

components/custom/header.tsx

@@ -36,14 +36,16 @@ const Header = () => {
       ></div>
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         <Link href="/" legacyBehavior>
-          <a className="text-2xl font-semibold text-white">TicketChain</a>
+          <a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
+            TicketChain
+          </a>
         </Link>
         <nav className="nav">
           <ul className="flex space-x-6">
             <li>
               <Link href="/" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Home
@@ -53,7 +55,7 @@ const Header = () => {
             <li>
               <Link href="/events" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Events
@@ -63,7 +65,7 @@ const Header = () => {
             <li>
               <Link href="/contact" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Contact

components/scripts/MetaMask.tsx

@@ -64,7 +64,9 @@ function MetaMaskConnect() {
       {isConnected ? (
         <Popover>
           <PopoverTrigger asChild>
-            <Button>{formatAddress(account)}</Button>
+            <Button variant="link" className="text-white">
+              {formatAddress(account)}
+            </Button>
           </PopoverTrigger>
           <PopoverContent className="w-44">
             <Button
@@ -77,7 +79,11 @@ function MetaMaskConnect() {
           </PopoverContent>
         </Popover>
       ) : (
-        <Button disabled={connecting} onClick={connect}>
+        <Button
+          disabled={connecting}
+          onClick={connect}
+          className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
+        >
           <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
         </Button>
       )}

package-lock.json

@@ -25,7 +25,7 @@
         "next": "14.2.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
@@ -39,6 +39,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/tailwindcss": "^3.0.11",
         "chai": "^4.2.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.13",
@@ -7495,6 +7496,13 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@types/tailwindcss": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz",
+      "integrity": "sha512-PR+BOIrI+rxteHwFvkfIOty+PDJwTG4ute3alxSSXpF/xKpryO1room265m46Auyae0VwqUYs3PuVEOF9Oil3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -13050,7 +13058,6 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz",
       "integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==",
       "dev": true,
-      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
@@ -13413,7 +13420,6 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz",
       "integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==",
       "dev": true,
-      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"

package.json

@@ -29,7 +29,7 @@
     "next": "14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
@@ -43,6 +43,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/tailwindcss": "^3.0.11",
     "chai": "^4.2.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",

tailwind.config.ts

@@ -1,4 +1,10 @@
 import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+type ColorValue = string | ColorDictionary;
+interface ColorDictionary {
+  [colorName: string]: ColorValue;
+}
 
 const config: Config = {
   darkMode: ['class'],
@@ -14,6 +20,12 @@ const config: Config = {
           DEFAULT: '#000',
           100: '#000319',
         },
+        'darkest-purple': '#240046',
+        'darker-purple': '#3C096C',
+        'dark-purple': '#5A189A',
+        purple: '#7B2CBF',
+        'light-purple': '#9D4EDD',
+
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         card: {
@@ -62,6 +74,44 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [tailwindcssAnimate, addVariablesForColors],
 };
+
 export default config;
+
+// Plugin to add each Tailwind color as a CSS variable
+function addVariablesForColors({
+  addBase,
+  theme,
+}: {
+  addBase: (styles: Record<string, Record<string, string>>) => void;
+  theme: (path: string) => unknown;
+}) {
+  const colors = theme('colors') as ColorDictionary;
+  const flattenedColors = flattenColors(colors);
+  const newVars = Object.fromEntries(
+    Object.entries(flattenedColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ':root': newVars,
+  });
+}
+
+// Recursive function to flatten nested color objects
+function flattenColors(
+  colors: ColorDictionary,
+  prefix = ''
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(colors)) {
+    if (typeof value === 'string') {
+      // If the value is a string, add it to the result
+      result[prefix + key] = value;
+    } else if (typeof value === 'object' && value !== null) {
+      // If the value is an object, recursively flatten it
+      Object.assign(result, flattenColors(value, `${prefix}${key}-`));
+    }
+  }
+  return result;
+}