From 43954e4fad5ac9768a9ad51e70f2be61c7546352 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 9 Feb 2022 15:11:04 +0300
Subject: [PATCH] Styling tags

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/extension-page.module.scss     | 7 ++++++-
 src/renderer/components/+preferences/extension-page.tsx    | 6 +++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/+preferences/extension-page.module.scss b/src/renderer/components/+preferences/extension-page.module.scss
index 8281895d1e..8b6399f83b 100644
--- a/src/renderer/components/+preferences/extension-page.module.scss
+++ b/src/renderer/components/+preferences/extension-page.module.scss
@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 1fr 30%;
   margin-top: 46px;
+  gap: 16px;
 }
 
 .metadata {
@@ -9,23 +10,27 @@
     font-size: 1.5rem;
     margin: 0;
     padding: 0;
+    color: var(--textColorAccent);
   }
 
   .links {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
+    margin: 16px 0;
 
     a {
       border: 1px solid rgb(72, 72, 72);
       padding: 4px 6px;
       border-radius: 3px;
       font-size: 13px;
-      color: #333;
+      color: #9a9a9a;
       margin: 0 6px 4px 0;
       display: inline-block;
 
       &:hover {
+        color: white;
+        border-color: transparent;
         background-color: var(--blue);
       }
     }
diff --git a/src/renderer/components/+preferences/extension-page.tsx b/src/renderer/components/+preferences/extension-page.tsx
index d122216541..8c4c067a5d 100644
--- a/src/renderer/components/+preferences/extension-page.tsx
+++ b/src/renderer/components/+preferences/extension-page.tsx
@@ -98,15 +98,15 @@ function Overview({ extension, description }: { extension: Extension, descriptio
       <div className="github">
         <MarkdownViewer markdown={description} />
       </div>
-      <div className="metadata">
+      <div className={styles.metadata}>
         <h3 className="mb-5">Categories</h3>
-        <div className="links">
+        <div className={styles.links}>
           {extension.category.map(category => (
             <a key={`category-${category.id}`} href="#">{category.name}</a>
           ))}
         </div>
         <h3 className="mb-5 mtp-5">Tags</h3>
-        <div className="links">
+        <div className={styles.links}>
           {extension.tags.map(tag => (
             <a key={`tag-${tag.id}`} href="#">{tag.name}</a>
           ))}