login, account, and upload responsiveness updates; WIP

apps/web/components/AccGameplayItemExtended.tsx

@@ -14,6 +14,12 @@ import { trpc } from '@utils/trpc';
 import Loading from './Loading';
 import { BiTrash } from 'react-icons/bi';
 import { getYtVidDataFromId } from '@utils/helpers/apiHelper';
+// TODO
+interface Item {}
+
+interface Id {
+  id: string;
+}
 const AccGameplayItemExtended = ({ item, id }) => {
   const [meta, setMeta] = useState();
   const utils = trpc.useContext();
@@ -65,21 +71,28 @@ const AccGameplayItemExtended = ({ item, id }) => {
             <Spinner color={'default'} size={'sm'} mt={2} />
           ) : (
             <>
-              <Text fontSize={16} fontWeight={'bold'}>
-                {meta && meta.title.substring(0, 15) + ' ...'}
+              <Text
+                fontSize={{ base: 0, sm: 0, md: 16, lg: 16 }}
+                fontWeight={'bold'}
+              >
+                {meta && meta.title.substring(0, 15) + '...'}
+              </Text>
+              <Text fontSize={{ base: 0, sm: 0, md: 8, lg: 8 }}>
+                {item && item.youtubeUrl}
               </Text>
-              <Text fontSize={8}>{item && item.youtubeUrl}</Text>
             </>
           )}
         </Box>
-        <Button
-          ml={3}
-          variant={'ghost'}
-          color={'red'}
-          onClick={() => deleteGameplay()}
-        >
-          <BiTrash size={20} />
-        </Button>
+        <Flex ml={'auto'} right={0}>
+          <Button
+            ml={3}
+            variant={'ghost'}
+            color={'red'}
+            onClick={() => deleteGameplay()}
+          >
+            <BiTrash size={20} />
+          </Button>
+        </Flex>
       </Flex>
     </div>
   );

apps/web/components/AccGameplayItems.tsx

@@ -76,8 +76,18 @@ const AccGameplayItems = () => {
                     <Center>
                       <Image
                         src={getThumbnail(item.youtubeUrl)}
-                        height={'60px'}
-                        width={'90px'}
+                        height={{
+                          base: '40px',
+                          sm: '40px',
+                          md: '40px',
+                          lg: '60px',
+                        }}
+                        width={{
+                          base: '60px',
+                          sm: '60px',
+                          md: '60px',
+                          lg: '90px',
+                        }}
                         borderRadius={14}
                         onClick={() => {
                           console.log(gameplayItems);

apps/web/components/LoginTabItems.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Center, Flex, Text, Tabs, Tab, TabList } from '@chakra-ui/react';
+const LoginTabItems = () => {
+  const items = [{}, {}, {}];
+  return (
+    <div>
+      <Flex direction={'row'}>
+        <Center w={'100vh'}>
+          <Tabs>
+            <TabList>
+              {items.map((it, i) => (
+                <Tab
+                  key={i}
+                  _focus={{
+                    borderRadius: 20,
+                    borderWidth: 1,
+                    bgColor: 'gray.700',
+                  }}
+                  borderWidth={1}
+                  color={'gray.700'}
+                  borderRadius={20}
+                  w={'15vh'}
+                  mr={3}
+                  my={8}
+                ></Tab>
+              ))}
+            </TabList>
+          </Tabs>
+        </Center>
+      </Flex>
+    </div>
+  );
+};
+
+export default LoginTabItems;

apps/web/pages/account.tsx

@@ -93,7 +93,7 @@ export default function Account() {
           <>
             <DeleteAccModal show={showM} />
             <Box bg={'white'} p={8} borderRadius={12}>
-              <Flex direction={'column'} w={'lg'}>
+              <Flex direction={'column'} w={{ base: 'xs', md: 'sm', lg: 'xl' }}>
                 {/* heading */}
                 <Box>
                   <Text fontWeight={'bold'} fontSize={30}>

apps/web/pages/auth/login.tsx

@@ -13,6 +13,12 @@ import {
   ModalFooter,
   Square,
   Divider,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Image,
 } from '@chakra-ui/react';
 import Layout from '@components/Layout';
 import { Session } from 'next-auth';
@@ -23,6 +29,7 @@ import { FaDiscord, FaBattleNet, FaSteam, FaApple } from 'react-icons/fa';
 import { FcGoogle } from 'react-icons/fc';
 import { BsGithub } from 'react-icons/bs';
 import { SiFaceit } from 'react-icons/si';
+import LoginTabItems from '@components/LoginTabItems';
 const Login = () => {
   type Provider = {
     provider: string;
@@ -40,6 +47,8 @@ const Login = () => {
     setUserSession(session);
   };
 
+  const tabItems = [{}, {}, {}];
+
   const handleSelect = (index: number) => {
     setCurrentProvider(authProviders[index].provider.toLowerCase());
     setLastSelected(index);
@@ -111,10 +120,40 @@ const Login = () => {
 
   return (
     <div>
-      <Flex direction={'row'} minHeight={'100vh'} position={'relative'}>
-        <Flex color="white">
-          <Box w={'xl'} bottom="0">
-            <Text position={'absolute'} bottom="0"></Text>
+      <Flex direction={'row'} minHeight={'0vh'} position={'relative'}>
+        <Flex
+          color="white"
+          w={{ base: 0, md: 0, lg: 'xl' }}
+          h={{ base: 0, md: 0, lg: 'auto' }}
+        >
+          <Box w={{ base: 0, md: 0, lg: 'xl' }} bottom="0" mt={'auto'} mb={12}>
+            <Center h={{ base: 0, md: 0, lg: '100vh' }}>
+              <Image
+                src={'/group.png'}
+                width={'xl'}
+                height={{ base: 0, md: 0, lg: '305px' }}
+              />
+            </Center>
+            {/* add in v1.1 */}
+            {/* <LoginTabItems /> */}
+            <Flex alignItems={'left'} mx={12} direction={'column'}>
+              <Text
+                fontWeight={'bold'}
+                fontSize={{ base: 0, md: 20, lg: 30 }}
+                color={'gray.600'}
+                mb={2}
+              >
+                Sign up
+              </Text>
+              <Text
+                fontWeight={'semibold'}
+                fontSize={{ base: 0, md: 10, lg: 20 }}
+                color={'gray.600'}
+              >
+                To access uploading and reviewing community clips you must be
+                logged in
+              </Text>
+            </Flex>
           </Box>
         </Flex>
         <Box w={'full'} bg="white">
@@ -176,7 +215,10 @@ const Login = () => {
                               >
                                 {provider}
                               </Text>
-                              <Text color={selected ? 'white' : ''}>
+                              <Text
+                                color={selected ? 'white' : ''}
+                                fontSize={{ md: 0, base: 0, lg: 14 }}
+                              >
                                 Use your {provider} account to gain access to
                                 waldo services.
                               </Text>
@@ -189,7 +231,11 @@ const Login = () => {
                       <Center>
                         <Button variant="none" mr={6}>
                           <Link href={docs}>
-                            <Text color={selected ? 'white' : ''}>
+                            <Text
+                              color={selected ? 'white' : ''}
+                              fontSize={{ base: 10, sm: 10, md: 10, lg: 10 }}
+                              textOverflow={'ellipsis'}
+                            >
                               Learn More
                             </Text>
                           </Link>

apps/web/pages/submissions/index.tsx

@@ -64,7 +64,10 @@ export default function index() {
                     <b>Upload</b> or <b>Review</b> community clips.
                   </Text>
                 </Heading>
-                <Text maxW={'4xl'}>
+                <Text
+                  maxW={'4xl'}
+                  fontSize={{ base: 0, sm: 0, md: 16, lg: 16 }}
+                >
                   To aid Waldo's progress, we need the community to post and
                   submit their own gameplay video! We now accept a broad variety
                   of first-person shooter games which can be found on the upload

apps/web/pages/submissions/upload.tsx

@@ -45,7 +45,7 @@ import Loading from '@components/Loading';
 import { trpc } from '@utils/trpc';
 import { inferProcedureInput } from '@trpc/server';
 import { AppRouter } from '@server/trpc/router/_app';
-
+import { useRouter } from 'next/router';
 const Upload = () => {
   const [waitingForResponse, setWaitingForResponse] = useState<boolean>();
   const [loading, setLoading] = useState<boolean>(true);
@@ -58,6 +58,7 @@ const Upload = () => {
   const [userSession, setUserSession] = useState<Session | undefined>();
   const toast = useToast();
   const utils = trpc.useContext();
+  const router = useRouter();
 
   const createGameplay = trpc.gameplay.createGameplay.useMutation({
     async onSuccess() {
@@ -106,12 +107,11 @@ const Upload = () => {
   const getCurrentSession = async () => {
     const session = await getSession();
     if (session === null) {
-      setUserSession(undefined);
+      router.push('/auth/login');
     } else {
       setUserSession(session);
+      setLoading(false);
     }
-    setLoading(false);
-    console.log(session);
   };
 
   const createToast = (msg: string, type: any, title: string) => {
@@ -186,6 +186,7 @@ const Upload = () => {
   };
 
   useEffect(() => {
+    setLoading(true);
     getCurrentSession();
   }, []);
   return (
@@ -199,8 +200,10 @@ const Upload = () => {
           <Flex direction={{ lg: 'row', base: 'column' }}>
             <Container width={{ lg: '30%' }}>
               <Flex gap={5} direction={'column'}>
-                <Heading>Sumbit Your Clips</Heading>
-                <Text>
+                <Heading mt={{ base: 16, md: 0, lg: 0, sm: 16 }}>
+                  Submit Your Clips
+                </Heading>
+                <Text fontSize={{ base: 0, sm: 0, md: 14, lg: 14 }}>
                   Before you submit a video make sure you have read the rules
                   regarding
                 </Text>

apps/web/server/trpc/trpc.ts

@@ -64,4 +64,4 @@ const rateLimit = t.middleware(async ({ ctx, next }) => {
 /**
  * Protected procedure
  **/
-export const protectedProcedure = t.procedure.use(isAuthed).use(rateLimit);
+export const protectedProcedure = t.procedure.use(isAuthed);