Change label design to a more traditional github-like style

Author: brunolemos

packages/components/src/components/cards/BaseCard.tsx

@@ -14,6 +14,7 @@ import {
   smallerTextSize,
   smallTextSize,
 } from '../../styles/variables'
+import { fixColorHexWithoutHash } from '../../utils/helpers/colors'
 import { stripEmojis } from '../../utils/helpers/github/emojis'
 import { vibrateHapticFeedback } from '../../utils/helpers/shared'
 import { KeyboardKeyIsPressed } from '../AppKeyboardShortcuts'
@@ -557,64 +558,53 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
               >
                 {labels.map((label, index) => (
                   <Fragment key={`${label.name}-${label.color}`}>
-                    <Label
-                      backgroundThemeColor={backgroundThemeColor}
-                      colorThemeColor={label.color}
-                      disableEmojis
-                      hideText={false}
-                      outline={false}
-                      small
-                      textThemeColor="foregroundColorMuted65"
-                      transparent
-                      tryFixingColorHexWithoutHash
+                    <Link
+                      TouchableComponent={GestureHandlerTouchableOpacity}
+                      enableUnderlineHover={false}
+                      href="javascript:void(0)"
+                      openOnNewTab={false}
+                      onPress={
+                        !columnId
+                          ? undefined
+                          : (() => {
+                              return () => {
+                                vibrateHapticFeedback()
+
+                                const removeIfAlreadySet = !(
+                                  KeyboardKeyIsPressed.meta ||
+                                  KeyboardKeyIsPressed.shift
+                                )
+
+                                const removeOthers = !(
+                                  KeyboardKeyIsPressed.alt ||
+                                  KeyboardKeyIsPressed.meta ||
+                                  KeyboardKeyIsPressed.shift
+                                )
+
+                                dispatch(
+                                  actions.setColumnLabelFilter({
+                                    columnId,
+                                    label: label.name,
+                                    value: KeyboardKeyIsPressed.alt
+                                      ? false
+                                      : true,
+                                    removeIfAlreadySet,
+                                    removeOthers,
+                                  }),
+                                )
+                              }
+                            })()
+                      }
+                      style={sharedStyles.flexShrink1}
                     >
-                      <Link
-                        TouchableComponent={GestureHandlerTouchableOpacity}
-                        enableUnderlineHover
-                        href="javascript:void(0)"
-                        openOnNewTab={false}
-                        onPress={
-                          !columnId
-                            ? undefined
-                            : (() => {
-                                return () => {
-                                  vibrateHapticFeedback()
-
-                                  const removeIfAlreadySet = !(
-                                    KeyboardKeyIsPressed.meta ||
-                                    KeyboardKeyIsPressed.shift
-                                  )
-
-                                  const removeOthers = !(
-                                    KeyboardKeyIsPressed.alt ||
-                                    KeyboardKeyIsPressed.meta ||
-                                    KeyboardKeyIsPressed.shift
-                                  )
-
-                                  dispatch(
-                                    actions.setColumnLabelFilter({
-                                      columnId,
-                                      label: label.name,
-                                      value: KeyboardKeyIsPressed.alt
-                                        ? false
-                                        : true,
-                                      removeIfAlreadySet,
-                                      removeOthers,
-                                    }),
-                                  )
-                                }
-                              })()
-                        }
-                        style={sharedStyles.flexShrink1}
-                        textProps={{
-                          color: 'foregroundColorMuted65',
-                          numberOfLines: 1,
-                          style: styles.labelText,
-                        }}
+                      <Label
+                        colorThemeColor={fixColorHexWithoutHash(label.color)}
+                        disableEmojis
+                        small
                       >
-                        {stripEmojis(label.name.toLowerCase())}
-                      </Link>
-                    </Label>
+                        {label.name.toLowerCase()}
+                      </Label>
+                    </Link>
 
                     {index < labels.length - 1 && (
                       <Spacer width={contentPadding / 2} />

packages/components/src/components/cards/partials/rows/LabelsView.tsx

@@ -4,8 +4,9 @@ import { ScrollView, StyleSheet, ViewProps } from 'react-native'
 import { GitHubLabel, Theme, ThemeColors } from '@devhub/core'
 import { sharedStyles } from '../../../../styles/shared'
 import { contentPadding } from '../../../../styles/variables'
+import { fixColorHexWithoutHash } from '../../../../utils/helpers/colors'
 import { ConditionalWrap } from '../../../common/ConditionalWrap'
-import { hiddenLabelSizes, Label, LabelProps } from '../../../common/Label'
+import { Label, LabelProps } from '../../../common/Label'
 import { ScrollViewWithOverlay } from '../../../common/ScrollViewWithOverlay'
 import { TouchableOpacity } from '../../../common/TouchableOpacity'
 
@@ -15,7 +16,6 @@ export interface LabelsViewProps
   enableScrollView?: boolean
   enableScrollViewOverlay?: boolean
   fragment?: boolean
-  hideText?: boolean
   labels: Array<{
     key?: string
     name: GitHubLabel['name']
@@ -40,7 +40,6 @@ export const LabelsView = (props: LabelsViewProps) => {
     enableScrollView,
     enableScrollViewOverlay,
     fragment,
-    hideText,
     labels,
     startScrollAtEnd,
     style,
@@ -56,23 +55,9 @@ export const LabelsView = (props: LabelsViewProps) => {
     scrollViewRef.current.scrollToEnd({ animated: false })
   }, [scrollViewRef.current, startScrollAtEnd])
 
-  const horizontalSpacing = hideText
-    ? -hiddenLabelSizes.width / 8
-    : contentPadding / 3
+  const horizontalSpacing = contentPadding / 3
   const verticalSpacing = 1
 
-  const texts = labels
-    .map(label => label && label.name)
-    .filter(text => !!text && typeof text === 'string')
-
-  const tooltip = hideText
-    ? texts.length === 1
-      ? `Label: ${texts[0]}`
-      : texts.length > 1
-      ? `Labels:\n${texts.join('\n')}`
-      : ''
-    : ''
-
   return (
     <ConditionalWrap
       condition
@@ -93,7 +78,6 @@ export const LabelsView = (props: LabelsViewProps) => {
               },
               style,
             ]}
-            tooltip={tooltip}
           >
             <ConditionalWrap
               condition={!!enableScrollView}
@@ -134,8 +118,7 @@ export const LabelsView = (props: LabelsViewProps) => {
       {labels.map(label => (
         <Label
           key={label.key || label.name}
-          backgroundThemeColor={backgroundThemeColor}
-          colorThemeColor={label.color}
+          colorThemeColor={fixColorHexWithoutHash(label.color)}
           containerStyle={[
             sharedStyles.alignSelfFlexStart,
             {
@@ -144,13 +127,10 @@ export const LabelsView = (props: LabelsViewProps) => {
             },
           ]}
           disableEmojis
-          hideText={hideText}
-          outline={false}
           small
-          transparent
           {...otherProps}
         >
-          {hideText && !fragment ? '' : label.name.toLowerCase()}
+          {label.name.toLowerCase()}
         </Label>
       ))}
     </ConditionalWrap>