Manage Members
@@ -142,7 +145,7 @@ export default function ManageMembers({ members = [] }) {
data-uid={uid}
onClick={toggleMenu}
className="dots"
- src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
+ src={moreIcon}
alt="dots icon"
/>
{menuVisible == uid && (
diff --git a/src/common/component/Message/Commands.js b/src/common/component/Message/Commands.js
index 13241b00..e54084d2 100644
--- a/src/common/component/Message/Commands.js
+++ b/src/common/component/Message/Commands.js
@@ -7,7 +7,12 @@ import { addReplyingMessage } from "../../../app/slices/message";
import StyledMenu from "../StyledMenu";
import DeleteMessageConfirm from "./DeleteMessageConfirm";
import EmojiPicker from "./EmojiPicker";
+import replyIcon from "../../../assets/icons/reply.svg?url";
+import reactIcon from "../../../assets/icons/reaction.svg?url";
+import editIcon from "../../../assets/icons/edit.svg?url";
+import moreIcon from "../../../assets/icons/more.svg?url";
const StyledCmds = styled.ul`
+ z-index: 9999;
position: absolute;
right: 10px;
top: 0;
@@ -33,6 +38,12 @@ const StyledCmds = styled.ul`
height: 24px;
}
}
+ > .picker {
+ position: absolute;
+ left: -10px;
+ top: 0;
+ transform: translateX(-100%);
+ }
.menu {
position: absolute;
top: 0;
@@ -70,34 +81,24 @@ export default function Commands({
return (
- 
+ 
{emojiPopVisible && (
-
+
+
+
)}
{currUid == from_uid ? (
- 
+ 
) : (
- 
+ 
)}
- 
+ 
{menuVisible && (
diff --git a/src/routes/chat/styled.js b/src/routes/chat/styled.js
index ab0632f4..c24f7f43 100644
--- a/src/routes/chat/styled.js
+++ b/src/routes/chat/styled.js
@@ -1,4 +1,5 @@
import styled from "styled-components";
+import settingIcon from "../../assets/icons/setting.svg?url";
const StyledWrapper = styled.div`
display: flex;
height: 100%;
@@ -68,7 +69,8 @@ const StyledWrapper = styled.div`
display: flex;
width: 16px;
height: 16px;
- background-image: url("https://static.nicegoodthings.com/project/rustchat/icon.setting.svg");
+ background-image: url(${settingIcon});
+ background-size: 16px;
}
> .badge {
color: #fff;
@@ -161,6 +163,12 @@ const StyledWrapper = styled.div`
font-weight: 900;
font-size: 10px;
line-height: 10px;
+ &.dot {
+ min-width: unset;
+ width: 6px;
+ height: 6px;
+ padding: 0;
+ }
&.mute {
background: #bfbfbf;
}
diff --git a/src/routes/home/Menu.js b/src/routes/home/Menu.js
index 022321a3..9a60649e 100644
--- a/src/routes/home/Menu.js
+++ b/src/routes/home/Menu.js
@@ -1,6 +1,9 @@
// import React from 'react'
import { useDispatch } from "react-redux";
import { toggleSetting } from "../../app/slices/ui";
+import settingIcon from "../../assets/icons/setting.svg?url";
+import foldIcon from "../../assets/icons/fold.svg?url";
+import unfoldIcon from "../../assets/icons/unfold.svg?url";
import styled from "styled-components";
const StyledMenus = styled.ul`
display: flex;
@@ -38,11 +41,7 @@ export default function Menu({ toggle, expand = true }) {
return (
- 
+ 
{expand && (
Settings
@@ -51,11 +50,7 @@ export default function Menu({ toggle, expand = true }) {
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 3420341f..0589093c 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -12,8 +12,8 @@ import usePreload from "./usePreload";
import SettingModal from "../../common/component/Setting";
import ChannelSettingModal from "../../common/component/ChannelSetting";
-import ChatIcon from "../../assets/icons/chat.svg";
-import ContactIcon from "../../assets/icons/contact.svg";
+import ChatIcon from "../../assets/icons/chat.svg?url";
+import ContactIcon from "../../assets/icons/contact.svg?url";
// import NotificationHub from "../../common/component/NotificationHub";
export default function HomePage() {
@@ -29,7 +29,7 @@ export default function HomePage() {
const toggleExpand = () => {
dispatch(toggleMenuExpand());
};
- console.log("index loading", loading, ready);
+ // console.log("index loading", loading, ready);
if (loading || !ready) {
return ;
}
diff --git a/src/routes/invite/index.js b/src/routes/invite/index.js
index a1ee6698..57768d80 100644
--- a/src/routes/invite/index.js
+++ b/src/routes/invite/index.js
@@ -1,168 +1,177 @@
-import { useState, useEffect } from 'react';
-import StyledWrapper from './styled';
-import { useNavigate } from 'react-router-dom';
-import toast from 'react-hot-toast';
-
-import { useRegisterMutation } from '../../app/services/contact';
-import { useCheckInviteTokenValidMutation } from '../../app/services/auth';
+import { useState, useEffect } from "react";
+import StyledWrapper from "./styled";
+import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import BASE_URL from "../../app/config";
+import { useRegisterMutation } from "../../app/services/contact";
+import { useCheckInviteTokenValidMutation } from "../../app/services/auth";
export default function InvitePage() {
- const [secondPwd, setSecondPwd] = useState('');
- const [samePwd, setSamePwd] = useState(true);
- const [token, setToken] = useState('');
- const [valid, setValid] = useState(false);
- // const [sp] = useSearchParams();
- const navigateTo = useNavigate();
- const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
- const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
- useCheckInviteTokenValidMutation();
- useEffect(() => {
- // console.log(search);
- const query = new URLSearchParams(location.search);
- setToken(query.get('token'));
- }, []);
- useEffect(() => {
- if (token) {
- checkToken(token);
- }
- }, [token]);
- useEffect(() => {
- if (checkSuccess) {
- console.log({ isValid });
- setValid(isValid);
- } else {
- setValid(false);
- }
- }, [checkSuccess, isValid]);
-
- const [input, setInput] = useState({
- name: '',
- email: '',
- password: ''
- });
-
- const handleReg = (evt) => {
- evt.preventDefault();
- if (!samePwd) {
- toast.error('two passwords not same');
- return;
- }
- console.log('wtf', input);
- register({
- ...input,
- magic_token: token,
- gender: 1
- });
- };
- const handleInput = (evt) => {
- const { type } = evt.target.dataset;
- const { value } = evt.target;
- console.log(type, value);
- setInput((prev) => {
- prev[type] = value;
- return { ...prev };
- });
- };
- const handleSecondPwdInput = (evt) => {
- const { value } = evt.target;
- setSecondPwd(value);
- };
- const handlePwdCheck = () => {
- if (secondPwd) {
- setSamePwd(secondPwd == input.password);
- }
- };
- useEffect(() => {
- if (!samePwd) {
- toast.error('two passwords not same');
- }
- }, [samePwd]);
-
- useEffect(() => {
- if (isSuccess && data) {
- // 去登录
- toast.success('register success, login please');
- setTimeout(() => {
- navigateTo('/login');
- }, 500);
- } else if (isError) {
- console.log('register failed', error);
- switch (error.status) {
- case 412:
- toast.error('register failed: invalid token or expired');
- break;
- case 409: {
- const tips = {
- email_conflict: 'email conflict',
- name_conflict: 'name conflict'
- };
- toast.error(`register failed: ${tips[error.data?.reason]}`);
- break;
+ const [secondPwd, setSecondPwd] = useState("");
+ const [samePwd, setSamePwd] = useState(true);
+ const [token, setToken] = useState("");
+ const [valid, setValid] = useState(false);
+ // const [sp] = useSearchParams();
+ const navigateTo = useNavigate();
+ const [
+ register,
+ { data, isLoading, isSuccess, isError, error },
+ ] = useRegisterMutation();
+ const [
+ checkToken,
+ { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess },
+ ] = useCheckInviteTokenValidMutation();
+ useEffect(() => {
+ // console.log(search);
+ const query = new URLSearchParams(location.search);
+ setToken(query.get("token"));
+ }, []);
+ useEffect(() => {
+ if (token) {
+ checkToken(token);
}
- default:
- toast.error('register failed');
- break;
- }
- }
- }, [data, isSuccess, isError, error]);
+ }, [token]);
+ useEffect(() => {
+ if (checkSuccess) {
+ console.log({ isValid });
+ setValid(isValid);
+ } else {
+ setValid(false);
+ }
+ }, [checkSuccess, isValid]);
- const { email, password, name } = input;
- if (!token) return 'token not found';
- if (checkLoading) return 'checking token valid';
- if (!valid) return 'invite token expires or invalid';
- return (
-
-
-
-
-
Sign Up to Rustchat
-
Please enter your details.
-
-
-
+
+
+
Sign Up to Rustchat
+
Please enter your details.
+
+
+
+ 
Sign in with MetaMask
);
diff --git a/src/routes/login/SolidLoginButton.js b/src/routes/login/SolidLoginButton.js
index abbe057f..c97e68d1 100644
--- a/src/routes/login/SolidLoginButton.js
+++ b/src/routes/login/SolidLoginButton.js
@@ -1,6 +1,7 @@
/* eslint-disable no-undef */
import { useEffect } from "react";
import { useGetOpenidMutation } from "../../app/services/auth";
+import solidSvg from "../../assets/icons/solid.svg?url";
export default function SolidLoginButton() {
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
@@ -26,11 +27,7 @@ export default function SolidLoginButton() {
href="#"
className="btn social"
>
- 
+ 
{isLoading ? `Redirecting...` : `Sign in with Solid`}
);
diff --git a/src/routes/login/index.js b/src/routes/login/index.js
index 94983a04..fa15122c 100644
--- a/src/routes/login/index.js
+++ b/src/routes/login/index.js
@@ -1,11 +1,11 @@
/* eslint-disable no-undef */
import { useState, useEffect } from "react";
-import StyledWrapper from "./styled";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
-
+import BASE_URL from "../../app/config";
// import web3 from "web3";
+import StyledWrapper from "./styled";
import MetamaskLoginButton from "./MetamaskLoginButton";
import SolidLoginButton from "./SolidLoginButton";
@@ -88,7 +88,7 @@ export default function LoginPage() {
diff --git a/src/routes/login/styled.js b/src/routes/login/styled.js
index 643f3c6a..561167ff 100644
--- a/src/routes/login/styled.js
+++ b/src/routes/login/styled.js
@@ -1,103 +1,105 @@
-import styled from 'styled-components';
+import styled from "styled-components";
const StyledWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- .form {
- padding: 36px 40px 32px 40px;
- /* border: 1px solid #eee; */
- box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
- border-radius: 12px;
- .tips {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-bottom: 24px;
- .logo {
- width: 56px;
- height: 56px;
- margin-bottom: 28px;
- }
- .title {
- font-weight: 600;
- font-size: 24px;
- line-height: 32px;
- color: #101828;
- margin-bottom: 8px;
- }
- }
- .desc {
- font-weight: normal;
- font-size: 16px;
- line-height: 24px;
- color: #667085;
- }
- form {
- display: flex;
- flex-direction: column;
- gap: 20px;
- input {
- width: 360px;
- background: #ffffff;
- border: 1px solid #d0d5dd;
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
- border-radius: 8px;
- padding: 10px 14px;
- font-weight: normal;
- font-size: 16px;
- line-height: 24px;
- color: #667085;
- }
- }
- .or {
- border: none;
- position: relative;
- height: 1px;
- background-color: #e4e7ec;
- margin: 26px 0;
- &:after {
- padding: 4px;
- background-color: #fff;
- content: 'OR';
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate3d(-50%, -50%, 0);
- font-size: 14px;
- line-height: 20px;
- color: #667085;
- }
- }
- .btn {
- display: inline-block;
- text-align: center;
- width: 100%;
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
- color: #ffffff;
- padding: 10px;
- background: #1fe1f9;
- border: 1px solid #1fe1f9;
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
- border-radius: 8px;
- &.social {
- margin-bottom: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 12px;
- color: #344054;
- border-color: #d0d5dd;
- background: none;
- .icon {
- width: 24px;
- height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ .form {
+ padding: 36px 40px 32px 40px;
+ /* border: 1px solid #eee; */
+ box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+ 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+ border-radius: 12px;
+ .tips {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-bottom: 24px;
+ .logo {
+ width: 56px;
+ height: 56px;
+ margin-bottom: 28px;
+ border-radius: 50%;
+ }
+ .title {
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 32px;
+ color: #101828;
+ margin-bottom: 8px;
+ }
+ }
+ .desc {
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 24px;
+ color: #667085;
+ }
+ form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ input {
+ width: 360px;
+ background: #ffffff;
+ border: 1px solid #d0d5dd;
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+ border-radius: 8px;
+ padding: 10px 14px;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 24px;
+ color: #667085;
+ }
+ }
+ .or {
+ border: none;
+ position: relative;
+ height: 1px;
+ background-color: #e4e7ec;
+ margin: 26px 0;
+ &:after {
+ padding: 4px;
+ background-color: #fff;
+ content: "OR";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate3d(-50%, -50%, 0);
+ font-size: 14px;
+ line-height: 20px;
+ color: #667085;
+ }
+ }
+ .btn {
+ display: inline-block;
+ text-align: center;
+ width: 100%;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ color: #ffffff;
+ padding: 10px;
+ background: #1fe1f9;
+ border: 1px solid #1fe1f9;
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+ border-radius: 8px;
+ &.social {
+ margin-bottom: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ color: #344054;
+ border-color: #d0d5dd;
+ background: none;
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
}
- }
}
- }
`;
export default StyledWrapper;
- )}
+ {!disabled &&