Added icons in routine subscriptions

codeAbinash · Jun 27, 2023 · 3348200 · 3348200
1 parent 1e43206
commit 3348200
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 43 deletions.
diff --git a/public/changelog/changelog.json b/public/changelog/changelog.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "3.7.1",
+        "name": "UI UX Improvements",
+        "emoji": "🎨",
+        "date": "2023-06-26",
+        "description": [
+            "Added icons in routines subscriptions"
+        ]
+    },
     {
         "version": "3.7.0",
         "name": "Share Routines",

diff --git a/src/App.tsx b/src/App.tsx
@@ -22,7 +22,7 @@ const BuyMeCoffee = React.lazy(() => import('./pages/author/BuyMeCoffee'))
 const LazyBackup = React.lazy(() => import('./pages/backup-restore/Backup'))
 const LazyRestore = React.lazy(() => import('./pages/backup-restore/Restore'))
 const LazyChangelog = React.lazy(() => import('./pages/changelog/Changelog'))
-const LazyTeam = React.lazy(() => import('./pages/author/Team'))
+const LazyContributors = React.lazy(() => import('./pages/author/Contributors'))
 const LazyTest = React.lazy(() => import('./pages/TestPage'))
 const LazyMessages = React.lazy(() => import('./pages/Messages/Messages'))
 const LazyRestoreStartup = React.lazy(() => import('./pages/backup-restore/RestoreStartup'))
@@ -66,7 +66,7 @@ export default function App() {
           <Route path='/backup' element={< LazyBackup />} />
           <Route path='/restore' element={< LazyRestore />} />
           <Route path='/changelog' element={< LazyChangelog />} />
-          <Route path='/author/team' element={< LazyTeam />} />
+          <Route path='/author/team' element={< LazyContributors />} />
           <Route path='/loading' element={< LoadingScreen />} />
           <Route path='/test' element={< LazyTest />} />
           <Route path='messages' element={<LazyMessages />} />

diff --git a/src/assets/images/images.ts b/src/assets/images/images.ts
@@ -4,13 +4,17 @@ import undraw_feeling_proud_qne1 from './src/undraw_feeling_proud_qne1.svg'
 import undraw_add_notes_re_ln36 from './src/undraw_add_notes_re_ln36.svg'
 import QR from './author/gpayQR.jpeg'
 import messages from './src/messages.png'
+import routine_round from "./src/routine_round.webp"
+import institution_round from "./src/institution_round.png"
+import routine from "./src/routine.png"
+
 
 const images ={
-    undraw_reading_time_re_phf7,
-    undraw_city_girl_ccpd,
+    undraw_reading_time_re_phf7, institution_round,
+    undraw_city_girl_ccpd, routine,
     undraw_feeling_proud_qne1,
     undraw_add_notes_re_ln36, QR,
-    messages
+    messages, routine_round
 }
 
 export default images
diff --git a/src/assets/images/src/institution_round.png b/src/assets/images/src/institution_round.png
diff --git a/src/assets/images/src/routine.png b/src/assets/images/src/routine.png
diff --git a/src/assets/images/src/routine_round.webp b/src/assets/images/src/routine_round.webp
diff --git a/src/components/OptionSelector.tsx b/src/components/OptionSelector.tsx
@@ -10,17 +10,18 @@ type OptionSelectorArg = {
    options: OptionsSelectorOptions,
    setOption: Function,
    heading: string,
-   description?: string
+   description?: string,
+   callback?: Function
 }
 
-export default function OptionSelector({ children, isOpen, setIsOpen, options, setOption, heading, description }: OptionSelectorArg) {
+export default function OptionSelector({ children, isOpen, setIsOpen, options, setOption, heading, description, callback = () => { } }: OptionSelectorArg) {
    useEffect(() => {
       if (isOpen) document.body.style.overflowY = 'hidden'
       return () => { document.body.style.overflowY = 'auto' }
    }, [isOpen])
 
    return <>
-      <div className={`h-[100vh] w-[100vw] left-0 top-0 fixed justify-center items-center bg-black/20 dark:bg-transparent backdrop-blur-md
+      <div className={`h-[100vh] w-[100vw] left-0 top-0 fixed justify-center items-center bg-black/20 dark:bg-transparent backdrop-blur-sm
          ${isOpen ? 'flex' : 'hidden'} z-[70]`}
          onClick={() => {
             setIsOpen(false)
@@ -31,7 +32,9 @@ export default function OptionSelector({ children, isOpen, setIsOpen, options, s
             <div className={`flex flex-col justify-center items-start tracking-wide`}>
                {
                   options.map((option, index) => {
-                     return <p onClick={() => { setIsOpen(false), setOption(option.value) }} key={index}
+                     return <p onClick={() => {
+                        setIsOpen(false), setOption(option.value), callback()
+                     }} key={index}
                         className="p-4 border-gray-100 dark:border-[#ffffff15] border-t-[1.1px] 
                       active:bg-gray-100 dark:active:bg-gray-800 
                         text-sm w-full font-[450] text-center text-blue-500">{option.name}</p>

diff --git a/src/info.ts b/src/info.ts
@@ -1,6 +1,6 @@
 const details = {
     name: 'routine',
-    version: '3.7.0',
+    version: '3.7.1',
     url : 'https://codeAbinash.github.io/routine/'
 }
 export default details

diff --git a/src/lib/lib.ts b/src/lib/lib.ts
@@ -68,3 +68,9 @@ export function throttle<T extends (...args: any[]) => void>(
         }
     };
 }
+
+
+
+
+export const blank_callback = [() => { }, () => { }]
+// export blank_callback
diff --git a/src/pages/ApplyRoutine.tsx b/src/pages/ApplyRoutine.tsx
@@ -272,7 +272,6 @@ function Routines({ addRoutine, subscription }: any) {
 		setTimeout(async () => {
 			let fetchedRoutines = await (await fetch(allRoutinesLink)).json()
 			setRoutines(fetchedRoutines)
-			console.log(routines)
 		}, 0);
 	}, [])
 
@@ -283,19 +282,15 @@ function Routines({ addRoutine, subscription }: any) {
 			:
 			routines.map((routine: any, index: number) => {
 				const isSubscribed = !!subscription[routine.id]
-
-				// console.log(routine)
-				return <div key={index} className={`${isSubscribed ? 'bg-accent text-white' : 'bg-inputBg dark:bg-darkInputBg'} p-5 rounded-3xl tap99`} onClick={() => { addRoutine(routine.id) }}>
-					<div className="left">
-						{/* <img src={routine.picture} alt="" /> */}
+				return <div key={index} className={`flex justify-between ${isSubscribed ? 'bg-accent text-white' : 'bg-inputBg dark:bg-darkInputBg'} p-3.5 rounded-3xl tap99`} onClick={() => { addRoutine(routine.id) }}>
+					<div className="left w-[22%]">
+						<img src={routine.image || images.routine} className="w-full rounded-2xl bg-white/10 aspect-auto" />
 					</div>
-					<div className="right flex flex-col gap-1">
+					<div className="right flex flex-col gap-1 w-[73%]">
 						<p className="font-semibold text-[0.9rem]">{routine.name}</p>
-						<p className={`${isSubscribed ? 'text-white' : 'text-grey'} text-[0.73rem] font-medium`}>{routine.description} <br />#{routine.id}</p>
+						<p className={`${isSubscribed ? 'text-white/70' : 'text-grey'} text-[0.73rem] font-medium`}>{routine.description} <br />#{routine.id}</p>
 					</div>
 				</div>
 			})
 	)
-}
-
-
+}
diff --git a/src/pages/ManageRoutine.tsx b/src/pages/ManageRoutine.tsx
@@ -104,13 +104,13 @@ function Routines({ deleteRoutine }: any) {
 					</div>
 					:
 					routines.map((id: any, index: number) => {
-						return <div key={index} className='bg-accent p-5 rounded-3xl text-white tap99' onClick={() => { deleteRoutine(id) }}>
-							<div className="left">
-								{/* <img src={routine.picture} alt="" /> */}
+						return <div key={index} className='bg-accent p-3.5 rounded-3xl text-white tap99 flex gap-[5%]' onClick={() => { deleteRoutine(id) }}>
+							<div className="left w-[22%]">
+								<img src={subscriptions[id].image || images.routine} className="w-full rounded-2xl bg-white/10 aspect-auto" />
 							</div>
-							<div className="right flex flex-col gap-1">
+							<div className="right flex flex-col gap-1 w-[68%]">
 								<p className="font-semibold text-[0.9rem]">{subscriptions[id].fn}</p>
-								<p className="text-[0.73rem] font-medium text-white">{subscriptions[id].description} <br /> #{subscriptions[id].name}</p>
+								<p className="text-[0.73rem] font-medium text-white opacity-70">{subscriptions[id].description} <br /> #{subscriptions[id].name}</p>
 							</div>
 						</div>
 					})

diff --git a/src/pages/More.tsx b/src/pages/More.tsx
@@ -23,6 +23,7 @@ const darkModeOptions: OptionsSelectorOptions = [
 ]
 
 function changeTheme(theme: any) {
+	console.log(theme)
 	ls.set('theme', theme)
 	applyTheme(theme)
 }
@@ -154,8 +155,10 @@ function More() {
 				setIsShow(true)
 				setModalButtons(['Cancel', 'Send Feedback'])
 				setModalCallbacks([() => { setIsShow(false) },
-				() =>
+				() => {
+					setIsShow(false)
 					window.open('mailto:[email protected]?subject=Feedback of Routine Application', '_blank')
+				}
 				])
 			},
 			rightArrow: true
@@ -185,12 +188,7 @@ function More() {
 		// Scroll to top
 		topElement.current?.scrollIntoView({ behavior: 'smooth' })
 	}, [])
-
-	useEffect(() => {
-		changeTheme(darkModeSelectedOption)
-		console.log("Selected", darkModeSelectedOption)
-	}, [darkModeSelectedOption])
-
+
 	return (
 		<div className='screen dark:text-darkText'>
 			<BottomModal show={isShow} btnTxt={modalButtons} cb={modalCallbacks} >
@@ -232,7 +230,10 @@ function More() {
 									<div className="right"><p className='font-[430] text-sm'>Theme</p></div>
 								</div>
 								<OptionSelector isOpen={isSelectorOpen} setIsOpen={setIsSelectorOpen} options={darkModeOptions}
-									setOption={setDarkModeSelectedOption} heading={'Select Theme'}
+									setOption={(option: string) => {
+										setDarkModeSelectedOption(option)
+										changeTheme(option)
+									}} heading={'Select Theme'}
 								>
 									<div onClick={df(() => setIsSelectorOpen(true))} className='appearance-none bg-inputBg dark:bg-darkInputBg p-3 text-sm px-8 text-center outline-none border-none tap rounded-2xl'>
 										<p className='font-[450]'>{capitalize(darkModeSelectedOption)} Theme</p>

diff --git a/src/pages/author/Team.tsx → src/pages/author/Contributors.tsx b/src/pages/author/Team.tsx → src/pages/author/Contributors.tsx
@@ -1,10 +1,18 @@
 import BackHeader from "../../components/BackHeader";
 import { useEffect, useState } from "react";
 import icons from "../../assets/icons/icons";
+import { blank_callback } from "../../lib/lib";
+import BottomModal from "../../components/BottomModal";
 
 
-export default function Team() {
+
+
+export default function Contributors() {
    const [contributors, uContributors] = useState<any>([])
+   let [ModalUI, setModalUi] = useState(<></>)
+   let [modalButtons, setModalButtons] = useState(['Close', 'Github Profile'])
+   let [modalCallbacks, setModalCallbacks] = useState(blank_callback)
+   const [isShow, uIsShow] = useState(false)
 
    useEffect(() => {
       // Load contributors data from github
@@ -18,17 +26,47 @@ export default function Team() {
          const userData = await Promise.all(data.map(async (user: any) => {
             const d: any = await fetch(userDetailsFetchLink + user.github).then(res => res.json())
             const pic = d.avatar_url
+            console.log(d)
             return { ...user, pic: pic }
          }))
-
          uContributors(userData)
-
       }, 0);
    }, [])
 
+   function showUserModal({ user }: { user: any }) {
+      setModalUi(<div className="p-4 pt-0 gap-3 flex flex-col justify-center items-center text-center">
+         <div className="pic flex-none">
+            <img src={user.pic || icons.spinner} className="w-32 aspect-square rounded-full object-cover" />
+         </div>
+         <div className="content">
+            <div className="name font-medium text-lg">
+               <p>{user.name}</p>
+            </div>
+            <div className="username text-xs text-accent">
+               <p>@{user.github}</p>
+            </div>
+            <div className="role text-sm mt-4 text-black/60 dark:text-white/60">
+               <p>{user.role}</p>
+            </div>
+            {/* <div className="bio text-sm">
+               <p>{user.bio}</p>
+            </div> */}
+         </div>
+      </div>)
+      // setModalButtons(['Close', 'Github Profile'])
+      setModalCallbacks([
+         () => { uIsShow(false) },
+         () => { uIsShow(false), window.open('https://github.com/' + user.github, '_blank') }
+      ])
+      uIsShow(true)
+   }
+
 
    return <div className="screen dark:text-darkText">
-      <BackHeader title="Our Team" />
+      <BackHeader title="Contributors" />
+      <BottomModal show={isShow} btnTxt={modalButtons} cb={modalCallbacks} >
+         {ModalUI}
+      </BottomModal>
       <div className="content">
          <div className="pl-5 pr-5 text-sm">
             <p>
@@ -41,20 +79,21 @@ export default function Team() {
                   contributors.map((user: any, index: number) => {
                      return <div className="user flex gap-4 items-center bg-inputBg dark:bg-darkInputBg p-4 rounded-3xl tap99" key={index}
                         onClick={
-                           () => {
-                              window.open('https://github.com/' + user.github, '_blank')
-                           }
+                           // () => {
+                           //    window.open('https://github.com/' + user.github, '_blank')
+                           // }
+                           () => { showUserModal({ user }) }
                         }
                      >
                         <div className="pic flex-none">
-                           <img src={user.pic} className="w-14 aspect-square rounded-full object-cover" />
+                           <img src={user.pic || icons.spinner} className="w-14 aspect-square rounded-full object-cover" />
                         </div>
                         <div className="content">
                            <div className="name font-medium text-sm">
                               <p>{user.name}</p>
                            </div>
                            <div className="role text-sm">
-                              <p>{user.role}</p>
+                              <p className="dark:text-white/60 font-[430] text-black/60">{user.role}</p>
                            </div>
                         </div>
                      </div>

diff --git a/src/pages/author/routine_round.png b/src/pages/author/routine_round.png