update src/components/CommentDesign/Comments/index.js, src/components/ContactUs/ContactInfoSectioin/index.js, src/components/ContactUs/ContactUsInfoCard/index.js and src/components/MiniComponents/Avatar/index.js

master
mahdi 2 years ago
parent bdcedfef02
commit f90014ba4e
  1. 16
      src/components/CommentDesign/Comments/index.js
  2. 22
      src/components/ContactUs/ContactInfoSectioin/index.js
  3. 8
      src/components/ContactUs/ContactUsInfoCard/index.js
  4. 4
      src/components/MiniComponents/Avatar/index.js

@ -10,27 +10,27 @@ export const Comments = ({ comments }) => {
// connectToParent(comments);
const Comment = ({ comment }) => {
return (
<div className="w-full flex flex-col">
<div className="w-full flex flex-col bg-surface border border-surfaceBorder px-4 py-2">
<header className="w-full flex flex-row justify-between py-1">
<div className="flex flex-row items-end">
<Avatar source={comment.userImage} size={60} rounded={true} />
<div className="flex flex-col">
<strong className="mr-2 text-lg">{comment.username}</strong>
<div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
<span className="px-2 text-xs text-gray-500">
<div className="flex flex-row items-center divide-x divide-surfaceBorder divided ltr">
<span className="px-2 text-xs text-primaryText">
{comment.product?.color}
</span>
<span className="px-2 text-xs text-gray-500">
<span className="px-2 text-xs text-primaryText">
{comment.product?.name}
</span>
</div>
</div>
</div>
<div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
<span className="px-2 text-sm text-blue-400">
<span className="px-2 text-sm text-primaryLight">
{moment(comment.data).locale("fa").format("YYYY/MM/DD")}
</span>
<span className="px-2 text-sm text-blue-400">
<span className="px-2 text-sm text-primaryLight">
{comment.date.getHours()}&nbsp;:&nbsp;{comment.date.getMinutes()}
</span>
</div>
@ -67,9 +67,9 @@ export const Comments = ({ comments }) => {
)}
</div>
</header>
<p className="text-gray-500 mt-2">{comment.text}</p>
<p className="text-primaryText mt-2">{comment.text}</p>
<div className="self-end mt-4">
<Button className="bg-gray-400 text-sm text-white rounded p-2" />
<Button className="bg-primary text-sm text-white rounded p-2" />
</div>
</div>
</div>

@ -2,14 +2,10 @@
import React from "react";
const ContactInfoSectioin = ({
className,
dayNumTextColor,
contentTextColor,
}) => {
const ContactInfoSectioin = ({ className }) => {
return (
<section
className={`relative flex flex-row items-center justify-center p-4 rounded ${className}`}
className={`relative flex flex-row items-center justify-center p-4 bg-surface border border-surfaceBorder rounded ${className}`}
>
{/* line */}
<img src="images/light-blue-line.svg" alt="" className="" />
@ -19,21 +15,21 @@ const ContactInfoSectioin = ({
alt=""
className="w-14 cursor-pointer customer-support animate-bounce"
/>
<p className={`mr10 mt-0 text-sm leading-6 mr-10 ${contentTextColor}`}>
<span className="text-[#196EC0]">7 </span>
<p className={`mt-0 text-sm leading-6 mr-10 text-primaryText`}>
<span className="text-primaryText">7 </span>
روز هفته
<span className="text-[#196EC0]"> 24 </span>
<span className="text-primaryText"> 24 </span>
ساعته
<br />
منتظر شنیدن صدای گرمتان هستیم
</p>
<div className="flex flex-col mr-10 mt-0">
<a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
<a href="tel:021654412" className={`text-sm text-primaryText`}>
021654412
</a>
<a
href="mailto:webmaster@example.com"
className={`text-sm ${contentTextColor}`}
className={`text-sm text-primaryText`}
>
info@danovin.ir
</a>
@ -47,7 +43,5 @@ const ContactInfoSectioin = ({
export default ContactInfoSectioin;
ContactInfoSectioin.defaultProps = {
className: "bg-[#DBDBDB]",
dayNumTextColor: "text-[#196EC0]",
contentTextColor: "text-[#05335F]",
className: "",
};

@ -2,9 +2,9 @@ import React from "react";
const ContactUsInfoCard = ({ items }) => {
return (
<div className="w-fit flex flex-col rounded-md border bg-white border-gray-200 p-4 mx-auto mt-10">
<div className="w-fit flex flex-col p-4 mt-10 bg-surface border border-surfaceBorder mx-auto rounded">
{/* logo && map */}
<div className="flex flex-row items-center justify-between ">
<div className="flex flex-row items-center justify-between">
<img
src="images/ContactUsInfoCardmap.svg"
alt="map"
@ -21,12 +21,12 @@ const ContactUsInfoCard = ({ items }) => {
<div className="flex flex-row items-center mt-2" key={index}>
{item.icon && <img className="w-5" src={item.icon} alt={item.icon} />}
<p
className={`text-[#2383E1] text-sm font-sansbold ${
className={`text-primary text-sm font-bold ${
item.icon === null ? "mr-8" : "mr-2"
}`}
>
{item.title}
<span className="text-[#0F0543] mr-1 text-sm text-justify leading-6">
<span className="text-primaryText mr-1 text-sm text-justify leading-6">
{item.content}
</span>
</p>

@ -8,9 +8,7 @@ function Avatar({ source, size, rounded, status, userImage }) {
alt="avatar"
style={{ width: size, height: size, objectFit: "cover" }}
/>
{status && (
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
)}
{status && <span className="w-1.5 h-1.5 rounded-full bg-success"></span>}
</div>
);
}

Loading…
Cancel
Save