From ff017573c32fa8c3f16e819470378d4741103606 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 19 Aug 2021 23:23:02 +0800
Subject: [PATCH] use lock icon to indicate a private texture

---
 .../src/views/skinlib/SkinLibrary/Item.tsx    | 23 ++++++++++++-------
 .../tests/views/skinlib/SkinLibrary.test.tsx  |  4 ++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx b/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
index 92e13788..4c7c8d49 100644
--- a/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
+++ b/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
@@ -22,6 +22,10 @@ const Card = styled.div`
   }
 `
 
+const Icon = styled.i`
+  height: 24px;
+`
+
 const Badge = styled.span`
   padding-top: 0.4rem;
 `
@@ -73,19 +77,22 @@ const Item: React.FC<Props> = (props) => {
     <a href={link} className="ml-3 mr-2 mb-2 d-block" target="_blank">
       <Card className="card">
         <div className="card-body">
-          {item.public || (
-            <div className="ribbon-wrapper">
-              <div className="ribbon bg-pink">{t('skinlib.private')}</div>
-            </div>
-          )}
           <a href={link} target="_blank">
             <img src={preview} alt={item.name} className="card-img-top" />
           </a>
         </div>
         <div className="card-footer">
-          <span className="d-block mb-1 text-truncate" title={item.name}>
-            {item.name}
-          </span>
+          <div className="d-flex align-items-center">
+            {item.public || (
+              <Icon
+                className="fas fa-lock text-warning mr-2"
+                title={t('skinlib.private')}
+              />
+            )}
+            <span className="d-block mb-1 text-truncate" title={item.name}>
+              {item.name}
+            </span>
+          </div>
           <div className="d-flex justify-content-between">
             <div className="d-flex">
               <Badge className="badge bg-teal mr-1">
diff --git a/resources/assets/tests/views/skinlib/SkinLibrary.test.tsx b/resources/assets/tests/views/skinlib/SkinLibrary.test.tsx
index 07121c75..c7a33ebb 100644
--- a/resources/assets/tests/views/skinlib/SkinLibrary.test.tsx
+++ b/resources/assets/tests/views/skinlib/SkinLibrary.test.tsx
@@ -198,10 +198,10 @@ test('private texture', async () => {
   const item = { ...fixtureItem, public: false }
   fetch.get.mockResolvedValue(createPaginator([item]))
 
-  const { queryByText } = render(<SkinLibrary />)
+  const { queryByTitle } = render(<SkinLibrary />)
   await waitFor(() => expect(fetch.get).toBeCalled())
 
-  expect(queryByText(t('skinlib.private'))).toBeInTheDocument()
+  expect(queryByTitle(t('skinlib.private'))).toBeInTheDocument()
 })
 
 describe('by filter', () => {