improve color name UI and simplyfy some dependencies

croma-app · Aug 18, 2024 · 8385b10 · 8385b10
1 parent bb586b6
commit 8385b10
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
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
@@ -127,8 +127,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>