ui: remove `:visited` color change for nav links (#892)

Test Plan:
Note that the nav links are now a lighter color, except when `:active`
(e.g., when you’re holding down the mouse button).

wchargin-branch: remove-visited
This commit is contained in:
William Chargin 2018-09-25 16:38:46 -07:00 committed by GitHub
parent a7f29cb057
commit a5e0707cb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 3 deletions

21
src/app/Colors.js Normal file
View File

@ -0,0 +1,21 @@
// @flow
export type HexColor = string;
export default (Object.freeze({
brand: Object.freeze({
medium: "#0872A2",
dark: "#3A066A",
}),
accent: Object.freeze({
medium: "#FF3201",
}),
}): {|
+brand: {|
+medium: HexColor,
+dark: HexColor,
|},
+accent: {|
+medium: HexColor,
|},
|});

View File

@ -4,6 +4,8 @@ import React, {Component} from "react";
import {Link as RouterLink} from "react-router";
import {StyleSheet, css} from "aphrodite/no-important";
import Colors from "./Colors";
/**
* A styled link component for both client-side router links and normal
* external links.
@ -47,12 +49,12 @@ const colorAttributes = (color) => ({
});
const styles = StyleSheet.create({
link: {
...colorAttributes("#0872A2"),
...colorAttributes(Colors.brand.medium),
":visited": {
...colorAttributes("#3A066A"),
...colorAttributes(Colors.brand.dark),
},
":active": {
...colorAttributes("#FF3201"),
...colorAttributes(Colors.accent.medium),
},
},
});

View File

@ -4,6 +4,7 @@ import React, {type Node} from "react";
import {StyleSheet, css} from "aphrodite/no-important";
import type {Assets} from "./assets";
import Colors from "./Colors";
import Link from "./Link";
import GithubLogo from "./GithubLogo";
import TwitterLogo from "./TwitterLogo";
@ -134,6 +135,10 @@ const style = StyleSheet.create({
":hover": {
textDecoration: "underline",
},
":visited:not(:active)": {
color: Colors.brand.medium,
fill: Colors.brand.medium, // for SVG icons
},
},
navItemLeft: {
flex: 1,