Mirrors/coco-app
1
0
Fork 0
mirror of https://github.com/infinilabs/coco-app.git synced 2025-12-16 11:37:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: add dark drop shadow to images (#912)

Browse Source 
* style: add dark drop shadow to images

* docs: add release note

* style: add dark

* style: remove dark
This commit is contained in:
BiggerRain
2025-10-10 14:28:23 +08:00
committed by GitHub
parent 5c76c92c95
commit 595ae676b7
13 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content.en/docs/release-notes/_index.md
View File

@@ -22,6 +22,7 @@ fix: automatic update of service list #913
### ✈️ Improvements
refactor: improve sorting logic of search results #910
style: add dark drop shadow to images #912
## 0.8.0 (2025-09-28)

4
src/components/Assistant/ServerList.tsx
View File

@@ -232,11 +232,11 @@ export function ServerList({ clearChat }: ServerListProps) {
: "hover:bg-gray-50 dark:hover:bg-gray-800/50"
}`}
>
<div className="flex items-center gap-2 overflow-hidden min-w-0">
<div className="flex items-center gap-2 min-w-0">
<img
src={server?.provider?.icon || logoImg}
alt={server.name}
className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800"
className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = logoImg;

2
src/components/Assistant/Splash.tsx
View File

@@ -72,8 +72,6 @@ const Splash = ({ assistantIDs = [], startPage }: SplashProps) => {
setSettings(response);
};
console.log("currentService", currentService);
useEffect(() => {
getSettings();
fetchData();

2
src/components/Cloud/DataSourceItem.tsx
View File

@@ -59,7 +59,7 @@ export function DataSourceItem({ name, icon, connector }: DataSourceItemProps) {
{icon?.startsWith("font_") ? (
<FontIcon name={icon} className="size-6" />
) : (
<img src={getTypeIcon()} alt={name} className="size-6" />
<img src={getTypeIcon()} alt={name} className="size-6 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]" />
)}
<span className="font-medium text-gray-900 dark:text-white">

4
src/components/Cloud/ServiceAuth.tsx
View File

@@ -182,9 +182,9 @@ const LoadingState: FC<LoadingStateProps> = memo((props) => {
const { t } = useTranslation();
return (
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 mb-3">
<button
className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors mb-3"
className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors"
onClick={onCancel}
>
{t("cloud.cancel")}

2
src/components/Cloud/Sidebar.tsx
View File

@@ -53,7 +53,7 @@ export const Sidebar = forwardRef<{ refreshData: () => void }, SidebarProps>(
<img
src={item?.provider?.icon || cocoLogoImg}
alt={`${item.name} logo`}
className="w-5 h-5 flex-shrink-0"
className="w-5 h-5 flex-shrink-0 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = cocoLogoImg;

4
src/components/Cloud/UserProfile.tsx
View File

@@ -24,13 +24,13 @@ export function UserProfile({ server, userInfo, onLogout }: UserProfileProps) {
<img
src={userInfo?.avatar}
alt=""
className="w-6 h-6"
className="w-6 h-6 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
onError={() => {
setImageLoadError(true);
}}
/>
) : (
<User className="w-6 h-6 text-gray-500 dark:text-gray-400" />
<User className="w-6 h-6 text-gray-500 dark:text-gray-400 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]" />
)}
</div>
<div className="flex-1">

2
src/components/Common/Icons/FontIcon.tsx
View File

@@ -8,7 +8,7 @@ interface FontIconProps {
const FontIcon: FC<FontIconProps> = ({ name, className, style, ...rest }) => {
return (
<svg className={`icon ${className || ""}`} style={style} {...rest}>
<svg className={`icon dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className || ""}`} style={style} {...rest}>
<use xlinkHref={`#${name}`} />
</svg>
);

7
src/components/Common/Icons/ThemedIcon.tsx
View File

@@ -24,7 +24,12 @@ function ThemedIcon({ component: Component, className = "" }: ThemedIconProps) {
return () => observer.disconnect();
}, []);
return <Component className={className} color={color} />;
return (
<Component
className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
color={color}
/>
);
}
export default ThemedIcon;

10
src/components/Common/Icons/UniversalIcon.tsx
View File

@@ -49,7 +49,13 @@ function UniversalIcon({
// Render image type icon
const renderImageIcon = (src: string) => {
const img = <img className={className} src={src} alt="icon" />;
const img = (
<img
className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
src={src}
alt="icon"
/>
);
return wrapWithIconWrapper ? (
<IconWrapper className={className} onClick={onClick}>
{img}
@@ -63,7 +69,7 @@ function UniversalIcon({
const renderAppIcon = (src: string) => {
const img = (
<img
className={className}
className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
src={platformAdapter.convertFileSrc(src)}
alt="icon"
/>

2
src/components/Common/UI/Footer.tsx
View File

@@ -88,7 +88,7 @@ export default function Footer({ setIsPinnedWeb }: FooterProps) {
if (visibleExtensionDetail && selectedExtension) {
return (
<div className="flex items-center gap-2">
<img src={selectedExtension.icon} className="size-5" />
<img src={selectedExtension.icon} className="size-5 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]" />
<span className="text-sm">{selectedExtension.name}</span>
</div>
);

2
src/components/Settings/Extensions/components/Content/index.tsx
View File

@@ -328,7 +328,7 @@ const Item: FC<ItemProps> = (props) => {
) : (
<img
src={platformAdapter.convertFileSrc(icon)}
className="size-full"
className="size-full dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
/>
)}
</div>

2
src/hooks/useServers.ts
View File

@@ -26,6 +26,8 @@ export const useServers = () => {
} catch (error) {
console.error("Failed to fetch server list:", error);
setServerList([]);
} finally {
}
};