Color palette screen (#238)

* Color palette new screen created * New color palette view added * unused var removed * A simple animation added in circle * Color code name changed * Added edit screen
croma-app · Jun 1, 2024 · 783dde4 · 783dde4
1 parent 7b51509
commit 783dde4
Show file tree

Hide file tree

Showing 23 changed files with 405 additions and 133 deletions.
diff --git a/ApplicationRoot.js b/ApplicationRoot.js
@@ -11,7 +11,8 @@ import ColorDetailsScreen from './screens/ColorDetailScreen';
 import PalettesScreen from './screens/PalettesScreen';
 import SavePaletteScreen from './screens/SavePaletteScreen';
 import ColorListScreen from './screens/ColorListScreen';
-import PaletteScreen from './screens/PaletteScreen';
+import PaletteViewScreen from './screens/PaletteViewScreen.js';
+import PaletteEditScreen from './screens/PaletteEditScreen.js';
 import ProVersionScreen from './screens/ProVersionScreen';
 import SyncPalettesScreen from './screens/SyncPalettesScreen';
 import CommonPalettesScreen from './screens/CommonPalettesScreen';
@@ -106,7 +107,8 @@ export default function App() {
                   options={{ title: t('Save palette') }}
                   component={SavePaletteScreen}
                 />
-                <Stack.Screen name="Palette" component={PaletteScreen} />
+                <Stack.Screen name="Palette" component={PaletteViewScreen} />
+                <Stack.Screen name="PaletteEdit" component={PaletteEditScreen} />
                 <Stack.Screen
                   name={ROUTE_NAMES.PRO_VERSION}
                   options={{ title: t('Pro benefits') }}
@@ -169,5 +171,5 @@ const screenOptions = {
     shadowOffset: { height: 3, width: 0 },
     borderBottomWidth: 0
   },
-  headerTintColor: '#fff'
+  headerTintColor: Colors.white
 };
diff --git a/components/ActionButton.js b/components/ActionButton.js
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.primary,
     zIndex: 2,
     elevation: 5,
-    shadowColor: '#000',
+    shadowColor: Colors.black,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.8,
     shadowRadius: 1

diff --git a/components/AppAuthProvider.js b/components/AppAuthProvider.js
@@ -15,6 +15,7 @@ import { notifyMessage, sendClientError } from '../libs/Helpers';
 import { useTranslation } from 'react-i18next';
 import { googleLogin } from '../network/login-and-signup';
 import useApplicationStore from '../hooks/useApplicationStore';
+import Colors from '../constants/Styles';
 
 const SCREEN_TYPES = {
   LOGIN: 'LOGIN',
@@ -141,15 +142,15 @@ const styles = StyleSheet.create({
     height: 48,
     borderRadius: 24,
     borderWidth: 4,
-    borderColor: '#ffffff'
+    borderColor: Colors.white
   },
   modal: {
     flex: 1,
     justifyContent: 'flex-end',
     backgroundColor: 'rgba(0, 0, 0, 0.5)'
   },
   modalContent: {
-    backgroundColor: '#fff',
+    backgroundColor: Colors.white,
     paddingTop: 20
   },
   form_container: {
@@ -166,7 +167,7 @@ const styles = StyleSheet.create({
   separatorLine: {
     width: 120,
     height: 1,
-    backgroundColor: '#000'
+    backgroundColor: Colors.black
   },
   separatorText: {
     marginLeft: 20,

diff --git a/components/AuthOnboardingScreen.js b/components/AuthOnboardingScreen.js
@@ -10,6 +10,7 @@ import { AuthForm } from './AppAuthProvider';
 import useUserData from '../hooks/useUserData';
 import { ScrollView } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../constants/Styles';
 
 function AuthOnboardingScreen({ markLoginStepDone }) {
   const { t } = useTranslation();
@@ -83,13 +84,13 @@ const styles = StyleSheet.create({
     fontSize: 32,
     fontWeight: 'bold',
     textAlign: 'center',
-    color: '#FFFFFF'
+    color: Colors.white
   },
   description: {
     fontSize: 20,
     textAlign: 'center',
     marginBottom: 20,
-    color: '#FFFFFF'
+    color: Colors.white
   },
   image: {
     width: '100%',
@@ -107,7 +108,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     textAlign: 'left',
     marginBottom: 10,
-    color: '#FFFFFF'
+    color: Colors.white
   },
   skip: {
     marginBottom: 20

diff --git a/components/Card.js b/components/Card.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import * as Animatable from 'react-native-animatable';
 import { StyleSheet, View, TouchableOpacity, Animated } from 'react-native';
 import PropTypes from 'prop-types';
+import Colors from '../constants/Styles';
 
 const Card = ({ animationType, onLongPress, onPress, children }) => {
   const scaleValue = useRef(new Animated.Value(1)).current;
@@ -52,7 +53,7 @@ Card.propTypes = {
 const styles = StyleSheet.create({
   inner: {
     marginVertical: 8,
-    backgroundColor: '#fff', // Set a background color
+    backgroundColor: Colors.white, // Set a background color
 
     // Shadow properties for iOS
     shadowColor: '#ccc',

diff --git a/components/ColorDetails.js b/components/ColorDetails.js
@@ -1,33 +1,17 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, View, Platform, TouchableOpacity } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { notifyMessage } from '../libs/Helpers';
 import { useTranslation } from 'react-i18next';
 
 import Color from 'pigment/full';
+import Colors from '../constants/Styles';
 
-export const ColorDetail = ({ color }) => {
-  const { t } = useTranslation();
-
-  const [copyiedIndex, setCopyiedIntex] = useState(-1);
-  const styles = StyleSheet.create({
-    backgroundColor: {
-      backgroundColor: color,
-      height: 112,
-      alignSelf: 'stretch'
-    },
-    info: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      padding: 10
-    },
-    colorNameText: {
-      fontSize: 16,
-      fontWeight: '500'
-    }
-  });
+export const ColorDetailItems = function ({ color, colorName }) {
   const fullColor = new Color(color);
+  const [copyiedIndex, setCopyiedIntex] = useState(-1);
+  const { t } = useTranslation();
 
   const formatedHwb = () => {
     const hwb = fullColor.tohwb(); // Call the original function
@@ -49,7 +33,25 @@ export const ColorDetail = ({ color }) => {
     const modifiedHwb = `hwb(${hue}, ${roundedSaturationStr}%, ${roundedLightnessStr}%)`;
     return modifiedHwb;
   };
+  let writeToClipboard = function (value, index) {
+    if (Platform.OS === 'android' || Platform.OS === 'ios') {
+      notifyMessage(t('Text copied to clipboard!'));
+    }
+    Clipboard.setString(value);
+    setCopyiedIntex(index);
+    debouncedSetCopiedIndex();
+  };
 
+  const debounce = (func, delay) => {
+    let debounceTimer;
+    return function () {
+      const context = this;
+      const args = arguments;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => func.apply(context, args), delay);
+    };
+  };
+  const debouncedSetCopiedIndex = debounce(() => setCopyiedIntex(-1), 2000);
   let items = [
     { key: 'HEX', value: fullColor.tohex() },
     { key: 'RGB', value: fullColor.torgb() },
@@ -59,67 +61,74 @@ export const ColorDetail = ({ color }) => {
     { key: 'CMYK', value: fullColor.tocmyk() },
     { key: 'CIELAB', value: fullColor.tolab() },
     { key: 'Luminance', value: (fullColor.luminance() * 100).toFixed(2) + '%' },
-    { key: 'Darkness', value: (fullColor.darkness() * 100).toFixed(2) + '%' }
+    { key: 'Darkness', value: (fullColor.darkness() * 100).toFixed(2) + '%' },
+    { key: 'NAME', value: colorName || '-' }
   ];
 
-  const debounce = (func, delay) => {
-    let debounceTimer;
-    return function () {
-      const context = this;
-      const args = arguments;
-      clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => func.apply(context, args), delay);
-    };
-  };
-  const debouncedSetCopiedIndex = debounce(() => setCopyiedIntex(-1), 2000);
+  return (
+    <View style={{ marginTop: 20 }}>
+      {items.map((item, index) => (
+        <TouchableOpacity key={item.key} onPress={() => writeToClipboard(item.value, index)}>
+          <View style={styles.info}>
+            <Text style={styles.colorNameKey}>{item.key} : </Text>
 
-  let writeToClipboard = function (value, index) {
-    if (Platform.OS === 'android' || Platform.OS === 'ios') {
-      notifyMessage(t('Text copied to clipboard!'));
-    }
-    Clipboard.setString(value);
-    setCopyiedIntex(index);
-    debouncedSetCopiedIndex();
+            <Text style={styles.colorNameValue}>{item.value}</Text>
+            {index === copyiedIndex && Platform.OS === 'web' && (
+              <Text
+                style={{
+                  position: 'absolute',
+                  backgroundColor: 'rgb(64, 64, 58)',
+                  top: '-25px',
+                  right: '-10px',
+                  color: Colors.white,
+                  padding: '5px',
+                  textAlign: 'center',
+                  borderRadius: '6px'
+                }}>
+                Copied!
+              </Text>
+            )}
+            <MaterialIcons style={{ marginLeft: 'auto' }} name="content-copy" size={16} />
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export const ColorDetail = ({ color }) => {
+  const backgroundColor = {
+    backgroundColor: color,
+    height: 112,
+    alignSelf: 'stretch',
+    borderRadius: 8
   };
   return (
     <View
       style={{
         flex: 1,
         flexDirection: 'column',
         padding: 8,
-        backgroundColor: '#fff',
+        backgroundColor: Colors.white,
         borderRadius: 8,
         marginTop: 12
       }}>
-      <View style={[styles.backgroundColor, { borderRadius: 8 }]}></View>
-      {/* <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} >{props.color}</Text> */}
-      <View style={{ marginTop: 20 }}>
-        {items.map((item, index) => (
-          <TouchableOpacity key={item.key} onPress={() => writeToClipboard(item.value, index)}>
-            <View style={styles.info}>
-              <Text style={styles.colorNameText}>{item.key} : </Text>
-
-              <Text>{item.value}</Text>
-              {index === copyiedIndex && Platform.OS === 'web' && (
-                <Text
-                  style={{
-                    position: 'absolute',
-                    backgroundColor: 'rgb(64, 64, 58)',
-                    top: '-25px',
-                    right: '-10px',
-                    color: '#fff',
-                    padding: '5px',
-                    textAlign: 'center',
-                    borderRadius: '6px'
-                  }}>
-                  Copied!
-                </Text>
-              )}
-              <FontAwesome name="copy" />
-            </View>
-          </TouchableOpacity>
-        ))}
-      </View>
+      <View style={backgroundColor}></View>
+      <ColorDetailItems color={color} />
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  info: {
+    flexDirection: 'row',
+    padding: 10,
+    alignItems: 'center'
+  },
+  colorNameKey: {
+    fontWeight: '400'
+  },
+  colorNameValue: {
+    fontSize: 18
+  }
+});
diff --git a/components/ColorPickerModal.js b/components/ColorPickerModal.js
@@ -142,7 +142,7 @@ export default function ColorPickerModal({ initialColor, onColorSelected, onClos
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: Colors.white,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     paddingTop: 8
@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
   tabText: {
     fontSize: 12,
     fontWeight: 'bold',
-    color: '#000'
+    color: Colors.black
   },
   scrollViewContent: {
     paddingHorizontal: 16,

diff --git a/components/CommonDialogs.js b/components/CommonDialogs.js
@@ -4,6 +4,7 @@ import * as Animatable from 'react-native-animatable';
 import { View, Text, StyleSheet, Platform, Dimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import Colors from '../constants/Styles';
 
 export const DialogContainer = (props) => (
   <View style={styles.DialogContainer}>{props.children}</View>
@@ -72,7 +73,7 @@ const styles = StyleSheet.create({
     borderRadius: 6
   },
   undoText: {
-    color: '#fff',
+    color: Colors.white,
     fontSize: 15
   },
   undoButton: {