update 5 files

master
Reza_ashrafi 2 years ago
parent bf54bf9e97
commit 99a5f07cc5
  1. 6
      src/assets/icons/camera-white.svg
  2. 8
      src/views/Auth/Profile/Birthdate/index.js
  3. 4
      src/views/Auth/Profile/GenderSwitch/index.js
  4. 10
      src/views/Auth/Profile/GenderSwitch/index.scss
  5. 18
      src/views/Auth/Profile/Upload/index.js
  6. 2
      src/views/Auth/Profile/index.js

@ -0,0 +1,6 @@
<svg id="camera" xmlns="http://www.w3.org/2000/svg" width="28.512" height="28.512" viewBox="0 0 28.512 28.512">
<path id="Vector" d="M5.367,23.76h12.45c3.279,0,4.586-2.008,4.74-4.455l.618-9.813a4.459,4.459,0,0,0-4.455-4.74A1.952,1.952,0,0,1,17,3.695l-.855-1.723A3.921,3.921,0,0,0,12.959,0H10.238a3.924,3.924,0,0,0-3.2,1.972L6.187,3.695A1.952,1.952,0,0,1,4.465,4.752,4.459,4.459,0,0,0,.009,9.492l.618,9.813C.77,21.752,2.088,23.76,5.367,23.76Z" transform="translate(2.664 2.376)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H3.564" transform="translate(12.474 9.504)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M3.861,7.722A3.861,3.861,0,1,0,0,3.861,3.869,3.869,0,0,0,3.861,7.722Z" transform="translate(10.395 13.662)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H28.512V28.512H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -6,13 +6,13 @@ function Birthdate({ value, name, onChange, isDesktop, ...props }) {
const [isFocused, setIsFocused] = React.useState(false);
return (
<div className="flex bg-background relative justify-center lg:w-full border border-solid focus:border-blueMarine dark:focus:border-blueCurious border-surfaceBorder rounded-md py-4 px-4">
<div className="flex bg-white relative justify-center lg:w-full border border-solid focus:border-blueC0 dark:focus:border-blueC0 border-gray-300 rounded-md py-3 px-4">
{isDesktop && (
<label
className={`text-tiny text-blueMarine bg-background dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${
className={`text-gray20 bg-white dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${
isFocused
? "top-0 text-blueMarine text-sm dark:text-blueCurious"
: "top-1/2 text-grayBattleShip text-tiny"
? "top-0 text-blueC0 text-xs dark:text-blueCurious"
: "top-1/2 text-gray1 text-sm"
}`}
onClick={() => setIsFocused(true)}
>

@ -1,5 +1,5 @@
import React from "react";
import './index.scss';
export default function GenderSwitch({
onChange,
@ -9,7 +9,7 @@ export default function GenderSwitch({
label,
}) {
return (
<div className="gender d-flex justify-content-between align-items-center">
<div className="gender flex justify-between items-center">
<div
className={selectedOption === 2 && "gender__active"}
onClick={() => onChange(name, 2)}

@ -3,17 +3,17 @@
margin-bottom: 10px;
div {
border-radius: 10px;
font-family: numeralLight;
font-family: Medium;
padding: 13px 0px;
width: 45%;
text-align: center;
cursor: pointer;
color: #ccc;
background-color: black;
border: 1px solid $gray1;
color: #12CF7F;
background-color: white;
border: 1px solid #12CF7F;
}
&__active{
background-color: $green4 !important;
background-color: #12CF7F !important;
color: white !important;
border: none !important;
}

@ -1,6 +1,8 @@
import React, { useState, useMemo } from "react";
import { connect } from "react-redux";
//assets
import camera from "../../../../assets/icons/camera-white.svg";
const reader = new FileReader();
function Upload({ name, value: initValue, onChange }) {
@ -11,10 +13,13 @@ function Upload({ name, value: initValue, onChange }) {
setSelected(null);
}, [initValue]);
return (
<div className="flex justify-center bg-surface rounded-full items-center overflow-hidden relative max-w-[100px] max-h-[100px] w-[100px] h-[100px]">
<div
className="flex justify-center bg-green-400 rounded-full items-center overflow-hidden relative"
style={{ width: 100, height: 100 }}
>
<div
className={`h-full w-full rounded-full flex justify-center items-center ${
value ? "" : "bg-surface"
value ? "" : "bg-green-400"
}`}
>
<img
@ -23,7 +28,7 @@ function Upload({ name, value: initValue, onChange }) {
? value?.indexOf("data") > -1
? value
: "https://iranesch.com/api/v1/file/" + value
: "/icons/camera-white.svg"
: camera
}
alt=""
className={`rounded-full ${
@ -32,8 +37,8 @@ function Upload({ name, value: initValue, onChange }) {
/>
</div>
{value && (
<div className="rounded-full flex justify-center bg-surface items-center absolute right-0 bottom-0 w-7 h-7 z-20">
<img src={"/icons/camera-white.svg"} alt="camera" className="w-2/3" />
<div className="rounded-full flex justify-center bg-surface items-center absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-7 h-7 z-20">
<img src={camera} alt="camera" className="w-2/3" />
</div>
)}
<input
@ -49,7 +54,6 @@ function Upload({ name, value: initValue, onChange }) {
);
}
const mapStateToProps = (state) => ({
});
const mapStateToProps = (state) => ({});
export default connect(mapStateToProps)(Upload);

@ -569,7 +569,7 @@ function Profile({
/>
<div className="w-full"></div>
</div>
<button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
<button className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
</div>
);
}

Loading…
Cancel
Save