cleanup and minor improvements

croma-app · Apr 10, 2024 · 9afb3fc · 9afb3fc
1 parent 59478b6
commit 9afb3fc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/components/SingleColorView.js b/components/SingleColorView.js
@@ -7,7 +7,8 @@ import {
   TouchableOpacity,
   View,
   Modal,
-  TouchableWithoutFeedback, Animated
+  TouchableWithoutFeedback,
+  Animated
 } from 'react-native';
 import { notifyMessage } from '../libs/Helpers';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
@@ -75,17 +76,22 @@ export const SingleColorView = ({ color, onColorChange, drag, onRemove, onAdd })
         </Text>
         <View style={styles.actionArea}>
           <TouchableOpacity
-            style={styles.actionAreaItem}
+            style={[styles.actionAreaItem, styles.lockActionAreaItem]}
             onPress={() => {
               onColorChange({ ...color, color: color.color, locked: !color.locked });
             }}>
             <FontAwesome5
-              style={[styles.icon, { color: textColor }]}
+              style={[styles.icon, styles.lockIcon, { color: textColor }]}
               name={color.locked ? 'lock' : 'unlock'}
             />
           </TouchableOpacity>
-          <TouchableOpacity style={styles.actionAreaItem} onPressIn={drag}>
-            <MaterialIcons style={[styles.icon, { color: textColor }]} name="drag-indicator" />
+          <TouchableOpacity
+            style={[styles.actionAreaItem, styles.dragActionAreaItem]}
+            onPressIn={drag}>
+            <MaterialIcons
+              style={[styles.icon, styles.dragIcon, { color: textColor }]}
+              name="drag-indicator"
+            />
           </TouchableOpacity>
         </View>
 
@@ -136,17 +142,29 @@ const styles = StyleSheet.create({
   actionArea: {
     position: 'absolute',
     right: 0,
-    padding: 8,
     flex: 1,
     flexDirection: 'row'
   },
   icon: {
+    paddingHorizontal: 8
+  },
+  lockIcon: {
+    fontSize: 16,
+    opacity: 0.6
+  },
+  dragIcon: {
     fontSize: 24
   },
   actionAreaItem: {
-    marginRight: 8,
     marginLeft: 8
   },
+  dragActionAreaItem: {
+    padding: 8
+  },
+  lockActionAreaItem: {
+    padding: 8,
+    marginVertical: 4
+  },
   modalContainer: {
     flex: 1,
     justifyContent: 'flex-end',
@@ -172,20 +190,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     marginBottom: 10
   },
-  copyButtonText: {
-    color: 'white',
-    fontSize: 16
-  },
-  closeButton: {
-    backgroundColor: 'gray',
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 4
-  },
-  closeButtonText: {
-    color: 'white',
-    fontSize: 16
-  },
   menuButton: {
     paddingHorizontal: 12,
     borderRadius: 8,

diff --git a/screens/ColorListScreen.js b/screens/ColorListScreen.js
@@ -2,13 +2,15 @@ import React, { useLayoutEffect } from 'react';
 import { SingleColorView } from '../components/SingleColorView';
 import { StyleSheet, View, Text, Platform, Animated } from 'react-native';
 import CromaButton from '../components/CromaButton';
-import { logEvent, notifyMessage } from '../libs/Helpers';
+import { logEvent } from '../libs/Helpers';
 import { CromaContext } from '../store/store';
 import { useTranslation } from 'react-i18next';
 import DraggableFlatList from 'react-native-draggable-flatlist';
+var Color = require("pigment/full");
 
 export default function ColorListScreen({ navigation }) {
   const { t } = useTranslation();
+  const [helpMessage, setHelpMessage] = React.useState('Generate new colors for unlocked colors');
 
   const { colorList, setColorList } = React.useContext(CromaContext);
   const colors = uniqueColors(colorList).map((color) => ({
@@ -40,12 +42,13 @@ export default function ColorListScreen({ navigation }) {
         drag={drag}
         onAdd={() => {
           logEvent('add_color_to_palette');
+          const index = colors.findIndex((color) => color.color === item.color);
+          const currentColor = new Color(colors[index].color);
           const newColor = {
-            color: '#' + Math.floor(Math.random() * 16777215).toString(16),
+            color: currentColor.darken(0.1).tohex(),
             locked: false,
             opacity: new Animated.Value(0)
           };
-          const index = colors.findIndex((color) => color.color === item.color);
           const updatedColors = [
             ...colors.slice(0, index + 1),
             newColor,
@@ -84,7 +87,7 @@ export default function ColorListScreen({ navigation }) {
   const regenerateUnlockedColors = () => {
     logEvent('regenerate_unlocked_colors', colors.filter((color) => !color.locked).length);
     if (colors.filter((color) => !color.locked).length == 0) {
-      notifyMessage(t('Please unlock at least one color'));
+      setHelpMessage('Please unlock some colors or add colors to generate new colors');
     } else {
       // TODO: improve this algorithm.
       const newColors = colors.map((color) => {
@@ -110,7 +113,7 @@ export default function ColorListScreen({ navigation }) {
           autoscrollThreshold={100}
         />
       </View>
-      <Text style={styles.hintText}>Generate new colors for unlocked colors</Text>
+      <Text style={styles.hintText}>{helpMessage}</Text>
       <CromaButton
         style={styles.button}
         onPress={() => {