Browse Source

fix: color and font size corrections

pull/9323/head
DarkPhoenix2704 2 months ago
parent
commit
d16fc5b107
  1. 13
      packages/nc-gui/assets/nc-icons/nocodb.svg
  2. 19
      packages/nc-gui/components/feed/Recents/Card.vue
  3. 2
      packages/nc-gui/components/feed/Social.vue
  4. 12
      packages/nc-gui/components/feed/Youtube/Player.vue
  5. 2
      packages/nc-gui/utils/iconUtils.ts

13
packages/nc-gui/assets/nc-icons/nocodb.svg

@ -0,0 +1,13 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="Vector" d="M16.6797 1H3.32031C2.03884 1 1 2.03884 1 3.32031V16.6797C1 17.9612 2.03884 19 3.32031 19H16.6797C17.9612 19 19 17.9612 19 16.6797V3.32031C19 2.03884 17.9612 1 16.6797 1Z" fill="white"/>
<path id="Vector_2" d="M16.6797 1H3.32031C2.03884 1 1 2.03884 1 3.32031V16.6797C1 17.9612 2.03884 19 3.32031 19H16.6797C17.9612 19 19 17.9612 19 16.6797V3.32031C19 2.03884 17.9612 1 16.6797 1Z" fill="url(#paint0_linear_304_21100)"/>
<path id="Vector_3" d="M4.86719 9.50131L7.31271 11.9484V15.8224H4.86719V9.50131ZM15.139 4.29891V15.4234C15.139 15.6518 14.9527 15.8365 14.7244 15.8365C14.6148 15.8365 14.51 15.7942 14.4318 15.716L4.86719 7.0902V4.64938C4.86719 4.42094 5.05182 4.23633 5.28025 4.23633H5.30217C5.41169 4.23633 5.51807 4.28014 5.59474 4.35681L12.6919 10.5151V4.29891H15.139Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_304_21100" x1="9.99859" y1="25.0599" x2="9.99859" y2="-4.04602" gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8"/>
<stop offset="1" stop-color="#2A1EA5"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

19
packages/nc-gui/components/feed/Recents/Card.vue

@ -32,7 +32,7 @@ const renderedText = computedAsync(async () => {
.use(rehypeStringify)
.process(
Description.replace(/!\[.*?\]\(.*?\)/g, '')
.substring(0, 300)
.substring(0, 250)
.concat('...')
.concat(`&nbsp; [Read more](${Url})`),
)
@ -44,11 +44,11 @@ const renderedText = computedAsync(async () => {
<div class="flex items-center justify-between px-5 py-4">
<div class="flex items-center gap-3">
<component :is="feedIcon[source as any]" class="w-4 h-4 stroke-transparent" />
<span class="font-weight-medium leading-5 cursor-pointer" @click="openLink(Url)">
<span class="font-weight-medium text-nc-content-gray leading-5 cursor-pointer" @click="openLink(Url)">
{{ source }}
</span>
</div>
<div class="text-sm text-gray-700 leading-5">
<div class="text-sm text-nc-content-gray-muted leading-5">
{{ timeAgo(CreatedAt) }}
</div>
</div>
@ -63,12 +63,12 @@ const renderedText = computedAsync(async () => {
</template>
<template v-else-if="source === 'Youtube'">
<YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :controls="1" :height="330" :width="538" :autoplay="0" />
<div class="p-5 flex flex-col text-gray-900 gap-4">
<div class="text-2xl font-semibold">
<div class="p-5 flex flex-col text-nc-content-gray-emphasis gap-4">
<div class="text-2xl font-semibold truncate">
{{ Title }}
</div>
<div class="font-weight-base">
<div class="font-weight-base text-md">
{{ Description.substring(0, 200).concat('...') }}
</div>
</div>
@ -85,11 +85,12 @@ const renderedText = computedAsync(async () => {
}
h1 {
@apply text-2xl font-semibold truncate;
font-weight: 500;
@apply text-2xl text-nc-content-gray-emphasis truncate leading-9 mb-0;
font-weight: 700;
}
p {
@apply text-md text-nc-content-gray-emphasis leading-6;
@apply text-nc-content-gray-emphasis leading-5;
font-size: 14px !important;
}
}
}

2
packages/nc-gui/components/feed/Social.vue

@ -22,7 +22,7 @@ const socialIcons = [
},
{
name: 'Forum',
icon: iconMap.langNocodbSdk,
icon: iconMap.nocodb,
link: 'https://forum.nocodb.com/',
},
]

12
packages/nc-gui/components/feed/Youtube/Player.vue

@ -24,11 +24,11 @@ const {
:controls="1"
/>
<div class="flex flex-col p-5 gap-4">
<div class="text-gray-900 font-bold text-2xl">
<div class="text-nc-content-gray-emphasis flex flex-col p-5 gap-4">
<div class="font-bold leading-9 text-2xl">
{{ Title }}
</div>
<div class="text-gray-900">
<div class="text-md leading-5">
{{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
</div>
</div>
@ -36,12 +36,6 @@ const {
</template>
<style scoped lang="scss">
.prose {
a {
@apply !text-gray-900;
}
}
.recent-card {
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04);
}

2
packages/nc-gui/utils/iconUtils.ts

@ -219,6 +219,7 @@ import NcGitCommit from '~icons/nc-icons/git-commit'
import NcCircle from '~icons/nc-icons/circle'
import NcServer1 from '~icons/nc-icons/server1'
import NcThumbsUpOutline from '~icons/nc-icons/thumbs-up-outline'
import NcNocoDB from '~icons/nc-icons/nocodb'
// Sync data
import NcAppleSolid from '~icons/nc-icons/apple_solid'
@ -763,6 +764,7 @@ export const iconMap = {
cellButton: NcCellButton,
camera: NcCamera,
megaPhone: NcMegaPhone,
nocodb: NcNocoDB,
office: NcOffice,
sort: Sort,

Loading…
Cancel
Save