mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
added empty avatar placeholder
This commit is contained in:
Fedor Katurov
parent
080d59858c
commit
8fc06a4819
6 changed files with 470 additions and 23 deletions
|
|
@ -3,14 +3,17 @@ This is [vault48.org](https://vault48.org) frontend.
|
||||||
[](https://vault48.org/)
|
[](https://vault48.org/)
|
||||||
|
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
1. Clone this repo `git clone git@github.com:muerwre/vault-frontend.git`
|
1. Clone this repo `git clone git@github.com:muerwre/vault-frontend.git`
|
||||||
2. Run `yarn install`
|
2. Run `yarn install`
|
||||||
3. Copy `.env_example` to `.env`
|
3. Copy `.env_example` to `.env`
|
||||||
4. Set it up. You can use https://staging.vault48.org as playground
|
4. Set it up. You can use https://staging.vault48.org as playground
|
||||||
|
|
||||||
### Starting
|
### Starting
|
||||||
|
|
||||||
`yarn start`
|
`yarn start`
|
||||||
|
|
||||||
### Building
|
### Building
|
||||||
|
|
||||||
1. Run `yarn build`
|
1. Run `yarn build`
|
||||||
2. Copy `./dist/*` somewhere
|
2. Copy `./dist/*` somewhere
|
||||||
|
|
|
||||||
453
public/images/john_doe.svg
Normal file
453
public/images/john_doe.svg
Normal file
|
|
@ -0,0 +1,453 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="128"
|
||||||
|
height="128"
|
||||||
|
viewBox="0 0 33.866666 33.866666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5876"
|
||||||
|
inkscape:version="1.2 (dc2aeda, 2022-05-15)"
|
||||||
|
sodipodi:docname="john_doe.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview5878"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.9107647"
|
||||||
|
inkscape:cx="28.514843"
|
||||||
|
inkscape:cy="73.691975"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1027"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="25"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g7418" />
|
||||||
|
<defs
|
||||||
|
id="defs5873">
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient12704">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop12700" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop12702" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient15255"
|
||||||
|
id="linearGradient1005"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
x1="367.49493"
|
||||||
|
y1="159.10916"
|
||||||
|
x2="371.39719"
|
||||||
|
y2="171.09134" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient15255">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop15251" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#cccccc;stop-opacity:1"
|
||||||
|
offset="1"
|
||||||
|
id="stop15253" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient20280"
|
||||||
|
id="radialGradient1007"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.6176215,-0.04901776,0.02294782,0.75729454,-230.93321,57.47201)"
|
||||||
|
cx="368.03983"
|
||||||
|
cy="160.88161"
|
||||||
|
fx="368.03983"
|
||||||
|
fy="160.88161"
|
||||||
|
r="1.9875512" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient20280">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#e6e6e6;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop20276" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#b3b3b3;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop20278" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter20284"
|
||||||
|
x="-0.049670853"
|
||||||
|
y="-0.064279337"
|
||||||
|
width="1.0993417"
|
||||||
|
height="1.1285587">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.082275436"
|
||||||
|
id="feGaussianBlur20286" />
|
||||||
|
</filter>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient28925"
|
||||||
|
id="linearGradient1009"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(-1.1146256,-0.72412531)"
|
||||||
|
x1="366.9267"
|
||||||
|
y1="165.55998"
|
||||||
|
x2="365.75427"
|
||||||
|
y2="167.38159" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient28925">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#bfbfbf;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop28921" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ececec;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop28923" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter28929"
|
||||||
|
x="-0.2972146"
|
||||||
|
y="-0.22274535"
|
||||||
|
width="1.5944292"
|
||||||
|
height="1.4454907">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.36647643"
|
||||||
|
id="feGaussianBlur28931" />
|
||||||
|
</filter>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter26212"
|
||||||
|
x="-0.24631911"
|
||||||
|
y="-0.34439062"
|
||||||
|
width="1.4926382"
|
||||||
|
height="1.6887812">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.25276446"
|
||||||
|
id="feGaussianBlur26214" />
|
||||||
|
</filter>
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient20280"
|
||||||
|
id="radialGradient33246"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.6176215,-0.04901776,0.02294782,0.75729454,-230.93321,57.47201)"
|
||||||
|
cx="368.03983"
|
||||||
|
cy="160.88161"
|
||||||
|
fx="368.03983"
|
||||||
|
fy="160.88161"
|
||||||
|
r="1.9875512" />
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient28937"
|
||||||
|
id="radialGradient1011"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.3778349,-0.0109324,0.00893698,0.76025155,-141.08803,44.645893)"
|
||||||
|
cx="369.12317"
|
||||||
|
cy="165.67683"
|
||||||
|
fx="369.12317"
|
||||||
|
fy="165.67683"
|
||||||
|
r="1.38344" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient28937">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#b3b3b3;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop28933" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#e6e6e6;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop28935" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient21601">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#b3b3b3;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop21597" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#666666;stop-opacity:1;"
|
||||||
|
offset="1"
|
||||||
|
id="stop21599" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient21601"
|
||||||
|
id="radialGradient33314"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.4105418,0,0,1.2915116,-150.28168,-47.22015)"
|
||||||
|
cx="366.38699"
|
||||||
|
cy="162.51688"
|
||||||
|
fx="366.38699"
|
||||||
|
fy="162.51688"
|
||||||
|
r="1.4849495" />
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient16359"
|
||||||
|
id="radialGradient1017"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0.93875344,-0.01749771,0.03492322,1.8736334,16.810082,-137.35232)"
|
||||||
|
cx="369.01343"
|
||||||
|
cy="165.81284"
|
||||||
|
fx="369.01343"
|
||||||
|
fy="165.81284"
|
||||||
|
r="1.6058075" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient16359">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop16355" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop16357" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter21174"
|
||||||
|
x="-0.099708076"
|
||||||
|
y="-0.046355318"
|
||||||
|
width="1.1994162"
|
||||||
|
height="1.0927106">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.10171679"
|
||||||
|
id="feGaussianBlur21176" />
|
||||||
|
</filter>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient16359"
|
||||||
|
id="linearGradient1019"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
x1="369.05728"
|
||||||
|
y1="168.43219"
|
||||||
|
x2="369.01425"
|
||||||
|
y2="167.40636" />
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter18845"
|
||||||
|
x="-0.12525698"
|
||||||
|
y="-0.26906096"
|
||||||
|
width="1.250514"
|
||||||
|
height="1.5381219">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.12622981"
|
||||||
|
id="feGaussianBlur18843" />
|
||||||
|
</filter>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter18770"
|
||||||
|
x="-0.058352512"
|
||||||
|
y="-0.14395587"
|
||||||
|
width="1.116705"
|
||||||
|
height="1.2879117">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.058805473"
|
||||||
|
id="feGaussianBlur18772" />
|
||||||
|
</filter>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient28925"
|
||||||
|
id="linearGradient7322"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(-1.1146256,-0.72412531)"
|
||||||
|
x1="366.9267"
|
||||||
|
y1="165.55998"
|
||||||
|
x2="365.75427"
|
||||||
|
y2="167.38159" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient12704"
|
||||||
|
id="linearGradient12706"
|
||||||
|
x1="371.59943"
|
||||||
|
y1="163.97478"
|
||||||
|
x2="371.59943"
|
||||||
|
y2="162.50465"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.25,0,0,1.25,-92.729412,-40.722044)" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Слой 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g7418"
|
||||||
|
transform="matrix(1.2456671,0,0,1.2456671,-116.00629,-108.05916)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<path
|
||||||
|
id="path4189"
|
||||||
|
style="display:inline;fill:#1c1f24;stroke:none;stroke-width:0.849607"
|
||||||
|
class="UnoptimicedTransforms"
|
||||||
|
d="M 418.68288 115.11384 C 409.14248 116.15761 399.25104 117.22796 394.98848 127.89747 C 389.47279 141.70361 391.49409 143.989 387.59318 162.57696 L 387.74913 162.57113 L 374.58218 173.18602 C 374.58218 173.18602 371.64312 174.24802 367.95061 175.93338 L 367.95061 202.79636 L 463.46859 202.79636 L 463.46859 170.25938 C 458.19227 168.25621 451.94851 164.50001 445.79654 160.17939 L 445.89273 160.17502 C 441.47852 144.94197 442.20712 141.1556 437.61128 125.92257 C 432.70819 120.97817 430.26265 117.38903 418.68288 115.11529 L 418.68288 115.11384 z "
|
||||||
|
transform="matrix(0.28463304,0,0,0.28463304,-11.603057,56.213054)" />
|
||||||
|
<g
|
||||||
|
id="g4247"
|
||||||
|
style="display:inline;opacity:0.246231;mix-blend-mode:normal;stroke-width:0.80278"
|
||||||
|
transform="matrix(1.111582,0,0,1.111582,-302.93086,-82.867342)">
|
||||||
|
<g
|
||||||
|
id="g4245"
|
||||||
|
transform="matrix(0.88165922,0,0,0.88165922,43.646768,19.318326)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<path
|
||||||
|
id="path4191"
|
||||||
|
style="opacity:1;fill:url(#linearGradient1005);fill-opacity:1;stroke-width:0.111601;stop-color:#000000"
|
||||||
|
d="m 374.50203,163.2435 c -0.22892,4.53379 -4.00181,7.76262 -5.67931,7.76262 -1.6775,0 -5.67933,-3.47544 -5.67933,-7.76262 0,-4.28718 0.34935,-7.81714 5.67933,-7.76262 5.59033,0.0572 5.90823,3.22883 5.67931,7.76262 z"
|
||||||
|
sodipodi:nodetypes="zzssz" />
|
||||||
|
<g
|
||||||
|
id="g4199"
|
||||||
|
transform="translate(-0.04227218)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<path
|
||||||
|
style="opacity:1;fill:url(#radialGradient1007);fill-opacity:1;stroke:none;stroke-width:0.217552;filter:url(#filter20284)"
|
||||||
|
d="m 365.16908,161.80771 c 0,0 0.96694,-0.89712 1.86326,-0.85815 0.89631,0.039 1.60855,0.90951 1.58906,1.49406 -0.0195,0.58455 -0.0219,1.31606 -0.0999,1.54988 -0.0779,0.23382 -0.93995,-1.13156 -1.56347,-1.52126 -0.61935,-0.38709 -2.31163,-0.37185 -2.31163,-0.37185 z"
|
||||||
|
id="path4193"
|
||||||
|
sodipodi:nodetypes="ccscscc"
|
||||||
|
transform="matrix(1.1383184,0,0,1.1383184,-51.239759,-22.204889)" />
|
||||||
|
<path
|
||||||
|
style="opacity:1;mix-blend-mode:normal;fill:url(#linearGradient7322);fill-opacity:1;stroke:none;stroke-width:0.217552;filter:url(#filter28929)"
|
||||||
|
d="m 363.84161,164.48961 c 0,0 1.90451,-0.63444 2.64371,1.92636 0.7392,2.56081 -0.0396,1.7108 -0.13196,1.8956 -0.0924,0.1848 -1.93096,0.15125 -2.51175,-3.82196 z"
|
||||||
|
id="path4195"
|
||||||
|
sodipodi:nodetypes="cssc" />
|
||||||
|
<ellipse
|
||||||
|
style="opacity:0.706395;mix-blend-mode:normal;fill:#ffffff;stroke-width:0.217552;filter:url(#filter26212)"
|
||||||
|
id="ellipse4197"
|
||||||
|
cx="395.78552"
|
||||||
|
cy="65.161972"
|
||||||
|
rx="1.2314"
|
||||||
|
ry="0.88073641"
|
||||||
|
transform="rotate(15,3.6022615,-0.4742467)" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="use4201"
|
||||||
|
transform="matrix(-1,0,0,1,737.6877,0)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<path
|
||||||
|
style="opacity:1;fill:url(#radialGradient33246);fill-opacity:1;stroke:none;stroke-width:0.217552;filter:url(#filter20284)"
|
||||||
|
d="m 365.16908,161.80771 c 0,0 0.96694,-0.89712 1.86326,-0.85815 0.89631,0.039 1.60855,0.90951 1.58906,1.49406 -0.0195,0.58455 -0.0219,1.31606 -0.0999,1.54988 -0.0779,0.23382 -0.93995,-1.13156 -1.56347,-1.52126 -0.61935,-0.38709 -2.31163,-0.37185 -2.31163,-0.37185 z"
|
||||||
|
id="path33238"
|
||||||
|
sodipodi:nodetypes="ccscscc"
|
||||||
|
transform="matrix(1.1383184,0,0,1.1383184,-51.239759,-22.204889)" />
|
||||||
|
<path
|
||||||
|
style="opacity:1;mix-blend-mode:normal;fill:url(#linearGradient1009);fill-opacity:1;stroke:none;stroke-width:0.217552;filter:url(#filter28929)"
|
||||||
|
d="m 363.84161,164.48961 c 0,0 1.90451,-0.63444 2.64371,1.92636 0.7392,2.56081 -0.0396,1.7108 -0.13196,1.8956 -0.0924,0.1848 -1.93096,0.15125 -2.51175,-3.82196 z"
|
||||||
|
id="path33240"
|
||||||
|
sodipodi:nodetypes="cssc" />
|
||||||
|
<ellipse
|
||||||
|
style="opacity:0.706395;mix-blend-mode:normal;fill:#ffffff;stroke-width:0.217552;filter:url(#filter26212)"
|
||||||
|
id="ellipse33242"
|
||||||
|
cx="395.78552"
|
||||||
|
cy="65.161972"
|
||||||
|
rx="1.2314"
|
||||||
|
ry="0.88073641"
|
||||||
|
transform="rotate(15,3.6022615,-0.4742467)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="opacity:1;mix-blend-mode:normal;fill:url(#radialGradient1011);fill-opacity:1;stroke:none;stroke-width:0.162724"
|
||||||
|
d="m 367.82443,166.48793 c 0,0 0.23701,0.16036 0.5495,0.25207 0.20036,0.0588 0.29825,0.21675 0.58546,0.21528 0.32231,-10e-4 0.55058,-0.16168 0.70341,-0.2362 0.28839,-0.14062 0.42881,-0.28399 0.42881,-0.28399 l 0.19042,-0.29936 c 1.13396,-0.60668 0.97514,0.8251 0.43652,1.0355 l -1.70651,0.41596 -1.86035,-0.48789 c -0.53021,-0.18894 -0.47828,-0.72457 0.39531,-0.91351 z"
|
||||||
|
id="path4203"
|
||||||
|
sodipodi:nodetypes="csssccccccc" />
|
||||||
|
<g
|
||||||
|
id="g4237"
|
||||||
|
transform="matrix(1.0883695,0,0,1.0883695,-32.505858,-14.394346)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<g
|
||||||
|
id="g12673">
|
||||||
|
<g
|
||||||
|
id="use4235"
|
||||||
|
transform="matrix(-0.94140602,0,0,1,715.77279,0)"
|
||||||
|
style="stroke-width:0.80278">
|
||||||
|
<ellipse
|
||||||
|
style="opacity:1;fill:url(#radialGradient33314);fill-opacity:1;stroke:none;stroke-width:0.212403;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||||
|
id="ellipse33284"
|
||||||
|
cx="366.31927"
|
||||||
|
cy="162.88818"
|
||||||
|
rx="1.4849495"
|
||||||
|
ry="1.3596402" />
|
||||||
|
<path
|
||||||
|
id="path33306"
|
||||||
|
style="opacity:1;fill:#4d4d4d;stroke-width:0.199889"
|
||||||
|
d="m 366.31923,161.52849 a 1.4849495,1.3596402 0 0 0 -0.96838,0.32936 c 0.3666,-0.001 1.29037,0.19598 1.49275,0.20377 0.23393,0.009 0.79525,0.58017 0.79525,0.58017 0.0465,-0.13953 0.003,-0.31838 -0.0528,-0.46297 a 1.4849495,1.3596402 0 0 0 -1.26685,-0.65033 z" />
|
||||||
|
<path
|
||||||
|
id="path33310"
|
||||||
|
style="opacity:0.633721;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.212403;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||||
|
d="m 366.31923,161.52849 a 1.4849495,1.3596402 0 0 0 -1.48485,1.35974 1.4849495,1.3596402 0 0 0 1.48485,1.35963 1.4849495,1.3596402 0 0 0 1.48497,-1.35963 1.4849495,1.3596402 0 0 0 -1.48497,-1.35974 z m 0,0.14614 a 1.3253517,1.2135103 0 0 1 1.32546,1.2136 1.3253517,1.2135103 0 0 1 -1.32546,1.21349 1.3253517,1.2135103 0 0 1 -1.32534,-1.21349 1.3253517,1.2135103 0 0 1 1.32534,-1.2136 z" />
|
||||||
|
<ellipse
|
||||||
|
style="opacity:0.868132;fill:#1d222b;fill-opacity:1;stroke:none;stroke-width:0.212403;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||||
|
id="ellipse33308"
|
||||||
|
cx="366.31927"
|
||||||
|
cy="162.88818"
|
||||||
|
rx="1.4849495"
|
||||||
|
ry="1.3596402" />
|
||||||
|
</g>
|
||||||
|
<circle
|
||||||
|
style="opacity:1;fill:url(#linearGradient12706);fill-opacity:1;stroke:none;stroke-width:0.398264;stroke-linecap:round"
|
||||||
|
id="path12505"
|
||||||
|
cx="370.91763"
|
||||||
|
cy="162.88817"
|
||||||
|
r="0.85224682" />
|
||||||
|
</g>
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#g12673"
|
||||||
|
id="use12675"
|
||||||
|
transform="translate(-4.367765)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
id="path4239"
|
||||||
|
style="opacity:0.697674;fill:url(#radialGradient1017);fill-opacity:1;stroke-width:0.217552;filter:url(#filter21174)"
|
||||||
|
d="m 368.94984,161.6796 c -0.24475,-4.9e-4 -0.56142,0.0396 -0.66656,0.29806 -0.0621,0.24971 0.0112,0.50664 0.006,0.75978 0.04,0.75696 0.12069,1.51786 0.0606,2.27491 -0.0942,0.2144 -0.29149,0.36394 -0.43682,0.54363 -0.19537,0.12308 -0.22079,0.33479 -0.13075,0.53106 0.0328,0.22517 0.20111,0.40459 0.39031,0.51774 0.10255,0.0854 0.38648,0.2092 0.38435,0.1757 0.0942,0.13585 0.29056,0.12111 0.43361,0.1654 0.11782,-0.0372 0.31503,-0.0478 0.39107,-0.0471 0.097,-0.0514 0.23433,-0.2073 0.36303,-0.28315 0.14947,-0.12845 0.27895,-0.27915 0.43617,-0.39874 -0.079,-0.1847 -0.0569,-0.44058 -0.20558,-0.5759 -0.19144,-0.14981 -0.27805,-0.3851 -0.41427,-0.57882 -0.0109,-0.93786 -0.12877,-1.87448 -0.10694,-2.81167 0.0898,-0.21003 0.0675,-0.51309 -0.21327,-0.53929 -0.0946,-0.0243 -0.19448,-0.0299 -0.29053,-0.0316 z"
|
||||||
|
sodipodi:nodetypes="scccccscccccccccss"
|
||||||
|
transform="matrix(1.2171871,0,0,1,-80.135653,0)" />
|
||||||
|
<path
|
||||||
|
id="path4241"
|
||||||
|
style="opacity:0.619186;mix-blend-mode:normal;fill:url(#linearGradient1019);fill-opacity:1;stroke-width:0.217552;filter:url(#filter18845)"
|
||||||
|
d="m 368.7182,167.24238 c -0.30963,0.0841 -0.64286,0.35821 -0.97178,0.95087 0,0 0.73856,0.22159 1.47707,0.1662 0.73852,-0.0554 0.94157,-0.18472 0.94157,-0.18472 0,-0.0733 -0.40678,-0.75643 -0.97657,-0.92455 -0.0113,0.16874 -0.0463,0.43212 -0.15397,0.59003 -0.13365,0.196 -0.26726,-0.36165 -0.31632,-0.59783 z"
|
||||||
|
transform="matrix(2.409289,0,0,1.7094696,-519.85218,-118.82165)" />
|
||||||
|
<path
|
||||||
|
style="opacity:0.31686;mix-blend-mode:normal;fill:#cccccc;fill-opacity:1;stroke-width:0.217552;filter:url(#filter18770)"
|
||||||
|
d="m 367.74643,168.19324 c 0,0 0.49101,-0.13542 1.22952,-0.19081 0.73852,-0.0554 1.18911,0.17235 1.18911,0.17235 0,-0.1279 -1.23701,-2.11056 -2.41863,0.0185 z"
|
||||||
|
id="path4243"
|
||||||
|
sodipodi:nodetypes="csccc"
|
||||||
|
transform="matrix(-2.409289,0,0,-1.7094696,1257.9899,456.09845)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
||||||
|
|
||||||
import { Square } from '~/components/common/Square';
|
import { Square } from '~/components/common/Square';
|
||||||
import { ImagePresets } from '~/constants/urls';
|
import { ImagePresets } from '~/constants/urls';
|
||||||
|
import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
|
||||||
import { getURLFromString } from '~/utils/dom';
|
import { getURLFromString } from '~/utils/dom';
|
||||||
import { DivProps } from '~/utils/types';
|
import { DivProps } from '~/utils/types';
|
||||||
|
|
||||||
|
|
@ -17,17 +18,20 @@ interface Props extends DivProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Avatar = forwardRef<HTMLDivElement, Props>(
|
const Avatar = forwardRef<HTMLDivElement, Props>(
|
||||||
({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => {
|
(
|
||||||
|
{ url, username, size, className, preset = ImagePresets.avatar, ...rest },
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
return (
|
return (
|
||||||
<Square
|
<Square
|
||||||
{...rest}
|
{...rest}
|
||||||
image={getURLFromString(url, preset)}
|
image={getURLFromString(url, preset) || '/images/john_doe.svg'}
|
||||||
className={classNames(styles.avatar, className)}
|
className={classNames(styles.avatar, className)}
|
||||||
size={size}
|
size={size}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export { Avatar };
|
export { Avatar };
|
||||||
|
|
|
||||||
|
|
@ -19,14 +19,14 @@ const Square = forwardRef<HTMLDivElement, SquareProps>(
|
||||||
<div
|
<div
|
||||||
{...rest}
|
{...rest}
|
||||||
className={classNames(styles.wrapper, rest.className)}
|
className={classNames(styles.wrapper, rest.className)}
|
||||||
style={{ backgroundImage, width: size }}
|
style={{ backgroundImage, width: size, height: size, flexBasis: size }}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<svg className={styles.svg} viewBox="0 0 1 1" />
|
<svg className={styles.svg} viewBox="0 0 1 1" />
|
||||||
{!!children && <div className={styles.content}>{children}</div>}
|
{!!children && <div className={styles.content}>{children}</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export { Square };
|
export { Square };
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
|
|
||||||
|
import { Avatar } from '~/components/common/Avatar';
|
||||||
import { Group } from '~/components/containers/Group';
|
import { Group } from '~/components/containers/Group';
|
||||||
import { Icon } from '~/components/input/Icon';
|
import { Icon } from '~/components/input/Icon';
|
||||||
import { ImagePresets } from '~/constants/urls';
|
import { ImagePresets } from '~/constants/urls';
|
||||||
|
|
@ -19,15 +20,7 @@ const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
|
||||||
<button className={styles.wrap} onClick={onClick}>
|
<button className={styles.wrap} onClick={onClick}>
|
||||||
<Group horizontal className={styles.user_button}>
|
<Group horizontal className={styles.user_button}>
|
||||||
<div className={styles.username}>{username}</div>
|
<div className={styles.username}>{username}</div>
|
||||||
|
<Avatar url={getURL(photo, ImagePresets.avatar)} size={32} />
|
||||||
<div
|
|
||||||
className={styles.user_avatar}
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(!photo || !photo.id) && <Icon icon="profile" />}
|
|
||||||
</div>
|
|
||||||
</Group>
|
</Group>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { ChangeEvent, FC, useCallback } from 'react';
|
import React, { ChangeEvent, FC, useCallback } from 'react';
|
||||||
|
|
||||||
|
import { Avatar } from '~/components/common/Avatar';
|
||||||
import { Button } from '~/components/input/Button';
|
import { Button } from '~/components/input/Button';
|
||||||
import { ImagePresets } from '~/constants/urls';
|
import { ImagePresets } from '~/constants/urls';
|
||||||
import { IFile } from '~/types';
|
import { IFile } from '~/types';
|
||||||
|
|
@ -36,14 +37,7 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<Avatar url={backgroundImage} size={size} className={styles.avatar}>
|
||||||
className={styles.avatar}
|
|
||||||
style={{
|
|
||||||
backgroundImage,
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{canEdit && <input type="file" onInput={onInputChange} />}
|
{canEdit && <input type="file" onInput={onInputChange} />}
|
||||||
{canEdit && (
|
{canEdit && (
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -54,7 +48,7 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({
|
||||||
className={styles.button}
|
className={styles.button}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Avatar>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue