mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix default avatar

Browse Source 
- fix import of default avatar
- optimaze ghost svg
- add tests
- refactor avatar-icon
This commit is contained in:
Pavel Mineev
2021-04-28 14:13:02 -05:00
committed by Umputun
parent 627ae58ecc
commit befb079207
3 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/avatar-icon/avatar-icon.spec.tsx
+12
View File
@@ -0,0 +1,12 @@
import '@testing-library/jest-dom';
import { h } from 'preact';
import { render } from '@testing-library/preact';
import { AvatarIcon } from './avatar-icon';
describe('<AvatarIcon/>', () => {
it('should get', () => {
const { getByAltText } = render(<AvatarIcon alt="avatar" />);
expect(getByAltText('avatar')).toHaveAttribute('src', 'https://url-to-svg-image');
});
});
frontend/app/components/avatar-icon/avatar-icon.svg
+3 -16
View File
@@ -1,18 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<style>
.st6{fill:#8ED0CF}
</style>
<g>
<path d="M4.6 20.5s0 .1 0 0c.9 0 .9-.7 1.9-.7.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8s.9.8 1.9.8c.9 0 .9-.8 1.9-.8.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8.9 0 .9.8 1.8.8l-.7-3.5c-.2-1.3-.3-2.7-.3-4V9.5c0-3.6-2.9-6.9-6.5-7-3.8-.1-6.9 2.9-6.9 6.7v3.9c0 1.3-.1 2.7-.3 4l-.4 3.4z" fill="#f5f4f4"/>
<path d="M8 17.1c.1-1.3.2-2.7.2-4V9.2c0-3.6 1.6-6.5 3.7-6.7-3.6.1-6.5 3-6.5 6.7v3.9c0 1.3-.1 2.7-.3 4l-.5 3.5c.9 0 .9-.8 1.9-.8.7 0 .9.4 1.3.6l.2-3.3z" opacity=".5" fill="#fff"/>
<g>
<path class="st6" d="M19.3 17c-.2-1.3-.3-2.6-.3-3.9V9.4c0-3.8-2.9-7-6.6-7.3-1.9-.1-3.8.6-5.2 1.9-1.4 1.4-2.3 3.2-2.3 5.2v3.9c0 1.3-.1 2.6-.3 3.9l-.5 3.5c0 .1 0 .2.1.3.1.1.2.2.3.2.6 0 .9-.3 1.2-.5.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5.1 0 .2 0 .3-.1.1-.1.1-.2.1-.3l-.8-3.6zm-.5 2.9c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c.2 0 .1.1 0 .1l.4-2.9c.2-1.3.3-2.7.3-4V9.2c0-1.8.7-3.4 2-4.6 1.3-1.2 2.9-1.8 4.7-1.7 3.3.2 5.9 3.1 5.9 6.5V13c0 1.3.1 2.7.3 4l.4 3c-.1 0-.2-.1-.2-.1z"/>
<path class="st6" d="M9.7 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
<path class="st6" d="M14.4 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
</g>
<linearGradient gradientUnits="userSpaceOnUse" x1="4.1669" y1="14.7127" x2="21.3949" y2="6.6792" gradientTransform="matrix(1 0 0 -1 0 24)">
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</g>
<path fill="#f5f4f4" d="M4.6 20.5s0 .1 0 0c.9 0 .9-.7 1.9-.7.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8s.9.8 1.9.8c.9 0 .9-.8 1.9-.8.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8.9 0 .9.8 1.8.8l-.7-3.5a27 27 0 01-.3-4V9.5c0-3.6-2.9-6.9-6.5-7a6.7 6.7 0 00-6.9 6.7v3.9a27 27 0 01-.3 4l-.4 3.4z"/>
<path fill="#fff" d="M8 17.1l.2-4V9.2c0-3.6 1.6-6.5 3.7-6.7-3.6.1-6.5 3-6.5 6.7v3.9a27 27 0 01-.3 4l-.5 3.5c.9 0 .9-.8 1.9-.8.7 0 .9.4 1.3.6l.2-3.3z" opacity=".5"/>
<path fill="#8ED0CF" d="M19.3 17l-.3-3.9V9.4c0-3.8-2.9-7-6.6-7.3a7.2 7.2 0 00-7.5 7.1v3.9L4.6 17l-.5 3.5.1.3.3.2c.6 0 .9-.3 1.2-.5.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5l.3-.1.1-.3-.8-3.6zm-.5 2.9c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c.2 0 .1.1 0 .1l.4-2.9c.2-1.3.3-2.7.3-4V9.2c0-1.8.7-3.4 2-4.6a6.2 6.2 0 014.7-1.7c3.3.2 5.9 3.1 5.9 6.5V13c0 1.3.1 2.7.3 4l.4 3-.2-.1zM9.7 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6zm4.7 0c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

frontend/app/components/avatar-icon/avatar-icon.tsx
+6 -5
View File
@@ -2,18 +2,19 @@ import { h, JSX } from 'preact';
import b from 'bem-react-helper';
import { Theme } from 'common/types';
interface Props {
type Props = JSX.HTMLAttributes<HTMLImageElement> & {
picture?: string;
mix?: string;
theme?: Theme;
}
};
export function AvatarIcon(props: Props & JSX.HTMLAttributes) {
export function AvatarIcon({ mix, theme, picture, ...props }: Props) {
return (
<img
className={b('avatar-icon', { mix: props.mix }, { theme: props.theme, default: !props.picture })}
src={props.picture || require('./avatar-icon.svg')}
className={b('avatar-icon', { mix }, { theme, default: !picture })}
src={picture || require('./avatar-icon.svg').default}
alt=""
{...props}
/>
);
}