client/web: use smart quotes in web UI frontend

add the curly-quotes eslint plugin (same that we use for the admin panel), and fix existing straight quotes in the current web UI. Updates #cleanup Signed-off-by: Will Norris <will@tailscale.com>
nshalman · Feb 8, 2024 · 6f0c5e0 · 6f0c5e0
1 parent 128c99d
commit 6f0c5e0
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 6 deletions.
diff --git a/client/web/package.json b/client/web/package.json
@@ -25,6 +25,7 @@
     "autoprefixer": "^10.4.15",
     "eslint": "^8.23.1",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-curly-quotes": "^1.0.4",
     "jsdom": "^23.0.1",
     "postcss": "^8.4.31",
     "prettier": "^2.5.1",
@@ -50,9 +51,11 @@
       "react-app"
     ],
     "plugins": [
+      "curly-quotes",
       "react-hooks"
     ],
     "rules": {
+      "curly-quotes/no-straight-quotes": "warn",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "error"
     },

diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
@@ -180,7 +180,7 @@ export default function ExitNodeSelector({
       )}
       {pending && (
         <p className="text-white p-3">
-          Pending approval to run as exit node. This device won't be usable as
+          Pending approval to run as exit node. This device won’t be usable as
           an exit node until then.
         </p>
       )}

diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
@@ -190,7 +190,7 @@ function LoginPopoverContent({
                     ) : (
                       // ACLs allow access, but user can't connect.
                       <>
-                        Cannot access this device's Tailscale IP. Make sure you
+                        Cannot access this device’s Tailscale IP. Make sure you
                         are connected to your tailnet, and that your policy file
                         allows access.
                       </>
@@ -209,7 +209,7 @@ function LoginPopoverContent({
                 // User can connect to Tailcale IP; sign in when ready.
                 <>
                   <p className="text-gray-500 text-xs">
-                    You can see most of this device's details. To make changes,
+                    You can see most of this device’s details. To make changes,
                     you need to sign in.
                   </p>
                   {isHTTPS && (

diff --git a/client/web/src/components/update-available.tsx b/client/web/src/components/update-available.tsx
@@ -61,7 +61,7 @@ export function ChangelogText({ version }: { version?: string }) {
       <a href="https://tailscale.com/changelog/" className="link">
         release notes
       </a>{" "}
-      to find out what's new!
+      to find out what’s new!
     </>
   )
 }
diff --git a/client/web/src/components/views/login-view.tsx b/client/web/src/components/views/login-view.tsx
@@ -41,7 +41,7 @@ export default function LoginView({ data }: { data: NodeData }) {
         <>
           <div className="mb-6">
             <p className="text-gray-700">
-              Your device's key has expired. Reauthenticate this device by
+              Your device’s key has expired. Reauthenticate this device by
               logging in again, or{" "}
               <a
                 href="https://tailscale.com/kb/1028/key-expiry"

diff --git a/client/web/src/components/views/updating-view.tsx b/client/web/src/components/views/updating-view.tsx
@@ -35,7 +35,7 @@ export function UpdatingView({
             <Spinner size="sm" className="text-gray-400" />
             <h1 className="text-2xl m-3">Update in progress</h1>
             <p className="text-gray-400">
-              The update shouldn't take more than a couple of minutes. Once it's
+              The update shouldn’t take more than a couple of minutes. Once it’s
               completed, you will be asked to log in again.
             </p>
           </>

diff --git a/client/web/yarn.lock b/client/web/yarn.lock
@@ -3049,6 +3049,11 @@ eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
+eslint-plugin-curly-quotes@^1.0.4:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-curly-quotes/-/eslint-plugin-curly-quotes-1.0.10.tgz#dd61a1d6bb48123d842e21f2086f146c6ab5b8b0"
+  integrity sha512-v2SryrqXE8EEMgc7VSOpyQVZP1dy3N4aS5ZpTor2aV7/ltXlcX6kxpb/Ls5MoHz8ICheVoTuTwqYnSKFgjQUow==
+
 eslint-plugin-flowtype@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912"