From 0de8cdeb3ab34edd3d78fbb07cc13e7258c8ac53 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 30 Jan 2019 09:22:38 -0200 Subject: [PATCH] [Web] Change text hover effect Change color instead of adding underline --- .../src/components/AppGlobalStyles.web.tsx | 10 +++++++++ .../components/src/libs/vector-icons/index.ts | 1 - .../src/libs/vector-icons/index.web.ts | 22 +++++++++++++++---- packages/components/src/styles/colors.ts | 2 +- .../components/src/styles/themes/custom.ts | 2 +- .../app/src/main/res/values/colors.xml | 2 +- .../res/values/ic_launcher_background.xml | 2 +- packages/web/src/index.css | 9 ++------ 8 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/AppGlobalStyles.web.tsx b/packages/components/src/components/AppGlobalStyles.web.tsx index 2b3e542d..4b699468 100644 --- a/packages/components/src/components/AppGlobalStyles.web.tsx +++ b/packages/components/src/components/AppGlobalStyles.web.tsx @@ -1,6 +1,7 @@ import React from 'react' import { Theme } from '@devhub/core' +import { darken, lighten } from 'polished' import { getSeparatorThemeColor } from './common/Separator' import { useTheme } from './context/ThemeContext' @@ -33,6 +34,15 @@ function getStyles(params: { theme: Theme }) { --theme_foregroundColorMuted50:${t.foregroundColorMuted50}; background-color:${t.backgroundColor}; } + + a:not(.icon):hover, a:not(.icon):hover *:not(.icon) { + ${ + t.isDark + ? `color: ${lighten(1, t.foregroundColor)} !important;` + : `color: ${darken(1, t.foregroundColor)} !important;` + } + transition: none 0s !important; + } ` } diff --git a/packages/components/src/libs/vector-icons/index.ts b/packages/components/src/libs/vector-icons/index.ts index 4d606204..f44fbbc8 100644 --- a/packages/components/src/libs/vector-icons/index.ts +++ b/packages/components/src/libs/vector-icons/index.ts @@ -1,5 +1,4 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons' import Octicons from 'react-native-vector-icons/Octicons' -export * from 'react-native-vector-icons' export { MaterialIcons, Octicons } diff --git a/packages/components/src/libs/vector-icons/index.web.ts b/packages/components/src/libs/vector-icons/index.web.ts index b0604ca9..1d50d89c 100644 --- a/packages/components/src/libs/vector-icons/index.web.ts +++ b/packages/components/src/libs/vector-icons/index.web.ts @@ -1,10 +1,24 @@ -import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons' -import Octicons from 'react-native-vector-icons/dist/Octicons' +import React from 'react' +import _MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons' +import _Octicons from 'react-native-vector-icons/dist/Octicons' import MaterialIconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf' import OcticonsFont from 'react-native-vector-icons/Fonts/Octicons.ttf' +import { IconProps } from 'react-native-vector-icons/Icon' +import { createElement } from 'react-native-web' -export * from 'react-native-vector-icons' -export { MaterialIcons, Octicons } +function enhanceIconComponent(IconComponent: any) { + return React.forwardRef((props: IconProps, ref) => + createElement(IconComponent, { + ...props, + ref, + style: [{ userSelect: 'none' }, props.style], + className: `icon ${(props as any).className || ''}`.trim(), + }), + ) +} + +export const Octicons = enhanceIconComponent(_Octicons) +export const MaterialIcons = enhanceIconComponent(_MaterialIcons) const iconStyles = [ `@font-face { src:url(${MaterialIconFont});font-family: MaterialIcons; }`, diff --git a/packages/components/src/styles/colors.ts b/packages/components/src/styles/colors.ts index 323f7a36..2366045e 100644 --- a/packages/components/src/styles/colors.ts +++ b/packages/components/src/styles/colors.ts @@ -12,7 +12,7 @@ export const pink = '#E91E63' export const purple = '#6e5494' export const red = '#cb2431' export const star = '#edb800' -export const teal = '#009688' +export const teal = '#49d3b4' export const yellow = '#FFC107' export const brandBackgroundColor = lightBlue diff --git a/packages/components/src/styles/themes/custom.ts b/packages/components/src/styles/themes/custom.ts index 4861d64a..848742c6 100644 --- a/packages/components/src/styles/themes/custom.ts +++ b/packages/components/src/styles/themes/custom.ts @@ -53,7 +53,7 @@ export function createThemeFromColor( ) const backgroundColorTransparent10 = rgba(backgroundColor, 0.1) - const foregroundColor = isDark ? lighten(0.8, color) : darken(0.8, color) + const foregroundColor = isDark ? lighten(0.7, color) : darken(0.7, color) const foregroundColorMuted20 = mixWithBrand( isDark ? lighten(0.2, color) : darken(0.2, color), ) diff --git a/packages/mobile/android/app/src/main/res/values/colors.xml b/packages/mobile/android/app/src/main/res/values/colors.xml index 5829799f..ae0ff00b 100644 --- a/packages/mobile/android/app/src/main/res/values/colors.xml +++ b/packages/mobile/android/app/src/main/res/values/colors.xml @@ -4,7 +4,7 @@ @color/background_color_dark @color/background_color_dark - #49D3B4 + #49d3b4 #141C26 #292c33 diff --git a/packages/mobile/android/app/src/main/res/values/ic_launcher_background.xml b/packages/mobile/android/app/src/main/res/values/ic_launcher_background.xml index 7723f4c7..101b98ad 100644 --- a/packages/mobile/android/app/src/main/res/values/ic_launcher_background.xml +++ b/packages/mobile/android/app/src/main/res/values/ic_launcher_background.xml @@ -1,4 +1,4 @@ - #49D3B4 + #49d3b4 \ No newline at end of file diff --git a/packages/web/src/index.css b/packages/web/src/index.css index 4dd5430d..ff802b24 100644 --- a/packages/web/src/index.css +++ b/packages/web/src/index.css @@ -5,11 +5,11 @@ ::-webkit-scrollbar-thumb { - background-color: #49d3b580; + background-color: #49d3b480; } *:focus { - outline-color: #49d3b5; + outline-color: #49d3b4; } html, body, #root, #root > div { @@ -29,11 +29,6 @@ body { -moz-osx-font-smoothing: grayscale; } -a:hover, a:hover * { - text-decoration: underline !important; - transition: none 0s !important; -} - .input:focus { outline: none !important; }