Skip to content

Commit 5ebc102

Browse files
committed
chore: update design
1 parent 3c99990 commit 5ebc102

File tree

4 files changed

+74
-56
lines changed

4 files changed

+74
-56
lines changed

src/components/ListBlock.vue

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
11
<template>
2-
<div class="mr-4 mb-4">
3-
<div
4-
class="flex items-center justify-between sm:justify-center bg-grey-100 rounded-full px-4 py-2"
5-
>
6-
<slot />
2+
<component :is="href ? 'a' : 'div'" :href="href" target="_blank" class="flex items-center">
3+
<div class="relative w-full h-full">
4+
<div
5+
class="flex flex-col items-center justify-between bg-grey-50 rounded-xl border-2 border-grey-200"
6+
>
7+
<div
8+
style="
9+
border-radius: 0.75rem;
10+
border-bottom-left-radius: 0;
11+
border-top-right-radius: 0;
12+
"
13+
class="self-start bg-grey-200 px-3 rounded-xl rounded-bl-none rounded-tr-none text-xs uppercase leading-4 font-medium mb-2"
14+
>{{ label }}</div>
15+
<div class="flex items-center mb-2">
16+
<slot />
17+
</div>
18+
</div>
719
</div>
8-
</div>
20+
</component>
921
</template>
1022

1123
<script>
12-
export default {}
24+
export default {
25+
props: {
26+
label: {
27+
type: String,
28+
default: ''
29+
},
30+
href: {
31+
type: String,
32+
default: null
33+
}
34+
}
35+
}
1336
</script>
1437

1538
<style></style>

src/popup/App.vue

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,65 +11,61 @@
1111
v-if="state === 'data'"
1212
:href="`https://vuetelemetry.com/explore/${website.slug}`"
1313
target="_blank"
14-
class="mr-2"
14+
class="mr-3"
1515
>
16-
<ExternalLinkIcon class="w-8 h-8" />
16+
<ExternalLinkIcon class="w-6 h-6 hover:text-primary-500" />
17+
</a>
18+
19+
<a href="https://twitter.com/VueTelemetry" target="_blank" class="mr-3">
20+
<TwitterIcon class="w-6 h-6 hover:text-primary-500" />
1721
</a>
1822

1923
<a href="https://github.com/nuxt-company/vue-telemetry-analyzer" target="_blank">
20-
<GithubIcon class="w-8 h-8" />
24+
<GithubIcon class="w-6 h-6 hover:text-primary-500" />
2125
</a>
2226
</div>
2327
</div>
2428

2529
<div v-if="isLoading">Loading...</div>
2630
<div v-else>
2731
<div v-if="state === 'data'">
28-
<div>
32+
<div class="mb-8">
2933
<div class="mb-4">
30-
<h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase">
31-
<ConfigIcon class="h-5 mr-2 text-primary-700 opacity-50" />Info
34+
<h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase">
35+
<InfoIcon class="h-5 mr-2 text-primary-5700 opacity-50" />Info
3236
</h3>
3337
</div>
3438

35-
<div class="flex flex-wrap">
36-
<ListBlock>
37-
<VueIcon class="w-5 h-5 mr-2" />
39+
<div class="grid grid-cols-3 gap-4">
40+
<ListBlock label="Vue version" href="https://vuejs.org/">
41+
<img :src="getURL('/vue.svg')" alt class="w-6 h-6 mr-2" />
3842
<div class="font-semibold">{{ website.vueVersion }}</div>
3943
</ListBlock>
4044

41-
<ListBlock>
42-
<div class="font-semibold mr-2">SSR</div>
43-
<CheckmarkCircleFillIcon v-if="website.hasSSR" class="w-5 h-5 text-primary-700" />
44-
<XmarkCircleFillIcon v-else class="w-5 h-5 text-grey-400" />
45+
<ListBlock v-if="website.framework" label="Framework" :href="website.framework.url">
46+
<img :src="getURL(website.framework.imgPath)" alt class="w-6 h-6 mr-2" />
47+
<div class="font-semibold">{{ website.framework.name }}</div>
4548
</ListBlock>
4649

47-
<ListBlock>
48-
<div class="font-semibold mr-2">Static</div>
49-
<CheckmarkCircleFillIcon v-if="website.isStatic" class="w-5 h-5 text-primary-700" />
50-
<XmarkCircleFillIcon v-else class="w-5 h-5 text-grey-400" />
50+
<ListBlock v-if="website.ui" label="UI Framework" :href="website.ui.url">
51+
<img :src="getURL(website.ui.imgPath)" alt class="w-6 h-6 mr-2" />
52+
<div class="font-semibold">{{ website.ui.name }}</div>
5153
</ListBlock>
5254

53-
<ListBlock v-if="website.framework">
54-
<div class="font-semibold mr-2">Framework</div>
55-
<a :href="website.framework.url" target="_blank" class>
56-
<img :src="getURL(website.framework.imgPath)" alt class="w-6 h-6" />
57-
</a>
55+
<ListBlock label="Rendering">
56+
<div class="font-semibold">{{ website.hasSSR ? 'Server-side' : 'Client-side' }}</div>
5857
</ListBlock>
5958

60-
<ListBlock v-if="website.ui">
61-
<div class="font-semibold mr-2">UI Framework</div>
62-
<a :href="website.ui.url" target="_blank" class>
63-
<img :src="getURL(website.ui.imgPath)" alt class="w-6 h-6" />
64-
</a>
59+
<ListBlock label="Deployment">
60+
<div class="font-semibold">{{ website.isStatic ? 'Static' : 'Server' }}</div>
6561
</ListBlock>
6662
</div>
6763
</div>
6864

69-
<div v-if="website.plugins.length">
65+
<div v-if="website.plugins.length" class="mb-4">
7066
<div class="mb-4">
71-
<h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase">
72-
<PluginsIcon class="h-6 mr-2 text-primary-700 opacity-50" />Plugins
67+
<h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase">
68+
<PluginsIcon class="h-6 mr-2 text-primary-500 opacity-50" />Plugins
7369
</h3>
7470
</div>
7571

@@ -82,16 +78,16 @@
8278
class="mr-4 mb-4"
8379
>
8480
<span
85-
class="block bg-grey-100 font-semibold px-4 py-2 text-sm rounded-full"
81+
class="block bg-grey-50 border border-grey-200 font-semibold text-sm px-4 py-2 rounded-xl"
8682
>{{ plugin.name }}</span>
8783
</a>
8884
</div>
8985
</div>
9086

9187
<div v-if="website.modules.length">
9288
<div class="mb-4">
93-
<h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase">
94-
<ModulesIcon class="h-6 mr-2 text-primary-700 opacity-50" />Nuxt Modules
89+
<h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase">
90+
<ModulesIcon class="h-6 mr-2 text-primary-500 opacity-50" />Nuxt Modules
9591
</h3>
9692
</div>
9793

@@ -104,7 +100,7 @@
104100
class="mr-4 mb-4"
105101
>
106102
<span
107-
class="block bg-grey-100 font-semibold px-4 py-2 text-sm rounded-full"
103+
class="block bg-grey-50 border border-grey-200 font-semibold text-sm px-4 py-2 rounded-xl"
108104
>{{ module.name }}</span>
109105
</a>
110106
</div>
@@ -121,28 +117,24 @@
121117
import { mapState } from 'vuex'
122118
123119
import LogoIcon from '../images/logo.svg?inline'
124-
import XmarkCircleFillIcon from '../images/icons/xmark-circle-fill.svg?inline'
125-
import CheckmarkCircleFillIcon from '../images/icons/checkmark-circle-fill.svg?inline'
126-
import VueIcon from '../images/icons/vue.svg?inline'
127-
import GithubIcon from '../images/icons/github.svg?inline'
128-
import ExternalLinkIcon from '../images/icons/external-link.svg?inline'
129-
import ModulesIcon from '../images/icons/modules.svg?inline'
130-
import PluginsIcon from '../images/icons/plugins.svg?inline'
131-
import ConfigIcon from '../images/icons/config.svg?inline'
120+
import ExternalLinkIcon from '../images/external-link.svg?inline'
121+
import TwitterIcon from '../images/twitter.svg?inline'
122+
import GithubIcon from '../images/github.svg?inline'
123+
import InfoIcon from '../images/info.svg?inline'
124+
import PluginsIcon from '../images/plugins.svg?inline'
125+
import ModulesIcon from '../images/modules.svg?inline'
132126
133127
import ListBlock from '../components/ListBlock.vue'
134128
135129
export default {
136130
components: {
137131
LogoIcon,
138-
XmarkCircleFillIcon,
139-
CheckmarkCircleFillIcon,
132+
ExternalLinkIcon,
133+
TwitterIcon,
140134
GithubIcon,
141-
VueIcon,
142-
ModulesIcon,
135+
InfoIcon,
143136
PluginsIcon,
144-
ConfigIcon,
145-
ExternalLinkIcon,
137+
ModulesIcon,
146138
ListBlock
147139
},
148140
computed: {

src/tailwind.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@
2525
.extension {
2626
width: 600px;
2727
height: 300px;
28-
@apply font-display text-base;
28+
@apply font-display text-base antialiased;
2929
}

tailwind.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ module.exports = {
3636
extend: {
3737
fontFamily: {
3838
display: ['PTRootUI', ...defaultTheme.fontFamily.sans]
39+
},
40+
borderRadius: {
41+
xl: '0.875rem'
3942
}
4043
}
4144
},

0 commit comments

Comments
 (0)