From 956e0bb9b2aed9d5993a82a1da2905fed42dcab4 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Mon, 23 Feb 2026 16:01:41 +0000 Subject: [PATCH] MorninMate --- frontend/src/colors.ts | 52 +- frontend/src/components/AsideMenuLayer.tsx | 33 +- frontend/src/components/BaseButton.tsx | 16 +- frontend/src/components/CardBox.tsx | 8 +- frontend/src/components/IconRounded.tsx | 8 +- frontend/src/components/SectionMain.tsx | 4 +- frontend/src/layouts/Authenticated.tsx | 19 +- frontend/src/pages/dashboard.tsx | 598 +++++---------------- frontend/src/pages/index.tsx | 229 ++++---- frontend/src/styles.ts | 44 +- frontend/tailwind.config.js | 2 +- 11 files changed, 316 insertions(+), 697 deletions(-) diff --git a/frontend/src/colors.ts b/frontend/src/colors.ts index ea82708..164caef 100644 --- a/frontend/src/colors.ts +++ b/frontend/src/colors.ts @@ -14,7 +14,7 @@ export const colorsBgLight = { success: 'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white', danger: 'bg-red-500 border-red-500 text-white', warning: 'bg-yellow-500 border-yellow-500 text-white', - info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white', + info: 'bg-indigo-600 border-indigo-600 dark:bg-indigo-500 dark:border-indigo-500 text-white shadow-lg shadow-indigo-500/20', } export const colorsText = { @@ -24,7 +24,7 @@ export const colorsText = { success: 'text-emerald-500', danger: 'text-red-500', warning: 'text-yellow-500', - info: 'text-blue-500', + info: 'text-indigo-500', }; export const colorsOutline = { @@ -34,7 +34,7 @@ export const colorsOutline = { success: [colorsText.success, 'border-emerald-500'].join(' '), danger: [colorsText.danger, 'border-red-500'].join(' '), warning: [colorsText.warning, 'border-yellow-500'].join(' '), - info: [colorsText.info, 'border-blue-500'].join(' '), + info: [colorsText.info, 'border-indigo-500'].join(' '), }; export const getButtonColor = ( @@ -56,7 +56,7 @@ export const getButtonColor = ( success: 'ring-emerald-300 dark:ring-pavitra-blue', danger: 'ring-red-300 dark:ring-red-700', warning: 'ring-yellow-300 dark:ring-yellow-700', - info: "ring-midnightBlueTheme-buttonColor dark:ring-pavitra-blue", + info: "ring-indigo-300 dark:ring-indigo-700", }, active: { white: 'bg-gray-100', @@ -66,57 +66,57 @@ export const getButtonColor = ( success: 'bg-emerald-700 dark:bg-pavitra-blue', danger: 'bg-red-700 dark:bg-red-600', warning: 'bg-yellow-700 dark:bg-yellow-600', - info: 'bg-midnightBlueTheme-buttonColor dark:bg-pavitra-blue', + info: 'bg-indigo-700 dark:bg-indigo-600', }, bg: { - white: 'bg-white text-black', - whiteDark: 'bg-midnightBlueTheme-outsideCardColor text-primaryText dark:bg-dark-900 dark:text-white', - lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white', + white: 'bg-white text-black border-gray-200', + whiteDark: 'bg-midnightBlueTheme-outsideCardColor text-primaryText dark:bg-dark-900 dark:text-white border-white/10', + lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white border-gray-200 dark:border-white/10', contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black', - success: 'bg-emerald-600 dark:bg-pavitra-blue text-white', - danger: 'bg-midnightBlueTheme-outsideCardColor text-red-500 dark:text-white dark:bg-red-500 ', - warning: 'bg-yellow-600 dark:bg-yellow-500 text-white', - info: " bg-midnightBlueTheme-buttonColor dark:bg-pavitra-blue text-white ", + success: 'bg-emerald-600 dark:bg-pavitra-blue text-white border-emerald-600', + danger: 'bg-red-500 text-white dark:bg-red-600 border-red-500', + warning: 'bg-yellow-600 dark:bg-yellow-500 text-white border-yellow-600', + info: "bg-indigo-600 text-white border-indigo-600 shadow-lg shadow-indigo-600/30", }, bgHover: { - white: 'hover:bg-gray-100', - whiteDark: 'hover:bg-midnightBlueTheme-outsideCardColor hover:dark:bg-dark-800', + white: 'hover:bg-gray-50 hover:border-gray-300', + whiteDark: 'hover:bg-midnightBlueTheme-outsideCardColor/80 hover:dark:bg-dark-800', lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700', contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100', success: - 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue', + 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue/90 hover:dark:border-pavitra-blue/90', danger: - 'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600', + 'hover:bg-red-600 hover:border-red-600 hover:dark:bg-red-500', warning: - 'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600', - info: "hover:bg-midnightBlueTheme-800 hover:border-midnightBlueTheme-buttonColor hover:text-primaryText hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80", + 'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600', + info: "hover:bg-indigo-700 hover:border-indigo-700 hover:shadow-indigo-600/40", }, borders: { white: 'border-white', - whiteDark: 'border-midnightBlueTheme-outsideCardColor dark:border-dark-900', + whiteDark: 'border-midnightBlueTheme-outsideCardColor dark:border-dark-900', lightDark: 'border-gray-100 dark:border-slate-800', contrast: 'border-gray-800 dark:border-white', success: 'border-emerald-600 dark:border-pavitra-blue', danger: 'border-red-600 dark:border-red-500', warning: 'border-yellow-600 dark:border-yellow-500', - info: "border-midnightBlueTheme-buttonColor border-blue-600 dark:border-pavitra-blue", + info: "border-indigo-600 dark:border-indigo-500", }, text: { contrast: 'dark:text-slate-100', success: 'text-emerald-600 dark:text-pavitra-blue', danger: 'text-red-600 dark:text-red-500', warning: 'text-yellow-600 dark:text-yellow-500', - info: ' dark:text-pavitra-blue', + info: 'text-indigo-600 dark:text-indigo-400', }, outlineHover: { contrast: 'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black', - success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue', + success: 'hover:bg-emerald-600 hover:text-white hover:dark:bg-emerald-700', danger: - 'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600', + 'hover:bg-red-600 hover:text-white hover:dark:bg-red-700', warning: - 'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600', - info: "hover:bg-midnightBlueTheme-buttonColor text-midnightBlueTheme-buttonColor hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue", + 'hover:bg-yellow-600 hover:text-white hover:dark:bg-yellow-700', + info: "hover:bg-indigo-600 hover:text-white hover:dark:bg-indigo-700", }, } @@ -135,4 +135,4 @@ export const getButtonColor = ( } return base.join(' ') -} +} \ No newline at end of file diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx index 70bbe49..bdc3151 100644 --- a/frontend/src/components/AsideMenuLayer.tsx +++ b/frontend/src/components/AsideMenuLayer.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { mdiLogout, mdiClose } from '@mdi/js' +import { mdiLogout, mdiClose, mdiWeatherSunny } from '@mdi/js' import BaseIcon from './BaseIcon' import AsideMenuList from './AsideMenuList' import { MenuAsideItem } from '../interfaces' @@ -29,35 +29,42 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props return ( ) -} +} \ No newline at end of file diff --git a/frontend/src/components/BaseButton.tsx b/frontend/src/components/BaseButton.tsx index a137dc2..9c03df2 100644 --- a/frontend/src/components/BaseButton.tsx +++ b/frontend/src/components/BaseButton.tsx @@ -49,22 +49,22 @@ export default function BaseButton({ 'items-center', 'whitespace-nowrap', 'focus:outline-none', - 'transition-colors', + 'transition-all', 'focus:ring', - 'duration-150', + 'duration-300', 'border', - disabled ? 'cursor-not-allowed' : 'cursor-pointer', + disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]', roundedFull ? 'rounded-full' : `${corners}`, getButtonColor(color, outline, !disabled, active), className, ] if (!label && icon) { - componentClass.push('p-1') + componentClass.push('p-1.5') } else if (small) { - componentClass.push('text-sm', roundedFull ? 'px-3 py-1' : 'p-1') + componentClass.push('text-sm', roundedFull ? 'px-4 py-1.5' : 'px-2 py-1') } else { - componentClass.push('py-2', roundedFull ? 'px-6' : 'px-3') + componentClass.push('py-2.5', roundedFull ? 'px-8' : 'px-5') } if (disabled) { @@ -76,7 +76,7 @@ export default function BaseButton({ const componentChildren = ( <> {icon && } - {label && {label}} + {label && {label}} ) @@ -93,4 +93,4 @@ export default function BaseButton({ { className: componentClassString, type: type ?? 'button', target, disabled, onClick }, componentChildren ) -} +} \ No newline at end of file diff --git a/frontend/src/components/CardBox.tsx b/frontend/src/components/CardBox.tsx index 988f162..fa42185 100644 --- a/frontend/src/components/CardBox.tsx +++ b/frontend/src/components/CardBox.tsx @@ -37,16 +37,16 @@ export default function CardBox({ const corners = useAppSelector((state) => state.style.corners); const cardsStyle = useAppSelector((state) => state.style.cardsStyle); const componentClass = [ - `flex dark:border-dark-700 dark:bg-dark-900`, + `flex transition-all duration-300 ease-in-out`, className, corners !== 'rounded-full'? corners : 'rounded-3xl', flex, isList ? '' : `${cardsStyle}`, - hasTable ? '' : `border-dark-700 dark:border-dark-700`, + hasTable ? '' : ``, ] if (isHoverable) { - componentClass.push('hover:shadow-lg transition-shadow duration-500') + componentClass.push('hover:shadow-2xl hover:scale-[1.01] hover:border-indigo-500/20 cursor-pointer') } return React.createElement( @@ -61,4 +61,4 @@ export default function CardBox({ ) ) -} +} \ No newline at end of file diff --git a/frontend/src/components/IconRounded.tsx b/frontend/src/components/IconRounded.tsx index fc45023..d9abb69 100644 --- a/frontend/src/components/IconRounded.tsx +++ b/frontend/src/components/IconRounded.tsx @@ -20,7 +20,9 @@ export default function IconRounded({ bg = false, className = '', }: Props) { - const classAddon = bg ? colorsBgLight[color] : `${colorsText[color]} bg-gray-50 dark:bg-slate-800` + const classAddon = bg + ? (color === 'info' ? 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-500/20' : colorsBgLight[color]) + : `${colorsText[color]} bg-gray-50 dark:bg-slate-800` return ( ) -} +} \ No newline at end of file diff --git a/frontend/src/components/SectionMain.tsx b/frontend/src/components/SectionMain.tsx index 2b18097..17fbdbf 100644 --- a/frontend/src/components/SectionMain.tsx +++ b/frontend/src/components/SectionMain.tsx @@ -6,5 +6,5 @@ type Props = { } export default function SectionMain({ children }: Props) { - return
{children}
-} + return
{children}
+} \ No newline at end of file diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx index 1b9907d..f362775 100644 --- a/frontend/src/layouts/Authenticated.tsx +++ b/frontend/src/layouts/Authenticated.tsx @@ -86,18 +86,23 @@ export default function LayoutAuthenticated({ }, [router.events, dispatch]) - const layoutAsidePadding = 'xl:pl-60' + const layoutAsidePadding = 'xl:pl-64' return (
+
+
+
+
+ setIsAsideLgActive(false)} /> - {children} +
+ {children} +
Hand-crafted & Made with ❤️
) -} +} \ No newline at end of file diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx index acb7c1f..ddd582c 100644 --- a/frontend/src/pages/dashboard.tsx +++ b/frontend/src/pages/dashboard.tsx @@ -16,13 +16,14 @@ import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator'; import { SmartWidget } from '../components/SmartWidget/SmartWidget'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; + const Dashboard = () => { const dispatch = useAppDispatch(); const iconsColor = useAppSelector((state) => state.style.iconsColor); const corners = useAppSelector((state) => state.style.corners); const cardsStyle = useAppSelector((state) => state.style.cardsStyle); - const loadingMessage = 'Loading...'; + const loadingMessage = '...'; const [users, setUsers] = React.useState(loadingMessage); @@ -92,6 +93,37 @@ const Dashboard = () => { getWidgets(widgetsRole?.role?.value || '').then(); }, [widgetsRole?.role?.value]); + const StatCard = ({ title, count, iconPath, href, gradient }) => ( + +
+
+
+
+
+ {title} +
+
+ {count} +
+
+
+ +
+
+
+ View detailed list + +
+
+ + ) + return ( <> @@ -100,12 +132,15 @@ const Dashboard = () => { - - {''} - +
+ + {''} + +

Welcome back, {currentUser?.firstName || 'Mate'}! Here's what's happening today.

+
{hasPermission(currentUser, 'CREATE_ROLES') && { setWidgetsRole={setWidgetsRole} widgetsRole={widgetsRole} />} - {!!rolesWidgets.length && - hasPermission(currentUser, 'CREATE_ROLES') && ( -

- {`${widgetsRole?.role?.label || 'Users'}'s widgets`} -

- )} - -
+ +
{(isFetchingQuery || loading) && ( -
+
{' '} - Loading widgets... + Organizing your dashboard...
)} @@ -146,460 +175,79 @@ const Dashboard = () => { ))}
- {!!rolesWidgets.length &&
} - -
- - - {hasPermission(currentUser, 'READ_USERS') && -
-
-
-
- Users -
-
- {users} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_ROLES') && -
-
-
-
- Roles -
-
- {roles} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_PERMISSIONS') && -
-
-
-
- Permissions -
-
- {permissions} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_USER_ONBOARDING_ANSWERS') && -
-
-
-
- User onboarding answers -
-
- {user_onboarding_answers} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_ACTIVITIES') && -
-
-
-
- Activities -
-
- {activities} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_PULSES') && -
-
-
-
- Pulses -
-
- {pulses} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_COMPLETED_PULSES') && -
-
-
-
- Completed pulses -
-
- {completed_pulses} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_POTENTIAL_SCORES') && -
-
-
-
- Potential scores -
-
- {potential_scores} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_GAMES') && -
-
-
-
- Games -
-
- {games} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_GAME_SESSIONS') && -
-
-
-
- Game sessions -
-
- {game_sessions} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_REWARD_BALANCES') && -
-
-
-
- Reward balances -
-
- {reward_balances} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_REWARD_TRANSACTIONS') && -
-
-
-
- Reward transactions -
-
- {reward_transactions} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_NOTIFICATION_SCHEDULES') && -
-
-
-
- Notification schedules -
-
- {notification_schedules} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_FAQS') && -
-
-
-
- Faqs -
-
- {faqs} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_ANALYTICS_EVENTS') && -
-
-
-
- Analytics events -
-
- {analytics_events} -
-
-
- -
-
-
- } - - {hasPermission(currentUser, 'READ_APP_SETTINGS') && -
-
-
-
- App settings -
-
- {app_settings} -
-
-
- -
-
-
- } - - +
+ {hasPermission(currentUser, 'READ_USERS') && ( + + )} + {hasPermission(currentUser, 'READ_PULSES') && ( + + )} + {hasPermission(currentUser, 'READ_COMPLETED_PULSES') && ( + + )} + {hasPermission(currentUser, 'READ_POTENTIAL_SCORES') && ( + + )} + {hasPermission(currentUser, 'READ_GAMES') && ( + + )} + {hasPermission(currentUser, 'READ_ACTIVITIES') && ( + + )} + {hasPermission(currentUser, 'READ_REWARD_BALANCES') && ( + + )} + {hasPermission(currentUser, 'READ_FAQS') && ( + + )}
@@ -610,4 +258,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) { return {page} } -export default Dashboard +export default Dashboard \ No newline at end of file diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index bbd3be5..f787cef 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,166 +1,121 @@ - import React, { useEffect, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import BaseButton from '../components/BaseButton'; -import CardBox from '../components/CardBox'; import SectionFullScreen from '../components/SectionFullScreen'; import LayoutGuest from '../layouts/Guest'; -import BaseDivider from '../components/BaseDivider'; -import BaseButtons from '../components/BaseButtons'; import { getPageTitle } from '../config'; import { useAppSelector } from '../stores/hooks'; -import CardBoxComponentTitle from "../components/CardBoxComponentTitle"; -import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'; +import { mdiWeatherSunny, mdiCheckCircle, mdiRocketLaunch, mdiGamepadVariant, mdiArrowRight } from '@mdi/js'; +import BaseIcon from '../components/BaseIcon'; export default function Starter() { - const [illustrationImage, setIllustrationImage] = useState({ - src: undefined, - photographer: undefined, - photographer_url: undefined, - }) - const [illustrationVideo, setIllustrationVideo] = useState({video_files: []}) - const [contentType, setContentType] = useState('image'); - const [contentPosition, setContentPosition] = useState('left'); const textColor = useAppSelector((state) => state.style.linkColor); - const title = 'App Preview' - - // Fetch Pexels image/video - useEffect(() => { - async function fetchData() { - const image = await getPexelsImage(); - const video = await getPexelsVideo(); - setIllustrationImage(image); - setIllustrationVideo(video); - } - fetchData(); - }, []); - - const imageBlock = (image) => ( - - ); - - const videoBlock = (video) => { - if (video?.video_files?.length > 0) { - return ( -
- - -
) - } - }; - - return ( -
+ return ( +
- {getPageTitle('Starter Page')} + {getPageTitle('Welcome to Morninmate')} + {/* Decorative Gradients */} +
+
+
+
+ -
- {contentType === 'image' && contentPosition !== 'background' - ? imageBlock(illustrationImage) - : null} - {contentType === 'video' && contentPosition !== 'background' - ? videoBlock(illustrationVideo) - : null} -
- - - -
-

This is a React.js/Node.js app generated by the Flatlogic Web App Generator

-

For guides and documentation please check - your local README.md and the Flatlogic documentation

+
+ + {/* Logo Section */} +
+
+
+ +
- - - +

+ Morninmate +

+

+ Gamify your morning routine, boost your potential score, and unlock fun rewards. The perfect start to your day. +

+
- - + {/* CTA Buttons */} +
+ + +
+ + {/* Feature Grid */} +
+ {[ + { + icon: mdiCheckCircle, + title: "Pulse Routines", + desc: "Create and track your morning activities with ease.", + color: "text-emerald-400" + }, + { + icon: mdiRocketLaunch, + title: "Potential Score", + desc: "Watch your morning routine quality soar to 100.", + color: "text-amber-400" + }, + { + icon: mdiGamepadVariant, + title: "Unlock Games", + desc: "Earn game sessions as rewards for your consistency.", + color: "text-cyan-400" + } + ].map((f, i) => ( +
+
+ +
+

{f.title}

+

{f.desc}

+
+ ))} +
-
-
-

© 2026 {title}. All rights reserved

- - Privacy Policy - -
+
+
+
+

+ + Morninmate +

+

© 2026. Made with ❤️ for your mornings.

+
+
+ Privacy + Terms + Help +
+
+
); } Starter.getLayout = function getLayout(page: ReactElement) { return {page}; -}; - +}; \ No newline at end of file diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts index 8eecb3a..76e5eb9 100644 --- a/frontend/src/styles.ts +++ b/frontend/src/styles.ts @@ -53,31 +53,31 @@ export const white: StyleObject = { export const midnightBlueTheme: StyleObject = { - aside: 'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white lg:rounded-lg', + aside: 'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white lg:rounded-3xl lg:m-4 lg:h-[calc(100vh-2rem)] shadow-2xl backdrop-blur-md bg-opacity-95 transition-all duration-300 ease-in-out', asideScrollbars: 'aside-scrollbars-blue', - asideBrand: 'text-blue-500 bg-white', + asideBrand: 'text-indigo-500 bg-white/10 rounded-t-3xl', asideMenuItem: - 'text-midnightBlueTheme-text hover:text-white dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800 dark:text-white', - asideMenuItemActive: 'font-bold text-white dark:text-white', - activeLinkColor: 'bg-midnightBlueTheme-buttonColor rounded-lg', - asideMenuDropdown: 'bg-blue-700/50', - navBarItemLabel: 'text-primaryText', - iconsColor: 'text-midnightBlueTheme-iconsColor dark:text-blue-500', - navBarItemLabelHover: 'hover:text-stone-400', - navBarItemLabelActiveColor: 'text-midnightBlueTheme-800', - overlay: 'bg-midnightBlueTheme-mainBG', + 'text-midnightBlueTheme-text hover:text-white hover:bg-white/10 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800 transition-colors duration-200 rounded-2xl mx-2 my-1 p-2', + asideMenuItemActive: 'font-bold text-white bg-indigo-600/50 shadow-lg rounded-2xl mx-2 my-1 p-2', + activeLinkColor: 'bg-indigo-600 rounded-2xl shadow-md', + asideMenuDropdown: 'bg-indigo-900/40 rounded-2xl mx-4', + navBarItemLabel: 'text-primaryText font-medium', + iconsColor: 'text-indigo-400 dark:text-indigo-500', + navBarItemLabelHover: 'hover:text-indigo-300', + navBarItemLabelActiveColor: 'text-indigo-200', + overlay: 'bg-midnightBlueTheme-mainBG/80 backdrop-blur-sm', bgLayoutColor: 'bg-midnightBlueTheme-mainBG', - cardsColor: 'bg-midnightBlueTheme-cardColor', + cardsColor: 'bg-midnightBlueTheme-cardColor/60 backdrop-blur-xl shadow-2xl border border-white/5', focusRingColor: - 'focus:ring focus:ring-midnightBlueTheme-800 focus:border-midnightBlueTheme-800 focus:outline-none border border-gray-600 dark:focus:ring-blue-600 dark:focus:border-blue-600', - corners: 'rounded-lg', - cardsStyle: 'bg-midnightBlueTheme-outsideCardColor border border-midnightBlueTheme-outsideCardColor shadow-xl', - linkColor: 'text-midnightBlueTheme-buttonColor', - websiteHeder: 'border-b border-white border-opacity-10 shadow-md', - borders: 'border-white border-opacity-10', - shadow: 'shadow-md', - websiteSectionStyle: ' bg-midnightBlueTheme-webSiteComponentBg text-white', - textSecondary: 'text-gray-300', + 'focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none border border-white/10 dark:focus:ring-indigo-600 dark:focus:border-indigo-600', + corners: 'rounded-3xl', + cardsStyle: 'bg-midnightBlueTheme-outsideCardColor/40 backdrop-blur-lg border border-white/10 shadow-2xl hover:shadow-indigo-500/10 transition-all duration-300', + linkColor: 'text-indigo-400', + websiteHeder: 'border-b border-white/10 shadow-xl backdrop-blur-md bg-opacity-80', + borders: 'border-white/10', + shadow: 'shadow-2xl shadow-indigo-500/20', + websiteSectionStyle: 'bg-gradient-to-br from-indigo-900/20 to-purple-900/20 text-white', + textSecondary: 'text-indigo-200/60', }; @@ -132,4 +132,4 @@ export const basic: StyleObject = { shadow: '', websiteSectionStyle: '', textSecondary: '', -} +} \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 1378cf6..9874a61 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -86,7 +86,7 @@ module.exports = { primaryText: '#E9EAEF', }, fontFamily: { - sans: ['Ubuntu', 'sans-serif'], + sans: ['Inter', 'sans-serif'], }, borderRadius: {