hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Styling tags

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-09 15:11:04 +03:00
parent 5b2c233d24
commit 43954e4fad
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/components/+preferences/extension-page.module.scss
View File

@ -2,6 +2,7 @@
display: grid; display: grid;
grid-template-columns: 1fr 30%; grid-template-columns: 1fr 30%;
margin-top: 46px; margin-top: 46px;
gap: 16px;
} }
.metadata { .metadata {
@ -9,23 +10,27 @@
font-size: 1.5rem; font-size: 1.5rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--textColorAccent);
} }
.links { .links {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
margin: 16px 0;
a { a {
border: 1px solid rgb(72, 72, 72); border: 1px solid rgb(72, 72, 72);
padding: 4px 6px; padding: 4px 6px;
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;
color: #333; color: #9a9a9a;
margin: 0 6px 4px 0; margin: 0 6px 4px 0;
display: inline-block; display: inline-block;
&:hover { &:hover {
color: white;
border-color: transparent;
background-color: var(--blue); background-color: var(--blue);
} }
} }

6
src/renderer/components/+preferences/extension-page.tsx
View File

@ -98,15 +98,15 @@ function Overview({ extension, description }: { extension: Extension, descriptio
<div className="github"> <div className="github">
<MarkdownViewer markdown={description} /> <MarkdownViewer markdown={description} />
</div> </div>
<div className="metadata"> <div className={styles.metadata}>
<h3 className="mb-5">Categories</h3> <h3 className="mb-5">Categories</h3>
<div className="links"> <div className={styles.links}>
{extension.category.map(category => ( {extension.category.map(category => (
<a key={`category-${category.id}`} href="#">{category.name}</a> <a key={`category-${category.id}`} href="#">{category.name}</a>
))} ))}
</div> </div>
<h3 className="mb-5 mtp-5">Tags</h3> <h3 className="mb-5 mtp-5">Tags</h3>
<div className="links"> <div className={styles.links}>
{extension.tags.map(tag => ( {extension.tags.map(tag => (
<a key={`tag-${tag.id}`} href="#">{tag.name}</a> <a key={`tag-${tag.id}`} href="#">{tag.name}</a>
))} ))}