Skip to content

Commit

Permalink
tweak shadow on static indicator & update docs copy (#71171)
Browse files Browse the repository at this point in the history
The shared shadow spread is a bit too large... this adds the shadow from
the original indicator & adds a border. Also updates the copy to clarify
the close behavior.

### Before

<details>
<summary>Dark Mode</summary>

![CleanShot 2024-10-11 at 17 08
06@2x](https://github.com/user-attachments/assets/b4f347c5-f42b-4d2c-9343-58797c73b876)



</details>

<details>
<summary>Light Mode</summary>

![CleanShot 2024-10-11 at 17 08
16@2x](https://github.com/user-attachments/assets/36c0f1f5-c12a-4b50-80fe-1a606506c410)


</details>

### After
<details>
<summary>Dark Mode</summary>

![CleanShot 2024-10-11 at 17 02
11@2x](https://github.com/user-attachments/assets/77c46fa0-b7c5-4a5c-bb07-ad959f1c2884)


</details>

<details>
<summary>Light Mode</summary>

![CleanShot 2024-10-11 at 17 05
23@2x](https://github.com/user-attachments/assets/715fe58f-3130-48f1-b0a2-ece4127544ab)


</details>
  • Loading branch information
ztanner authored Oct 12, 2024
1 parent f71f180 commit f9ff18e
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Next.js displays a static indicator in the bottom corner of the screen that sign
height="208"
/>

You can disable the indicator by closing it, or using the config option `next.config.js`:
You can temporarily hide the indicator by clicking the close indicator which will remember your preference in `localStorage` for 1 hour. To permanently disable it, you can use the config option in `next.config.js`:

```ts filename="next.config.ts" switcher
import type { NextConfig } from 'next'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ const styles = css`
background: var(--color-background);
color: var(--color-font);
transition: all 0.3s ease-in-out;
box-shadow:
inset 0 0 0 1px var(--color-border-shadow),
0 11px 40px 0 rgba(0, 0, 0, 0.25),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.nextjs-static-indicator-toast-wrapper:hover {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export function Base() {
--color-background: white;
--color-font: #757575;
--color-backdrop: rgba(17, 17, 17, 0.2);
--color-border-shadow: rgba(0, 0, 0, 0.145);
--color-title-color: #1f1f1f;
--color-stack-h6: #222;
Expand Down Expand Up @@ -65,6 +66,7 @@ export function Base() {
--color-background: rgb(28, 28, 30);
--color-font: white;
--color-backdrop: rgb(44, 44, 46);
--color-border-shadow: rgba(255, 255, 255, 0.145);
--color-title-color: #fafafa;
--color-stack-h6: rgb(200, 200, 204);
Expand Down

0 comments on commit f9ff18e

Please sign in to comment.