Updated skeleton colors and added translations for popup app

PsychoSanchez · Nov 9, 2024 · 8f3904c · 8f3904c
1 parent 4c32e24
commit 8f3904c
Show file tree

Hide file tree

Showing 17 changed files with 601 additions and 334 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/popup/App.tsx b/src/popup/App.tsx
@@ -1,6 +1,7 @@
 import { Settings } from 'lucide-react';
 import * as React from 'react';
 
+import { i18n } from '@shared/services/i18n';
 import { IsoDate } from '@shared/types';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shared/ui/tabs';
 
@@ -41,10 +42,10 @@ export const PopupApp = () => {
       <Tabs defaultValue={Pages.Overall} className="p-2">
         <TabsList className="flex">
           <TabsTrigger className="flex-1" value={Pages.Overall}>
-            Overall
+            {i18n('PopupApp_OverallTabTitle')}
           </TabsTrigger>
           <TabsTrigger className="flex-1" value={Pages.Detailed}>
-            Detailed
+            {i18n('PopupApp_DetailedTabTitle')}
           </TabsTrigger>
           <TabsTrigger value={Pages.Preferences} className="max-w-[50px]">
             <Settings />

diff --git a/src/popup/components/AppLoadingSkeleton.tsx b/src/popup/components/AppLoadingSkeleton.tsx
@@ -5,11 +5,11 @@ import { Skeleton } from '@shared/ui/skeleton';
 export const AppLoadingSkeleton = () => {
   return (
     <div className="flex flex-col gap-2 w-full p-2">
-      <Skeleton className="h-10 min-w-32 w-full" />
-      <Skeleton className="h-32 min-w-32 w-full" />
-      <Skeleton className="h-32 min-w-32 w-full" />
-      <Skeleton className="h-48 min-w-32 w-full" />
-      <Skeleton className="h-64 min-w-32 w-full" />
+      <Skeleton className="h-10 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="h-48 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="h-64 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
     </div>
   );
 };
diff --git a/src/shared/blocks/Button.tsx b/src/shared/blocks/Button.tsx
diff --git a/src/shared/blocks/Icon.tsx b/src/shared/blocks/Icon.tsx
diff --git a/src/shared/blocks/Input.tsx b/src/shared/blocks/Input.tsx
@@ -1,52 +1,6 @@
 import * as React from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export const TextArea: React.FC<
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>
-> = ({ className, ...props }) => {
-  return (
-    <textarea
-      {...props}
-      className={twMerge(
-        'p-2 w-full resize-none rounded-lg outline-none border-2 border-solid bg-white text-neutral-800 border-neutral-300 focus:border-neutral-500 dark:bg-neutral-900 dark:text-neutral-200 dark:border-neutral-900 dark:focus:border-neutral-300',
-        className,
-      )}
-    />
-  );
-};
-
-export const Input: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = ({
-  className,
-  ...props
-}) => {
-  return (
-    <input
-      {...props}
-      className={twMerge(
-        'p-2 w-full rounded-lg outline-none border-2 border-solid bg-white text-neutral-800 border-neutral-300 focus:border-neutral-500 dark:bg-neutral-900 dark:text-neutral-200 dark:border-neutral-900 dark:focus:border-neutral-300',
-        className,
-      )}
-    />
-  );
-};
-
-export const Checkbox = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, ...props }, ref) => {
-  return (
-    <input
-      {...props}
-      ref={ref}
-      type="checkbox"
-      className={twMerge(
-        'cursor-pointer w-4 h-4 text-blue-400 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 outline-hidden',
-        className,
-      )}
-    />
-  );
-});
-
 export const Time = React.forwardRef<
   HTMLInputElement,
   React.InputHTMLAttributes<HTMLInputElement>

diff --git a/src/shared/blocks/Panel.tsx b/src/shared/blocks/Panel.tsx
diff --git a/src/shared/blocks/_stories/Button.stories.tsx b/src/shared/blocks/_stories/Button.stories.tsx
diff --git a/src/shared/blocks/_stories/Icon.stories.tsx b/src/shared/blocks/_stories/Icon.stories.tsx
diff --git a/src/shared/blocks/_stories/Input.stories.tsx b/src/shared/blocks/_stories/Input.stories.tsx
diff --git a/src/shared/blocks/_stories/Panel.stories.tsx b/src/shared/blocks/_stories/Panel.stories.tsx
diff --git a/src/shared/ui/skeleton.tsx b/src/shared/ui/skeleton.tsx
@@ -14,4 +14,13 @@ function Skeleton({
   );
 }
 
-export { Skeleton };
+function SkeletonStatic({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('rounded-md bg-primary/50', className)} {...props} />
+  );
+}
+
+export { Skeleton, SkeletonStatic };