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 {Link as RouterLink} from "react-router";
import {StyleSheet, css} from "aphrodite/no-important"; import {StyleSheet, css} from "aphrodite/no-important";
import Colors from "./Colors";
/** /**
* A styled link component for both client-side router links and normal * A styled link component for both client-side router links and normal
* external links. * external links.
@ -47,12 +49,12 @@ const colorAttributes = (color) => ({
}); });
const styles = StyleSheet.create({ const styles = StyleSheet.create({
link: { link: {
...colorAttributes("#0872A2"), ...colorAttributes(Colors.brand.medium),
":visited": { ":visited": {
...colorAttributes("#3A066A"), ...colorAttributes(Colors.brand.dark),
}, },
":active": { ":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 {StyleSheet, css} from "aphrodite/no-important";
import type {Assets} from "./assets"; import type {Assets} from "./assets";
import Colors from "./Colors";
import Link from "./Link"; import Link from "./Link";
import GithubLogo from "./GithubLogo"; import GithubLogo from "./GithubLogo";
import TwitterLogo from "./TwitterLogo"; import TwitterLogo from "./TwitterLogo";
@ -134,6 +135,10 @@ const style = StyleSheet.create({
":hover": { ":hover": {
textDecoration: "underline", textDecoration: "underline",
}, },
":visited:not(:active)": {
color: Colors.brand.medium,
fill: Colors.brand.medium, // for SVG icons
},
}, },
navItemLeft: { navItemLeft: {
flex: 1, flex: 1,