Fix Contact page card bg colors, lower navbar link hover contrast

This commit is contained in:
Xevion
2023-02-25 20:02:20 -06:00
parent c2a3b1af2a
commit 349457574b
2 changed files with 4 additions and 4 deletions

View File

@@ -44,8 +44,8 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNav
key={item.name} key={item.name}
href={item.href} href={item.href}
className={classNames( className={classNames(
item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white', item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-800/60 hover:text-white',
'px-3 py-2 rounded-md text-sm font-medium text-lg' 'px-2.5 py-1 rounded-md text-sm font-medium text-lg'
)} )}
aria-current={item.id == current ? 'page' : undefined} aria-current={item.id == current ? 'page' : undefined}
> >

View File

@@ -3,7 +3,7 @@ import AppWrapper from "../components/AppWrapper";
import {BsDiscord, BsGithub} from "react-icons/bs"; import {BsDiscord, BsGithub} from "react-icons/bs";
import {AiFillMail} from "react-icons/ai"; import {AiFillMail} from "react-icons/ai";
import Link from "next/link"; import Link from "next/link";
import {IconType} from "react-icons"; import type {IconType} from "react-icons";
import Tippy from "@tippyjs/react"; import Tippy from "@tippyjs/react";
import 'tippy.js/dist/tippy.css'; import 'tippy.js/dist/tippy.css';
@@ -27,7 +27,7 @@ const ContactPage: NextPage = () => {
return <AppWrapper current='contact'> return <AppWrapper current='contact'>
<div className="w-full my-10 flex flex-col items-center"> <div className="w-full my-10 flex flex-col items-center">
<div <div
className="bg-zinc-800 border border-zinc-700 rounded-md max-w-[23rem] sm:max-w-[25rem] lg:max-w-[30rem] mx-3 w-full p-5 flex flex-col"> className="bg-zinc-800/50 border border-zinc-800 rounded-md max-w-[23rem] sm:max-w-[25rem] lg:max-w-[30rem] mx-3 w-full p-5 flex flex-col">
<div className="flex justify-center gap-x-5 text-center"> <div className="flex justify-center gap-x-5 text-center">
{socials.map(({icon: Icon, href, hint, hideHint}, index) => { {socials.map(({icon: Icon, href, hint, hideHint}, index) => {
const inner = <Icon className="w-8 h-8"/>; const inner = <Icon className="w-8 h-8"/>;