Merge pull request #73 from Shaunmak1214/development

Development

src/App.js

@@ -1,7 +1,6 @@
 import './App.css';
 import { BrowserRouter as Router, Switch } from 'react-router-dom';
 import * as Screens from './screens';
-import * as Comp from './components';
 import BCRoutes from './utils/BCRoutes';
 
 function App() {
@@ -70,8 +69,6 @@ function App() {
           component={Screens.Landing}
         />
       </Switch>
-
-      <Comp.Footer />
     </Router>
   );
 }

src/assets/index.js

@@ -23,6 +23,7 @@ import NonsenseIcon from './svgs/nonsense.svg';
 import ChampionIcon from './svgs/champion.svg';
 import SilverIcon from './svgs/silver.svg';
 import BronzeIcon from './svgs/bronze.svg';
+import SpeakerIcon from './svgs/speaker.svg';
 
 // Icons (PNG)
 import NoMessageIcon from './jpg-pngs/no-message-icon.png';
@@ -115,4 +116,5 @@ export {
   SilverIcon,
   BronzeIcon,
   SponsorshipProposal,
+  SpeakerIcon,
 };

src/components/InfoBlock/index.js

@@ -20,12 +20,12 @@ const InfoBlock = ({ buttonUrl, buttonLabel, theme, content, leadingIcon }) => {
       justifyContent="center"
       alignItems="flex-start"
       mb="10px"
-      mt="50px"
+      mt="10px"
       p={['25px', '30px 45px 30px 80px']}
       w="100%"
       border={border}
       borderRadius="10px"
-      borderWidth="3px"
+      borderWidth="2px"
       borderStyle="solid"
       {...(border === 'none' && {
         style: {

src/components/SectionTitle/index.js

@@ -16,7 +16,7 @@ const SectionTitle = ({ type, ...props }) => {
         {children}
         <Box
           position="absolute"
-          bottom="-18px"
+          bottom="-10px"
           left="0px"
           h="3px"
           w="80px"
@@ -37,7 +37,7 @@ const SectionTitle = ({ type, ...props }) => {
           {children}
           <Box
             position="absolute"
-            bottom="-15px"
+            bottom="-10px"
             h="3px"
             w="90px"
             bg="linear-gradient(90deg, #5BA4FF 0%, #FF5E66 100%)"
@@ -58,7 +58,7 @@ const SectionTitle = ({ type, ...props }) => {
           {children}
           <Box
             position="absolute"
-            bottom="-15px"
+            bottom="-10px"
             h="3px"
             w="90px"
             bg="linear-gradient(90deg, #5BA4FF 0%, #FF5E66 100%)"

src/components/TopicBlock/index.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { VStack, HStack, Text, Box, Flex } from '@chakra-ui/layout';
+import { VStack, HStack, Text, Box, Flex, Center } from '@chakra-ui/layout';
 import { Image } from '@chakra-ui/image';
 
 import TopicBadge from './../TopicBadge';
 
-import { ChampionIcon, SilverIcon, BronzeIcon } from '../../assets';
+import {
+  ChampionIcon,
+  SilverIcon,
+  BronzeIcon,
+  SpeakerIcon,
+} from '../../assets';
 
 const TopicBlock = ({
   rounded,
   topic,
-  lead,
+  speaker,
+  // lead,
   themeIcon,
   count,
   leaderboard,
@@ -44,16 +50,16 @@ const TopicBlock = ({
   return (
     <HStack
       w="100%"
-      p="15px 25px"
+      p="10px 25px"
       border="1px solid #E9E9E9;"
       borderRadius="8px"
-      mb="2"
-      mt="15px"
+      mb="10px"
+      mt="0"
       cursor="pointer"
       transition="all 0.1s ease-in-out"
       justifyContent="space-between"
       alignItems="center"
-      boxShadow="0px 16px 40px rgba(195, 195, 195, 0.25)"
+      boxShadow="0px 16px 40px rgba(195, 195, 195, 0.05)"
     >
       <Box width="100%">
         <HStack spacing={[0, 0, 7]} py="0.3em" px={['0rem', '0rem', '0.5em']}>
@@ -66,17 +72,31 @@ const TopicBlock = ({
           />
           <VStack align="flex-start" w="100%" wordBreak="break-all">
             <Flex
-              justifyContent="space-between"
-              w={['50%', '50%', '95%']}
+              justifyContent="flex-start"
+              w={['100%', '50%', '95%']}
               flexDir={['column', 'column', 'row']}
+              mb="10px"
             >
               <TopicBadge topic={topic.theme} />
+              <Center
+                ml={[0, 0, '10px']}
+                mt={['10px', '10px', 0]}
+                borderRadius="8px"
+                border="1px solid #e9e9e9"
+                px="3"
+              >
+                <Image src={SpeakerIcon} mr="5px" height="10px" width="auto" />
+                <Text fontSize="sm" color="#797979">
+                  {speaker.fullName}
+                </Text>
+              </Center>
             </Flex>
             <Text
               as="h3"
               fontSize="md"
               fontFamily="Montserrat"
               fontWeight="600"
+              wordBreak="break-word"
             >
               {topic.name}
             </Text>
@@ -88,14 +108,13 @@ const TopicBlock = ({
       </Box>
 
       {leaderboard && (
-        <VStack spacing={3}>
-          <MedalRenderer medal={lead} />
-          <Box background="#f5f5f5" borderRadius="8px" p="10px">
-            <Text width="50px" textAlign="center" fontSize="sm">
-              <span className="gradientText">{count}</span>{' '}
-              {count <= 1 ? 'vote' : 'votes'}
-            </Text>
-          </Box>
+        <VStack spacing={0} h="100%" px="5">
+          <Text className="gradientText" style={{ fontSize: '35px' }}>
+            {count}
+          </Text>
+          <Text textAlign="center" fontSize="sm">
+            {count <= 1 ? 'vote' : 'votes'}
+          </Text>
         </VStack>
       )}
     </HStack>
@@ -106,6 +125,7 @@ TopicBlock.propTypes = {
   idx: PropTypes.number,
   rounded: PropTypes.bool,
   topic: PropTypes.object,
+  speaker: PropTypes.object,
   themeIcon: PropTypes.any,
   count: PropTypes.number,
   leaderboard: PropTypes.bool,

src/screens/dashboard.jsx

@@ -116,7 +116,9 @@ const Dashboard = () => {
         return <Loader type="block-loader" />;
       } else {
         if (Object.keys(userTopic).length > 0) {
-          return <TopicBlock rounded topic={userTopic} />;
+          return (
+            <TopicBlock rounded speaker={userTopic.user} topic={userTopic} />
+          );
         } else {
           return (
             <InfoBlock
@@ -170,6 +172,7 @@ const Dashboard = () => {
               key={idx}
               value={topic.topic._id}
               topic={topic.topic}
+              speaker={topic.speaker}
               themeIcon={topic.speaker.picture}
             />
           ));
@@ -229,6 +232,7 @@ const Dashboard = () => {
               lead={idx}
               value={vote.topic._id}
               topic={vote.topic}
+              speaker={vote.user}
               themeIcon={vote.user.picture}
               count={vote.count}
               leaderboard={true}
@@ -303,18 +307,39 @@ const Dashboard = () => {
                     window.location.href = '/propose-topic';
                   }}
                   mb={['12px', '12px', '0']}
+                  disabled={
+                    !proposeSectionClose
+                      ? Object.keys(userTopic).length > 0
+                        ? true
+                        : false
+                      : true
+                  }
                 >
-                  Propose Topic
+                  {!proposeSectionClose
+                    ? Object.keys(userTopic).length > 0
+                      ? 'Already proposed a topic'
+                      : 'Propose Topic'
+                    : 'Propose topic session closed'}
                 </PrimaryButton>
                 <PrimaryButton
-                  width="250px"
+                  width="215px"
                   backgroundColor="#B1B1B1"
                   onClick={() => {
                     window.location.href = '/vote-topic';
                   }}
-                  disabled={true}
+                  disabled={
+                    !voteSectionClose
+                      ? votedTopics.length > 0
+                        ? true
+                        : false
+                      : true
+                  }
                 >
-                  Vote Topic (Coming Soon)
+                  {!voteSectionClose
+                    ? votedTopics.length > 0
+                      ? 'Already voted a topic'
+                      : 'Vote Topics'
+                    : 'Vote Topics (Coming soon)'}
                 </PrimaryButton>
               </SimpleGrid>
             </VStack>
@@ -338,7 +363,7 @@ const Dashboard = () => {
           alignItems="flex-start"
           flexDir="column"
         >
-          <SectionTitle fontSize="2xl" type="left" mb="5">
+          <SectionTitle fontSize="2xl" type="left" mb="10">
             Your Proposed Topic
           </SectionTitle>
 
@@ -352,7 +377,7 @@ const Dashboard = () => {
           alignItems="flex-start"
           flexDir="column"
         >
-          <SectionTitle fontSize="2xl" type="left" mb="5">
+          <SectionTitle fontSize="2xl" type="left" mb="10">
             Your Voted Topic
           </SectionTitle>
 
@@ -366,7 +391,7 @@ const Dashboard = () => {
           alignItems="flex-start"
           flexDir="column"
         >
-          <SectionTitle fontSize="2xl" type="left" mb="5">
+          <SectionTitle fontSize="2xl" type="left" mb="10">
             Voting Result
           </SectionTitle>
 

src/screens/proposeTopic.jsx

@@ -19,6 +19,7 @@ import {
   Flex,
   Box,
   Image,
+  useToast,
 } from '@chakra-ui/react';
 
 import { PrimaryButton } from '../components/Buttons';
@@ -58,6 +59,7 @@ const schema = yup.object({
 
 const ProposeTopic = () => {
   const { scrollToRef, executeScroll } = useScrollTo();
+  const toast = useToast();
 
   const { isOpen, onModalClose, onModalOpen } = useModal({
     initialState: false,
@@ -89,7 +91,17 @@ const ProposeTopic = () => {
         }
         onModalOpen();
       } else if (res) {
-        window.location.href = '/dashboard';
+        toast({
+          title: 'Update Profile Successfully.',
+          position: 'top-right',
+          variant: 'top-accent',
+          status: 'success',
+          duration: 9000,
+          isClosable: true,
+        });
+        setTimeout(() => {
+          window.location.href = '/dashboard';
+        }, 1000);
       }
     },
   );
@@ -221,6 +233,7 @@ const ProposeTopic = () => {
             flexDir="column"
             alignItems="center"
             justifyContent="center"
+            mt="10"
           >
             <Container maxW="container.xl">
               <InfoBlock