ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: add tailwind to webapp

Browse Source
This commit is contained in:
Tristan Yang
2022-11-01 22:53:36 +08:00
parent f3b943a45a
commit a0ab607306
11 changed files with 49 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/base.css
-31
View File
@@ -1,31 +0,0 @@
::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 4px;
}
::-webkit-scrollbar {
background: transparent;
width: 5px;
height: 5px;
}
:root {
/* border radius */
--br: 8px;
---navs-bg: #e5e7eb;
---body-bg: #f5f6f7;
---chat-bg: #fff;
---channel-text-color: #1c1c1e;
---msg-text-color: #374151;
}
/* @media (prefers-color-scheme: dark) {
:root{
--br:8px;
---navs-bg:#121926;
---body-bg:#1F2A37;
---chat-bg:#384250;
---channel-text-color:#fff;
---msg-text-color:#fff;
}
} */
src/assets/index.css
+21
View File
@@ -1,3 +1,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 4px;
}
::-webkit-scrollbar {
background: transparent;
width: 5px;
height: 5px;
}
:root {
/* border radius */
--br: 8px;
---navs-bg: #e5e7eb;
---body-bg: #f5f6f7;
---chat-bg: #fff;
---channel-text-color: #1c1c1e;
---msg-text-color: #374151;
}
src/common/component/ContextMenu.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ const ContextMenu: FC<Props> = ({ items = [], hideMenu = null }) => {
} = item;
return (
<li
className={`item ${underline ? "underline" : ""} ${danger ? "danger" : ""}`}
className={`item ${underline ? "bottom_line" : ""} ${danger ? "danger" : ""}`}
key={title}
onClick={(evt) => {
evt.stopPropagation();
src/common/component/styled/Menu.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const StyledMenu = styled.ul`
}
}
}
&.underline {
&.bottom_line {
margin-bottom: 9px;
&:before {
position: absolute;
src/common/component/styled/Select.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ const Select: FC<Props> = ({ options = [], updateSelect = null, current = null }
return (
<li
onClick={selected ? undefined : handleSelect.bind(null, { title, value })}
className={`item sb ${underline ? "underline" : ""}`}
className={`item sb ${underline ? "bottom_line" : ""}`}
data-disabled={selected}
key={value}
>
src/index.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import toast, { Toaster } from "react-hot-toast";
import { Reset } from "styled-reset";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import "./assets/base.css";
import "./assets/index.css";
import "./common/DayjsSetting";
import "./common/TippySetting";
import { register } from "./serviceWorkerRegistration";
src/routes/chat/LoadMore.tsx
+7 -13
View File
@@ -1,20 +1,11 @@
import { useRef, useEffect, FC } from "react";
import styled from "styled-components";
import { Waveform } from "@uiball/loaders";
const Styled = styled.div`
margin-top: 80px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 30px 0;
`;
type Props = {
pullUp: () => Promise<void> | null;
};
const LoadMore: FC<Props> = ({ pullUp = null }) => {
const ref = useRef<HTMLDivElement>();
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
@@ -29,10 +20,13 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
},
{ threshold: 0 }
);
const currEle = ref?.current;
let currEle: HTMLDivElement | null = null;
if (ref) {
currEle = ref.current;
if (currEle) {
observer.observe(currEle);
}
}
return () => {
if (currEle) {
observer.unobserve(currEle);
@@ -40,9 +34,9 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
};
}, [ref, pullUp]);
return (
<Styled ref={ref}>
<div className="mt-20 flex justify-center items-center w-full py-7" ref={ref}>
<Waveform size={24} lineWeight={5} speed={1} color="#ccc" />
</Styled>
</div>
);
};
export default LoadMore;
src/routes/chat/SessionList/styled.tsx
+4
View File
@@ -25,6 +25,7 @@ const Styled = styled.ul`
background-color: #eee;
border-radius: 50%;
img {
max-width: unset;
width: 40px;
height: 40px;
&.channel_default {
@@ -42,6 +43,9 @@ const Styled = styled.ul`
align-items: center;
justify-content: space-between;
.name {
display: flex;
align-items: center;
gap: 2px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
src/routes/home/Menu.tsx
+1 -13
View File
@@ -17,18 +17,6 @@ const StyledMenus = styled.ul`
align-items: center;
padding: 10px;
gap: 10px;
.icon {
width: 24px;
height: 24px;
transition: all 0.5s ease;
}
.txt {
color: #4b5563;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
}
`;
type Props = {};
@@ -39,7 +27,7 @@ const Menu: FC<Props> = () => {
<li className="menu link_navs">
<NavLink className="link" to={`/setting?f=${pathname}`}>
<Tooltip placement="right" tip="Settings">
<img src={settingIcon} alt="setting icon" className="icon" />
<img src={settingIcon} alt="setting icon" className="w-6 h-6 max-w-[unset]" />
</Tooltip>
</NavLink>
</li>
src/routes/reg/EmailNextStepTip.tsx
+5 -29
View File
@@ -1,34 +1,10 @@
import styled from "styled-components";
const Styled = styled.div`
display: flex;
flex-direction: column;
align-items: center;
.title {
font-weight: 600;
font-size: 30px;
line-height: 38px;
color: #101828;
margin-bottom: 12px;
}
.desc {
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #667085;
&:not(:last-child) {
margin-bottom: 24px;
}
}
`;
export default function EmailNextTip() {
return (
<Styled>
<div className="title">Magic link Sent</div>
<p className="desc">Login to your email client, and continue next step</p>
<p className="desc">You can close this window now.</p>
</Styled>
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link Sent</div>
<p className="text-center text-gray-400 mb-6">Login to your email client, and continue next step</p>
<p className="text-center text-gray-400">You can close this window now.</p>
</div>
);
}
src/routes/reg/ExpiredTip.tsx
+5 -29
View File
@@ -1,34 +1,10 @@
import styled from "styled-components";
const Styled = styled.div`
display: flex;
flex-direction: column;
align-items: center;
.title {
font-weight: 600;
font-size: 30px;
line-height: 38px;
color: #101828;
margin-bottom: 12px;
}
.desc {
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #667085;
&:not(:last-child) {
margin-bottom: 24px;
}
}
`;
export default function ExpiredTip() {
return (
<Styled>
<div className="title">Magic link expired</div>
<p className="desc">Go back to your original VoceChat tab and request a new magic link.</p>
<p className="desc">You can close this window now.</p>
</Styled>
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link expired</div>
<p className="text-center text-gray-400 mb-6">Go back to your original VoceChat tab and request a new magic link.</p>
<p className="text-center text-gray-400">You can close this window now.</p>
</div>
);
}