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:
parent
a7f29cb057
commit
a5e0707cb9
|
@ -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,
|
||||||
|
|},
|
||||||
|
|});
|
|
@ -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),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue