From 38f5c8c7b0b878b3d091c6ec733932648534404f Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 2 Oct 2024 05:54:23 +0000
Subject: [PATCH] fix: error cases

---
 .../nc-gui/components/feed/Changelog/Item.vue | 12 ++++-----
 .../components/feed/Changelog/index.vue       |  2 +-
 packages/nc-gui/components/feed/Error.vue     | 26 ++++++++++++-------
 .../nc-gui/components/feed/Recents/Card.vue   |  6 ++++-
 packages/nc-gui/components/feed/Social.vue    |  2 +-
 packages/nc-gui/components/feed/View.vue      | 11 +++++---
 .../nc-gui/components/feed/Youtube/index.vue  |  4 +--
 7 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/feed/Changelog/Item.vue b/packages/nc-gui/components/feed/Changelog/Item.vue
index 63791a0fa4..985282bd22 100644
--- a/packages/nc-gui/components/feed/Changelog/Item.vue
+++ b/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;
   }
 }
 
diff --git a/packages/nc-gui/components/feed/Changelog/index.vue b/packages/nc-gui/components/feed/Changelog/index.vue
index d71cf076db..ce94240d0e 100644
--- a/packages/nc-gui/components/feed/Changelog/index.vue
+++ b/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>
 
diff --git a/packages/nc-gui/components/feed/Error.vue b/packages/nc-gui/components/feed/Error.vue
index c56bb80d03..10970c3845 100644
--- a/packages/nc-gui/components/feed/Error.vue
+++ b/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>
diff --git a/packages/nc-gui/components/feed/Recents/Card.vue b/packages/nc-gui/components/feed/Recents/Card.vue
index bb66ecd148..f8b7681eab 100644
--- a/packages/nc-gui/components/feed/Recents/Card.vue
+++ b/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>
diff --git a/packages/nc-gui/components/feed/Social.vue b/packages/nc-gui/components/feed/Social.vue
index 9fb93436c5..5ce6ed6958 100644
--- a/packages/nc-gui/components/feed/Social.vue
+++ b/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"
diff --git a/packages/nc-gui/components/feed/View.vue b/packages/nc-gui/components/feed/View.vue
index 1a4b5cd771..ad70e8c375 100644
--- a/packages/nc-gui/components/feed/View.vue
+++ b/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,
   },
diff --git a/packages/nc-gui/components/feed/Youtube/index.vue b/packages/nc-gui/components/feed/Youtube/index.vue
index 085abcdd78..d58dc22220 100644
--- a/packages/nc-gui/components/feed/Youtube/index.vue
+++ b/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" />