[ez] Make dev mode more obvious in playground
It's easy to confuse your local browser tab with main, this modifies a few colors and labels to make it more obvious 
Lauren Tan committed
Jan 30, 2023 at 17:03 UTC
3b4f41b58d324264330fc72e189abf58e07043ea
4 files changed
+25
-6
compiler/forget/packages/playground/app/index.tsx
+5
-1
@@ -15,7 +15,11 @@ const Home: NextPage = () => {
15
return (
16
<div className="flex flex-col w-screen h-screen font-light">
17
<Head>
18
- <title>React Forget Playground</title>
18
+ <title>
19
+ {process.env.NODE_ENV === "development"
20
+ ? "[DEV] React Forget Playground"
21
+ : "React Forget Playground"}
22
+ </title>
23
<meta
24
name="viewport"
25
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
compiler/forget/packages/playground/app/layout.tsx
+5
-1
@@ -15,7 +15,11 @@ export default function RootLayout({
15
return (
16
<html lang="en">
17
<head>
18
- <title>React Forget Playground</title>
18
+ <title>
19
+ {process.env.NODE_ENV === "development"
20
+ ? "[DEV] React Forget Playground"
21
+ : "React Forget Playground"}
22
+ </title>
23
<meta
24
name="viewport"
25
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
compiler/forget/packages/playground/components/Header.tsx
+14
-3
@@ -4,6 +4,7 @@
4
5
import { RefreshIcon, ShareIcon, TrashIcon } from "@heroicons/react/outline";
6
import { CheckIcon } from "@heroicons/react/solid";
7
+import clsx from "clsx";
8
import { useSnackbar } from "notistack";
9
import { useState } from "react";
10
import { defaultStore, minimalStore } from "../lib/defaultStore";
@@ -47,13 +48,23 @@ export default function Header() {
48
return (
49
<div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200">
50
<div className="flex items-center flex-none h-full gap-2 text-lg">
50
- <Logo className="w-8 h-8 text-link" />
51
+ <Logo
52
+ className={clsx(
53
+ "w-8 h-8 text-link",
54
+ process.env.NODE_ENV === "development" && "text-yellow-600"
55
+ )}
56
+ />
57
<p className="hidden select-none sm:block">React Forget Playground</p>
58
<div
59
title="Do not share this outside of Meta"
54
- className="px-1 mb-px text-sm font-bold tracking-wide text-red-600 uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap"
60
+ className={clsx(
61
+ "px-1 mb-px text-sm font-bold tracking-wide uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap",
62
+ process.env.NODE_ENV === "development"
63
+ ? "text-yellow-600"
64
+ : "text-red-600"
65
+ )}
66
>
56
- Private
67
+ {process.env.NODE_ENV === "development" ? "DEV" : "Private"}
68
</div>
69
</div>
70
<div className="flex items-center text-[15px] gap-4">
compiler/forget/packages/playground/package.json
+1
-1
@@ -4,7 +4,7 @@
4
"private": true,
5
"scripts": {
6
"preinstall": "./scripts/setup.sh",
7
- "dev": "next dev",
7
+ "dev": "NODE_ENV=development && next dev",
8
"build": "next build && node ./scripts/downloadFonts.js",
9
"start": "next start",
10
"lint": "next lint"