Gray out shelved practices

michalparkola · Sep 25, 2024 · c25cc99 · c25cc99
1 parent 898bbfa
commit c25cc99
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/global-styles.ts b/global-styles.ts
@@ -91,6 +91,7 @@ export const gs = StyleSheet.create({
   },
 
   itemContainer: {
+    flexDirection: "row",
     backgroundColor: "#FFF",
     borderRadius: 10,
     padding: 12,
@@ -99,9 +100,11 @@ export const gs = StyleSheet.create({
     shadowOpacity: 0.1,
     shadowRadius: 5,
     shadowOffset: { width: 0, height: 3 },
+    width: "100%",
   },
 
   shelvedContainer: {
+    flexDirection: "row",
     backgroundColor: "#e6e6e6",
     borderRadius: 10,
     padding: 12,
@@ -110,6 +113,7 @@ export const gs = StyleSheet.create({
     shadowOpacity: 0.1,
     shadowRadius: 5,
     shadowOffset: { width: 0, height: 3 },
+    width: "100%",
   },
 
   activityContainer: {

diff --git a/screens/practice/PracticeListView.tsx b/screens/practice/PracticeListView.tsx
@@ -1,12 +1,14 @@
 import React, { useState } from "react";
-import { View, Text, SectionList, StyleSheet, Switch } from "react-native";
+import { View, Text, SectionList, Switch } from "react-native";
 import { Link } from "expo-router";
 
 import { Tables } from "@/supabase/database.types";
 import PracticeGrid from "@/screens/practice/PracticeGrid";
 import { AddPractice } from "./AddPractice";
 import { usePractices } from "@/hooks/usePractices";
 
+import { gs } from "@/global-styles";
+
 function groupPracticesByCategory(practices: Tables<"Practices">[]) {
   return Object.entries(
     practices.reduce((groups, practice) => {
@@ -18,12 +20,13 @@ function groupPracticesByCategory(practices: Tables<"Practices">[]) {
 }
 
 export default function PracticeList() {
+  const [showShelved, setShowShelved] = useState(false);
+
   const {
     isPending: isPendingPractices,
     error: errorPractices,
     data: practices,
   } = usePractices();
-  const [showShelved, setShowShelved] = useState(false);
 
   if (isPendingPractices) return <Text>Loading...</Text>;
   if (errorPractices) return <Text>Error!</Text>;
@@ -51,7 +54,9 @@ export default function PracticeList() {
         keyExtractor={(item) => item.do100reps_title ?? "No title"}
         renderItem={({ item }) => (
           <Link href={"/practice/" + item.id}>
-            <View style={styles.card}>
+            <View
+              style={item.is_shelved ? gs.shelvedContainer : gs.itemContainer}
+            >
               <View style={{ marginRight: 5 }}>
                 <PracticeGrid nextRep={item.do100reps_count + 1} size={9} />
               </View>
@@ -83,23 +88,3 @@ export default function PracticeList() {
     </View>
   );
 }
-const styles = StyleSheet.create({
-  card: {
-    flexDirection: "row",
-    backgroundColor: "#FFF",
-    borderRadius: 10,
-    padding: 14,
-    marginBottom: 10,
-    shadowColor: "#000",
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-    shadowOffset: { width: 0, height: 3 },
-    width: "100%",
-  },
-  toggleContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: 12,
-  },
-});