fix: error cases

packages/nc-gui/components/feed/Changelog/Item.vue

@@ -88,7 +88,7 @@ const renderedText = computedAsync(async () => {
                 :class="{
                   'text-red-500': tag.color === 'red',
                   'text-purple-500': tag.color === 'purple',
-                  'text-green-500': tag.color === 'green',
+                  'text-green-700': tag.color === 'green',
                 }"
                 class="leading-5 text-[13px]"
               >
@@ -100,7 +100,7 @@ const renderedText = computedAsync(async () => {
             <NcBadge
               :border="false"
               color="brand"
-              class="font-semibold nc-title-badge cursor-pointer"
+              class="font-semibold text-[13px] nc-title-badge cursor-pointer"
               @click="openLink(item.Url)"
             >
               {{ Title }}
@@ -113,7 +113,7 @@ const renderedText = computedAsync(async () => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .nc-title-badge {
   width: fit-content;
 }
@@ -123,10 +123,8 @@ const renderedText = computedAsync(async () => {
 }
 
 .prose {
-  .prose ul > li {
-    &:before {
-      @apply !bg-brand-500;
-    }
+  img {
+    @apply !rounded-lg;
   }
 }
 

packages/nc-gui/components/feed/Changelog/index.vue

@@ -29,7 +29,7 @@ const { isLoading } = useInfiniteScroll(
     <div v-if="isErrorOccurred?.github && !githubFeed.length" class="h-full flex justify-center items-center">
       <FeedError page="github" />
     </div>
-    <div v-if="isLoading && !githubFeed.length" class="flex items-center justify-center h-full w-full">
+    <div v-else-if="isLoading && !githubFeed.length" class="flex items-center justify-center h-full w-full">
       <GeneralLoader size="xlarge" />
     </div>
 

packages/nc-gui/components/feed/Error.vue

@@ -24,17 +24,23 @@ const triggerReload = async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 items-center justify-center">
-    <GeneralIcon icon="warning" class="text-gray-500 w-8 h-8" />
-    <span class="text-gray-600 text-base font-semibold"> Unable to load feed </span>
+  <div class="flex items-center justify-center">
+    <div class="w-[696px] error-box gap-6 border-1 border-gray-200 py-6 rounded-xl flex flex-col items-center justify-center">
+      <GeneralIcon icon="alertTriangle" class="text-gray-500 w-8 h-8" />
+      <span class="text-gray-600 text-base font-semibold"> Unable to load feed </span>
 
-    <NcButton type="secondary" size="small" @click="triggerReload">
-      <div class="flex items-center text-gray-700 gap-2">
-        <GeneralIcon icon="refreshCw" />
-        <span class="text-sm"> Retry </span>
-      </div>
-    </NcButton>
+      <NcButton type="secondary" size="small" @click="triggerReload">
+        <div class="flex items-center text-gray-700 gap-2">
+          <GeneralIcon icon="refreshCw" />
+          <span class="text-sm"> Refresh </span>
+        </div>
+      </NcButton>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.error-box {
+  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04);
+}
+</style>

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

@@ -40,7 +40,7 @@ const renderedText = computedAsync(async () => {
 </script>
 
 <template>
-  <div class="bg-white shadow-sm rounded-2xl" style="width: 656px">
+  <div class="bg-white recent-card border-gray-200 border-1 rounded-2xl" style="width: 656px">
     <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" />
@@ -77,4 +77,8 @@ const renderedText = computedAsync(async () => {
     @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);
+}
 </style>

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

@@ -35,7 +35,7 @@ const openUrl = (url: string) => {
 <template>
   <div style="width: 232px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1">
     <div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col">
       <div
         v-for="social in socialIcons"
         :key="social.name"

packages/nc-gui/components/feed/View.vue

@@ -6,16 +6,21 @@ import FeedTwitter from './Twitter/index.vue'
 import FeedRoadmap from './Roadmap.vue'
 const { activeTab } = useProductFeed()
 
-const tabs = [
+const tabs: Array<{
+  key: string
+  icon: keyof typeof iconMap
+  title: string
+  container: any
+}> = [
   {
     key: 'recents',
-    icon: 'clock',
+    icon: 'ncClock',
     title: 'Recents',
     container: FeedRecents,
   },
   {
     key: 'changelog',
-    icon: 'list',
+    icon: 'ncList',
     title: 'Changelog',
     container: FeedChangelog,
   },

packages/nc-gui/components/feed/Youtube/index.vue

@@ -25,9 +25,9 @@ const gotoChannel = () => {
   <div
     ref="scrollContainer"
     :style="{
-      height: 'calc(100dvh - var(--toolbar-height) - 5.25rem)',
+      height: 'calc(100dvh - var(--toolbar-height) - 3rem)',
     }"
-    class="overflow-y-auto nc-scrollbar-md mt-9 mx-auto w-full"
+    class="overflow-y-auto nc-scrollbar-md pt-9 mx-auto w-full"
   >
     <div v-if="isErrorOccurred?.youtube && !youtubeFeed.length" class="h-full flex justify-center items-center">
       <FeedError page="youtube" />