diff options
| author | Nate Sesti <sestinj@gmail.com> | 2023-07-04 12:47:28 -0700 |
|---|---|---|
| committer | Nate Sesti <sestinj@gmail.com> | 2023-07-04 12:47:28 -0700 |
| commit | c60dca996af40193ff333fa0fb537327abee37cb (patch) | |
| tree | 0e05b2f91ba00e74a52be4f0991e912b237a0f42 /extension/react-app/src/components/index.ts | |
| parent | 142e2043b82fbf46af3841f9b07613ab8484dd65 (diff) | |
| download | sncontinue-c60dca996af40193ff333fa0fb537327abee37cb.tar.gz sncontinue-c60dca996af40193ff333fa0fb537327abee37cb.tar.bz2 sncontinue-c60dca996af40193ff333fa0fb537327abee37cb.zip | |
better control over context
Diffstat (limited to 'extension/react-app/src/components/index.ts')
| -rw-r--r-- | extension/react-app/src/components/index.ts | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 429a7df5..db1925ed 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -124,16 +124,19 @@ export const appear = keyframes` } `; -export const HeaderButton = styled.button` - background-color: transparent; +export const HeaderButton = styled.button<{ inverted: boolean | undefined }>` + background-color: ${({ inverted }) => (inverted ? "white" : "transparent")}; + color: ${({ inverted }) => (inverted ? "black" : "white")}; + border: 1px solid white; border-radius: ${defaultBorderRadius}; cursor: pointer; - color: white; &:hover { - background-color: white; - color: black; + background-color: ${({ inverted }) => + typeof inverted === "undefined" || inverted ? "white" : "transparent"}; + color: ${({ inverted }) => + typeof inverted === "undefined" || inverted ? "black" : "white"}; } display: flex; align-items: center; |