refactor: restyle some components with tailwind
This commit is contained in:
Tristan Yang
@@ -1,5 +1,4 @@
|
||||
import { FC, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import ChannelModal from "./ChannelModal";
|
||||
import InviteModal from "./InviteModal";
|
||||
import IconChat from "../../assets/icons/placeholder.chat.svg";
|
||||
@@ -10,67 +9,15 @@ import UsersModal from "./UsersModal";
|
||||
import usePWAInstallPrompt from "../hook/usePWAInstallPrompt";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
|
||||
const Styled = styled.div`
|
||||
margin-top: -50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
color: #344054;
|
||||
}
|
||||
.desc {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #98a2b3;
|
||||
max-width: 424px;
|
||||
}
|
||||
}
|
||||
.boxes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 24px;
|
||||
.box {
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #f9fafb;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.txt {
|
||||
padding: 0 21px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #475467;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
type?: "chat" | "user";
|
||||
}
|
||||
|
||||
const classes = {
|
||||
box: "w-[200px] h-[200px] cursor-pointer bg-[#f9fafb] rounded-3xl flex flex-col justify-center items-center gap-4",
|
||||
boxIcon: "w-10 h-10",
|
||||
boxTip: "px-5 text-sm text-[#475467] font-bold text-center"
|
||||
};
|
||||
const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
|
||||
const { showPrompt } = usePWAInstallPrompt();
|
||||
const server = useAppSelector((store) => store.server);
|
||||
@@ -89,36 +36,35 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
|
||||
const chatTip =
|
||||
type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
|
||||
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Styled>
|
||||
<div className="head">
|
||||
<h2 className="title">Welcome to {server.name} server</h2>
|
||||
<p className="desc">
|
||||
<div className="flex flex-col gap-8 -mt-[50px]">
|
||||
<div className="flex flex-col gap-2 items-center">
|
||||
<h2 className="text-3xl text-[#344054] font-bold">Welcome to {server.name} server</h2>
|
||||
<p className="text-sm text-[#98a2b3] max-w-[424px] text-center">
|
||||
Here are some steps to help you get started. For more, check out our Getting Started
|
||||
guide
|
||||
</p>
|
||||
</div>
|
||||
<div className="boxes">
|
||||
<div className="box" onClick={toggleInviteModalVisible}>
|
||||
<IconInvite className="icon" />
|
||||
<div className="txt">Invite your friends or teammates</div>
|
||||
<div className="grid grid-cols-2 grid-rows-2 gap-6">
|
||||
<div className={classes.box} onClick={toggleInviteModalVisible}>
|
||||
<IconInvite className={classes.boxIcon} />
|
||||
<div className={classes.boxTip}>Invite your friends or teammates</div>
|
||||
</div>
|
||||
<div className="box" onClick={chatHandler}>
|
||||
<IconChat className="icon" />
|
||||
<div className="txt">{chatTip}</div>
|
||||
</div>
|
||||
<button className="box" onClick={showPrompt}>
|
||||
<IconDownload className="icon" />
|
||||
<div className="txt">Download PC and Mobile apps</div>
|
||||
<button onClick={chatHandler} className={classes.box} >
|
||||
<IconChat className={classes.boxIcon} />
|
||||
<div className={classes.boxTip}>{chatTip}</div>
|
||||
</button>
|
||||
<a href={"https://voce.chat"} target={"_blank"} rel="noreferrer" className="box">
|
||||
<IconAsk className="icon" />
|
||||
<div className="txt">Got questions? Visit our help center </div>
|
||||
<button onClick={showPrompt} className={classes.box} >
|
||||
<IconDownload className={classes.boxIcon} />
|
||||
<div className={classes.boxTip}>Download PC and Mobile apps</div>
|
||||
</button>
|
||||
<a href={"https://voce.chat"} target={"_blank"} rel="noreferrer" className={classes.box} >
|
||||
<IconAsk className={classes.boxIcon} />
|
||||
<div className={classes.boxTip}>Got questions? Visit our help center</div>
|
||||
</a>
|
||||
</div>
|
||||
</Styled>
|
||||
</div>
|
||||
{createChannelVisible && (
|
||||
<ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
|
||||
)}
|
||||
|
||||
@@ -1,21 +1,14 @@
|
||||
import { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useGetServerVersionQuery } from "../../app/services/server";
|
||||
|
||||
const Styled = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
`;
|
||||
type Props = {};
|
||||
const FAQ: FC<Props> = () => {
|
||||
const { data: serverVersion } = useGetServerVersionQuery();
|
||||
return (
|
||||
<Styled>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="item">Client Version: {process.env.VERSION}</div>
|
||||
<div className="item">Server Version: {serverVersion}</div>
|
||||
<div className="item">Build Timestamp: {process.env.REACT_APP_BUILD_TIME}</div>
|
||||
</Styled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FAQ;
|
||||
|
||||
@@ -49,8 +49,12 @@ const GithubLoginButton: FC<Props> = ({ type = "login", source = "webapp", clien
|
||||
}, [source]);
|
||||
|
||||
const handleGithubLogin = () => {
|
||||
window.open(`https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${location.origin}/github/cb/${source}.html`);
|
||||
// location.href = `https://github.com/login/oauth/authorize?client_id=${client_id}`;
|
||||
const redirectUrl = `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${location.origin}/github/cb/${source}.html`;
|
||||
if (source == "webapp") {
|
||||
location.href = redirectUrl;
|
||||
} else {
|
||||
window.open(redirectUrl);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,22 +1,7 @@
|
||||
import { FC } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import styled from "styled-components";
|
||||
import Button from "./styled/Button";
|
||||
|
||||
const Styled = styled.span`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
strong {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btns {
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
handleUpdate: () => void;
|
||||
@@ -24,9 +9,9 @@ interface Props {
|
||||
|
||||
const Index: FC<Props> = ({ id, handleUpdate }) => {
|
||||
return (
|
||||
<Styled>
|
||||
<strong>New Version</strong> Available
|
||||
<div className="btns">
|
||||
<div className="flex items-center gap-2">
|
||||
<strong className="whitespace-nowrap font-bold">New Version</strong> Available
|
||||
<div className="flex gap-1">
|
||||
<Button className="mini main" onClick={handleUpdate}>
|
||||
Update
|
||||
</Button>
|
||||
@@ -34,7 +19,7 @@ const Index: FC<Props> = ({ id, handleUpdate }) => {
|
||||
Dismiss
|
||||
</Button>
|
||||
</div>
|
||||
</Styled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -48,9 +48,9 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
|
||||
|
||||
return (
|
||||
<StyledWrapper className={type}>
|
||||
<Avatar className="avatar" url={avatar} name={name} />
|
||||
<h2 className="name">{name}</h2>
|
||||
<span className="email">{email}</span>
|
||||
<Avatar className="rounded-full w-20 h-20 object-cover" url={avatar} name={name} />
|
||||
<h2 className="text-lg select-text font-bold text-[#1c1c1e]">{name}</h2>
|
||||
<span className="text-sm text-[#98a2b3] select-text">{email}</span>
|
||||
{/* <p className="intro">{introduction}</p> */}
|
||||
<ul className="icons">
|
||||
<NavLink to={`/chat/dm/${uid}`}>
|
||||
|
||||
@@ -9,33 +9,6 @@ const StyledWrapper = styled.div`
|
||||
margin-top: 80px;
|
||||
width: 432px;
|
||||
gap: 4px;
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.name {
|
||||
user-select: text;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.email {
|
||||
user-select: text;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #98a2b3;
|
||||
}
|
||||
.intro {
|
||||
color: #344054;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.icons {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
@@ -76,12 +49,6 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&.card {
|
||||
padding: 16px;
|
||||
width: 280px;
|
||||
|
||||
Reference in New Issue
Block a user