TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-04-16 19:51:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/web: add Inter font

Browse Source 
Adds Inter font and uses it as the default for the web UI.
Creates a new /assets folder to house the /fonts, and moves /icons
to live here too.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy 2023-11-16 14:27:01 -05:00 committed by Sonia Appasamy
parent 2dc0645368
commit 38ea8f8c9c
23 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/web/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAx4QGA4EvmzDAAAA30lEQVRIx2NgGAWMCKa8JKM4A8Ovt88ekyLCDGOoyDBJMjExMbFy8zF8/EKsCAMDE8yAPyIwFps48SJIBpAL4AZwvoSx/r0lXgQpDN58EWL5x/7/H+vL20+JFxluQKVe5b3Ke5V+0kQQCamfoYKBg4GDwUKI8d0BYkWQkrLKewYBKPPDHUFiRaiZkBgmwhj/F5IgggyUJ6i8V3mv0kCayDAAeEsklXqGAgYGhgV3CnGrwVciYSYk0kokhgS44/JxqqFpiYSZbEgskd4dEBRk1GD4wdB5twKXmlHAwMDAAACdEZau06NQUwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNVQxNTo1Mzo0MCswMDowMCVXsDIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTVUMTU6NTM6NDArMDA6MDBUCgiOAAAAAElFTkSuQmCC" /> <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAx4QGA4EvmzDAAAA30lEQVRIx2NgGAWMCKa8JKM4A8Ovt88ekyLCDGOoyDBJMjExMbFy8zF8/EKsCAMDE8yAPyIwFps48SJIBpAL4AZwvoSx/r0lXgQpDN58EWL5x/7/H+vL20+JFxluQKVe5b3Ke5V+0kQQCamfoYKBg4GDwUKI8d0BYkWQkrLKewYBKPPDHUFiRaiZkBgmwhj/F5IgggyUJ6i8V3mv0kCayDAAeEsklXqGAgYGhgV3CnGrwVciYSYk0kokhgS44/JxqqFpiYSZbEgskd4dEBRk1GD4wdB5twKXmlHAwMDAAACdEZau06NQUwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNVQxNTo1Mzo0MCswMDowMCVXsDIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTVUMTU6NTM6NDArMDA6MDBUCgiOAAAAAElFTkSuQmCC" />
<link rel="stylesheet" type="text/css" href="/src/index.css" /> <link rel="stylesheet" type="text/css" href="/src/index.css" />
<link rel="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin />
</head> </head>
<body> <body>
<noscript> <noscript>

BIN
client/web/src/assets/fonts/Inter.var.latin.woff2 Normal file
View File

Binary file not shown.

0
client/web/src/icons/arrow-right.svg → client/web/src/assets/icons/arrow-right.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 B

After

Width:  |  Height:  |  Size: 324 B

0
client/web/src/icons/arrow-up-circle.svg → client/web/src/assets/icons/arrow-up-circle.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 522 B

After

Width:  |  Height:  |  Size: 522 B

0
client/web/src/icons/check-circle.svg → client/web/src/assets/icons/check-circle.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 704 B

After

Width:  |  Height:  |  Size: 704 B

0
client/web/src/icons/check.svg → client/web/src/assets/icons/check.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 236 B

After

Width:  |  Height:  |  Size: 236 B

0
client/web/src/icons/chevron-down.svg → client/web/src/assets/icons/chevron-down.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 203 B

0
client/web/src/icons/connected-device.svg → client/web/src/assets/icons/connected-device.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
client/web/src/icons/eye.svg → client/web/src/assets/icons/eye.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 738 B

After

Width:  |  Height:  |  Size: 738 B

0
client/web/src/icons/search.svg → client/web/src/assets/icons/search.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

0
client/web/src/icons/tailscale-icon.svg → client/web/src/assets/icons/tailscale-icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
client/web/src/icons/tailscale-logo.svg → client/web/src/assets/icons/tailscale-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

0
client/web/src/icons/user.svg → client/web/src/assets/icons/user.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 635 B

After

Width:  |  Height:  |  Size: 635 B

0
client/web/src/icons/x-circle.svg → client/web/src/assets/icons/x-circle.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 506 B

After

Width:  |  Height:  |  Size: 506 B

2
client/web/src/components/app.tsx
View File

@ -1,5 +1,6 @@
import cx from "classnames" import cx from "classnames"
import React, { useEffect } from "react" import React, { useEffect } from "react"
import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
import LoginToggle from "src/components/login-toggle" import LoginToggle from "src/components/login-toggle"
import DeviceDetailsView from "src/components/views/device-details-view" import DeviceDetailsView from "src/components/views/device-details-view"
import HomeView from "src/components/views/home-view" import HomeView from "src/components/views/home-view"
@ -8,7 +9,6 @@ import SSHView from "src/components/views/ssh-view"
import { UpdatingView } from "src/components/views/updating-view" import { UpdatingView } from "src/components/views/updating-view"
import useAuth, { AuthResponse } from "src/hooks/auth" import useAuth, { AuthResponse } from "src/hooks/auth"
import useNodeData, { NodeData } from "src/hooks/node-data" import useNodeData, { NodeData } from "src/hooks/node-data"
import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
import { Link, Route, Router, Switch, useLocation } from "wouter" import { Link, Route, Router, Switch, useLocation } from "wouter"
export default function App() { export default function App() {

6
client/web/src/components/exit-node-selector.tsx
View File

@ -1,5 +1,7 @@
import cx from "classnames" import cx from "classnames"
import { default as React, useCallback, useMemo, useState } from "react" import React, { useCallback, useMemo, useState } from "react"
import { ReactComponent as Check } from "src/assets/icons/check.svg"
import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
import useExitNodes, { import useExitNodes, {
ExitNode, ExitNode,
noExitNode, noExitNode,
@ -7,8 +9,6 @@ import useExitNodes, {
trimDNSSuffix, trimDNSSuffix,
} from "src/hooks/exit-nodes" } from "src/hooks/exit-nodes"
import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data" import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data"
import { ReactComponent as Check } from "src/icons/check.svg"
import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
import Popover from "src/ui/popover" import Popover from "src/ui/popover"
import SearchInput from "src/ui/search-input" import SearchInput from "src/ui/search-input"

6
client/web/src/components/login-toggle.tsx
View File

@ -1,10 +1,10 @@
import cx from "classnames" import cx from "classnames"
import React, { useCallback, useEffect, useState } from "react" import React, { useCallback, useEffect, useState } from "react"
import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
import { ReactComponent as Eye } from "src/assets/icons/eye.svg"
import { ReactComponent as User } from "src/assets/icons/user.svg"
import { AuthResponse, AuthType } from "src/hooks/auth" import { AuthResponse, AuthType } from "src/hooks/auth"
import { NodeData } from "src/hooks/node-data" import { NodeData } from "src/hooks/node-data"
import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
import { ReactComponent as Eye } from "src/icons/eye.svg"
import { ReactComponent as User } from "src/icons/user.svg"
import Popover from "src/ui/popover" import Popover from "src/ui/popover"
import ProfilePic from "src/ui/profile-pic" import ProfilePic from "src/ui/profile-pic"

4
client/web/src/components/views/home-view.tsx
View File

@ -1,9 +1,9 @@
import cx from "classnames" import cx from "classnames"
import React from "react" import React from "react"
import { ReactComponent as ArrowRight } from "src/assets/icons/arrow-right.svg"
import { ReactComponent as ConnectedDeviceIcon } from "src/assets/icons/connected-device.svg"
import ExitNodeSelector from "src/components/exit-node-selector" import ExitNodeSelector from "src/components/exit-node-selector"
import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data" import { NodeData, NodeUpdate, PrefsUpdate } from "src/hooks/node-data"
import { ReactComponent as ArrowRight } from "src/icons/arrow-right.svg"
import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
import { Link } from "wouter" import { Link } from "wouter"
export default function HomeView({ export default function HomeView({

2
client/web/src/components/views/login-view.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from "react" import React, { useCallback } from "react"
import { apiFetch } from "src/api" import { apiFetch } from "src/api"
import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
import { NodeData } from "src/hooks/node-data" import { NodeData } from "src/hooks/node-data"
import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
/** /**
* LoginView is rendered when the client is not authenticated * LoginView is rendered when the client is not authenticated

4
client/web/src/components/views/updating-view.tsx
View File

@ -1,12 +1,12 @@
import React from "react" import React from "react"
import { ReactComponent as CheckCircleIcon } from "src/assets/icons/check-circle.svg"
import { ReactComponent as XCircleIcon } from "src/assets/icons/x-circle.svg"
import { ChangelogText } from "src/components/update-available" import { ChangelogText } from "src/components/update-available"
import { import {
UpdateState, UpdateState,
useInstallUpdate, useInstallUpdate,
VersionInfo, VersionInfo,
} from "src/hooks/self-update" } from "src/hooks/self-update"
import { ReactComponent as CheckCircleIcon } from "src/icons/check-circle.svg"
import { ReactComponent as XCircleIcon } from "src/icons/x-circle.svg"
import Spinner from "src/ui/spinner" import Spinner from "src/ui/spinner"
import { Link } from "wouter" import { Link } from "wouter"

12
client/web/src/index.css
View File

@ -3,6 +3,18 @@
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
@font-face {
font-family: "Inter";
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url("./assets/fonts/Inter.var.latin.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
U+02BB-02BC, U+2000-206F, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF,
U+FFFD, U+E06B-E080, U+02E2, U+02E2, U+02B0, U+1D34, U+1D57, U+1D40,
U+207F, U+1D3A, U+1D48, U+1D30, U+02B3, U+1D3F;
}
h1 { h1 {
@apply text-neutral-800 text-[22px] font-medium leading-[30.80px]; @apply text-neutral-800 text-[22px] font-medium leading-[30.80px];
} }

2
client/web/src/ui/search-input.tsx
View File

@ -1,6 +1,6 @@
import cx from "classnames" import cx from "classnames"
import React, { forwardRef, InputHTMLAttributes } from "react" import React, { forwardRef, InputHTMLAttributes } from "react"
import { ReactComponent as Search } from "src/icons/search.svg" import { ReactComponent as Search } from "src/assets/icons/search.svg"
type Props = { type Props = {
className?: string className?: string

25
client/web/tailwind.config.js
View File

@ -5,6 +5,31 @@ module.exports = {
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
theme: { theme: {
fontFamily: {
sans: [
"Inter",
"-apple-system",
"BlinkMacSystemFont",
"Helvetica",
"Arial",
"sans-serif",
],
mono: [
"SFMono-Regular",
"SFMono Regular",
"Consolas",
"Liberation Mono",
"Menlo",
"Courier",
"monospace",
],
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
},
extend: {}, extend: {},
}, },
plugins: [], plugins: [],