From e943d5c11573b71919919c37e96de50a97815cd2 Mon Sep 17 00:00:00 2001 From: dappsar Date: Mon, 4 Dec 2023 04:26:33 -0300 Subject: [PATCH 1/2] [style] :lipstick: update icons --- src/components/Navbar/AccountInfo.jsx | 35 +++++++++++---------- src/styles/_navbar-account.scss | 45 +++++++++++++++++---------- 2 files changed, 47 insertions(+), 33 deletions(-) diff --git a/src/components/Navbar/AccountInfo.jsx b/src/components/Navbar/AccountInfo.jsx index ea68c17c..772428c4 100644 --- a/src/components/Navbar/AccountInfo.jsx +++ b/src/components/Navbar/AccountInfo.jsx @@ -4,7 +4,8 @@ import Link from 'next/link' import { useTranslation } from 'next-i18next' import Swal from 'sweetalert2' import { HiOutlineClipboardDocument } from 'react-icons/hi2' -import { IoOpenOutline } from 'react-icons/io5' +import { FaExternalLinkAlt as FaExternalLinkSquareAlt } from "react-icons/fa"; +import { GoLinkExternal } from "react-icons/go"; import { AiOutlineSend } from 'react-icons/ai' import { MdOutlinePublishedWithChanges } from 'react-icons/md' import { useWeb3Context, useLayoutContext } from '../../hooks' @@ -166,11 +167,11 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => { ) const NetworkComponent = () => ( -
+

{isValidNetwork() ? NETWORK.chainName : t('account_invalid_network')} @@ -188,7 +189,7 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => { NETWORK.chainExplorerUrl ) }} - className='account_info__icon' + className='account__info__icon' />

)} @@ -196,33 +197,33 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => { ) const WalletComponent = () => ( -
-
+
+
{copiedTextVisible && ( - + {t('account_text_copied')} )} -

+

{getAccountAddressText()}

-
- +
+ - +
) const BalanceComponent = () => ( -
+

{`${walletBalance} ${tokenName}`}

@@ -231,15 +232,15 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => { onClick={() => { handleSendTokenClick() }} - className='account_info__icon' + className='account__info__icon' /> - +
diff --git a/src/styles/_navbar-account.scss b/src/styles/_navbar-account.scss index 0944ef17..8ecd19cc 100644 --- a/src/styles/_navbar-account.scss +++ b/src/styles/_navbar-account.scss @@ -2,7 +2,8 @@ position: absolute; top: calc(100% + 0px); right: 10px; - background-color: #ffce00; + background-color: #cfa763; + filter: saturate(90%) brightness(120%); border: 1px solid #ccc; padding: 10px; display: none; @@ -45,11 +46,11 @@ } .account__info__connect__btn { - background-color: #68b346; + background-color: rgb(0, 94, 163); } -.account_info__account__link, -.account_info__account__link:hover, -.account_info__account__link:visited { +.account__info__account__link, +.account__info__account__link:hover, +.account__info__account__link:visited { transition: color 0.3s; text-decoration: none; line-height: 20px; @@ -57,25 +58,25 @@ .account__info__disconnect__btn:hover, .account__info__connect__btn:hover, -.account_info__account__link:hover { +.account__info__account__link:hover { color: #fff; } -.account_info__network__container { +.account__info__network__container { margin-bottom: 15px; } -.account_info__account__network { +.account__info__account__network { display: flex; justify-content: center; font-size: 0.7em; } -.account_info__invalid__network { +.account__info__invalid__network { color: #f60008; } -.account_info__copied__text { +.account__info__copied__text { position: absolute; left: 50%; transform: translate(-50%, -50%); @@ -99,35 +100,47 @@ } } -.account_info__icon__and__link { + +.account__info__icon__and__link { display: flex; align-items: center; justify-content: space-between; } -.account_info__icon { +account__info__icon__link, +.account__info__icon { vertical-align: middle; margin-left: 5px; + margin-right: 5px; font-size: 17px; } -.account_info__icon:hover { +.account__info__icon__link { + fill: #000; +} + +.account__info__icon__link:hover { + fill: #fff; +} + +account__info__icon__link:hover, +.account__info__icon:hover { color: #fff; } -.account_info__link__container, +.account__info__link__container, .account__info__icon__container { cursor: pointer; display: flex; align-items: center; } -.account_info__link__container { +.account__info__link__container { justify-content: space-between; margin-right: 10px; } -.account_info__icon__container { +.account__info__icon__container { justify-content: flex-end; margin-left: auto; } From 1b7d939188c9d58caf3ff77406a62ada634d4bbf Mon Sep 17 00:00:00 2001 From: dappsar Date: Mon, 4 Dec 2023 04:27:15 -0300 Subject: [PATCH 2/2] [style] :art: pretier --- src/components/Navbar/AccountInfo.jsx | 4 ++-- src/styles/_navbar-account.scss | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar/AccountInfo.jsx b/src/components/Navbar/AccountInfo.jsx index 772428c4..3a4c2575 100644 --- a/src/components/Navbar/AccountInfo.jsx +++ b/src/components/Navbar/AccountInfo.jsx @@ -4,8 +4,8 @@ import Link from 'next/link' import { useTranslation } from 'next-i18next' import Swal from 'sweetalert2' import { HiOutlineClipboardDocument } from 'react-icons/hi2' -import { FaExternalLinkAlt as FaExternalLinkSquareAlt } from "react-icons/fa"; -import { GoLinkExternal } from "react-icons/go"; +import { FaExternalLinkAlt as FaExternalLinkSquareAlt } from 'react-icons/fa' +import { GoLinkExternal } from 'react-icons/go' import { AiOutlineSend } from 'react-icons/ai' import { MdOutlinePublishedWithChanges } from 'react-icons/md' import { useWeb3Context, useLayoutContext } from '../../hooks' diff --git a/src/styles/_navbar-account.scss b/src/styles/_navbar-account.scss index 8ecd19cc..b65cfc1f 100644 --- a/src/styles/_navbar-account.scss +++ b/src/styles/_navbar-account.scss @@ -100,7 +100,6 @@ } } - .account__info__icon__and__link { display: flex; align-items: center;