TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-11-04 09:25:11 +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
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" />
<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="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin />
</head>
<body>
<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 React, { useEffect } from "react"
import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
import LoginToggle from "src/components/login-toggle"
import DeviceDetailsView from "src/components/views/device-details-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 useAuth, { AuthResponse } from "src/hooks/auth"
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"
export default function App() {

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

@@ -1,5 +1,7 @@
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, {
ExitNode,
noExitNode,
@@ -7,8 +9,6 @@ import useExitNodes, {
trimDNSSuffix,
} from "src/hooks/exit-nodes"
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 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 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 { 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 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 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 { 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"
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 { apiFetch } from "src/api"
import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
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

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

@@ -1,12 +1,12 @@
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 {
UpdateState,
useInstallUpdate,
VersionInfo,
} 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 { Link } from "wouter"

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

@@ -3,6 +3,18 @@
@tailwind utilities;
@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 {
@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 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 = {
className?: string

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

@@ -5,6 +5,31 @@ module.exports = {
"./src/**/*.{js,ts,jsx,tsx}",
],
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: {},
},
plugins: [],