Merge pull request #385 from eduardoguette/main

finalizado

src/components/eduardoguette/components/ButtonCopy.jsx

@@ -1,12 +1,15 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
+import { AppContext } from '../context'
 import copyClipboard from '../services/copyClipboard'
 
-export const ButtonCopy = ({ valueCopy }) => {
+export const ButtonCopy = () => {
+ const { state } = useContext(AppContext)
+ const { password } = state
  const [isCopied, setIsCopied] = useState(false)
  const handleCopy = () => {
  setIsCopied(true)
  setTimeout(() => {
- copyClipboard(valueCopy)
+ copyClipboard(password)
  setIsCopied(false)
  }, 500)
  }

src/components/eduardoguette/components/Form.jsx

@@ -54,7 +54,7 @@ export const Form = () => {
  <div
  className={`bg${handleColor()} h-1 w-full absolute -bottom-0 z-10 rounded-bl rounded-br`}
  ></div>
- <HeaderMenu valueCopy={password} />
+ <HeaderMenu />
  </label>
  <div className='px-6 py-8 bg-[rgb(36,35,44)] flex gap-4 flex-col'>
  <InputCheckbox

src/components/eduardoguette/components/HeaderMenu.jsx

@@ -3,11 +3,11 @@ import { BtnList } from './BtnList'
 import { ButtonCopy } from './ButtonCopy'
 import { Menu } from './Menu'
 
-export const HeaderMenu = ({ password }) => {
+export const HeaderMenu = () => {
  const [showMenu, setShowMenu] = useState(false)
  return (
- <div className='absolute right-3 flex items-center top-0 bottom-0 my-auto '>
- <ButtonCopy valueCopy={password} />
+ <div className='absolute right-0 pr-3 pl-1 flex items-center top-0 bottom-0 my-auto bg-[rgb(36,35,44)]'>
+ <ButtonCopy />
  <BtnList setState={setShowMenu}/>
  <Menu state={showMenu} setState={setShowMenu}/>
  </div>

src/components/eduardoguette/components/ItemPassList.jsx

@@ -20,6 +20,7 @@ export const ItemPassList = ({ id, url, username, password }) => {
  height={30}
  width={30}
  onError={(e) => {
+ console.log(e.onerror)
  e.target.src = 'https://i.imgur.com/C1eyYxI.png'
  e.onerror = null
  }}
@@ -32,7 +33,7 @@ export const ItemPassList = ({ id, url, username, password }) => {
  <p>Username: {username}</p>
  <p>Password: {password}</p>
  </div>
- <ButtonTimes onClickEvent={onDeleteElement} params={id} classStyle='hidden group-hover:grid right-6 top-6 hover:bg-[rgb(36,35,44)]'/>
+ <ButtonTimes onClickEvent={onDeleteElement} params={id} classStyle='md:hidden grid group-hover:grid -right-4 -top-4 md:right-6 md:top-6 md:hover:bg-[rgb(36,35,44)] bg-[rgb(36,35,44)]'/>
  </li>
  )
 }

src/components/eduardoguette/components/Menu.jsx

@@ -41,7 +41,7 @@ export const Menu = ({ state: stateMenu, setState: setStateMenu }) => {
  <li>
  <button
  onClick={() => setShowSaveNewPass(true)}
- className='text-left py-2 px-3 hover:bg-[rgb(124,127,255,.3)] hover:text-[rgb(124,127,255)] rounded-md whitespace-nowrap w-full flex items-center gap-5'
+ className='text-left py-2 px-3 hover:bg-[rgb(124,127,255,.3)] hover:text-[rgb(124,127,255)] rounded-md whitespace-nowrap w-full flex items-center gap-4'
  >
  <svg
  xmlns='http:https://www.w3.org/2000/svg'

src/components/eduardoguette/services/copyClipboard.js

@@ -1,4 +1,5 @@
 async function copyClipboard(value) {
+ console.log(value)
  await navigator.clipboard.writeText(value)
  return await navigator.clipboard.readText()
 }