[Web] Change text hover effect

Change color instead of adding underline

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;
+    }
   `
 }
 

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 }

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; }`,

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

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),
   )

packages/mobile/android/app/src/main/res/values/colors.xml

@@ -4,7 +4,7 @@
     <color name="primary_dark">@color/background_color_dark</color>
     <color name="status_bar_color">@color/background_color_dark</color>
 
-    <color name="brand_background">#49D3B4</color>
+    <color name="brand_background">#49d3b4</color>
     <color name="brand_foreground">#141C26</color>
 
     <color name="background_color_dark">#292c33</color>

packages/mobile/android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#49D3B4</color>
+    <color name="ic_launcher_background">#49d3b4</color>
 </resources>

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;
 }