mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 21:05:19 +00:00
fix(editor): fix color of the circle on loading icon (#12092)
* Unified loading icon * Removed loading icon on image block * Fixed color of circle on loading icon <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Icons in image fallback and loading states now automatically adapt to the current theme (light or dark mode) for a more consistent visual experience. - **Style** - Updated loading, success, and error icons to support theming and improved their color assignments for better visibility in different themes. - **Refactor** - Replaced static icon usage across several components with dynamic, theme-aware icons to ensure consistent appearance throughout the app. - Removed static SVG icon exports and replaced them with theme-aware icon functions for improved maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import { ColorScheme } from '@blocksuite/affine-model';
|
||||
import { html } from 'lit';
|
||||
|
||||
const LoadingIcon = (color: string) => {
|
||||
return html`<svg
|
||||
const LoadingIcon = (color: string) =>
|
||||
html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
@@ -21,7 +21,7 @@ const LoadingIcon = (color: string) => {
|
||||
</style>
|
||||
<path
|
||||
d="M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004ZM3.30003 8.00004C3.30003 10.5957 5.40424 12.6999 7.99992 12.6999C10.5956 12.6999 12.6998 10.5957 12.6998 8.00004C12.6998 5.40436 10.5956 3.30015 7.99992 3.30015C5.40424 3.30015 3.30003 5.40436 3.30003 8.00004Z"
|
||||
fill=${color}
|
||||
fill="${color}"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<path
|
||||
@@ -30,11 +30,10 @@ const LoadingIcon = (color: string) => {
|
||||
class="spinner"
|
||||
/>
|
||||
</svg>`;
|
||||
};
|
||||
|
||||
export const LightLoadingIcon = LoadingIcon('white');
|
||||
export const LightLoadingIcon = LoadingIcon('black');
|
||||
|
||||
export const DarkLoadingIcon = LoadingIcon('black');
|
||||
export const DarkLoadingIcon = LoadingIcon('white');
|
||||
|
||||
export const getLoadingIconWith = (theme: ColorScheme) =>
|
||||
export const getLoadingIconWith = (theme: ColorScheme = ColorScheme.Light) =>
|
||||
theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;
|
||||
|
||||
Reference in New Issue
Block a user