Merge pull request #9 from ReflectionsProjections/login_profile

updated UI for login and profile page, made sure to resolve any merge conflicts
ReflectionsProjections · May 1, 2024 · d041561 · d041561
2 parents 32db0c9 + 3083847
commit d041561
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 66 deletions.
diff --git a/Components/Box.tsx b/Components/Box.tsx
@@ -0,0 +1,19 @@
+import { styled } from "@gluestack-style/react";
+import { Box } from "@gluestack-ui/themed";
+
+const StyledBox = styled(Box, 
+    {
+        variants: {
+            variant: {
+                foodWave: {
+                    height: 50,
+                    width: 300, 
+                    bg: "$lightgray",
+                    borderRadius: "$full"
+                }
+            }
+        }
+    }
+);
+
+export { StyledBox };
diff --git a/Components/Buttons.tsx b/Components/Buttons.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Pressable } from "@gluestack-ui/themed";
+import { Button } from "@gluestack-ui/themed";
+import { styled } from "@gluestack-style/react";
+
+const StyledButton = styled(Button, 
+    {
+        variants: {
+            styleVariant: {
+                login: {
+                    height: 50,
+                    width: 250, 
+                    marginBottom: "$3",
+                    bg: "$lightgray",
+                }
+            },
+        },
+    }, 
+    {
+        descendantStyle: ['_text']
+    }
+);
+
+export { StyledButton };
diff --git a/Components/Images.tsx b/Components/Images.tsx
@@ -1,9 +1,20 @@
 import React from "react";
 import { Image } from "@gluestack-ui/themed";
-import { styled, StyledProvider } from "@gluestack-style/react"
+import { styled } from "@gluestack-style/react";
 
-const Logo = styled(Image, 
-    h: '$6',
-    w: '$6',
+const Images = styled(Image, 
+    {
+        variants: {
+            variant: {
+                loginLogo: {
+                    height: 300,
+                    width: 300, 
+                    borderRadius: "$xl",
+                    marginTop: "$5",
+                }
+            }
+        }
+    }
+);
 
-)
+export { Images };
diff --git a/Components/Text.tsx b/Components/Text.tsx
@@ -0,0 +1,38 @@
+import { styled } from "@gluestack-style/react";
+import { Text } from "@gluestack-ui/themed";
+
+
+const StyledText = styled(Text, 
+    {
+        variants: {
+            variant: {
+                bigbold: {
+                    fontSize: 48,
+                    fontWeight: "$bold",
+                    textAlign: 'center'
+                }, 
+                bigText: {
+                    fontSize: 40,
+                    fontWeight: "$bold",
+                    textAlign: 'center'
+                },
+                basic: {
+                    fontSize: "$md",
+                    fontWeight: "$normal",
+                    textAlign: 'center'
+                },
+                medium: {
+                    fontSize: 30,
+                    fontWeight: "$semibold",
+                    textAlign: "center",
+                    color: "$black"
+                }
+            },
+        },
+    }, 
+    {
+        descendantStyle: ['_text']
+    }
+);
+
+export { StyledText };
diff --git a/gluestack-style.config.ts b/gluestack-style.config.ts
@@ -7,6 +7,7 @@ export const config = createConfig({
     rounded: 'borderRadius',
     h: 'height',
     w: 'width',
+    mt: 'marginTop'
   },
   tokens: {
     colors: {
@@ -16,13 +17,15 @@ export const config = createConfig({
       primary600: '#9333ea',
     },
     space: {
+      3: 12,
       4: 16,
       5: 20,
       6: 24,
     },
     radii: {
       sm: 4,
       md: 6,
+      lg: 30
     },
     letterSpacings: {
       md: 0,
@@ -38,6 +41,7 @@ export const config = createConfig({
     fontSizes: {
       sm: 14,
       md: 16,
+      xl: 40,
     },
     mediaQueries: {
       sm: '@media (min-width: 480px)',

diff --git a/navigation/Navigation.tsx b/navigation/Navigation.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createStackNavigator } from "@react-navigation/stack";
 import { FontAwesome } from "@expo/vector-icons";

diff --git a/screens/Login.tsx b/screens/Login.tsx
@@ -1,31 +1,45 @@
 import React from "react";
-import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
-import { Button, ButtonText, ButtonIcon, AddIcon } from "@gluestack-ui/themed";
+import { StyledProvider } from "@gluestack-style/react"
+import { config } from "@gluestack-ui/config";
+import { GluestackUIProvider, Text, Box, View } from "@gluestack-ui/themed";
+import { ButtonText } from "@gluestack-ui/themed";
+import { Images } from "../Components/Images";
+import { StyledButton } from "../Components/Buttons";
+import { StyledText } from "../Components/Text";
 import * as Linking from "expo-linking";
 
 function Login() {
     const authUrl = "https://api.reflectionsprojections.org/auth/login/web"; //need to change this to ~/mobile
     return (
-        <Box width="100%" height="100%" justifyContent="center" alignItems="center">
-            <Text>Login to R|P!</Text>
-            <Button
-                size="md"
-                variant="solid"
-                action="primary"
-                isDisabled={false}
-                isFocusVisible={false}
-                onPress={() => {
-                    console.log("pressed!");
-                    Linking.openURL(authUrl)
-                        .catch(err => {
-                            console.error("Failed to open URL:", err.message);
-                            alert("Failed to open URL")
+        <StyledProvider config={config}>
+
+            <Box width="100%" height="100%" justifyContent="space-between" alignItems="center" paddingVertical={100} flex={1}>
+                <Images
+                    variant="loginLogo" 
+                    source={{uri: "https://i.pinimg.com/originals/2e/60/07/2e60079f1e36b5c7681f0996a79e8af4.jpg"}}
+                    alt="RP Logo"
+                />
+                <StyledText variant='bigText' >Welcome to</StyledText>
+                <StyledText variant='bigbold' marginTop={-30}>R|P 2024!</StyledText>
+                <StyledText variant='basic' marginTop={100} marginBottom={-10}>Powered by SPONSOR!!!</StyledText>
+                <StyledButton
+                    styleVariant="login"
+                    action="primary"
+                    isDisabled={false}
+                    isFocusVisible={false}
+                    onPress={() => {
+                        console.log("logged in!");
+                        Linking.openURL(authUrl)
+                            .catch(err => {
+                                console.error("Failed to open URL:", err.message);
+                                alert("Failed to open URL")
                         })
-                }}
-            >
-                <ButtonText>LOGIN </ButtonText>
-            </Button>
-        </Box>    
+                    }}
+                >
+                    <ButtonText color={"$black"}>LOGIN</ButtonText>
+                </StyledButton>
+            </Box>
+        </StyledProvider>    
     )
 }
 

diff --git a/screens/Profile.tsx b/screens/Profile.tsx
@@ -1,12 +1,27 @@
 import React from "react";
-import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
+import { GluestackUIProvider, Text, Box, View } from "@gluestack-ui/themed";
 // import { Button, ButtonText, ButtonIcon, AddIcon } from "@gluestack-ui/themed";
 import { Heading, Center } from "@gluestack-ui/themed"
+import { Images } from "../Components/Images";
+import { StyledText } from "../Components/Text";
+import { StyledBox } from "../Components/Box";
 
 const Profile: React.FC = () => {
     return (
-    <Box width="100%" height="100%" justifyContent="center" alignItems="center">
-        <Heading>This is the Profile page.</Heading>
+    <Box width="100%" height="100%" paddingVertical={50} flex={1}>
+      <View justifyContent="space-between" alignItems="center">
+        <Images
+          variant="loginLogo" 
+          source={{uri: "https://i.pinimg.com/originals/2e/60/07/2e60079f1e36b5c7681f0996a79e8af4.jpg"}}
+          alt="QR Code"
+        />
+        <StyledText variant="bigText" marginTop={50}>FirstName LastName</StyledText>
+        <StyledBox variant='foodWave' marginTop={15} justifyContent='center'>
+          <StyledText variant="medium">
+            Food Wave: #
+          </StyledText>
+        </StyledBox>
+      </View>  
     </Box>
     );
   };

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react-jsx", 
   },
   "extends": "expo/tsconfig.base"
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3709,16 +3709,6 @@
     "@react-types/overlays" "^3.8.5"
     "@react-types/shared" "^3.22.1"
 
-"@reduxjs/toolkit@^2.2.3":
-  version "2.2.3"
-  resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz"
-  integrity sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==
-  dependencies:
-    immer "^10.0.3"
-    redux "^5.0.1"
-    redux-thunk "^3.1.0"
-    reselect "^5.0.1"
-
 "@segment/loosely-validate-event@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"
@@ -3869,15 +3859,15 @@
 
 "@types/react-native@^0.73.0":
   version "0.73.0"
-  resolved "https://registry.npmjs.org/@types/react-native/-/react-native-0.73.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.73.0.tgz#b316be230745779814caa533360262140b0f5984"
   integrity sha512-6ZRPQrYM72qYKGWidEttRe6M5DZBEV5F+MHMHqd4TTYx0tfkcdrUFGdef6CCxY0jXU7wldvd/zA/b0A/kTeJmA==
   dependencies:
     react-native "*"
 
 "@types/react@~18.2.45":
-  version "18.2.73"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz"
-  integrity sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==
+  version "18.2.79"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
+  integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -5551,7 +5541,7 @@ expo-asset@~9.0.2:
     invariant "^2.2.4"
     md5-file "^3.2.3"
 
-expo-constants@~15.4.0, expo-constants@~15.4.3:
+expo-constants@~15.4.0:
   version "15.4.5"
   resolved "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.5.tgz"
   integrity sha512-1pVVjwk733hbbIjtQcvUFCme540v4gFemdNlaxM2UXKbfRCOh2hzgKN5joHMOysoXQe736TTUrRj7UaZI5Yyhg==
@@ -5575,15 +5565,7 @@ expo-keep-awake@~12.8.2:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.8.2.tgz#6cfdf8ad02b5fa130f99d4a1eb98e459d5b4332e"
   integrity sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==
 
-expo-linking@~6.2.2:
-  version "6.2.2"
-  resolved "https://registry.npmjs.org/expo-linking/-/expo-linking-6.2.2.tgz"
-  integrity sha512-FEe6lP4f7xFT/vjoHRG+tt6EPVtkEGaWNK1smpaUevmNdyCJKqW0PDB8o8sfG6y7fly8ULe8qg3HhKh5J7aqUQ==
-  dependencies:
-    expo-constants "~15.4.3"
-    invariant "^2.2.4"
-
-[email protected]:
+expo-modules-autolinking@>=0.8.1, [email protected]:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.10.3.tgz#19f349884a90f3f27ec9d64e8f2fa6be609558c5"
   integrity sha512-pn4n2Dl4iRh/zUeiChjRIe1C7EqOw1qhccr85viQV7W6l5vgRpY0osE51ij5LKg/kJmGRcJfs12+PwbdTplbKw==
@@ -5607,7 +5589,7 @@ expo-status-bar@~1.11.1:
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.11.1.tgz#a11318741d361048c11db2b16c4364a79a74af30"
   integrity sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg==
 
-expo@~50.0.14:
+expo@*, expo@~50.0.14:
   version "50.0.14"
   resolved "https://registry.npmjs.org/expo/-/expo-50.0.14.tgz"
   integrity sha512-yLPdxCMVAbmeEIpzzyAuJ79wvr6ToDDtQmuLDMAgWtjqP8x3CGddXxUe07PpKEQgzwJabdHvCLP5Bv94wMFIjQ==
@@ -8136,11 +8118,29 @@ [email protected]:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"
   integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==
+react-native-svg@^13.4.0, react-native-svg@>=13.4.0:
+  version "13.4.0"
+  resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz"
+  integrity sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==
   dependencies:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
-react-native@*, [email protected]:
+react-native-web@>=0.19:
+  version "0.19.10"
+  resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.10.tgz"
+  integrity sha512-IQoHiTQq8egBCVVwmTrYcFLgEFyb4LMZYEktHn4k22JMk9+QTCEz5WTfvr+jdNoeqj/7rtE81xgowKbfGO74qg==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@react-native/normalize-color" "^2.1.0"
+    fbjs "^3.0.4"
+    inline-style-prefixer "^6.0.1"
+    memoize-one "^6.0.0"
+    nullthrows "^1.1.1"
+    postcss-value-parser "^4.2.0"
+    styleq "^0.1.3"
+
+react-native@*, react-native@>=0.57, react-native@>=0.65.0, react-native@>=0.72, [email protected]:
   version "0.73.6"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.6.tgz#ed4c675e205a34bd62c4ce8b9bd1ca5c85126d5b"
   integrity sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==
@@ -8189,15 +8189,7 @@ react-navigation@^5.0.0:
   resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-5.0.0.tgz#a7dd98a6148ba997834ebcf5a5073bdb3d4f4eb3"
   integrity sha512-ACTzjc4L1ik7rJ092ZhIELBJ/pnoLgRIqWHSKcYcaBASxyjJCgBEDIV5s585HBj55tw25YwNdlj3+d4B4MYWDg==
 
-react-redux@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz"
-  integrity sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==
-  dependencies:
-    "@types/use-sync-external-store" "^0.0.3"
-    use-sync-external-store "^1.0.0"
-
-[email protected], react-refresh@^0.14.0:
+react-refresh@^0.14.0, [email protected]:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==