UI & Performance improvements

public/changelog/changelog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "version": "3.0.1",
+        "name": "UI & Performance 🔥🎨",
+        "emoji": [
+            "🎨",
+            "🚀"
+        ],
+        "date": "2023-06-23",
+        "description": [
+            "Bug Fix",
+            "UI Improvements"
+        ]
+    },
     {
         "version": "3.0.0",
         "name": "UI & Performance 🔥🎨",
@@ -8,7 +21,7 @@
             "🚀",
             "🤩"
         ],
-        "date": "2023-0623",
+        "date": "2023-06-22",
         "description": [
             "Performance improvements in the main core.",
             "Newly added routines shows on the top of the list.",

src/info.ts

@@ -1,5 +1,5 @@
 const details = {
     name: 'routine',
-    version: '3.0.0'
+    version: '3.0.1'
 }
 export default details

src/lib/dateMethods.ts

@@ -23,7 +23,7 @@ export type TypedList = {
     routines: Array<Routine>,
     calendar: Array<Routine>,
     holiday: Array<Routine>,
-    all : Routine[]
+    all: Routine[]
 }
 
 export type TypedTypes = 'routines' | 'calendar' | 'holiday' | 'all'
@@ -64,7 +64,8 @@ export function searchActiveRoutine(routines: Array<Routine | any>) {
         if (a.status === 'done')
             return -1
         else
-            return a.endTime - a.startTime
+            return 1
+        // return a.endTime - b.startTime
     })
 
     // Move the done routines to the end
@@ -115,11 +116,11 @@ export function searchByDate(date: Date, routines: Array<Routine>): Array<Routin
                 break
         }
     }
-    // dayRoutines.sort((a, b) => {
-    //     // Keep holidays at the top
-    //     if (a.type === 'holiday') return -1
-    //     return a.startTime - b.startTime
-    // })
+    dayRoutines.sort((a: Routine, b: Routine) => {
+        // Keep holidays at the top
+        if (a.type === 'holiday') return -1
+        return a.startTime.getTime() - b.startTime.getTime()
+    })
     return dayRoutines
 }
 

src/pages/Home.tsx

@@ -62,6 +62,7 @@ function Home() {
 	// const timer1 = useRef<any>(null);
 	const timer2 = useRef<any>(null);
 	const [isRoutineEmpty, setIsRoutineEmpty] = useState(false)
+	let routines = useMemo(() => JSON.parse(ls.get('routines') || '[]'), [])
 
 	useEffect(() => {
 		// Check if started using
@@ -70,7 +71,6 @@ function Home() {
 		let startedUsing = ls.get('startedUsing')
 		if (!startedUsing) { navigate('/start', { replace: true }) }
 
-		let routines = JSON.parse(ls.get('routines') || '[]')
 		// Add index property to routines
 
 		// If there is no routine show an alert message to go to routine store

src/pages/NewRoutinesLoader.tsx

@@ -9,6 +9,7 @@ import ls from '../lib/storage'
 import { useNavigate } from 'react-router-dom'
 import { capitalize } from '../lib/lib'
 import Loading from '../components/Loading'
+import { RoutineDescription } from './Routines'
 
 
 export default function NewRoutinesLoader() {
@@ -101,12 +102,7 @@ export function GetRoutines(routines: Array<Routine>, navigate: Function) {
                 </div>
                 {
                     routine.description &&
-                    <div className="bottom flex flex-row gap-3">
-                        <BlankEmojiLeft />
-                        <div className="right flex-1 flex flex-row justify-between flex-center">
-                            <div className={`description font-medium text-[0.75rem] ${isActiveRoutine ? 'text-white/80' : 'text-secondary'} line-clamp-2`}><p>{routine.description}<small className='opacity-40 pl-1'> {routine.sub ? '#' + routine.sub : ''}</small></p></div>
-                        </div>
-                    </div>
+                    <RoutineDescription routine={routine} active={isActiveRoutine} />
                 }
                 {
                     isActiveRoutine &&

src/pages/Routines.tsx

@@ -66,7 +66,7 @@ function Routines() {
         }, 500);
     }, [])
     useEffect(() => {
-        if (currentSelectedType === 'all' || currentSelectedType === 'holiday') {
+        if (currentSelectedType === 'all' || currentSelectedType === 'holiday' || currentSelectedType === 'routines') {
             uScreenRoutines(null)
             setTimeout(() => {
                 uScreenRoutines(typedList[currentSelectedType])
@@ -99,10 +99,10 @@ function Routines() {
                 {/* <p className='text-[#777]/50 text-center mt-2 mb-5 text-sm font-medium'>All routines</p> */}
                 <div>
                     <div className='flex flex-wrap gap-3 pb-6'>
-                        <div onClick={df(() => setCurrentSelectedType('routines'))} className={`tap95 ${currentSelectedType === 'routines' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-inputBg dark:bg-darkInputBg text-gray-400'} rounded-full text-xs font-medium p-2 px-4`}>Routines</div>
-                        <div onClick={df(() => setCurrentSelectedType('calendar'))} className={`tap95 ${currentSelectedType === 'calendar' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-inputBg dark:bg-darkInputBg text-gray-400'} rounded-full text-xs font-medium p-2 px-4`}>Events</div>
-                        <div onClick={df(() => setCurrentSelectedType('holiday'))} className={`tap95 ${currentSelectedType === 'holiday' ? 'bg-accent shadow-lg shadow-accent/50  text-white' : 'bg-inputBg dark:bg-darkInputBg text-gray-400'} rounded-full text-xs font-medium p-2 px-4`}>Holidays</div>
-                        <div onClick={df(() => setCurrentSelectedType('all'))} className={`tap95 ${currentSelectedType === 'all' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-inputBg dark:bg-darkInputBg text-gray-400'} rounded-full text-xs font-medium p-2 px-4`}>All</div>
+                        <div onClick={df(() => setCurrentSelectedType('routines'))} className={`tap95 ${currentSelectedType === 'routines' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-routine_bg dark:bg-routine_bg_dark text-gray-500 dark:text-gray-300'} rounded-full text-xs font-medium p-2 px-4`}>Routines</div>
+                        <div onClick={df(() => setCurrentSelectedType('calendar'))} className={`tap95 ${currentSelectedType === 'calendar' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-routine_bg dark:bg-routine_bg_dark text-gray-500 dark:text-gray-300'} rounded-full text-xs font-medium p-2 px-4`}>Events</div>
+                        <div onClick={df(() => setCurrentSelectedType('holiday'))} className={`tap95 ${currentSelectedType === 'holiday' ? 'bg-accent shadow-lg shadow-accent/50  text-white' : 'bg-routine_bg dark:bg-routine_bg_dark text-gray-500 dark:text-gray-300'} rounded-full text-xs font-medium p-2 px-4`}>Holidays</div>
+                        <div onClick={df(() => setCurrentSelectedType('all'))} className={`tap95 ${currentSelectedType === 'all' ? 'bg-accent shadow-lg shadow-accent/50 text-white' : 'bg-routine_bg dark:bg-routine_bg_dark text-gray-500 dark:text-gray-300'} rounded-full text-xs font-medium p-2 px-4`}>All</div>
                     </div>
                     <div className="routines flex flex-wrap gap-[0.9rem] justify-center">
                         {/* {GetTypedRoutines(currentSelectedType, screenRoutines)} */}
@@ -192,7 +192,9 @@ function ShowRoutineTime({ routine }: { routine: Routine }) {
         return <div className="bottom flex flex-row gap-3">
             <LeftBlank />
             <div className="right flex-1 flex flex-row justify-between flex-center">
-                <div className={`description font-medium text-[0.75rem] ${false ? 'text-white/80' : 'text-secondary'} line-clamp-2`}><p>On {getFormattedDate(new Date(routine.time[0]), 'long', 'numeric')}</p></div>
+                <div className={`description font-medium text-[0.75rem] ${false ? 'text-white/80' : 'text-secondary'} line-clamp-2`}>
+                    <p className='text-dark/40 dark:text-white/40'>On {getFormattedDate(new Date(routine.time[0]), 'long', 'numeric')}</p>
+                </div>
             </div>
         </div>
     return null
@@ -210,13 +212,11 @@ function WeeklyRoutineTime({ time }: { time: Routine["time"] }) {
     </div>
 }
 
-function RoutineDescription({ routine }: { routine: Routine }) {
-    if (!routine.description)
-        return null
+export function RoutineDescription({ routine, active = false }: { routine: Routine, active?: boolean }) {
     return <div className="bottom flex flex-row gap-3">
         <LeftBlank />
         <div className="right flex-1 flex flex-row justify-between flex-center">
-            <div className={`description font-medium text-[0.75rem] ${false ? 'text-white/80' : 'text-secondary'} line-clamp-2`}><p>{routine.description} <small className='opacity-40'>{routine.sub ? '#' + routine.sub : ''}</small></p></div>
+            <div className={`description font-medium text-[0.75rem] ${active ? 'text-white/80' : 'text-dark/60 dark:text-white/60'}  text-secondary line-clamp-2`}><p>{routine.description} <small className='opacity-50'>{routine.sub ? '#' + routine.sub : ''}</small></p></div>
         </div>
     </div>
 }

src/pages/makeRoutine/Weekly.tsx

@@ -59,7 +59,7 @@ function Weekly({ routine, updateRoutine }: { updateRoutine: Function, routine:
 									className={`tap97 dayName check ${isActiveRoutine[i] ? 'checkDiv active' : 'bg-inputBg dark:bg-darkInputBg'} px-4 py-3 rounded-xl flex-1 items-center justify-center`}
 									style={isActiveRoutine[i] ? {
 										backgroundColor: vibrantColors7[i],
-										boxShadow: "1px 6px 10px 2px" + vibrantColors7[i] + "66"
+										boxShadow: "1px 6px 10px 0" + vibrantColors7[i] + "66"
 									} : {}}
 									onClick={() => {
 										delay(() => {

src/pages/viewRoutine/Weekly.tsx

@@ -17,7 +17,7 @@ function Weekly({ routine }: { routine: Routine }) {
             <div className={`tap97 relative flex items-center justify-center box h-40 w-[100%] rounded-2xl ${routineTime[index] ? 'opacity-1' : 'bg-inputBg dark:bg-darkInputBg'}`}
               style={routineTime[index] ? {
                  backgroundColor: vibrantColors7[index],
-                 boxShadow : "1px 6px 10px 2px" + vibrantColors7[index] + "66"
+                 boxShadow : "1px 6px 10px 0" + vibrantColors7[index] + "66"
               } : {}}>
               {
                 routineTime[index] &&

tailwind.config.cjs

@@ -18,15 +18,15 @@ module.exports = {
         darkInputBg: '#1a1a1a',
         inputBg: '#f2f2f4',
         transparent: 'transparent',
-        routine_bg : '#f5f5f5',
-        routine_border : '#ededed',
-        routine_bg_dark : '#1a1a1a',
-        routine_border_dark : '#282828',
+        routine_bg: '#f5f5f5',
+        routine_border: '#ededed',
+        routine_bg_dark: '#1a1a1a',
+        routine_border_dark: '#282828',
       }
     },
   },
   plugins: [
-    
+
   ],
   darkMode: 'class'
 }