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

refactor: finished tailwind

Browse Source
This commit is contained in:
Tristan Yang
2023-02-08 15:03:30 +08:00
parent cb08a443f3
commit ffd68f2c06
55 changed files with 260 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/resources/Filter/Channel.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
return (
<div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[400px] flex flex-col items-start relative drop-shadow">
<div className=" bg-white dark:bg-gray-800 sticky top-0 z-10">
<div className=" bg-white dark:bg-transparent sticky top-0 z-10">
<Search embed={true} value={input} updateSearchValue={updateInput} />
</div>
<ul className="w-full flex flex-col gap-4 p-2">
src/routes/resources/Filter/Date.tsx
+3 -3
View File
@@ -30,15 +30,15 @@ const DateFilter: FC<Props> = ({ select = "", updateFilter }) => {
};
return (
<div className="p-3 bg-white min-w-[200px] overflow-auto rounded-lg flex flex-col items-start relative drop-shadow">
<div className="p-3 bg-white dark:bg-gray-800 min-w-[200px] overflow-auto rounded-lg flex flex-col items-start relative drop-shadow">
<ul className="w-full flex flex-col gap-4">
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 dark:text-gray-300 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
Any Time
{!select && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
{Object.entries(Dates).map(([_key, { title }]) => {
return (
<li key={title} className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, _key)}>
<li key={title} className="relative cursor-pointer flex items-center gap-4 text-gray-500 dark:text-gray-300 font-semibold text-sm" onClick={handleClick.bind(null, _key)}>
{title}
{select == _key && <CheckSign className="absolute right-0 -top-1/2 -translate-y-1/2" />}
</li>
src/routes/resources/Filter/From.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
return (
<div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[300px] flex flex-col items-start relative drop-shadow">
<div className="bg-white sticky top-0 z-10">
<div className="bg-white dark:bg-transparent sticky top-0 z-10">
<Search embed={true} value={input} updateSearchValue={updateInput} />
</div>
<ul className="w-full flex flex-col">
src/routes/resources/Filter/Type.tsx
+3 -3
View File
@@ -48,15 +48,15 @@ const Type: FC<Props> = ({ select = "", updateFilter }) => {
};
return (
<div className="p-3 bg-white min-w-[180px] overflow-auto shadow-md rounded-lg flex flex-col items-start relative">
<div className="p-3 bg-white dark:bg-gray-800 min-w-[180px] overflow-auto shadow-md rounded-lg flex flex-col items-start relative">
<ul className="w-full flex flex-col gap-4">
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 dark:text-gray-300 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
Any Type
{!select && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
{Object.entries(FileTypes).map(([type, { title, icon }]) => {
return (
<li key={title} className="relative cursor-pointer flex items-center gap-2 text-sm text-gray-500 font-semibold" onClick={handleClick.bind(null, type)}>
<li key={title} className="relative cursor-pointer flex items-center gap-2 text-sm text-gray-500 dark:text-gray-300 font-semibold" onClick={handleClick.bind(null, type)}>
{icon} {title}
{select == type && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
src/routes/resources/Filter/index.tsx
+5 -6
View File
@@ -11,8 +11,7 @@ import { useTranslation } from "react-i18next";
import clsx from "clsx";
const getClass = (selected: boolean) => {
return clsx(`cursor-pointer flex items-center gap-2 border border-solid box-border shadow rounded-lg py-2 px-3 text-xs`, selected && 'text-white bg-primary-400');
return clsx(`cursor-pointer flex items-center gap-2 border border-solid dark:border-gray-400 box-border shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected && 'text-white bg-primary-400');
};
export default function Filter({ filter, updateFilter }) {
const { t } = useTranslation("file");
@@ -75,7 +74,7 @@ export default function Filter({ filter, updateFilter }) {
<span className="txt">
{t("from")} {from && userMap[from].name}
</span>
<ArrowDown className="arrow" />
<ArrowDown className="dark:stroke-gray-400" />
</div>
</Tippy>
<Tippy
@@ -90,7 +89,7 @@ export default function Filter({ filter, updateFilter }) {
onClick={toggleFilterVisible.bind(null, { channel: true })}
>
<span className="txt">{channel ? `In ${channelMap[channel].name}` : t("channel")}</span>
<ArrowDown className="arrow" />
<ArrowDown className="dark:stroke-gray-400" />
</div>
</Tippy>
<Tippy
@@ -105,7 +104,7 @@ export default function Filter({ filter, updateFilter }) {
onClick={toggleFilterVisible.bind(null, { type: true })}
>
<span className="txt">{type ? FileTypes[type].title : t("type")}</span>
<ArrowDown className="arrow" />
<ArrowDown className="dark:stroke-gray-400" />
</div>
</Tippy>
<Tippy
@@ -120,7 +119,7 @@ export default function Filter({ filter, updateFilter }) {
onClick={toggleFilterVisible.bind(null, { date: true })}
>
<span className="txt">{date ? Dates[date].title : t("date")}</span>
<ArrowDown className="arrow" />
<ArrowDown className="dark:stroke-gray-400" />
</div>
</Tippy>
</div>
src/routes/resources/Search.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const Search: FC<Props> = ({ value = "", updateSearchValue = null, embed = false
return (
<div className={clsx(`relative w-full py-1.5 px-4 shadow`, embed && "py-2 shadow-none")}>
<IconSearch className="absolute left-6 top-1/2 -translate-y-1/2" />
<input value={value} onChange={handleChange} className="bg-black/5 rounded-full text-sm text-gray-500 py-2.5 pl-9" placeholder={`${t("action.search")}...`} />
<input value={value} onChange={handleChange} className="bg-black/5 dark:bg-black/20 rounded-full text-sm text-gray-500 py-2.5 pl-9" placeholder={`${t("action.search")}...`} />
</div>
);
};
src/routes/resources/View.tsx
+3 -3
View File
@@ -18,12 +18,12 @@ export default function View({ view = "item" }: Props) {
};
const isGrid = view == "grid";
return (
<ul className={`flex border border-solid shadow rounded-lg box-border`}>
<ul className={`flex border border-solid dark:border-gray-400 shadow rounded-lg box-border`}>
<li className={getClass(!isGrid)} data-view={"item"} onClick={handleChangeView}>
<IconList className={`${!isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
<IconList className={`${!isGrid ? "fill-primary-400" : ""} dark:fill-gray-400`} />
</li>
<li className={getClass(isGrid)} data-view={"grid"} onClick={handleChangeView}>
<IconGrid className={`${isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
<IconGrid className={`${isGrid ? "fill-primary-400" : ""} dark:fill-gray-400`} />
</li>
</ul>
);