styled news and events page and panels to reflect current FIGMA design

Purdue-ACM-SIGAPP · Oct 4, 2024 · 503b6cd · 503b6cd
1 parent e8ba1c0
commit 503b6cd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 23 deletions.
diff --git a/src/components/NewsPanel.js b/src/components/NewsPanel.js
@@ -14,36 +14,45 @@ const NewsPanel = ({ image, title, summary}) => {
             />
             <View style={styles.textSection}>
                 <Text style={styles.title}>{title}</Text>
-                <Text style={styles.summary}>{summary}</Text>
+                <Text numberOfLines={2} ellipsizeMode="tail" style={styles.summary}>{summary}</Text>
             </View>
         </Pressable>
     );
 };
 
 const styles = StyleSheet.create({
     panel: {
-        backgroundColor: "#38a169",
+        borderWidth: 5,
+        borderColor: '#CDDDDE',
+        backgroundColor: "#065758",
         paddingBottom: 10,
         paddingHorizontal: 0,
         width: '100%',
         marginVertical: 10,
-        marginHorizontal: 0
+        marginHorizontal: 0,
+        borderRadius: 15,
+        height:175
     },
     textSection: {
-        paddingVertical: 15,
-        paddingHorizontal: 20
+        paddingTop: 10,
+        paddingHorizontal: 15
     },
     title: {
         fontSize: 20, // Equivalent to text-2xl
-        fontWeight: "semibold"
+        fontWeight: "bold",
+        color: '#FFFFFF',
+        paddingBottom: 5
     },
     summary: {
-        fontSize: 12
+        fontSize: 12,
+        color: '#CDDDDE',
     },
     image: {
         width: '100%',
-        height: 125,
-        objectFit: 'cover'
+        height: '50%',
+        objectFit: 'cover',
+        borderTopStartRadius:8,
+        borderTopRightRadius:8
     }
 });
 

diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js
@@ -16,21 +16,30 @@ export default function NewsAndEventsPage() {
     return (
             <View style={styles.container}>
                 <View style={styles.header}>
-                    <CustomButton style={styles.buttonOverride}
-                        initialText={"Back To Home"}
-                        updatedText={"Loading..."}
-                        onPress={handleSubmit}
-                    />
-                    <Text style={styles.title}>News and Events</Text>
+                    <Text style={styles.title}>
+                        <Text style={{color: '#CDDDDE'}}>Campus </Text>
+                        <Text style={{color: '#CFB991'}}>News and Events</Text></Text>
                 </View>
-                <ScrollView style={{ width:'100%' }}>
-                    <NewsPanel title = "Rohit is bad!!!!!!" summary = "He is not understanding what iim doing" image = "https://i.redd.it/i-got-bored-so-i-decided-to-draw-a-random-image-on-the-v0-4ig97vv85vjb1.png?width=1280&format=png&auto=webp&s=7177756d1f393b6e093596d06e1ba539f723264b">
+                <ScrollView style={styles.contentBox}>
+                    <NewsPanel 
+                        title = "Rohit is bad!!!!!!" 
+                        summary = "He is not understanding what iim doing" 
+                        image = "https://static2.bigstockphoto.com/1/1/3/large1500/311375767.jpg">
                     </NewsPanel>
-                    <NewsPanel title = "Rohit is good!!!!!!" summary = "He IS understanding what iim doing" image = "https://i.redd.it/i-got-bored-so-i-decided-to-draw-a-random-image-on-the-v0-4ig97vv85vjb1.png?width=1280&format=png&auto=webp&s=7177756d1f393b6e093596d06e1ba539f723264b">
+                    <NewsPanel 
+                        title = "Rohit's Birthday Party" 
+                        summary = "10:27AM | Ross Ade Stadium | Be there or be square! As in I will pick you up and shove you into a CoRec cubicle if you do not show up and give Rohit the attention he deserves!!!!" 
+                        image = "https://www.orangeville.ca/en/things-to-do/resources/Images/Facility%20and%20Parks%20Rentals/Birthday%20Party%20Kids.jpg">
                     </NewsPanel>
-                    <NewsPanel title = "Rohit is evil!!!!!!" summary = "He burned down my crop harvest!!! What the heck man?" image = "https://i.redd.it/i-got-bored-so-i-decided-to-draw-a-random-image-on-the-v0-4ig97vv85vjb1.png?width=1280&format=png&auto=webp&s=7177756d1f393b6e093596d06e1ba539f723264b">
+                    <NewsPanel 
+                        title = "Rohit is evil!!!!!!" 
+                        summary = "He burned down my crop harvest!!! What the heck man? You and your cs180 midterm grade will be cursed for several generations!!!" 
+                        image = "https://img.freepik.com/premium-photo/sad-indian-farmer-sitting-dry-soil-patiently-waiting-rain_846334-2675.jpg">
                     </NewsPanel>
-                    <NewsPanel title = "Rohit is nice :)" summary = "He gave my grandmother one THOUSAND dollars???" image = "https://i.redd.it/i-got-bored-so-i-decided-to-draw-a-random-image-on-the-v0-4ig97vv85vjb1.png?width=1280&format=png&auto=webp&s=7177756d1f393b6e093596d06e1ba539f723264b">
+                    <NewsPanel 
+                        title = "Rohit is nice :)" 
+                        summary = "He gave my grandmother one THOUSAND dollars???" 
+                        image = "https://www.shutterstock.com/shutterstock/videos/20390998/thumb/1.jpg?ip=x480://media.tenor.com/dtmNkhiWbe4AAAAe/granny-grandma-cash-counting.png">
                     </NewsPanel>
                 </ScrollView>
             </View>
@@ -43,23 +52,31 @@ const styles = StyleSheet.create({
         flex: 1,
         alignItems: "center",
         justifyContent: "top",
-        backgroundColor: "#F0FDF4", // Equivalent to bg-green-50
+        backgroundColor: "#FFFFFF", // Equivalent to bg-green-50
         width: "100%",
         height: "100%",
     },
     header: {
+        paddingTop: 36,
+        paddingHorizontal: 20,
         display: 'flex',
-        flexDirection: 'row'
+        flexDirection: 'row',
+        backgroundColor: '#065758'
     },
     buttonOverride: {
         flex: 1,
         width: 50
     },
     title: {
         flex: 1,
-        fontSize: 24, // Equivalent to text-2xl
+        fontSize: 36, // Equivalent to text-2xl
         fontWeight: "bold",
         textAlign: "center",
         marginVertical: 20
     },
+    contentBox: {
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        width: '100%'
+    }
 });