Improve UnseenDot

- Remove unused yellow
sos-lapsikyla · Dec 22, 2023 · fde6830 · fde6830
1 parent b133889
commit fde6830
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 75 deletions.
diff --git a/src/Screens/Main/BuddyList/Button.tsx b/src/Screens/Main/BuddyList/Button.tsx
@@ -11,6 +11,7 @@ import { getMentorByUserId } from '../../../state/reducers/mentors';
 import Card from '../../components/Card';
 import fonts from '../../components/fonts';
 import colors from '../../components/colors';
+import { UnseenDot } from '../../components/UnseenDot';
 
 type Props = {
   buddyId: string;
@@ -43,13 +44,8 @@ const Button = ({ style, buddyId, name, onPress, ...viewProps }: Props) => {
             {lastMessage}
           </RN.Text>
         </RN.View>
-        <RN.View style={[styles.blob]}>
-          {hasNewMessages ? (
-            <RN.View
-              style={styles.newMessage}
-              testID={'main.buddyList.button.unseenDot'}
-            />
-          ) : null}
+        <RN.View style={styles.blob}>
+          <UnseenDot hasUnseen={hasNewMessages} style={styles.dot} />
           {mentor?.is_vacationing ? (
             <RN.Image
               source={require('../../images/umbrella-beach.svg')}
@@ -100,15 +96,9 @@ const styles = RN.StyleSheet.create({
     minHeight: 80,
     backgroundColor: colors.purplePale,
   },
-  newMessage: {
-    zIndex: 2,
-    borderRadius: 8,
-    width: 16,
-    height: 16,
-    position: 'absolute',
-    top: 16,
-    right: 16,
-    backgroundColor: colors.yellow,
+  dot: {
+    borderColor: colors.purple,
+    transform: [{ translateX: 14 }, { translateY: -12 }],
   },
   icon: {
     tintColor: colors.purple,

diff --git a/src/Screens/Main/BuddyList/FolderItem.tsx b/src/Screens/Main/BuddyList/FolderItem.tsx
@@ -6,6 +6,7 @@ import { SpecialItemProps } from '../../components/DropDownMenu';
 import colors from '../../components/colors';
 import fonts from '../../components/fonts';
 import Message from '../../components/Message';
+import { UnseenDot } from 'src/Screens/components/UnseenDot';
 
 type Props = SpecialItemProps & {
   shouldShowUnseenBall: boolean;
@@ -21,7 +22,11 @@ export const FolderItem: React.FC<Props> = ({
   return (
     <RN.TouchableOpacity style={styles.button} onPress={onPress}>
       <Message id={textId} style={styles.text} />
-      {shouldShowUnseenBall && <RN.View style={styles.dot} testID={testID} />}
+      <UnseenDot
+        hasUnseen={shouldShowUnseenBall}
+        style={styles.dot}
+        testID={testID}
+      />
     </RN.TouchableOpacity>
   );
 };
@@ -38,13 +43,10 @@ const styles = RN.StyleSheet.create({
     color: colors.purple,
   },
   dot: {
-    zIndex: 2,
-    borderRadius: 8,
-    top: 22,
-    left: 8,
-    width: 16,
-    height: 16,
-    backgroundColor: colors.yellow,
-    position: 'absolute',
+    borderColor: colors.purple,
+    borderWidth: 2,
+    width: 14,
+    height: 14,
+    transform: [{ translateX: 12 }, { translateY: 22 }],
   },
 });
diff --git a/src/Screens/Main/BuddyList/Title.tsx b/src/Screens/Main/BuddyList/Title.tsx
@@ -6,6 +6,7 @@ import fonts from '../../components/fonts';
 import { textShadow } from '../../components/shadow';
 
 import Message from '../../components/Message';
+import { UnseenDot } from '../../components/UnseenDot';
 
 type Props = {
   openDropdown: () => void | undefined;
@@ -33,12 +34,7 @@ export const Title: React.FC<Props> = ({
             source={require('../../images/three-dot-menu.svg')}
             style={styles.kebabIcon}
           />
-          {hasUnseenArchivedMessages && (
-            <RN.View
-              style={styles.dot}
-              testID={'main.chat.kebabicon.unseenDot'}
-            />
-          )}
+          <UnseenDot hasUnseen={hasUnseenArchivedMessages} style={styles.dot} />
         </>
       </RN.TouchableHighlight>
     </RN.SafeAreaView>
@@ -76,13 +72,9 @@ const styles = RN.StyleSheet.create({
   },
   kebabIcon: { tintColor: colors.darkestBlue },
   dot: {
-    zIndex: 2,
-    borderRadius: 8,
-    right: 0,
-    top: 4,
-    width: 12,
-    height: 12,
-    backgroundColor: colors.yellow,
-    position: 'absolute',
+    transform: [{ translateX: 12 }, { translateY: -12 }],
+    borderWidth: 2,
+    height: 14,
+    width: 14,
   },
 });
diff --git a/src/Screens/Main/TabBar.tsx b/src/Screens/Main/TabBar.tsx
@@ -5,6 +5,7 @@ import * as ReactRedux from 'react-redux';
 import { selectFirstQuestion } from '../../state/reducers/questions';
 
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { Answer } from '../../api/feedback';
 
 import * as localization from '../../localization';
 import { isDevice } from '../../lib/isDevice';
@@ -15,7 +16,7 @@ import fonts from '../components/fonts';
 import shadow from '../components/shadow';
 
 import QuestionModal from '../components/QuestionModal';
-import { Answer } from '../../api/feedback';
+import { UnseenDot } from '../components/UnseenDot';
 
 type TabSettings = {
   iconSelected: RN.ImageSourcePropType;
@@ -52,6 +53,8 @@ export const TabBar = ({ state, navigation }: Props) => {
 
   const feedbackQuestion = ReactRedux.useSelector(selectFirstQuestion);
 
+  const hasUnseen = ReactRedux.useSelector(isAnyMessageUnseen);
+
   const handleCloseQuestion = () =>
     dispatch({ type: 'feedback/reset/', payload: undefined });
 
@@ -65,9 +68,9 @@ export const TabBar = ({ state, navigation }: Props) => {
         const isFocused = state.index === index;
         const iconKey = isFocused ? 'iconSelected' : 'iconInactive';
 
-        const [iconStyle, labelStyle] = isFocused
-          ? [styles.selectedIcon, styles.selectedLabel]
-          : [styles.icon, styles.label];
+        const [iconStyle, labelStyle, dotStyle] = isFocused
+          ? [styles.selectedIcon, styles.selectedLabel, undefined]
+          : [styles.icon, styles.label, styles.dot];
 
         const onTabPress = () => {
           const event = navigation.emit({
@@ -89,7 +92,13 @@ export const TabBar = ({ state, navigation }: Props) => {
               onPress={onTabPress}
               testID={testID}
             >
-              {index === 2 ? <UnseenDot /> : null}
+              {index === 2 ? (
+                <UnseenDot
+                  hasUnseen={hasUnseen}
+                  style={dotStyle}
+                  testID="main.tabs.unseenDot"
+                />
+              ) : null}
               <RN.Image style={iconStyle} source={TabMap[index][iconKey]} />
               <RN.Text style={labelStyle}>{TabMap[index].text}</RN.Text>
             </RN.TouchableOpacity>
@@ -107,26 +116,6 @@ export const TabBar = ({ state, navigation }: Props) => {
   );
 };
 
-const UnseenDot = () => {
-  const isUnseen = ReactRedux.useSelector(isAnyMessageUnseen);
-
-  return isUnseen ? (
-    <RN.View style={unseenDotStyles.dot} testID={'main.tabs.unseenDot'} />
-  ) : null;
-};
-
-const unseenDotStyles = RN.StyleSheet.create({
-  dot: {
-    zIndex: 2,
-    borderRadius: 8,
-    width: 16,
-    height: 16,
-    backgroundColor: colors.yellow,
-    position: 'absolute',
-    transform: [{ translateX: 16 }, { translateY: -32 }],
-  },
-});
-
 const styles = RN.StyleSheet.create({
   tabBar: {
     ...shadow(7),
@@ -180,4 +169,5 @@ const styles = RN.StyleSheet.create({
   },
   icon: { tintColor: colors.purple },
   selectedIcon: { tintColor: colors.darkestBlue },
+  dot: { borderColor: colors.purple, borderWidth: 2, width: 14, height: 14 },
 });
diff --git a/src/Screens/Main/Tabs.tsx b/src/Screens/Main/Tabs.tsx
@@ -17,8 +17,6 @@ import QuestionModal from '../components/QuestionModal';
 import { Answer } from '../../api/feedback';
 import { TabBar } from './TabBar';
 
-// import { questions } from 'e2e/fixtures/questions';
-
 export type TabsRoute = {
   'Main/Tabs': {
     initial?: 'Main/Settings' | 'Main/BuddyList' | 'Main/MentorList';
@@ -42,12 +40,6 @@ const Main = ({ navigation, route }: Props) => {
   };
 
   const feedbackQuestion = ReactRedux.useSelector(selectFirstQuestion);
-  // const feedbackQuestion = {
-  //   answer_id: 'moi',
-  //   id: 'moi',
-  //   titles: questions[1].rules.titles,
-  //   answer: questions[1].rules.answer,
-  // };
 
   const handleCloseQuestion = () => {
     dispatch({ type: 'feedback/reset/', payload: undefined });

diff --git a/src/Screens/components/UnseenDot.tsx b/src/Screens/components/UnseenDot.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import RN from 'react-native';
+
+import colors from './colors';
+
+type Props = {
+  hasUnseen: boolean;
+  style?: RN.StyleProp<RN.ViewStyle>;
+  testID?: string;
+};
+export const UnseenDot = ({ hasUnseen, style, testID }: Props) => {
+  return hasUnseen ? (
+    <RN.View style={[unseenDotStyles.dot, style]} testID={testID} />
+  ) : null;
+};
+
+const unseenDotStyles = RN.StyleSheet.create({
+  dot: {
+    zIndex: 2,
+    borderRadius: 8,
+    width: 16,
+    height: 16,
+    backgroundColor: colors.orangeLight,
+    borderStyle: 'solid',
+    borderWidth: 3,
+    position: 'absolute',
+    transform: [{ translateX: 15 }, { translateY: -24 }],
+  },
+});
diff --git a/src/Screens/components/colors.ts b/src/Screens/components/colors.ts
@@ -22,9 +22,6 @@ const colors = {
   darkBlue: '#43BFFF',
   darkestBlue: '#1C325D',
 
-  // yellows
-  yellow: '#FFDA17',
-
   // reds
   red: '#EB727C',
   danger: '#972232',