Skip to content

Commit e17d011

Browse files
cprussincprussin
authored
Add light mode (#310)
1 parent 0020232 commit e17d011

16 files changed

+153
-251
lines changed

‎components/ContractInfo.tsx

+5-11
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,25 @@ const ContractInfo = () => {
4040
<div className="my-4">
4141
<EvmNetworkSelector />
4242
</div>
43-
<table className="w-full text-left table-fixed">
43+
<table className="w-full text-left table-fixed bg-neutral-200 dark:bg-darkGray2">
4444
<tbody>
45-
<tr
46-
key="Contract Address"
47-
className="border-b border-darkGray5 bg-darkGray"
48-
>
45+
<tr key="Contract Address" className="border-b border-darkGray5">
4946
<td className="py-3 pl-6 pr-1 lg:pl-14 w-48">Contract Address</td>
5047
<td className="py-3 pl-1 lg:pl-14">
5148
{configValue(pythAddressConfig.pythAddress)}
5249
</td>
5350
</tr>
54-
<tr key="Chain ID" className="border-b border-darkGray5 bg-darkGray">
51+
<tr key="Chain ID" className="border-b border-darkGray5">
5552
<td className="py-3 pl-6 pr-1 lg:pl-14">Chain ID</td>
5653
<td className="py-3 pl-1 lg:pl-14">
5754
{configValue(pythAddressConfig.chainId.toString())}
5855
</td>
5956
</tr>
60-
<tr
61-
key="Update Fee"
62-
className="border-b border-darkGray5 bg-darkGray"
63-
>
57+
<tr key="Update Fee" className="border-b border-darkGray5">
6458
<td className="py-3 pl-6 pr-1 lg:pl-14">Update Fee</td>
6559
<td className="py-3 pl-1 lg:pl-14">{configValue(fee)}</td>
6660
</tr>
67-
<tr key="Valid Time Period" className="bg-darkGray">
61+
<tr key="Valid Time Period">
6862
<td className="py-3 pl-6 pr-1 lg:pl-14">Valid Time Period</td>
6963
<td className="py-3 pl-1 lg:pl-14">
7064
{configValue(validTimePeriod)}

‎components/CosmWasmExecute.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -109,12 +109,15 @@ const CosmWasmExecute = ({ buildMsg, feeKey }: CosmWasmExecuteProps) => {
109109
{isConnected && (
110110
<div className="space-x-2 mb-4">
111111
<button
112-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF]"
112+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
113113
onClick={executeQuery}
114114
>
115115
execute query
116116
</button>
117-
<button className="font-normal text-base" onClick={clearResponse}>
117+
<button
118+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 font-normal text-base"
119+
onClick={clearResponse}
120+
>
118121
clear
119122
</button>
120123
</div>
@@ -159,7 +162,7 @@ export const CosmWasmAccountButton = () => {
159162
} else {
160163
return (
161164
<button
162-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF]"
165+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
163166
onClick={() => handleSuggestAndConnect()}
164167
>
165168
Connect Wallet

‎components/CosmWasmQuery.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,15 @@ const CosmWasmQuery = ({ buildQuery }: CosmWasmQueryProps) => {
6969
<div className="flex flex-col md:flex-row md:justify-between">
7070
<div className="space-x-2 mt-4 md:my-4">
7171
<button
72-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF]"
72+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
7373
onClick={sendTransaction}
7474
>
7575
execute query
7676
</button>
77-
<button className="font-normal text-base" onClick={clearResponse}>
77+
<button
78+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 font-normal text-base"
79+
onClick={clearResponse}
80+
>
7881
clear
7982
</button>
8083
</div>

‎components/EvmCall.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,15 @@ const EvmCall = ({ functionName, buildArguments }: EvmCallProps) => {
8181
<div className="flex flex-col md:flex-row md:justify-between">
8282
<div className="space-x-2 mt-4 md:my-4">
8383
<button
84-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF]"
84+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
8585
onClick={sendTransaction}
8686
>
8787
execute query
8888
</button>
89-
<button className="font-normal text-base" onClick={clearResponse}>
89+
<button
90+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 font-normal text-base"
91+
onClick={clearResponse}
92+
>
9093
clear
9194
</button>
9295
</div>

‎components/EvmSend.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,15 @@ const EvmSend = ({ functionName, buildArguments, feeKey }: EvmSendProps) => {
8787
{isConnected && (
8888
<div className="space-x-2 mb-4">
8989
<button
90-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF]"
90+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
9191
onClick={executeQuery}
9292
>
9393
execute query
9494
</button>
95-
<button className="font-normal text-base" onClick={clearResponse}>
95+
<button
96+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 font-normal text-base"
97+
onClick={clearResponse}
98+
>
9699
clear
97100
</button>
98101
</div>

‎components/Example.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@ const Example = ({ keyValues, value }: ExampleProps) => {
6565
};
6666

6767
return (
68-
<button className="bg-darkGray1 text-base text-light" onClick={handleClick}>
68+
<button
69+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 text-base"
70+
onClick={handleClick}
71+
>
6972
{value}
7073
</button>
7174
);

‎components/Input.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Input = ({ id, format }: InputProps) => {
4545
name={id}
4646
value={keyValueStore[id] ? keyValueStore[id] : ""}
4747
onChange={(e) => handleQueryChange(id, e.target.value)}
48-
className="w-full text-base"
48+
className="w-full text-base border-black/20 dark:border-white/40 border"
4949
/>
5050
{errorMessage && (
5151
<p className="input-error pt-2 text-base">{errorMessage}</p>

‎components/Logo.tsx

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
export default function Logo() {
2-
return (
3-
<svg width="24" height="30" viewBox="0 0 24 30" fill="none">
4-
<path
5-
d="M14.664 12.2985C14.664 13.8758 13.386 15.1548 11.8098 15.1548V18.0111C14.9622 18.0111 17.5181 15.4532 17.5181 12.2985C17.5181 9.1438 14.9622 6.58594 11.8098 6.58594C10.7707 6.58594 9.79477 6.86368 8.9557 7.35071C7.24916 8.33769 6.10156 10.1837 6.10156 12.2985V26.5799L8.66783 29.1481L8.9557 29.4362V12.2985C8.9557 10.7211 10.2337 9.44222 11.8098 9.44222C13.386 9.44222 14.664 10.7211 14.664 12.2985Z"
6-
fill="#E6DAFE"
7-
/>
8-
<path
9-
d="M11.8111 0.867188C9.73147 0.867188 7.78224 1.42397 6.10281 2.39674C5.0275 3.01812 4.06451 3.81002 3.24867 4.73628C1.47242 6.75027 0.394531 9.39598 0.394531 12.2923V20.8611L3.24867 23.7174V12.2923C3.24867 9.75512 4.35108 7.475 6.10281 5.9054C6.92639 5.16905 7.89326 4.58772 8.95694 4.21308C9.84894 3.89528 10.8106 3.72347 11.8111 3.72347C16.5396 3.72347 20.3735 7.56026 20.3735 12.2923C20.3735 17.0244 16.5396 20.8611 11.8111 20.8611V23.7174C18.117 23.7174 23.2276 18.6017 23.2276 12.2923C23.2276 5.98291 18.117 0.867188 11.8111 0.867188Z"
10-
fill="#E6DAFE"
11-
/>
12-
</svg>
13-
);
14-
}
1+
import { SVGAttributes } from "react";
2+
3+
export const Logo = (props: SVGAttributes<SVGSVGElement>) => (
4+
<svg viewBox="0 0 24 30" {...props}>
5+
<path d="M14.664 12.299a2.855 2.855 0 0 1-2.854 2.856v2.856a5.71 5.71 0 0 0 5.708-5.712A5.71 5.71 0 0 0 8.956 7.35a5.708 5.708 0 0 0-2.854 4.948v14.28l2.566 2.57.288.287V12.3a2.855 2.855 0 1 1 5.708 0Z" />
6+
<path d="M11.811.867c-2.08 0-4.029.557-5.708 1.53a11.417 11.417 0 0 0-2.854 2.34 11.386 11.386 0 0 0-2.854 7.555v8.57l2.854 2.855V12.292a8.552 8.552 0 0 1 2.854-6.387 8.545 8.545 0 0 1 5.708-2.182c4.729 0 8.563 3.837 8.563 8.57 0 4.731-3.834 8.568-8.563 8.568v2.856c6.306 0 11.417-5.115 11.417-11.425 0-6.31-5.111-11.425-11.417-11.425Z" />
7+
</svg>
8+
);

‎components/RestGet.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,15 @@ const RestGet = ({ endpoint, queryParams }: RestGetProps) => {
7979
<>
8080
<div className="flex space-x-2">
8181
<button
82-
className="bg-[#E6DAFE] text-[#141227] font-normal text-base hover:bg-[#F2ECFF] my-4"
82+
className="px-2 py-1 bg-light dark:bg-lightLinks hover:bg-darkLinks dark:hover:bg-darkLinks font-normal text-base"
8383
onClick={handleRunCode}
8484
>
8585
execute query
8686
</button>
87-
<button className="font-normal text-base my-4" onClick={clearResponse}>
87+
<button
88+
className="px-2 py-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5 font-normal text-base"
89+
onClick={clearResponse}
90+
>
8891
clear
8992
</button>
9093
</div>

‎components/Selector.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Selector = ({ values, currentValue, onChange }: SelectorProps) => {
2626
{({ open }) => (
2727
<>
2828
<Menu.Button
29-
className={`inline-flex w-full items-center justify-between py-3 px-6 text-sm outline-0 bg-darkGray2`}
29+
className={`inline-flex w-full items-center justify-between py-3 px-6 text-sm outline-0 bg-neutral-200 hover:bg-neutral-300 dark:bg-darkGray3 dark:hover:bg-darkGray5`}
3030
>
3131
<span className="mr-3">{currentValue}</span>
3232
<ArrowDownIcon className={`${open && "rotate-180"}`} />
@@ -44,7 +44,7 @@ const Selector = ({ values, currentValue, onChange }: SelectorProps) => {
4444
{values.map((n) => (
4545
<Menu.Item key={n}>
4646
<button
47-
className={`block w-full py-3 px-6 text-left text-sm bg-darkGray hover:bg-darkGray2`}
47+
className={`block w-full py-3 px-6 text-left text-sm bg-neutral-200 dark:bg-darkGray3 hover:bg-neutral-300 dark:hover:bg-darkGray5`}
4848
value={n}
4949
onClick={handleChange}
5050
>

‎package-lock.json

+17-19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"jest-expect-message": "^1.1.3",
5151
"postcss": "^8.4.24",
5252
"solc": "^0.8.20",
53-
"tailwindcss": "^3.3.2",
53+
"tailwindcss": "^3.4.3",
5454
"ts-node": "^10.9.1",
5555
"typescript": "^5.1.6"
5656
}

‎pages/_document.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Script from "next/script";
33

44
export default function Document() {
55
return (
6-
<Html>
6+
<Html lang="en" dir="ltr">
77
<Head>
88
<link
99
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;600&family=Red+Hat+Mono&family=Red+Hat+Text:wght@400;600&display=swap"

0 commit comments

Comments
 (0)