Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ez] Make dev mode more obvious in playground

Browse Source 
It's easy to confuse your local browser tab with main, this modifies a 

few colors and labels to make it more obvious 

![Screenshot 2023-01-30 at 5 05 18 
PM](https://user-images.githubusercontent.com/1390709/215606089-78e5c874-263e-46e9-a99d-3d863bdc4432.png)
This commit is contained in:
Lauren Tan
2023-01-30 17:03:59 -05:00
parent 213ed2d6d0
commit 3b4f41b58d
4 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/forget/packages/playground/app/index.tsx
+5 -1
View File
@@ -15,7 +15,11 @@ const Home: NextPage = () => {
return (
<div className="flex flex-col w-screen h-screen font-light">
<Head>
<title>React Forget Playground</title>
<title>
{process.env.NODE_ENV === "development"
? "[DEV] React Forget Playground"
: "React Forget Playground"}
</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
compiler/forget/packages/playground/app/layout.tsx
+5 -1
View File
@@ -15,7 +15,11 @@ export default function RootLayout({
return (
<html lang="en">
<head>
<title>React Forget Playground</title>
<title>
{process.env.NODE_ENV === "development"
? "[DEV] React Forget Playground"
: "React Forget Playground"}
</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
compiler/forget/packages/playground/components/Header.tsx
+14 -3
View File
@@ -4,6 +4,7 @@
import { RefreshIcon, ShareIcon, TrashIcon } from "@heroicons/react/outline";
import { CheckIcon } from "@heroicons/react/solid";
import clsx from "clsx";
import { useSnackbar } from "notistack";
import { useState } from "react";
import { defaultStore, minimalStore } from "../lib/defaultStore";
@@ -47,13 +48,23 @@ export default function Header() {
return (
<div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200">
<div className="flex items-center flex-none h-full gap-2 text-lg">
<Logo className="w-8 h-8 text-link" />
<Logo
className={clsx(
"w-8 h-8 text-link",
process.env.NODE_ENV === "development" && "text-yellow-600"
)}
/>
<p className="hidden select-none sm:block">React Forget Playground</p>
<div
title="Do not share this outside of Meta"
className="px-1 mb-px text-sm font-bold tracking-wide text-red-600 uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap"
className={clsx(
"px-1 mb-px text-sm font-bold tracking-wide uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap",
process.env.NODE_ENV === "development"
? "text-yellow-600"
: "text-red-600"
)}
>
Private
{process.env.NODE_ENV === "development" ? "DEV" : "Private"}
</div>
</div>
<div className="flex items-center text-[15px] gap-4">
compiler/forget/packages/playground/package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"preinstall": "./scripts/setup.sh",
"dev": "next dev",
"dev": "NODE_ENV=development && next dev",
"build": "next build && node ./scripts/downloadFonts.js",
"start": "next start",
"lint": "next lint"