lthn/explorer
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add short aliases highlight

Browse source
This commit is contained in:
jejolare 2024-02-03 19:56:32 +07:00
parent 5fe572e65d
commit 80d2b0426e
4 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/images/UI/crown.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 203 B

3
src/assets/images/UI/crown.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.75532 2.86184L7.54577 1.98158C7.64203 1.94211 7.8076 1.94211 7.88076 2.00132C7.95776 2.06842 8.01552 2.23816 7.99627 2.34079C7.75754 3.46974 7.50726 4.59868 7.25699 5.72368C7.21463 5.90921 7.09912 6 6.91045 6C4.96598 6 3.02151 6 1.07704 6C0.880669 6 0.765156 5.90921 0.722801 5.71184C0.480224 4.59474 0.237647 3.48158 0.0104712 2.36053C-0.0126314 2.25395 -0.00493053 2.11184 0.110582 2.00921C0.226095 1.91053 0.349309 1.92237 0.480224 1.98947C1.05394 2.27763 1.6315 2.56184 2.22832 2.85789L3.66068 0.268421C3.73384 0.130263 3.807 0 3.98412 0C4.16124 0 4.23825 0.122368 4.31525 0.260526L5.75532 2.86184Z" fill="#FFC700"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 732 B

16
src/pages/Aliases/Aliases.tsx
View file

@ -5,6 +5,7 @@ import InfoTopPanel from "../../components/default/InfoTopPanel/InfoTopPanel";
import Table from "../../components/default/Table/Table";
import Alias from "../../interfaces/state/Alias";
import Fetch from "../../utils/methods";
import crownImg from "../../assets/images/UI/crown.svg";
function Aliases() {
const [burgerOpened, setBurgerOpened] = useState(false);
@ -41,8 +42,21 @@ function Aliases() {
const tableHeaders = [ "NAME", "ADDRESS" ];
function ShortAlias({ alias }: { alias: string }) {
return (
<div>
<div className="short_alias">
{alias}
<div className="short_alias__crown">
<img src={crownImg} alt="" />
</div>
</div>
</div>
);
}
const tableElements = aliases.map(e => [
e.alias,
e.alias.length > 5 ? e.alias : <ShortAlias alias={e.alias} />,
e.address
]);

27
src/styles/Aliases.scss
View file

@ -1,4 +1,31 @@
.aliases {
.short_alias {
background-color: red;
float: left;
padding: 4px 8px;
border-radius: 8px;
background: radial-gradient(249.16% 182.78% at 0% 0%,rgb(22, 209, 214),rgb(39, 76, 255) 100%);
position: relative;
.short_alias__crown {
position: absolute;
height: 14px;
width: 14px;
border-radius: 50%;
background-color: white;
right: -5px;
top: -5px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 6px;
height: 6px;
}
}
}
.aliases__table {
border-radius: 10px;
overflow: hidden;