titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-17 13:30:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

hover effect

Browse source
This commit is contained in:
FireStreaker2 2023-12-13 18:51:07 -08:00
parent 25c4a1e9ce
commit 2f86f1c004
4 changed files with 29 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.prettierrc Normal file
View file

@ -0,0 +1,10 @@
{
"singleQuote": false,
"endOfLine": "crlf",
"tabWidth": 2,
"useTabs": false,
"trailingComma": "none",
"plugins": [
"prettier-plugin-tailwindcss"
]
}

32
src/components/HeaderButton.tsx
View file

@ -1,22 +1,24 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from 'preact-router'; import { Link } from "preact-router";
interface HeaderButtonProps { interface HeaderButtonProps {
href: string; href: string;
Icon: any; Icon: any;
translationKey: string; translationKey: string;
} }
export function HeaderButton(props: HeaderButtonProps) { export function HeaderButton(props: HeaderButtonProps) {
const { href, Icon, translationKey } = props; const { href, Icon, translationKey } = props;
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Link href={href}> <Link href={href}>
<div class="p-4 flex flex-row items-center"> <div className="group p-4 flex flex-row items-center">
<Icon class="w-6 h-6"/> <Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" />
<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t(translationKey)}</span> <span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold">
</div> {t(translationKey)}
</Link> </span>
) </div>
} </Link>
);
}

1
src/themes/main.css
View file

@ -6,6 +6,7 @@
--navbar-height: 60px; --navbar-height: 60px;
--navbar-text-color: #7967dd; --navbar-text-color: #7967dd;
--navbar-link-color: #e0def4; --navbar-link-color: #e0def4;
--navbar-link-hover-color: gray;
--navbar-font: "Roboto"; --navbar-font: "Roboto";
--input-text-color: #e0def4; --input-text-color: #e0def4;
--input-placeholder-color: white; --input-placeholder-color: white;

1
tailwind.config.js
View file

@ -10,6 +10,7 @@ export default {
"navbar-text-color": "var(--navbar-text-color)", "navbar-text-color": "var(--navbar-text-color)",
"navbar-color": "var(--navbar-color)", "navbar-color": "var(--navbar-color)",
"text-color": "var(--navbar-link-color)", "text-color": "var(--navbar-link-color)",
"text-hover-color": "var(--navbar-link-hover-color)",
"input": "var(--input-background-color)", "input": "var(--input-background-color)",
"input-text": "var(--input-text-color)", "input-text": "var(--input-text-color)",
"input-border-color": "var(--input-border-color)" "input-border-color": "var(--input-border-color)"