Skip to content

Commit acd2b62

Browse files
TibowlTibowl
committed
Improve svg colors
1 parent 92c8de6 commit acd2b62

14 files changed

Lines changed: 227 additions & 54 deletions

File tree

‎.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"next/babel"
4+
],
5+
"plugins": [
6+
"inline-react-svg"
7+
]
8+
}

‎components/NavBar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ export default function NavBar({ location }: {location: string}) {
88
const navLinks = pages.map(page => <FormattedLink key={page} href={`/${page.toLowerCase()}`} location={location}>{page}</FormattedLink>)
99

1010
return (
11-
<div className="text-xl bg-gradient-to-r from-blue-200 to-blue-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-between md:justify-start p-4 w-full top-0">
11+
<div className="text-xl bg-gradient-to-r from-blue-200 to-blue-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-between lg:justify-start p-4 w-full top-0">
1212
<div className={`flex items-center pr-20 ${menuOpen ? "hidden": ""} sm:block`}>
1313
<Logo />
1414
<FormattedLink location={location} href="/" className="font-bold">Hu Tao</FormattedLink>
1515
</div>
16-
<nav className="hidden md:block space-x-6">
16+
<nav className="hidden lg:block space-x-6">
1717
{navLinks}
1818
</nav>
19-
<div className={`flex flex-row items-start justify-between md:hidden ${menuOpen?"w-full":""}`}>
19+
<div className={`flex flex-row items-start justify-between lg:hidden ${menuOpen?"w-full":""}`}>
2020
{menuOpen && <MobileMenu navLinks={navLinks} />}
2121
<button type="button" aria-label="Toggle mobile menu" onClick={() => setMenuOpen(!menuOpen)}>
2222
<MenuAlt4Svg menuOpen={menuOpen} />
@@ -28,7 +28,7 @@ export default function NavBar({ location }: {location: string}) {
2828

2929
function MobileMenu({ navLinks }: {navLinks: JSX.Element[] }) {
3030
return (
31-
<nav className="p-4 flex flex-col space-y-3 md:hidden">
31+
<nav className="p-4 flex flex-col space-y-3 lg:hidden">
3232
{navLinks}
3333
</nav>
3434
)

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@types/react": "17.0.38",
2828
"@types/react-modal": "^3.13.1",
2929
"autoprefixer": "^10.4.0",
30+
"babel-plugin-inline-react-svg": "^2.0.1",
3031
"eslint": "8.5.0",
3132
"eslint-config-next": "12.0.7",
3233
"postcss": "^8.4.5",

‎pages/index.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import Head from "next/head"
22
import Image from "next/image"
33
import FormattedLink from "../components/FormattedLink"
4-
import alarm from "../public/alarm.svg"
5-
import book from "../public/book.svg"
6-
import calc from "../public/calc.svg"
7-
import discord from "../public/discord.svg"
8-
import github from "../public/github.svg"
9-
import newspaper from "../public/newspaper.svg"
10-
import person from "../public/person.svg"
4+
import Alarm from "../public/alarm.svg"
5+
import Book from "../public/book.svg"
6+
import Calc from "../public/calc.svg"
7+
import Discord from "../public/discord.svg"
8+
import GitHub from "../public/github.svg"
9+
import Newspaper from "../public/newspaper.svg"
10+
import Person from "../public/person.svg"
1111
import { weapons } from "../utils/utils"
1212

1313
export default function Home({ location }: { location: string }) {
@@ -23,25 +23,25 @@ export default function Home({ location }: { location: string }) {
2323
</Head>
2424

2525
<div className="flex flex-col items-center justify-center w-full flex-1 text-center">
26-
<h1 className="text-6xl font-bold">
26+
<h1 className="text-6xl font-bold mt-6">
2727
Welcome to Hu Tao
2828
</h1>
2929

3030
<p className="m-3 text-2xl">
31-
A Genshin Impact Discord bot and site
31+
A Genshin Impact database site and Discord bot
3232
</p>
3333
<div className="md:flex md:flex-row items-center justify-around max-w-4xl">
3434
<Button href="https://discord.com/oauth2/authorize?client_id=826550363355086918&scope=bot+applications.commands&permissions=313344" location={location} colors="bg-sky-300 dark:bg-sky-900">
3535
<span className="m-2 h-6 w-6">
36-
<Image src={discord} width={24} height={24} alt="Icon" />
36+
<Discord />
3737
</span>
3838
<h3 className="text-2xl font-bold m-2">
3939
Add the Discord bot
4040
</h3>
4141
</Button>
4242
<Button href="https://github.com/Tibowl/hutao#commands" location={location}>
4343
<span className="m-2 h-6 w-6">
44-
<Image src={github} width={24} height={24} alt="Icon" />
44+
<GitHub />
4545
</span>
4646
<h3 className="text-2xl font-bold m-2">
4747
View command list on GitHub
@@ -55,7 +55,7 @@ export default function Home({ location }: { location: string }) {
5555
className="py-0.5 px-1 mt-1 border w-full md:w-auto rounded-md text-center items-center justify-center flex flex-row"
5656
target="_blank">
5757
<span className="mx-1.5 h-5 w-5">
58-
<Image src={discord} width={20} height={20} alt="Icon" />
58+
<Discord />
5959
</span>
6060
<h3 className="text-xl font-semibold m-2">
6161
Join the support server
@@ -69,23 +69,23 @@ export default function Home({ location }: { location: string }) {
6969
</h3>
7070
<div className="grid items-center justify-around max-w-4xl mt-1">
7171
<div className="md:flex md:flex-row items-center max-w-4xl">
72-
<Card href="/guides" title="Guides &rarr;" desc="Find where those Specters are hiding" location={location} src={book} alsoSite />
73-
<Card href="/tools/reminders" title="Reminders &rarr;" desc="Remind yourself of that Parametric Transformer you forgot for the 3rd time this month" location={location} src={alarm} alsoSite="Can be managed on site as well" />
72+
<Card href="/guides" title="Guides &rarr;" desc="Find where those Specters are hiding" location={location} icon={<Book />} alsoSite />
73+
<Card href="/tools/reminders" title="Reminders &rarr;" desc="Remind yourself of that Parametric Transformer you forgot for the 3rd time this month" location={location} icon={<Alarm />} alsoSite="Can be managed on site as well" />
7474
</div>
7575

7676
<div className="md:flex md:flex-row items-center max-w-4xl">
77-
<Card href="/characters" title="Character Information &rarr;" desc="Check which talent books a character needs, their talent scaling, their constellations and more" location={location} src={person} alsoSite />
78-
<Card title="News" desc="Don't miss out on the latest drip marketing" location={location} src={newspaper} />
77+
<Card href="/characters" title="Character Information &rarr;" desc="Check which talent books a character needs, their talent scaling, their constellations and more" location={location} icon={<Person />} alsoSite />
78+
<Card title="News" desc="Don't miss out on the latest drip marketing" location={location} icon={<Newspaper />} />
7979
</div>
8080

8181
<div className="md:flex md:flex-row items-center max-w-4xl">
8282
<Card href="/weapons" title="Weapon Information &rarr;" desc="Check which weapon ascension material you need to level that shiny new weapon or which refinements/sub-stat it has" location={location} src={weapons.Sword} alsoSite />
83-
<Card title="Events" desc="Get reminded when new events come out" location={location} src={alarm} />
83+
<Card title="Events" desc="Get reminded when new events come out" location={location} icon={<Alarm />} />
8484
</div>
8585

8686
<div className="md:flex md:flex-row items-center max-w-4xl">
87-
<Card href="/tools/gachacalc" title="Gacha calculator &rarr;" desc="Want to check the odds of getting C1 from the 134 pulls you've got right now?" location={location} src={calc} alsoSite />
88-
<Card title="And more!" desc="Abyss schedule/floors, this month's Paimon's Bargains, ..." location={location} />
87+
<Card href="/tools/gachacalc" title="Gacha calculator &rarr;" desc="Want to check the odds of getting C1 from the 134 pulls you've got right now?" location={location} icon={<Calc />} alsoSite />
88+
<Card title="And more!" desc="Abyss schedule/floors, Paimon's Bargains schedule, past Event Wishes, ..." location={location} />
8989
</div>
9090
</div>
9191
</main>
@@ -96,16 +96,29 @@ export default function Home({ location }: { location: string }) {
9696
function Button({ href, children, location, colors = "bg-neutral-300 dark:bg-neutral-900" }: { href: string, children: JSX.Element | string | (string | JSX.Element)[], location: string, colors?: string }) {
9797
return <FormattedLink
9898
href={href}
99-
className={`p-2 m-1.5 border ${colors} w-full md:w-auto rounded-md text-center items-center justify-center flex flex-row`}
99+
className={`p-2 my-1.5 sm:m-1.5 border ${colors} w-full sm:w-auto rounded-md text-center items-center justify-center flex flex-row`}
100100
location={location}
101101
target="_blank"
102102
>
103103
{children}
104104
</FormattedLink>
105105
}
106106

107-
function Card({ href, src, title, desc, location, colors = "bg-slate-300 dark:bg-slate-800", alsoSite }: { href?: string, src?: string | StaticImageData, title: string, desc: string, colors?: string, location: string, alsoSite?: string | boolean }) {
107+
function Card({ href, src, title, desc, location, colors = "bg-slate-300 dark:bg-slate-800", alsoSite, icon }: { href?: string, src?: string | StaticImageData, icon?: JSX.Element, title: string, desc: string, colors?: string, location: string, alsoSite?: string | boolean }) {
108108
const className = `px-6 py-1.5 m-1.5 h-full text-left border max-w-full items-start justify-center flex flex-col rounded-2xl ${colors}`
109+
const inner = <>
110+
<h3 className="text-3xl font-semibold">
111+
{src && <Image src={src} width={24} height={24} alt="Icon" />}{icon && <span className="relative w-6 h-6 inline-block">{icon}</span>} {title}
112+
</h3>
113+
{
114+
alsoSite && <p className="mt-0 text-xs">
115+
{alsoSite == true ? "Also available on the site" : alsoSite}
116+
</p>
117+
}
118+
<p className="mt-2 text-lg">
119+
{desc}
120+
</p>
121+
</>
109122

110123
if (href)
111124
return <FormattedLink
@@ -114,22 +127,10 @@ function Card({ href, src, title, desc, location, colors = "bg-slate-300 dark:bg
114127
style={{ minHeight: "12rem" }}
115128
location={location}
116129
>
117-
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon" />} {title}</h3>
118-
{alsoSite && <p className="mt-0 text-xs">
119-
{alsoSite == true ? "Also available on the site" : alsoSite}
120-
</p>}
121-
<p className="mt-2 text-lg">
122-
{desc}
123-
</p>
130+
{inner}
124131
</FormattedLink>
125132
else
126133
return <div className={className} style={{ minHeight: "12rem" }}>
127-
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon" />} {title}</h3>
128-
{alsoSite && <p className="mt-0 text-xs">
129-
{alsoSite == true ? "Also available on the site" : alsoSite}
130-
</p>}
131-
<p className="mt-2 text-lg">
132-
{desc}
133-
</p>
134+
{inner}
134135
</div>
135136
}

‎pages/tools/gachacalc.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ function NumberInput({ value, set, label, min, max }: { value: number, set: (new
150150
return <div><label>
151151
{label}
152152
<input
153-
className="bg-white dark:bg-slate-800 rounded-lg px-2 ml-2 mt-1 focus:ring-indigo-500 focus:border-indigo-500"
153+
className="bg-slate-200 w-32 dark:bg-slate-800 rounded-lg px-2 ml-2 mt-1 focus:ring-indigo-500 focus:border-indigo-500"
154154
value={value}
155155
onChange={(e) => {
156156
const value = +e.target.value
@@ -168,7 +168,7 @@ function CheckboxInput({ value, set, label }: { value: boolean, set: (newValue:
168168
return <div><label>
169169
{label}
170170
<input
171-
className="bg-white dark:bg-slate-800 rounded-lg px-2 ml-2 mt-1 focus:ring-indigo-500 focus:border-indigo-500"
171+
className="bg-slate-200 dark:bg-slate-800 rounded-lg px-2 ml-2 mt-1 focus:ring-indigo-500 focus:border-indigo-500"
172172
checked={value}
173173
onChange={(e) => set(e.target.checked)}
174174
type="checkbox"
@@ -183,7 +183,7 @@ function SelectInput({ value, set, label, options }: { value: string, set: (newV
183183
<select
184184
value={value}
185185
onChange={e => set(e.target.value)}
186-
className="mt-1 ml-2 mb-2 py-0.5 px-2 border border-gray-300 bg-white dark:bg-slate-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
186+
className="mt-1 ml-2 mb-2 py-0.5 px-2 border border-gray-300 bg-slate-200 dark:bg-slate-800 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
187187
>
188188
{options.map(opt => <option key={opt}>{opt}</option>)}
189189
</select>
@@ -214,9 +214,9 @@ function calcSimsRegular(current: number, pity: number, pulls: number, guarantee
214214
}
215215

216216
function calcSimsInt(starterSim: Sim, pulls: number, banner: Banner): ReducedSim[] {
217-
console.time("Start")
217+
console.time("calc")
218218
const sims: Sim[] = calcSimsExact([starterSim], pulls, banner, 0)
219-
console.timeEnd("Start")
219+
console.timeEnd("calc")
220220

221221
// Reducing to simple sims with less information
222222
const reducedSims: ReducedSim[] = []

0 commit comments

Comments
 (0)