update src/components/Avatar/index.js and User.js

temp
mahdi 2 years ago
parent 7821e04157
commit 7360a50e18
  1. 12
      src/assets/images/default-profile-pic.svg
  2. 2
      src/components/Avatar/index.js
  3. 26
      src/views/Dashboard/layouts/Mobile/User.js

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68">
<g id="Group_2182" data-name="Group 2182" transform="translate(-233 -97)">
<circle id="Ellipse_240" data-name="Ellipse 240" cx="34" cy="34" r="34" transform="translate(233 97)" fill="#d6d6d6"/>
<g id="vuesax_linear_user" data-name="vuesax/linear/user" transform="translate(142.967 -73.033)">
<g id="user" transform="translate(108 188)">
<path id="Vector" d="M13.361,6.68A6.68,6.68,0,1,1,6.68,0,6.68,6.68,0,0,1,13.361,6.68Z" transform="translate(9.353 2.672)" fill="none" stroke="#032d00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M22.954,9.353C22.954,4.182,17.81,0,11.477,0S0,4.182,0,9.353" transform="translate(4.556 20.041)" fill="none" stroke="#032d00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H32.066V32.066H0Z" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import userImage from "../../assets/images/user.png"; import userImage from "../../assets/images/default-profile-pic.svg";
function Avatar({ source, size, rounded, status }) { function Avatar({ source, size, rounded, status }) {
return ( return (

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Avatar from "../../../../components/Avatar";
const User = ({ user, mobile }) => { const User = ({ user, mobile }) => {
const [dropdown, setDropdown] = React.useState(true); const [dropdown, setDropdown] = React.useState(true);
@ -17,18 +18,14 @@ const User = ({ user, mobile }) => {
style={{ width: 70, height: 70 }} style={{ width: 70, height: 70 }}
/> />
) : ( ) : (
<div <Avatar size={60} rounded={true} />
className={"rounded-full"}
style={{
width: 70,
height: 70,
backgroundColor: "#ddd",
}}
></div>
)} )}
<div className={`flex flex-col mr-1`}> <div className={`flex flex-col mr-1`}>
<strong className={`text-base font-semibold text-gray1`}> <strong className={`text-base font-semibold text-gray1`}>
{user?.firstName + " " + user?.lastName} {/* {user?.firstName + " " + user?.lastName} */}
{user.firstName === null
? ""
: user.firstName + " " + user.lastName}
</strong> </strong>
<span className="mt-2 text-sm text-gray1">{user?.cellphone}</span> <span className="mt-2 text-sm text-gray1">{user?.cellphone}</span>
</div> </div>
@ -70,3 +67,14 @@ const mapStateToProps = (state) => ({
}); });
export default connect(mapStateToProps)(User); export default connect(mapStateToProps)(User);
{
/* <div
className={"rounded-full"}
style={{
width: 70,
height: 70,
backgroundColor: "red",
}}
></div> */
}

Loading…
Cancel
Save