Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Add Nunito Sans font and update global styles. (#59)

Browse Source 
This is the first PR as a part of the Fleet UI Refresh #38.

Changes include:

- Add Nunito Sans font files and modify global styles to reflect the font change.
- Modify global font variables to reflect new sizing and weight naming conventions.
-- New sizing and naming conventions:
--- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px
--- WEIGHT: regular: 400, bold: 700
- Remove the old Oxygen font files.

Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
This commit is contained in:
noahtalerman
2020-11-19 16:51:22 -08:00
committed by GitHub
parent d3d4f81530
commit 23ce98ec51
73 changed files with 165 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/mail/templates/change_email_confirmation.html
+9 -8
View File
@@ -1,10 +1,11 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Oxygen', sans-serif;
font-family: 'Nunito Sans', sans-serif;
}
h1 {
@@ -41,23 +42,23 @@
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Oxygen', Arial, sans-serif; color: #66696f; border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Nunito Sans', sans-serif; color: #66696f; border-collapse:collapse;">
<tr>
<td valign="top" align="center">
<table width="580" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="margin: 20px 10px;">
<tr>
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Nunito Sans', sans-serif;">
<img src="{{.AssetURL}}/assets/images/kolide-logo-color@2x.png?raw=true" width="174" height="48" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:60px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" style="padding:60px; font-family: 'Nunito Sans', sans-serif;">
<h1>Change Confirmation</h1>
<p><strong>Hello,</strong></p>
<p>This message is to confirm that the email address you recently changed actually works. Please click the link below to confirm that you want to change your email address in Kolide.</p>
<table bgcolor="#f4f6fb" height="100px" cellpadding="20px">
<tr>
<td style="font-family: 'Oxygen', Arial, sans-serif;">
<td style="font-family: 'Nunito Sans', sans-serif;">
<a href="{{.BaseURL}}/email/change/{{.Token}}">{{.BaseURL}}/email/change/{{.Token}}</a>
</td>
</tr>
@@ -65,10 +66,10 @@
</td>
</tr>
<tr bgcolor="#9ca3ac">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif; color: #fff;">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif; color: #fff;">
<a href="https://github.com/fleetdm/fleet/tree/master/docs" style="color: #fff; text-decoration: none;">Fleet Documentation</a>
</td>
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif;">
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif;">
<a href="https://kolide.com" style="text-decoration: none;"><img src="{{.AssetURL}}/assets/images/kolide-white@2x.png?raw=true" width="122" height="33" /></a>
</td>
</tr>
server/mail/templates/invite_token.html
+9 -8
View File
@@ -1,10 +1,11 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Oxygen', sans-serif;
font-family: 'Nunito Sans', sans-serif;
}
h1 {
@@ -41,23 +42,23 @@
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Oxygen', Arial, sans-serif; color: #66696f; border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Nunito Sans', sans-serif; color: #66696f; border-collapse:collapse;">
<tr>
<td valign="top" align="center">
<table width="580" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="margin: 20px 10px;">
<tr>
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Nunito Sans', sans-serif;">
<img src="{{.AssetURL}}/assets/images/kolide-logo-color@2x.png?raw=true" width="174" height="48" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:60px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" style="padding:60px; font-family: 'Nunito Sans', sans-serif;">
<h1>You Have Been Invited To Fleet!</h1>
<p><strong>Hello,</strong></p>
<p>{{.InvitedByUsername}} has invited you to join <strong>{{.OrgName}}</strong>. Please click the link below to accept the invitation and setup your account.</p>
<table bgcolor="#f4f6fb" height="100px" cellpadding="20px">
<tr>
<td style="font-family: 'Oxygen', Arial, sans-serif;">
<td style="font-family: 'Nunito Sans', sans-serif;">
{{if .SSOEnabled}}
<a href="{{.BaseURL}}/login/ssoinvites/{{.Token}}?name={{.Name}}&email={{.Email}}">{{.BaseURL}}/login/ssoinvites/{{.Token}}?name={{.Name}}&email={{.Email}}</a>
{{else}}
@@ -69,10 +70,10 @@
</td>
</tr>
<tr bgcolor="#9ca3ac">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif; color: #fff;">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif; color: #fff;">
<a href="https://github.com/fleetdm/fleet/tree/master/docs" style="color: #fff; text-decoration: none;">Fleet Documentation</a>
</td>
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif;">
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif;">
<a href="https://kolide.com" style="text-decoration: none;"><img src="{{.AssetURL}}/assets/images/kolide-white@2x.png?raw=true" width="122" height="33" /></a>
</td>
</tr>
server/mail/templates/password_reset.html
+8 -7
View File
@@ -1,10 +1,11 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Oxygen', sans-serif;
font-family: 'Nunito Sans', sans-serif;
}
h1 {
@@ -41,17 +42,17 @@
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Oxygen', Arial, sans-serif; color: #66696f; border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Nunito Sans', sans-serif; color: #66696f; border-collapse:collapse;">
<tr>
<td valign="top" align="center">
<table width="580" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="margin: 20px 10px;">
<tr>
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Nunito Sans', sans-serif;">
<img src="{{.AssetURL}}/assets/images/kolide-logo-color@2x.png?raw=true" width="174" height="48" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:60px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" style="padding:60px; font-family: 'Nunito Sans', sans-serif;">
<h1 style="font-weight:300">Reset Your Fleet Password...</h1>
<p>Someone requested a password reset on your Fleet account. Follow the link below to reset your password:</p>
<p><a href="{{.BaseURL}}/login/reset?token={{.Token}}">Reset Password</a></p>
@@ -59,10 +60,10 @@
</td>
</tr>
<tr bgcolor="#9ca3ac">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif; color: #fff;">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif; color: #fff;">
<a href="https://github.com/fleetdm/fleet/tree/master/docs" style="color: #fff; text-decoration: none;">Fleet Documentation</a>
</td>
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif;">
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif;">
<a href="https://kolide.com" style="text-decoration: none;"><img src="{{.AssetURL}}/assets/images/kolide-white@2x.png?raw=true" width="122" height="33" /></a>
</td>
</tr>
server/mail/templates/smtp_setup.html
+8 -7
View File
@@ -1,10 +1,11 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Oxygen', sans-serif;
font-family: 'Nunito Sans', sans-serif;
}
h1 {
@@ -41,26 +42,26 @@
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Oxygen', Arial, sans-serif; color: #66696f; border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#f4f6fb" style="background: #f4f6fb; font-family: 'Nunito Sans', sans-serif; color: #66696f; border-collapse:collapse;">
<tr>
<td valign="top" align="center">
<table width="580" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="margin: 20px 10px;">
<tr>
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" bgcolor="#ffffff" style="padding:20px; font-family: 'Nunito Sans', sans-serif;">
<img src="{{.AssetURL}}/assets/images/kolide-logo-color@2x.png?raw=true" width="174" height="48" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:60px; font-family: 'Oxygen', Arial, sans-serif;">
<td colspan="2" style="padding:60px; font-family: 'Nunito Sans', sans-serif;">
<h1 style="font-weight:300">Confirmed Fleet SMTP Setup</h1>
<p>This message confirms that SMTP is set up properly on your <a href="{{.BaseURL}}">Fleet instance</a>.</p>
</td>
</tr>
<tr bgcolor="#9ca3ac">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif; color: #fff;">
<td valign="middle" align="left" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif; color: #fff;">
<a href="https://github.com/fleetdm/fleet/tree/master/docs" style="color: #fff; text-decoration: none;">Fleet Documentation</a>
</td>
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Oxygen', Arial, sans-serif;">
<td valign="middle" align="right" style="padding:10px 20px; font-family: 'Nunito Sans', sans-serif;">
<a href="https://kolide.com" style="text-decoration: none;"><img src="{{.AssetURL}}/assets/images/kolide-white@2x.png?raw=true" width="122" height="33" /></a>
</td>
</tr>