chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

lower contrast on gallery controls

Browse Source
This commit is contained in:
Chuck Dries 2023-03-08 00:27:23 -08:00
parent b6f6476170
commit bd2eac1ef3
5 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/KeywordsPicker.tsx
View File

@ -21,11 +21,11 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
<button
className={classNames(
`py-[5px] px-3 rounded-full text-sm`,
`text-black border border-black`,
`text-black border border-gray-400`,
selected
? "bg-transparentblack font-bold"
? "bg-black/10 font-bold"
: `bg-white
hover:bg-transparentblack`
hover:bg-black/10`
)}
onClick={() => (selected ? onChange(null) : onChange(keyword))}
type="button"

2
src/components/ListBox.tsx
View File

@ -92,7 +92,7 @@ function Option({ item, state }: OptionProps) {
<li
{...optionProps}
className={`p-2 outline-none cursor-default flex items-center justify-between ${text} text-sm ${
isFocused ? "bg-transparentblack" : ""
isFocused ? "bg-black/10" : ""
} ${isSelected ? "font-bold" : ""}`}
ref={ref}
>

4
src/components/Nav.tsx
View File

@ -4,13 +4,13 @@ import { Link } from "gatsby";
import { Popover } from "react-tiny-popover";
const navClasses =
"hover:underline hover:bg-transparentblack block p-3 text-black";
"hover:underline hover:bg-black/10 block p-3 text-black";
const ExternalLinks = () => (
<ul
className={classnames(
"z-30 overflow-hidden bg-vibrant-dark",
"rounded shadow border border-vibrant-light"
"rounded shadow-lg border border-gray-400"
)}
>
<li>

4
src/components/Select.tsx
View File

@ -48,8 +48,8 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
/>
<button
{...mergeProps(buttonProps, focusProps)}
className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border hover:bg-transparentblack ${
isFocusVisible ? "border-green-700" : "border-black"
className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border hover:bg-black/10 ${
isFocusVisible ? "border-green-700" : "border-gray-400"
} ${state.isOpen ? "bg-gray-100" : "bg-white"}`}
ref={ref}
>

2
src/pages/photogallery.tsx
View File

@ -275,7 +275,7 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
value={filterKeyword}
/>
<div className="m-2 flex flex-row items-end">
<div className="border border-black rounded mr-2">
<div className="border border-gray-400 rounded mr-2">
<Switch
isSelected={showPalette}
onChange={(val) => setShowPalette(val)}