Skip to content

Commit

Permalink
update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomimarkus991
tomimarkus991 committed Aug 2, 2021
1 parent 78c7594 commit 1aea544
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 115 deletions.
23 changes: 14 additions & 9 deletions tunduk/pages/CreateGroup/CreateGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Center, Input, VStack } from '@chakra-ui/react';
import { Center, HStack, Input, VStack } from '@chakra-ui/react';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { AvatarGroup, AvatarUpload } from '../../components/Avatar';
Expand Down Expand Up @@ -74,19 +74,24 @@ const CreateGroup: React.FC<Props> = () => {
isRequired
size="lg"
fontSize="2xl"
maxW="2xs"
borderRadius="25"
borderColor="beez.900"
_placeholder={{ color: 'gray.800' }}
placeholder="Group name"
/>

<GradientButton
onClick={createGroup}
isLoading={isLoading}
loadingText="Creating"
>
<GradientButtonText fontSize={25}>Create</GradientButtonText>
</GradientButton>
<HStack>
<GradientButton>
<GradientButtonText fontSize={25}>Back</GradientButtonText>
</GradientButton>
<GradientButton
onClick={createGroup}
isLoading={isLoading}
loadingText="Creating"
>
<GradientButtonText fontSize={25}>Create</GradientButtonText>
</GradientButton>
</HStack>
</VStack>
</Center>
);
Expand Down
85 changes: 39 additions & 46 deletions tunduk/pages/ForgotPassword/ForgotPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import {
AlertDescription,
AlertIcon,
AlertTitle,
Box,
Center,
Flex,
HStack,
Input,
Text,
Expand Down Expand Up @@ -74,50 +72,45 @@ const ForgotPassword: React.FC = () => {
) : (
<VStack spacing="10">
<Heading title="Reset Your Password" />
<Box mt="8">
<Flex
h="md"
w="100%"
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<VStack h="xs" w="xl" borderRadius={20} boxShadow="xl">
<VStack w="2xs">
<Input
type="email"
placeholder="Email"
value={email || ''}
onChange={e => setEmail(e.target.value)}
size="lg"
fontSize="xl"
borderRadius="25"
borderColor="beez.900"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<HStack spacing="4">
<Link to="/login">
<GradientButton>
<GradientButtonText fontSize={25}>
Back
</GradientButtonText>
</GradientButton>
</Link>
<GradientButton
onClick={sendResetPassword}
isLoading={isLoading}
loadingText="Sending"
>
<GradientButtonText fontSize={25}>
Send
</GradientButtonText>
</GradientButton>
</HStack>
</VStack>
</VStack>
</Flex>
</Box>
<Center
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
h="xs"
w="md"
borderRadius={20}
>
<VStack w="2xs">
<Input
type="email"
placeholder="Email"
value={email || ''}
onChange={e => setEmail(e.target.value)}
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.900"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<HStack spacing="4">
<Link to="/login">
<GradientButton>
<GradientButtonText fontSize={25}>
Back
</GradientButtonText>
</GradientButton>
</Link>
<GradientButton
onClick={sendResetPassword}
isLoading={isLoading}
loadingText="Sending"
>
<GradientButtonText fontSize={25}>
Send
</GradientButtonText>
</GradientButton>
</HStack>
</VStack>
</Center>
</VStack>
)}
</>
Expand Down
15 changes: 12 additions & 3 deletions tunduk/pages/Group/Group.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons';
import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
import {
Box,
ButtonGroup,
Expand All @@ -8,6 +8,8 @@ import {
useToast,
VStack,
} from '@chakra-ui/react';
import { faPen } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { AvatarGroup, AvatarUpload } from '../../components/Avatar';
Expand Down Expand Up @@ -135,7 +137,14 @@ const Group: React.FC = () => {
onClick={() => setIsEditable(true)}
aria-label="Edit"
size="sm"
icon={<EditIcon />}
w="100%"
h="100%"
p={2}
bgColor="transparent"
_hover={{ bgColor: 'transparent' }}
icon={
<FontAwesomeIcon icon={faPen} size={'2x'} color="#2A2828" />
}
/>
</Flex>
);
Expand Down Expand Up @@ -192,7 +201,7 @@ const Group: React.FC = () => {
onChange={e => setGroupname(e.target.value)}
value={group_name as string}
isDisabled={!isEditable}
fontSize="4xl"
fontSize="3xl"
size="lg"
width="2xs"
/>
Expand Down
29 changes: 28 additions & 1 deletion tunduk/pages/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,37 @@
import { Grid, GridItem, Box } from '@chakra-ui/react';
import React from 'react';
import { Header2 } from '../../components/Header';
import DefaultLayout from '../../components/Layouts/Default';
import LoggedIn from '../../components/LoggedIn';
import LoggedOut from '../../components/LoggedOut';
import { useAuth } from '../../context/authContext/AuthContext';

const Home: React.FC = () => {
const { user } = useAuth();
return <>{user ? <LoggedIn /> : <LoggedOut />}</>;
return (
<>
{user ? (
<DefaultLayout>
<LoggedIn />
</DefaultLayout>
) : (
<Grid
templateColumns="1fr"
templateRows="0.4fr 1fr"
templateAreas='"header" "main"'
h="100vh"
>
<GridItem gridArea="header">
<Header2 />
</GridItem>
<GridItem gridArea="main">
<Box h="100%">
<LoggedOut />
</Box>
</GridItem>
</Grid>
)}
</>
);
};
export default Home;
51 changes: 39 additions & 12 deletions tunduk/pages/Members/Members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import {
AlertIcon,
AlertTitle,
Box,
Button,
Flex,
HStack,
IconButton,
Input,
Modal,
ModalBody,
Expand All @@ -23,6 +23,7 @@ import { AvatarGroup } from '../../components/Avatar';
import { GradientButton } from '../../components/Buttons';
import { MembersContainer } from '../../components/Containers';
import { Heading, Name } from '../../components/Headers';
import { AddMemberIcon } from '../../components/Icons/Doggo';
import { BackIcon } from '../../components/Icons/LightMode';
import MainLayout from '../../components/Layouts/MainLayout';
import { MyGroupsLink, ProfileLink } from '../../components/Links';
Expand Down Expand Up @@ -53,6 +54,8 @@ const Members: React.FC = () => {

const router = useHistory();
const [isGroupdataLoading, setIsGroupdataLoading] = useState(true);
const [isAddMemberDisabled, setIsAddMemberDisabled] =
useState<boolean>(false);

const sendInvite = async () => {
try {
Expand Down Expand Up @@ -87,6 +90,12 @@ const Members: React.FC = () => {
}
};

const howManyMembersGroupHas = () => {
if (profiles?.length === 9) {
setIsAddMemberDisabled(true);
}
};

useEffect(() => {
const listenForMemberInserts = () => {
// when a you are inserted to members
Expand Down Expand Up @@ -157,6 +166,10 @@ const Members: React.FC = () => {
fetchGroupData();
}, []);

useEffect(() => {
howManyMembersGroupHas();
}, [profiles]);

return (
<MainLayout
leftSide={
Expand Down Expand Up @@ -196,23 +209,34 @@ const Members: React.FC = () => {
AddNewMember={
<>
{creator_id === user?.id ? (
<GradientButton onClick={onOpen}>
<GradientButtonText fontSize={25}>
Add new member
</GradientButtonText>
</GradientButton>
<IconButton
onClick={onOpen}
aria-label="Add new doggo group"
size="sm"
w="100%"
h="100%"
p={2}
borderRadius="100"
isDisabled={isAddMemberDisabled}
bgColor="transparent"
_hover={{ bgColor: 'transparent' }}
icon={<AddMemberIcon width="28" height="28" />}
/>
) : null}
<Modal
isOpen={isOpen}
onClose={() => {
onClose();
setIsInvalid(false);
}}
size="xs"
size="sm"
>
<ModalOverlay />
<ModalContent borderRadius={20}>
<ModalHeader textAlign="center">
<ModalHeader
textTransform="uppercase"
textAlign="center"
>
Add a member
</ModalHeader>
<ModalCloseButton />
Expand All @@ -236,13 +260,14 @@ const Members: React.FC = () => {
capitalization, spelling, any spaces, and
numbers are correct.
</AlertDescription>
<Button
<GradientButton
onClick={() => setIsInvalid(false)}
colorScheme="blue"
mt={2}
>
Okay
</Button>
<GradientButtonText fontSize={20}>
Okay
</GradientButtonText>
</GradientButton>
</Alert>
) : null}

Expand All @@ -251,6 +276,8 @@ const Members: React.FC = () => {
errorBorderColor="crimson"
borderColor="beez.900"
borderRadius={20}
size="lg"
fontSize="2xl"
onChange={e => setInviteReceiver(e.target.value)}
/>
</ModalBody>
Expand Down
22 changes: 12 additions & 10 deletions tunduk/pages/Profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,14 +161,20 @@ const Profile: React.FC = () => {
<Box mb="8">
<Heading title="My Profile" />
</Box>
<VStack h="md">
<VStack h="sm" w="xl" borderRadius={20} boxShadow="lg">
<VStack id="tere">
<VStack
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
h="sm"
w="xl"
borderRadius={20}
justifyContent="center"
>
<VStack w="xs">
<Input
value={username || ''}
onChange={e => setUsername(e.target.value)}
size="lg"
fontSize="3xl"
fontSize="2xl"
borderRadius="25"
borderColor="beez.900"
maxLength={20}
Expand All @@ -179,7 +185,7 @@ const Profile: React.FC = () => {
value={user?.email}
disabled
size="lg"
fontSize="xl"
fontSize="2xl"
borderRadius="25"
borderColor="beez.900"
/>
Expand All @@ -191,16 +197,12 @@ const Profile: React.FC = () => {
autoComplete="off"
placeholder="Password"
size="lg"
fontSize="xl"
fontSize="2xl"
borderRadius="25"
borderColor="beez.900"
_placeholder={{ color: 'gray.800' }}
/>
<InputRightElement
id="input roigs"
width="3rem"
h="100%"
>
<InputRightElement width="3rem" h="100%">
{show ? (
<FontAwesomeIcon
icon={faEye}
Expand Down
Loading

1 comment on commit 1aea544

@vercel
Copy link

@vercel vercel bot commented on 1aea544 Aug 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.