Skip to content

Commit

Permalink
feature: adjust UI for mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
p6te committed Dec 30, 2023
1 parent b6ba4c4 commit 7d7956e
Show file tree
Hide file tree
Showing 26 changed files with 357 additions and 70 deletions.
7 changes: 7 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import styled, { ThemeProvider } from "styled-components";
import ProtectedRoute from "./ProtectedRoute";
import { useTheme } from "./styles/theme/themeContext";
import GlobalStyle from "./styles/global";
import { device } from "./styles/breakpoints";

const StyledLayout = styled("div")`
display: flex;
Expand All @@ -23,6 +24,12 @@ const AppContainer = styled("div")`
background-color: ${({ theme }) => theme.backgroundPrimary};
border-radius: 40px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@media ${device.mobile} {
background-color: none;
border-radius: 0;
box-shadow: none;
min-height: 100vh;
}
`;

const Layout = () => {
Expand Down
6 changes: 3 additions & 3 deletions src/ProtectedRoute.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ const ProtectedRoute: React.FC<PropsWithChildren> = ({ children }) => {
turnOnOnlineStatus();
}, []);

if (!loggedUser) {
return <Navigate to="/login" />;
}
// if (!loggedUser) {
// return <Navigate to="/login" />;
// }

return children;
};
Expand Down
42 changes: 42 additions & 0 deletions src/assets/ChatIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { useTheme } from "~/styles/theme/themeContext";

type Props = {
color?: string;
size?: number;
};

export default function ChatIcon({ color, size }: Props) {
const { theme } = useTheme();

const width = size ? size + "px" : "24px";
const height = size ? size + "px" : "24px";

return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 10.5H16"
stroke={color ? color : theme.primary}
stroke-width="1.5"
stroke-linecap="round"
/>
<path
d="M8 14H13.5"
stroke={color ? color : theme.primary}
stroke-width="1.5"
stroke-linecap="round"
/>
<path
d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7"
stroke={color ? color : theme.primary}
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
);
}
42 changes: 42 additions & 0 deletions src/assets/MenuIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { useTheme } from "~/styles/theme/themeContext";

type Props = {
color?: string;
size?: number;
};

export default function MenuIcon({ color, size }: Props) {
const { theme } = useTheme();

const width = size ? size + "px" : "24px";
const height = size ? size + "px" : "24px";

return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 18L20 18"
stroke={color ? color : theme.primary}
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M4 12L20 12"
stroke={color ? color : theme.primary}
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M4 6L20 6"
stroke={color ? color : theme.primary}
stroke-width="2"
stroke-linecap="round"
/>
</svg>
);
}
11 changes: 7 additions & 4 deletions src/components/Chat/ChatInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ import AddImageIcon from "~/assets/AddImageIcon";
import SendIcon from "~/assets/SendIcon";
import CancelIcon from "~/assets/CancelIcon";
import ImageIcon from "~/assets/ImageIcon";
import useIsMobile from "~/hooks/useIsMobile";

export default function ChatInput() {
const [text, setText] = useState("");
const [img, setImg] = useState<File | null>(null);
const [isEmojPicker, setIsEmojPicker] = useState(false);
const { loggedUser } = useContext(AuthContext);
const { state } = useContext(ChatContext);
const isMobile = useIsMobile();
const emojiPickerRef = useOutsideClick(() => {
setIsEmojPicker(false);
});
Expand Down Expand Up @@ -165,15 +167,16 @@ export default function ChatInput() {
<div onClick={() => setImg(null)}>
<CancelIcon />
</div>
<ImageIcon /> <p>{img.name}</p>
<ImageIcon />
{isMobile ? <p>{img.name.slice(0, 4)}...</p> : <p>{img.name}</p>}
</Flexbox>
</AddedImageContainer>
)}
<SendOptions>
{/* TODO add handling files */}
{/* <img src={Attach} alt="" /> */}
<EmojiButton onClick={() => setIsEmojPicker(true)}>
<EmojiIcon size="28" />
<EmojiIcon size={isMobile ? "18px" : "28px"} />
</EmojiButton>
<input
type="file"
Expand All @@ -182,10 +185,10 @@ export default function ChatInput() {
onChange={handleFileChange}
/>
<label htmlFor="file">
<AddImageIcon size="28" />
<AddImageIcon size={isMobile ? "18px" : "28px"} />
</label>
<SendButton onClick={handleSend}>
<SendIcon size="28" />
<SendIcon size={isMobile ? "18px" : "28px"} />
</SendButton>
</SendOptions>
</SearchInputContainer>
Expand Down
8 changes: 8 additions & 0 deletions src/components/Chat/ChatInput/styled.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import styled from "styled-components";
import { device } from "~/styles/breakpoints";

export const SearchInputContainer = styled.div`
margin: 1rem 1.5rem;
display: flex;
gap: 0.5rem;
position: relative;
@media ${device.tablet} {
margin: 1rem;
gap: 0;
}
`;

export const SendOptions = styled.div`
display: flex;
align-items: center;
gap: 4px;
@media ${device.tablet} {
gap: 0;
}
label {
transition: 0.2s;
padding: 8px;
Expand Down
32 changes: 27 additions & 5 deletions src/components/Chat/Messages/Message/styled.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled, { css } from "styled-components";
import { device } from "~/styles/breakpoints";
export interface Props {
isOwner?: boolean;
withAvatar?: boolean;
Expand Down Expand Up @@ -30,11 +31,17 @@ export const AvatarImage = styled.img`
height: 40px;
border-radius: 50%;
object-fit: cover;
@media ${device.tablet} {
width: 30px;
height: 30px;
}
`;

export const EmptyBox = styled.div`
width: 40px;
height: 40px;
@media ${device.tablet} {
width: 30px;
height: 30px;
}
`;

export const MessageContent = styled("div").withConfig({
Expand All @@ -50,6 +57,10 @@ export const MessageContent = styled("div").withConfig({
border-radius: ${({ withAvatar }) =>
withAvatar ? `10px 10px 10px 0px` : `0px 10px 10px 10px`};
max-width: max-content;
@media ${device.tablet} {
padding: 6px 12px;
font-size: 14px;
}
}
${({ isOwner, withAvatar }) =>
Expand All @@ -72,17 +83,28 @@ export const ImageMessageContainer = styled.div`
width: 150px;
max-width: 150px;
max-height: 150px;
border-radius: 1rem;
box-shadow: 0px 0px 22px -14px rgba(66, 68, 90, 0.471);
display: flex;
justify-content: center;
@media ${device.tablet} {
height: 70px;
width: 70px;
max-width: 70px;
max-height: 70px;
border-radius: 0.5rem;
}
img {
object-fit: contain;
max-width: 150px;
max-height: 150px;
flex: 1;
@media ${device.tablet} {
height: 70px;
width: 70px;
max-width: 70px;
max-height: 70px;
border-radius: 0.5rem;
}
}
`;
4 changes: 4 additions & 0 deletions src/components/Chat/Messages/styled.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from "styled-components";
import { device } from "~/styles/breakpoints";

export const MessagesContainer = styled.div`
flex-grow: 1;
Expand All @@ -23,5 +24,8 @@ export const MessagesContainer = styled.div`
color: ${({ theme }) => theme.secondary};
display: table;
margin: 0 auto;
@media ${device.tablet} {
font-size: 12px;
}
}
`;
24 changes: 22 additions & 2 deletions src/components/Chat/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,31 @@ import Messages from "./Messages";
import Input from "./ChatInput";
import { Dispatch, SetStateAction, useContext } from "react";
import { ChatContext } from "../../context/ChatContext";
import { AvatarImage, ChatContainer, ChatMissing, TopSection } from "./styled";
import {
AvatarImage,
ChatContainer,
ChatMissing,
MenuButton,
TopSection,
} from "./styled";
import { Button } from "../common/Button/styled";
import useIsMobile from "~/hooks/useIsMobile";
import MenuIcon from "~/assets/MenuIcon";

type Props = {
setIsSearchOpen: Dispatch<SetStateAction<boolean>>;
setIsLoading: Dispatch<SetStateAction<boolean>>;
setIsSidebarOpen: Dispatch<SetStateAction<boolean>>;
};
export default function Chat({ setIsSearchOpen, setIsLoading }: Props) {
export default function Chat({
setIsSearchOpen,
setIsLoading,
setIsSidebarOpen,
}: Props) {
const { state } = useContext(ChatContext);
const { displayName, photoURL } = state.user;
const isMobile = useIsMobile();

return (
<ChatContainer>
{!state.chatId && (
Expand All @@ -30,6 +45,11 @@ export default function Chat({ setIsSearchOpen, setIsLoading }: Props) {
<h3>{displayName}</h3>
</div>
)}
{isMobile && (
<MenuButton onClick={() => setIsSidebarOpen(true)}>
<MenuIcon />
</MenuButton>
)}
</TopSection>
<Messages setIsLoading={setIsLoading} />
<Input />
Expand Down
22 changes: 22 additions & 0 deletions src/components/Chat/styled.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from "styled-components";
import { device } from "~/styles/breakpoints";

export const ChatContainer = styled.div`
display: flex;
Expand All @@ -23,20 +24,41 @@ export const ChatMissing = styled.div`

export const TopSection = styled.div`
min-height: 50px;
padding: 12px 0;
margin: 8px 0;
box-shadow: 0px 10px 16px -16px rgba(66, 68, 90, 0.434);
display: flex;
align-items: center;
justify-content: space-between;
div {
margin: 0 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
button {
margin-right: 1rem;
}
`;

export const AvatarImage = styled.img`
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: fill;
@media ${device.tablet} {
width: 36px;
height: 36px;
}
`;

export const MenuButton = styled.button`
margin-left: auto;
margin-right: 1rem;
background: ${({ theme }) => theme.tertiary};
padding: 8px;
border-radius: 50%;
outline: none;
border: none;
`;
2 changes: 1 addition & 1 deletion src/components/ChoseTheme/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { THEMES, ThemeType } from "~/styles/theme/theme";
import { ThemeButton, ThemeCircle, ThemeContainer } from "./styled";
import { ThemeCircle, ThemeContainer } from "./styled";
import { useTheme } from "~/styles/theme/themeContext";
import Spacer from "../common/Spacer";

Expand Down
5 changes: 3 additions & 2 deletions src/components/ChoseTheme/styled.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import styled, { css } from "styled-components";
import styled from "styled-components";

export const ThemeContainer = styled("div")`
min-height: 50px;
margin-top: 1rem;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
`;

export interface Props
Expand Down
Loading

0 comments on commit 7d7956e

Please sign in to comment.