diff --git a/src/assets/images/UI/crown.png b/src/assets/images/UI/crown.png new file mode 100644 index 0000000..24880bb Binary files /dev/null and b/src/assets/images/UI/crown.png differ diff --git a/src/assets/images/UI/crown.svg b/src/assets/images/UI/crown.svg new file mode 100644 index 0000000..bb270af --- /dev/null +++ b/src/assets/images/UI/crown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Aliases/Aliases.tsx b/src/pages/Aliases/Aliases.tsx index b69d74a..290787a 100644 --- a/src/pages/Aliases/Aliases.tsx +++ b/src/pages/Aliases/Aliases.tsx @@ -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 ( +
+
+ {alias} +
+ +
+
+
+ ); + } + const tableElements = aliases.map(e => [ - e.alias, + e.alias.length > 5 ? e.alias : , e.address ]); diff --git a/src/styles/Aliases.scss b/src/styles/Aliases.scss index c16ffbe..12a5bcf 100644 --- a/src/styles/Aliases.scss +++ b/src/styles/Aliases.scss @@ -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;