Skip to content

Commit

Permalink
add more support for dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomimarkus991
tomimarkus991 committed Aug 6, 2021
1 parent c7d11cf commit db21b62
Show file tree
Hide file tree
Showing 12 changed files with 51 additions and 49 deletions.
8 changes: 3 additions & 5 deletions tunduk/components/Auth/Login/LoginAuth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,21 +63,21 @@ const LoginAuth: React.FC = () => {
<Box w={300}>
<VStack spacing="4">
<Input
variant={'removeDefault'}
autoComplete="off"
type="email"
placeholder="Email"
value={email || ''}
onChange={e => setEmail(e.target.value)}
size="lg"
fontSize="2xl"
size="lg"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<Box w="100%">
<InputGroup justifyContent="center" alignItems="center">
<Input
variant={'removeDefault'}
type={show ? 'text' : 'password'}
value={password || ''}
onChange={e => setPassword(e.target.value)}
Expand All @@ -86,8 +86,6 @@ const LoginAuth: React.FC = () => {
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<InputRightElement width="3rem" h="100%">
Expand Down
16 changes: 6 additions & 10 deletions tunduk/components/Auth/Register/RegisterAuth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { OAuthButton } from '..';
import { useAuth } from '../../../context/authContext/AuthContext';
import { StringOrUndefined } from '../../../types';
import { supabase } from '../../../utils/supabaseClient';
import { GradientButton } from '../../Buttons';
import ColorMode from '../../ColorMode';
Expand All @@ -35,9 +34,9 @@ const RegisterAuth: React.FC = () => {
const [isSignupSuccessful, setIsSignupSuccessful] =
useState<boolean>(false);

const [username, setUsername] = useState<StringOrUndefined>();
const [email, setEmail] = useState<StringOrUndefined>();
const [password, setPassword] = useState<StringOrUndefined>();
const [username, setUsername] = useState<string>('');
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');

const [show, setShow] = useState(false);

Expand Down Expand Up @@ -140,31 +139,30 @@ const RegisterAuth: React.FC = () => {
<Box w={300}>
<VStack spacing="4">
<Input
variant={'removeDefault'}
type="text"
placeholder="Username"
value={username}
onChange={e => setUsername(e.target.value)}
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
// isInvalid={isAuthError}
/>
<Input
variant={'removeDefault'}
type="email"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<InputGroup justifyContent="center" alignItems="center">
<Input
variant={'removeDefault'}
type={show ? 'text' : 'password'}
value={password}
onChange={e => setPassword(e.target.value)}
Expand All @@ -173,8 +171,6 @@ const RegisterAuth: React.FC = () => {
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>
<InputRightElement id="input roigs" width="3rem" h="100%">
Expand Down
2 changes: 1 addition & 1 deletion tunduk/components/Cards/InviteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const InviteCard: React.FC<Props> = ({
return (
<Box
boxSizing="border-box"
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
layerStyle="shadow-and-bg"
borderRadius={20}
py="4"
>
Expand Down
2 changes: 1 addition & 1 deletion tunduk/components/Containers/LogsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const LogsContainer: React.FC<Props> = ({}) => {
return (
<VStack
id="logs"
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
layerStyle="shadow-and-bg"
boxSizing="content-box"
position="relative"
justifyContent="center"
Expand Down
2 changes: 1 addition & 1 deletion tunduk/components/Invites/Invites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const Invites: React.FC<Props> = ({

<Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalContent bg="gray.800">
<ModalHeader fontSize="3xl">Invites</ModalHeader>
<ModalCloseButton />
<ModalBody maxH="lg">
Expand Down
2 changes: 1 addition & 1 deletion tunduk/components/Layouts/Containers/MainContainerLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const MainContainerLayout: React.FC<Props> = ({
<Skeleton isLoading={isLoading} props={{ borderRadius: 20 }}>
<Flex
{...containerProps}
layerStyle="shadowAndBgColor"
layerStyle="shadow-and-bg"
position="relative"
justifyContent="center"
alignItems="center"
Expand Down
5 changes: 2 additions & 3 deletions tunduk/pages/CreateGroup/CreateGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ const CreateGroup: React.FC<Props> = () => {
</Heading>
</HStack>
<Center
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
layerStyle="shadow-and-bg"
bg="white"
h="sm"
w={{ base: 'xs', sm: 'sm', lg: 'md' }}
Expand All @@ -194,15 +194,14 @@ const CreateGroup: React.FC<Props> = () => {
title="Add Photo"
/>
<Input
variant={'removeDefault'}
value={group_name}
onChange={e => setGroupname(e.target.value)}
isRequired
size="lg"
fontSize="2xl"
maxW="2xs"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
placeholder="Group name"
/>

Expand Down
5 changes: 2 additions & 3 deletions tunduk/pages/ForgotPassword/ForgotPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const ForgotPassword: React.FC = () => {
</Center>
) : (
<Center
style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
layerStyle="shadow-and-bg"
bg="white"
h="xs"
w={{ base: 'xs', sm: 'md' }}
Expand All @@ -126,6 +126,7 @@ const ForgotPassword: React.FC = () => {
>
<VStack spacing={5} w="xs">
<Input
variant={'removeDefault'}
type="email"
placeholder="Email"
value={email}
Expand All @@ -134,8 +135,6 @@ const ForgotPassword: React.FC = () => {
fontSize="2xl"
maxW={{ base: '16rem', sm: '20rem' }}
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
isInvalid={isAuthError}
/>

Expand Down
8 changes: 2 additions & 6 deletions tunduk/pages/Group/Group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,12 +225,10 @@ const Group: React.FC = () => {
{isEditable ? (
<>
<Input
variant={'removeDefault'}
onChange={e => setGroupname(e.target.value)}
value={group_name as string}
isDisabled={!isEditable}
color="gray.800"
_placeholder={{ color: 'gray.800' }}
borderColor="beez.700"
borderRadius="50"
fontSize="3xl"
size="lg"
Expand Down Expand Up @@ -336,12 +334,10 @@ const Group: React.FC = () => {
title={'Update Photo'}
/>
<Input
variant={'removeDefault'}
onChange={e => setGroupname(e.target.value)}
value={group_name as string}
isDisabled={!isEditable}
color="gray.800"
_placeholder={{ color: 'gray.800' }}
borderColor="beez.700"
borderRadius="50"
fontSize="3xl"
size="lg"
Expand Down
4 changes: 1 addition & 3 deletions tunduk/pages/Members/Members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,12 +377,10 @@ const Members: React.FC = () => {
) : null}

<Input
variant={'removeDefault'}
isInvalid={isInvalid}
errorBorderColor="crimson"
placeholder="Username"
color="gray.800"
_placeholder={{ color: 'gray.800' }}
borderColor="beez.700"
borderRadius={20}
size="lg"
fontSize="2xl"
Expand Down
12 changes: 4 additions & 8 deletions tunduk/pages/Profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,9 +237,7 @@ const Profile: React.FC = () => {
My Profile
</Heading>
<VStack
// style={{ boxShadow: '1px 1px 8px 2px #DDCDBF' }}
// bgColor="white"
layerStyle="shadowAndBgColor"
layerStyle="shadow-and-bg"
h="sm"
w={{ base: 'sm', md: 'md', lg: 'lg', xl: 'xl' }}
borderRadius={20}
Expand All @@ -252,30 +250,30 @@ const Profile: React.FC = () => {
>
<VStack>
<Input
variant={'removeDefault'}
value={username || ''}
onChange={e => setUsername(e.target.value)}
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
maxLength={20}
placeholder="Username"
_placeholder={{ color: 'gray.800' }}
/>
<Input
variant={'removeDefault'}
value={user?.email}
disabled
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
/>
{user?.app_metadata.provider === 'email' ? (
<InputGroup
justifyContent="center"
alignItems="center"
>
<Input
variant={'removeDefault'}
type={show ? 'text' : 'password'}
value={password}
onChange={e => setPassword(e.target.value)}
Expand All @@ -284,8 +282,6 @@ const Profile: React.FC = () => {
size="lg"
fontSize="2xl"
borderRadius="25"
borderColor="beez.700"
_placeholder={{ color: 'gray.800' }}
/>
<InputRightElement width="3rem" h="100%">
{show ? (
Expand Down
34 changes: 27 additions & 7 deletions tunduk/styles/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { extendTheme, ThemeConfig } from '@chakra-ui/react';
import { createBreakpoints, mode } from '@chakra-ui/theme-tools';
import { createBreakpoints } from '@chakra-ui/theme-tools';

const colors = {
beez: {
Expand Down Expand Up @@ -37,15 +37,35 @@ export const theme = extendTheme({
body: 'Viga',
},
layerStyles: {
shadowAndBgColor: {
boxShadow: mode(
'1px 1px 8px 2px #DDCDBF',
'1px 1px 8px 2px #707070',
),
bg: mode('#ffffff', '#6A6A6A'),
'shadow-and-bg': {
boxShadow: '1px 1px 8px 2px #DDCDBF',
bg: '#ffffff',
'.chakra-ui-dark &': {
bg: '#6A6A6A',
boxShadow: '1px 1px 8px 2px #707070',
},
},
},
components: {
Input: {
baseStyle: {
// borderRadius
// size
field: {
bg: '#ffffff',
color: 'gray.800',
_placeholder: { color: '#2A2828' },
borderColor: 'beez.700',
borderWidth: '2px',
borderStyle: 'solid',
'.chakra-ui-dark &': {
bg: 'gray.800',
color: '#DDCDBF',
_placeholder: { color: '#DDCDBF' },
},
},
},
},
Avatar: {
sizes: {
xl: {
Expand Down

1 comment on commit db21b62

@vercel
Copy link

@vercel vercel bot commented on db21b62 Aug 6, 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.