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 <button
className={classNames( className={classNames(
`py-[5px] px-3 rounded-full text-sm`, `py-[5px] px-3 rounded-full text-sm`,
`text-black border border-black`, `text-black border border-gray-400`,
selected selected
? "bg-transparentblack font-bold" ? "bg-black/10 font-bold"
: `bg-white : `bg-white
hover:bg-transparentblack` hover:bg-black/10`
)} )}
onClick={() => (selected ? onChange(null) : onChange(keyword))} onClick={() => (selected ? onChange(null) : onChange(keyword))}
type="button" type="button"

2
src/components/ListBox.tsx
View File

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

4
src/components/Nav.tsx
View File

@ -4,13 +4,13 @@ import { Link } from "gatsby";
import { Popover } from "react-tiny-popover"; import { Popover } from "react-tiny-popover";
const navClasses = 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 = () => ( const ExternalLinks = () => (
<ul <ul
className={classnames( className={classnames(
"z-30 overflow-hidden bg-vibrant-dark", "z-30 overflow-hidden bg-vibrant-dark",
"rounded shadow border border-vibrant-light" "rounded shadow-lg border border-gray-400"
)} )}
> >
<li> <li>

4
src/components/Select.tsx
View File

@ -48,8 +48,8 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
/> />
<button <button
{...mergeProps(buttonProps, focusProps)} {...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 ${ 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-black" isFocusVisible ? "border-green-700" : "border-gray-400"
} ${state.isOpen ? "bg-gray-100" : "bg-white"}`} } ${state.isOpen ? "bg-gray-100" : "bg-white"}`}
ref={ref} ref={ref}
> >

2
src/pages/photogallery.tsx
View File

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