Color list screen and edit palette screen improvements (#247)

* improve color name UI and simplyfy some dependencies * fix reordering in edit palette screen
croma-app · Aug 18, 2024 · 32d4880 · 32d4880
1 parent bb586b6
commit 32d4880
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/components/PaletteCard.js b/components/PaletteCard.js
@@ -190,7 +190,7 @@ export const PaletteCard = (props) => {
                 />
                 <MenuItemWrapper
                   onPress={() => {
-                    navigation.navigate('Palette', { paletteId });
+                    navigation.navigate('PaletteEdit', { paletteId });
                   }}
                   icon="edit"
                   label="Edit"

diff --git a/components/SingleColorView.js b/components/SingleColorView.js
@@ -95,11 +95,14 @@ export const SingleColorView = ({
             </Text>
           </View>
         )}
-        <Text style={[styles.colorText, { color: textColor }]}>
-          {showUnlockPro
-            ? '#XXXXXX'
-            : color.color.toUpperCase() + (color.name ? ' (' + color.name + ')' : '')}
-        </Text>
+        <View style={styles.colorInfo}>
+          <Text style={[styles.colorHex, { color: textColor }]}>
+            {showUnlockPro ? '#XXXXXX' : color.color.toUpperCase()}
+          </Text>
+          {!showUnlockPro && color.name && (
+            <Text style={[styles.colorName, { color: textColor }]}>{`${color.name}`}</Text>
+          )}
+        </View>
         <View style={styles.actionArea}>
           <TouchableOpacity
             style={[styles.actionAreaItem, styles.lockActionAreaItem]}
@@ -191,11 +194,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  colorText: {
-    fontWeight: '700',
+  colorInfo: {
+    flexDirection: 'row',
     paddingLeft: 16,
+    alignItems: 'center'
+  },
+  colorHex: {
+    fontWeight: '700',
     paddingRight: 8
   },
+  colorName: {
+    fontWeight: '700',
+    fontSize: 8,
+    textAlign: 'center'
+  },
   actionArea: {
     position: 'absolute',
     right: 0,

diff --git a/package.json b/package.json
@@ -20,8 +20,6 @@
     "@react-navigation/native-stack": "^6.2.5",
     "@react-navigation/stack": "^6.2.0",
     "axios": "^1.3.4",
-    "expo-font": "^10.0.3",
-    "expo-permissions": "^13.0.3",
     "i18next": "^22.0.4",
     "moment": "^2.30.1",
     "node-libs-react-native": "^1.2.1",

diff --git a/screens/PaletteEditScreen.js b/screens/PaletteEditScreen.js
@@ -40,7 +40,10 @@ export default function PaletteScreen({ navigation, route }) {
 
   const { height } = Dimensions.get('window');
   const palette = allPalettes.find((palette) => palette.id === paletteId);
-  const colors = palette?.colors;
+  const [colors, setColors] = useState(palette?.colors);
+  useEffect(() => {
+    setColors(allPalettes.find((palette) => palette.id === paletteId)?.colors);
+  }, [allPalettes, paletteId]);
   const onColorDelete = React.useCallback(
     (hex) => {
       deleteColorFromPalette(palette.id, palette.colors.find((c) => c.color === hex).id || null);
@@ -80,7 +83,7 @@ export default function PaletteScreen({ navigation, route }) {
 
   const colorsToShow = React.useMemo(
     () => colors?.slice(0, pro.plan != 'free' ? colors.length : 4),
-    [colors, pro.plan != 'starter']
+    [colors, pro.plan]
   );
 
   const handleColorSelected = (color) => {
@@ -97,6 +100,9 @@ export default function PaletteScreen({ navigation, route }) {
           keyExtractor={keyExtractor}
           style={styles.listview}
           onDragEnd={({ data: reorderedColors }) => {
+            // Colors is update in local state first and then updated on the server and in global state.
+            // The whole state logic is little messed up now and need refactoring but for now this approach works.
+            setColors(reorderedColors);
             updatePalette(palette.id, { ...palette, colors: reorderedColors });
           }}
           ListFooterComponent={ListFooterComponent}
@@ -127,8 +133,7 @@ export default function PaletteScreen({ navigation, route }) {
         visible={isColorPickerVisible}
         animationType="slide"
         transparent={true}
-        onRequestClose={() => setIsColorPickerVisible(false)}
-      >
+        onRequestClose={() => setIsColorPickerVisible(false)}>
         <TouchableWithoutFeedback onPress={() => setIsColorPickerVisible(false)}>
           <View style={styles.modalOverlay} />
         </TouchableWithoutFeedback>