From 61d06b0721110f03376eb7b4c4ace8a63e65a816 Mon Sep 17 00:00:00 2001 From: Janaina <jsk22@inf.ufpr.br> Date: Tue, 29 Oct 2024 11:10:17 -0300 Subject: [PATCH] Issue #190/#200-HOTFIX --- public/images/visualizacoes.svg | 6 ++++++ src/app/recurso/[id]/components/actionButtons.js | 3 ++- src/app/recurso/[id]/components/metrics.js | 16 ++++++++++++---- tailwind.config.js | 9 +++++++++ 4 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 public/images/visualizacoes.svg diff --git a/public/images/visualizacoes.svg b/public/images/visualizacoes.svg new file mode 100644 index 0000000..260f612 --- /dev/null +++ b/public/images/visualizacoes.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="26.289" height="16.431" viewBox="0 0 26.289 16.431"> + <g id="_6fa6226a766baef12a979a0a37cd9b5d" data-name="6fa6226a766baef12a979a0a37cd9b5d" transform="translate(0 -3)"> + <path id="Path_162" data-name="Path 162" d="M9.315,6a3.286,3.286,0,1,0,3.212,3.286A3.286,3.286,0,0,0,9.315,6Z" transform="translate(3.829 1.929)" fill="#6c8080"/> + <path id="Path_163" data-name="Path 163" d="M13.145,5.465a12.452,12.452,0,0,1,10.217,5.751,12.452,12.452,0,0,1-10.217,5.751A12.452,12.452,0,0,1,2.928,11.215,12.452,12.452,0,0,1,13.145,5.465m0-2.465C7.246,3,2.757,6.5,0,11.215c2.757,4.711,7.246,8.215,13.145,8.215s10.387-3.5,13.145-8.215C23.532,6.5,19.041,3,13.145,3Z" transform="translate(0 0)" fill="#6c8080"/> + </g> +</svg> diff --git a/src/app/recurso/[id]/components/actionButtons.js b/src/app/recurso/[id]/components/actionButtons.js index 8a0a7d2..0094d45 100644 --- a/src/app/recurso/[id]/components/actionButtons.js +++ b/src/app/recurso/[id]/components/actionButtons.js @@ -206,6 +206,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state <div className="p-1 text-main-text">{info.name}</div> </Button> ); + return ( <> @@ -220,7 +221,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state {/* Verifica se o usuário está logado antes de abrir o modal de colecionar */} {userData && <CollectModal open={collectOpen} onClose={() => setCollectOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id} />} {!submitted && - <div className="flex justify-start py-4 overflow-x-auto max-sm:no-scrollbar"> + <div className="flex justify-start py-4 overflow-x-auto max-sm:no-scrollbar animate-scrollHint"> {buttonInfo.map(genButton)} </div> } diff --git a/src/app/recurso/[id]/components/metrics.js b/src/app/recurso/[id]/components/metrics.js index f01f8de..8ede9f4 100644 --- a/src/app/recurso/[id]/components/metrics.js +++ b/src/app/recurso/[id]/components/metrics.js @@ -1,4 +1,12 @@ -import StarHalfOutlinedIcon from "@mui/icons-material/StarHalfOutlined"; +import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined"; +import { IoMdShareAlt } from "react-icons/io"; +import { FaRegEye } from "react-icons/fa"; + +const images = [ + { + image: <img src="/images/visualizacoes.svg" alt="Visualizações" className="w-6 h-6" />, + }, +]; const genMetric = ({ icon, name, data }) => { return ( @@ -18,9 +26,9 @@ const genMetric = ({ icon, name, data }) => { export default function Specifications({ learningObject }) { const metricInfo = [ - { icon: <StarHalfOutlinedIcon />, name: "Visualizações", data: learningObject.views_count }, - { icon: <StarHalfOutlinedIcon />, name: "Curtidas", data: learningObject.likes_count }, - { icon: <StarHalfOutlinedIcon />, name: "Compartilhamentos", data: learningObject.shares_count }, + { icon: <FaRegEye className="text-2xl" />, name: "Visualizações", data: learningObject.views_count }, + { icon: <FavoriteOutlinedIcon />, name: "Curtidas", data: learningObject.likes_count }, + { icon: <IoMdShareAlt className="text-2xl" />, name: "Compartilhamentos", data: learningObject.shares_count }, ]; return ( <div className="flex flex-col p-1 text-main-text"> diff --git a/tailwind.config.js b/tailwind.config.js index 70f3f2c..12b53bc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -63,6 +63,15 @@ module.exports = { "fundo": 'var(--fundo)', "logo": 'var(--logo)', }, + keyframes: { + scrollHint: { + '0%, 100%': { transform: 'translateX(0)' }, + '50%': { transform: 'translateX(-20px)' }, + }, + }, + animation: { + scrollHint: 'scrollHint 0.5s ease-in-out 1', + }, }, }, plugins: [ -- GitLab