Home Explore Help
Sign In
Taio
/
workout
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat(layout): update layout styles to include new background gradients for light and dark themes
refactor(auth): remove unused i18n import in useLogout hook for cleaner code
style(header): adjust logo size and layout for better responsiveness
refactor(workout-session): simplify handleDelete function parameter for clarity
chore(globals.css): remove deprecated Quill editor styles and add new background styles for hero sections

Mathias 1 month ago
parent
a32070aabc
commit
8d220e9eee
5 changed files with 31 additions and 75 deletions
Split View Show Diff Stats
  1. 1 4
      app/[locale]/layout.tsx
  2. 0 2
      src/features/auth/model/useLogout.ts
  3. 3 3
      src/features/layout/Header.tsx
  4. 2 2
      src/features/workout-session/ui/workout-session-list.tsx
  5. 25 64
      src/shared/styles/globals.css

+ 1 - 4
app/[locale]/layout.tsx
View File 

@@ -102,15 +102,12 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
 
         <body
 
           className={cn(
 
             "flex flex-col justify-between items-center p-8 min-h-screen max-sm:p-0 max-sm:min-h-full text-sm/[22px] font-normal text-base-content bg-base-200 dark:bg-[#18181b] dark:text-gray-200 antialiased",
 
+            "bg-hero-light dark:bg-hero-dark",
 
             GeistMono.variable,
 
             GeistSans.variable,
 
             inter.variable,
 
             permanentMarker.variable,
 
           )}
 
-          style={{
 
-            backgroundImage:
 
-              "radial-gradient(circle at 82% 60%, rgba(59, 59, 59,0.06) 0%, rgba(59, 59, 59,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 36% 0%, rgba(185, 185, 185,0.06) 0%, rgba(185, 185, 185,0.06) 59%,transparent 59%, transparent 100%),radial-gradient(circle at 58% 82%, rgba(183, 183, 183,0.06) 0%, rgba(183, 183, 183,0.06) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 71% 32%, rgba(19, 19, 19,0.06) 0%, rgba(19, 19, 19,0.06) 40%,transparent 40%, transparent 100%),radial-gradient(circle at 77% 5%, rgba(31, 31, 31,0.06) 0%, rgba(31, 31, 31,0.06) 52%,transparent 52%, transparent 100%),radial-gradient(circle at 96% 80%, rgba(11, 11, 11,0.06) 0%, rgba(11, 11, 11,0.06) 73%,transparent 73%, transparent 100%),radial-gradient(circle at 91% 59%, rgba(252, 252, 252,0.06) 0%, rgba(252, 252, 252,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 52% 82%, rgba(223, 223, 223,0.06) 0%, rgba(223, 223, 223,0.06) 87%,transparent 87%, transparent 100%),radial-gradient(circle at 84% 89%, rgba(160, 160, 160,0.06) 0%, rgba(160, 160, 160,0.06) 57%,transparent 57%, transparent 100%),linear-gradient(90deg, rgb(254,242,164),rgb(166, 255, 237))",
 
-          }}
 
           suppressHydrationWarning
 
         >
 
           <Providers locale={locale}>

+ 0 - 2
src/features/auth/model/useLogout.ts
View File 

@@ -3,11 +3,9 @@
 
 import { useRouter } from "next/navigation";
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 
-import { useI18n } from "locales/client";
 
 import { authClient } from "@/features/auth/lib/auth-client";
 
 
 export const useLogout = (redirectUrl: string = "/") => {
 
-  const t = useI18n();
 
   const router = useRouter();
 
   const queryClient = useQueryClient();

+ 3 - 3
src/features/layout/Header.tsx
View File 

@@ -31,17 +31,17 @@ export const Header = () => {
 
           className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-4 py-2 transition-all duration-200 dark:text-gray-200 dark:bg-gray-800"
 
           href="/"
 
         >
 
-          <div className="relative">
 
+          <div className="relative flex-none">
 
             <Image
 
               alt="workout cool logo"
 
-              className="h-8 w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
 
+              className="h-6 w-6 sm:h-8 sm:w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
 
               height={32}
 
               src={Logo}
 
               width={32}
 
             />
 
             <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
 
           </div>
 
-          <div className="flex flex-col">
 
+          <div className="flex-col hidden sm:flex">
 
             <span className="font-bold transition-colors duration-200 group-hover:text-blue-400">Workout.cool</span>
 
           </div>
 
         </Link>

+ 2 - 2
src/features/workout-session/ui/workout-session-list.tsx
View File 

@@ -25,10 +25,10 @@ export function WorkoutSessionList() {
 
   //   workoutSessionLocal.getAll().sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()),
 
   // );
 
 
-  const { data: sessions = [], isLoading } = useWorkoutSessions();
 
+  const { data: sessions = [] } = useWorkoutSessions();
 
   console.log("sessions:", sessions);
 
 
-  const handleDelete = (id: string) => {
 
+  const handleDelete = (_id: string) => {
 
     // TODO: delete by service
 
     // workoutSessionLocal.remove(id);
 
   };

+ 25 - 64
src/shared/styles/globals.css
View File 

@@ -221,71 +221,32 @@
 
   @apply ltr:lg:ml-[60px] rtl:lg:mr-[60px];
 
 }
 
 
-/* Text Editor */
 
-.quill {
 
-  @apply rounded-lg;
 
+.bg-hero-light {
 
+  background-image:
 
+    radial-gradient(circle at 82% 60%, rgba(59, 59, 59, 0.06) 0%, rgba(59, 59, 59, 0.06) 69%, transparent 69%, transparent 100%),
 
+    radial-gradient(circle at 36% 0%, rgba(185, 185, 185, 0.06) 0%, rgba(185, 185, 185, 0.06) 59%, transparent 59%, transparent 100%),
 
+    radial-gradient(circle at 58% 82%, rgba(183, 183, 183, 0.06) 0%, rgba(183, 183, 183, 0.06) 17%, transparent 17%, transparent 100%),
 
+    radial-gradient(circle at 71% 32%, rgba(19, 19, 19, 0.06) 0%, rgba(19, 19, 19, 0.06) 40%, transparent 40%, transparent 100%),
 
+    radial-gradient(circle at 77% 5%, rgba(31, 31, 31, 0.06) 0%, rgba(31, 31, 31, 0.06) 52%, transparent 52%, transparent 100%),
 
+    radial-gradient(circle at 96% 80%, rgba(11, 11, 11, 0.06) 0%, rgba(11, 11, 11, 0.06) 73%, transparent 73%, transparent 100%),
 
+    radial-gradient(circle at 91% 59%, rgba(252, 252, 252, 0.06) 0%, rgba(252, 252, 252, 0.06) 44%, transparent 44%, transparent 100%),
 
+    radial-gradient(circle at 52% 82%, rgba(223, 223, 223, 0.06) 0%, rgba(223, 223, 223, 0.06) 87%, transparent 87%, transparent 100%),
 
+    radial-gradient(circle at 84% 89%, rgba(160, 160, 160, 0.06) 0%, rgba(160, 160, 160, 0.06) 57%, transparent 57%, transparent 100%),
 
+    linear-gradient(90deg, rgb(254, 242, 164), rgb(166, 255, 237));
 
 }
 
-.ql-editor {
 
-  @apply max-h-[300px] overflow-y-auto !break-all text-sm !font-medium text-black dark:text-white;
 
-}
 
-.ql-editor.ql-editor::before {
 
-  @apply !text-sm/6 !font-medium !not-italic;
 
-}
 
-.quill .ql-container.ql-snow,
 
-.ql-toolbar.ql-snow {
 
-  @apply !border-0;
 
-}
 
-.quill .ql-toolbar.ql-snow {
 
-  @apply rounded-t-lg !border-b border-gray-300 bg-gray-200 p-0 dark:border-white/20 dark:bg-black/5;
 
-}
 
-.product-editor.quill .ql-editor {
 
-  @apply min-h-28 resize-y;
 
-}
 
-.quill .ql-toolbar.ql-snow .ql-formats {
 
-  @apply mr-0 space-x-2.5 border-r border-gray-300 p-2.5 dark:border-white/20;
 
-}
 
-.quill .ql-toolbar.ql-snow .ql-formats:last-child {
 
-  @apply border-0;
 
-}
 
-.ql-picker-label {
 
-  @apply p-0;
 
-}
 
-.ql-picker-label svg {
 
-  @apply rtl:!right-auto rtl:left-0;
 
-}
 
-.quill .ql-toolbar.ql-snow .ql-formats > button {
 
-  @apply grid size-5 place-content-center p-0;
 
-}
 
-.quill .ql-toolbar.ql-snow .ql-formats > button > svg {
 
-  @apply size-4;
 
-}
 
-.blog-editor.quill .ql-editor {
 
-  @apply min-h-64 resize-y;
 
-}
 
-.toggle-editor.quill .ql-editor {
 
-  @apply min-h-60 resize-none bg-white py-7 sm:min-h-32;
 
-}
 
-.ql-formats {
 
-  @apply h-10 border-b border-gray-300 sm:border-0;
 
-}
 
-.toggle-editor.quill .ql-editor {
 
-  @apply dark:bg-black-dark;
 
-}
 
-.ql-editor.ql-blank::before {
 
-  @apply !text-gray dark:!text-gray-600;
 
-}
 
-.ql-formats .ql-stroke,
 
-.ql-formats button {
 
-  @apply dark:!stroke-gray-600 dark:text-gray-600;
 
-}
 
-.ql-picker-item:hover {
 
-  @apply dark:!text-primary;
 
-}
 
-.ql-picker-options {
 
-  @apply dark:!border-gray-700/50 dark:!bg-black-dark;
 
-}
 
-.ql-formats button.ql-active {
 
-  @apply !text-primary;
 
+
 
+.bg-hero-dark {
 
+  background-image:
 
+    radial-gradient(circle at 82% 60%, rgba(80, 80, 120, 0.1) 0%, rgba(80, 80, 120, 0.1) 69%, transparent 69%, transparent 100%),
 
+    radial-gradient(circle at 36% 0%, rgba(40, 40, 60, 0.1) 0%, rgba(40, 40, 60, 0.1) 59%, transparent 59%, transparent 100%),
 
+    radial-gradient(circle at 58% 82%, rgba(60, 60, 100, 0.1) 0%, rgba(60, 60, 100, 0.1) 17%, transparent 17%, transparent 100%),
 
+    radial-gradient(circle at 71% 32%, rgba(19, 19, 40, 0.1) 0%, rgba(19, 19, 40, 0.1) 40%, transparent 40%, transparent 100%),
 
+    radial-gradient(circle at 77% 5%, rgba(31, 31, 60, 0.1) 0%, rgba(31, 31, 60, 0.1) 52%, transparent 52%, transparent 100%),
 
+    radial-gradient(circle at 96% 80%, rgba(11, 11, 30, 0.1) 0%, rgba(11, 11, 30, 0.1) 73%, transparent 73%, transparent 100%),
 
+    radial-gradient(circle at 91% 59%, rgba(80, 80, 120, 0.1) 0%, rgba(80, 80, 120, 0.1) 44%, transparent 44%, transparent 100%),
 
+    radial-gradient(circle at 52% 82%, rgba(60, 60, 100, 0.1) 0%, rgba(60, 60, 100, 0.1) 87%, transparent 87%, transparent 100%),
 
+    radial-gradient(circle at 84% 89%, rgba(80, 80, 120, 0.1) 0%, rgba(80, 80, 120, 0.1) 57%, transparent 57%, transparent 100%),
 
+    linear-gradient(90deg, #232324, #18181b);
 
 }
 
 
 @keyframes fade-in-up {