Improve the non paid user headings

src/components/GenerateCourse/AICourseLimit.tsx

@@ -31,19 +31,22 @@ export function AICourseLimit(props: AICourseLimitProps) {
 
   const totalPercentage = getPercentage(used, limit);
 
-  // has consumed 80% of the limit
+  // has consumed 85% of the limit
-  const isNearLimit = used >= limit * 0.8;
+  const isNearLimit = used >= limit * 0.85;
   const isPaidUser = userBillingDetails.status === 'active';
 
   return (
     <>
-      <button
+      {!isPaidUser ||
-        className="mr-1 flex items-center gap-1 text-sm font-medium underline underline-offset-2 lg:hidden"
+        (isNearLimit && (
-        onClick={() => onShowLimits()}
+          <button
-      >
+            className="mr-1 flex items-center gap-1 text-sm font-medium underline underline-offset-2 lg:hidden"
-        <Info className="size-4" />
+            onClick={() => onShowLimits()}
-        {totalPercentage}% limit used
+          >
-      </button>
+            <Info className="size-4" />
+            {totalPercentage}% limit used
+          </button>
+        ))}
 
       {(!isPaidUser || isNearLimit) && (
         <button