From 80d2b0426eb3ea2c14204ecc3c04431aabcc6841 Mon Sep 17 00:00:00 2001
From: jejolare <jejolare@vk.com>
Date: Sat, 3 Feb 2024 19:56:32 +0700
Subject: [PATCH] add short aliases highlight

---
 src/assets/images/UI/crown.png | Bin 0 -> 203 bytes
 src/assets/images/UI/crown.svg |   3 +++
 src/pages/Aliases/Aliases.tsx  |  16 +++++++++++++++-
 src/styles/Aliases.scss        |  27 +++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/UI/crown.png
 create mode 100644 src/assets/images/UI/crown.svg

diff --git a/src/assets/images/UI/crown.png b/src/assets/images/UI/crown.png
new file mode 100644
index 0000000000000000000000000000000000000000..24880bb55a9810bade15cee24468d13432e59732
GIT binary patch
literal 203
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~e!3HF=pW8M9DVAa<&kznEsNqQI0P>qWT^vI+
zCeEGc$#>X*!&N>||7qxple6ZmDLK0F#iAX(S`!b(e`<SaZ}3KAj_RD$_0LvVe##6r
zpF8LK4iklq+kK+~JuDd4FkG_xo%SYPt+)D_Deo7yh;nZB1icK?lW9LL&1m_2hh<&X
zT&sU8&i!*z71ro4)5!Et-ym52W353^yZ8a=zZnMNk3Ky)0CWw5r>mdKI;Vst0N;#G
A0ssI2

literal 0
HcmV?d00001

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 @@
+<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>
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 (
+            <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
     ]);
 
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;