From 92608480acc8e5d672cead5217d346ad6e5dc821 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Tue, 12 Aug 2025 20:49:08 +0330
Subject: [PATCH] add: order rate page dark theme

---
 .../(Main)/order/rate/[orderId]/page.tsx      | 22 ++++++++++++++-----
 src/components/button/ToggleButton.tsx        |  6 ++---
 src/components/ui/slider.tsx                  |  4 ++--
 src/components/utils/RateSelectionBar.tsx     | 12 +++++-----
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx b/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx
index 5bd2a48..f2afa22 100644
--- a/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx
+++ b/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import ToggleButton from '@/components/button/ToggleButton';
+import ToggleButton, { ToggleButtonClassNames } from '@/components/button/ToggleButton';
 import TabContainer, { TabContainerClassNames, TabContainerRenderType } from '@/components/tab/TabContainer';
 import { TabHeader } from '@/components/tab/TabHeader';
 import { Button } from '@/components/ui/button';
@@ -26,7 +26,14 @@ function RatingOrderIndex({ }: Props) {
             <>
                 <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
                     {[...Array(6)].map((_, i) => (
-                        <ToggleButton key={i} name={`weekness${i}`}>
+                        <ToggleButton
+                        className={{
+                                ...ToggleButtonClassNames,
+                                wrapperActive: 'border-red-400',
+                                contentActive: 'text-red-400'
+                            }}
+                            key={i}
+                            name={`weekness${i}`}>
                             {t(`Tabs.Weeknesses.Options.${i}`)}
                         </ToggleButton>
                     ))}
@@ -74,7 +81,7 @@ function RatingOrderIndex({ }: Props) {
                                 ...TabContainerClassNames,
                                 wrapper: 'p-2!',
                                 scrollView: clsx(
-                                    'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! grid! grid-cols-2 px-2! py-2! pt-2!', TabContainerClassNames.scrollView
+                                    'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! dark:bg-neutral-900! not-dark:gradient-border! grid! grid-cols-2 px-2! py-2! !pb-2 w-full overflow-y-hidden justify-center items-center',
                                 ),
                                 title: 'text-sm2! font-normal mt-1',
                                 header: 'rounded-lg h-7! w-full',
@@ -87,7 +94,7 @@ function RatingOrderIndex({ }: Props) {
                         <div className="w-full mt-6">
                             <label htmlFor='userOpinion'>{t("InputComment.Label")}</label>
                             <br />
-                            <textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.Placeholder")} className='mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
+                            <textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.Placeholder")} className='dark:border-neutral-600 mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
                             <br />
                         </div>
                     </div>
@@ -96,7 +103,12 @@ function RatingOrderIndex({ }: Props) {
                     <Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>
                         {t("ButtonSubmit")}
                     </Button>
-                    <Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>
+                    <Button
+                        type='submit'
+                        className='
+                            mt-auto rounded-xl bg-white dark:bg-container cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700
+                            border border-foreground dark:border-neutral-600 text-foreground font-normal'
+                    >
                         {t("ButtonCancel")}
                     </Button>
                 </div>
diff --git a/src/components/button/ToggleButton.tsx b/src/components/button/ToggleButton.tsx
index 46ad8ef..8cfbd62 100644
--- a/src/components/button/ToggleButton.tsx
+++ b/src/components/button/ToggleButton.tsx
@@ -33,10 +33,10 @@ export type ToggleButtonClassName = {
 export const ToggleButtonClassNames: ToggleButtonClassName = {
     wrapper:
         'relative transition-all border border-solid duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip',
-    wrapperDeactive: 'bg-white border-neutral-200',
+    wrapperDeactive: 'bg-container border-neutral-200 dark:border-neutral-500',
     wrapperActive: 'border-[#439C46]',
     wrapperDisabled: 'bg-disabled text-disabled-text',
-    wrapperEnabled: 'bg-container text-white hover:bg-gray-100 active:brightness-110',
+    wrapperEnabled: 'bg-container text-white hover:bg-gray-100 dark:hover:bg-neutral-700 active:brightness-110',
     wrapperPending: 'bg-transparent text-transparent cursor-auto',
     content: 'text-xs transition-all duration-150',
     contentDeactive: 'text-foreground',
@@ -98,7 +98,7 @@ function ToggleButton({
             >
                 {pending && (
                     <motion.div
-                        className="absolute left-0 top-0 h-full w-full bg-neutral-200"
+                        className="absolute left-0 top-0 h-full w-full bg-neutral-200 "
                         initial={{ y: '100%' }}
                         animate={{ y: 0 }}
                     >
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index d80f415..3e2ff7c 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -45,7 +45,7 @@ function Slider({
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-primary dark:bg-neutral-200 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           )}
         />
       </SliderPrimitive.Track>
@@ -53,7 +53,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-primary bg-background ring-ring/50 block size-3 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className="border-primary bg-background dark:bg-foreground ring-ring/50 block size-3 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/src/components/utils/RateSelectionBar.tsx b/src/components/utils/RateSelectionBar.tsx
index 5e2e6c3..f658325 100644
--- a/src/components/utils/RateSelectionBar.tsx
+++ b/src/components/utils/RateSelectionBar.tsx
@@ -11,11 +11,11 @@ type Props = {
 }
 
 const defaultContent: Array<{ value: string, icon: React.ReactElement }> = [
-    { value: '5', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
-    { value: '4', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
-    { value: '3', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
-    { value: '2', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
-    { value: '1', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
+    { value: '5', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
+    { value: '4', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
+    { value: '3', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
+    { value: '2', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
+    { value: '1', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
 ]
 
 function RateSelectionBar({ name, content = defaultContent, className = '' }: Props) {
@@ -32,7 +32,7 @@ function RateSelectionBar({ name, content = defaultContent, className = '' }: Pr
                 {content?.map((value, index) => {
                     return (
                         <span key={index} className='flex items-center gap-1'>
-                            <Star1 className='fill-black mb-1' size={12} />
+                            <Star1 className='fill-black dark:fill-neutral-200 me-0.5 mb-1' size={12} />
                             <span className='text-xs font-medium'>{value.value}</span>
                         </span>
                     )