Merge pull request #3883 from nocodb/refactor/icon-animation

packages/nc-gui/assets/style.scss

@@ -100,7 +100,7 @@ a {
 }
 
 .animated-bg-gradient {
-  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #9ee59e);
+  background: linear-gradient(122deg, #6f3381, #ec4899, #fedfe1, #4351e8);
   background-size: 800% 800%;
 
   -webkit-animation: gradient 4s ease infinite;

packages/nc-gui/components/general/NocoIcon.vue

@@ -2,13 +2,21 @@
 interface Props {
   width?: number
   height?: number
+  animate?: boolean
 }
 
-const { width = 90, height = 90 } = defineProps<Props>()
+const { width = 90, height = 90, animate = false } = defineProps<Props>()
 </script>
 
 <template>
-  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg">
-    <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
+    <div class="relative">
+      <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+
+      <template v-if="animate">
+        <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />
+        <div class="animate-ping bg-primary bg-opacity-50 rounded-full z-0 absolute bottom-0.9 right-1 h-5.5 w-5.5" />
+      </template>
+    </div>
   </div>
 </template>

packages/nc-gui/pages/forgot-password.vue

@@ -55,10 +55,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon
-          class="color-transition hover:(ring ring-accent)"
-          :class="[isLoading ? 'animated-bg-gradient' : '']"
-        />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
         <div class="self-center flex flex-col justify-center items-center text-center gap-2">
           <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>

packages/nc-gui/pages/index/index/[projectId].vue

@@ -68,7 +68,7 @@ onMounted(async () => {
   <div
     class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

packages/nc-gui/pages/index/index/create-external.vue

@@ -337,7 +337,7 @@ onMounted(async () => {
   <div
     class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

packages/nc-gui/pages/index/index/create.vue

@@ -66,7 +66,7 @@ onMounted(async () => {
   <div
     class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

packages/nc-gui/pages/signin.vue

@@ -67,10 +67,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon
-          class="color-transition hover:(ring ring-accent)"
-          :class="[isLoading ? 'animated-bg-gradient' : '']"
-        />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
         <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
 

packages/nc-gui/pages/signup/[[token]].vue

@@ -85,10 +85,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon
-          class="color-transition hover:(ring ring-accent)"
-          :class="[isLoading ? 'animated-bg-gradient' : '']"
-        />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
         <h1 class="prose-2xl font-bold self-center my-4">
           {{ $t('general.signUp') }}