jmaritar/next-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(styles): 🎨 globals styles

Browse Source
This commit is contained in:
Jorge Mario Arita Ramírez 2024-04-01 09:07:56 -06:00
parent 21735be347
commit c0fa2200bb
18 changed files with 121 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@ -19,6 +19,10 @@
"cSpell.words": [
"headlessui",
"orbis",
"Orbis"
"Orbis",
"orbisapi",
"esnext",
"tailwindcss",
"unoptimized",
],
}

6
config/default.json
View File

@ -2,9 +2,9 @@
"constants": {
"plataforma": "web",
"publicPath": "/orbistemplate",
"urlServerImages" : "https://gt.via-asesores.com/smartoperation/orbisapi/dtsrv/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"urlWebApi": "https://gt.via-asesores.com/smartoperation/orbisapi/api/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"urlUploadApi": "https://gt.via-asesores.com/smartoperation/orbisapi/upload/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"urlServerImages" : "https://gt.via-asesores.com/smartoperation-api/dtsrv/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"urlWebApi": "https://gt.via-asesores.com/smartoperation-api/api/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"urlUploadApi": "https://gt.via-asesores.com/smartoperation-api/upload/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso",
"appTitle": "OrbisTemplate",
"idApp": "orbistemplate",
"publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",

1
package.json
View File

@ -17,6 +17,7 @@
"license": "ISC",
"private": true,
"scripts": {
"clean": "rimraf .next && cls && yarn dev",
"dev": "next dev",
"build": "next build",
"generate": "next build && next export",

2
src/components/Login/FormLogin.jsx
View File

@ -127,7 +127,7 @@ const FormLogin = ({ onLogin }) => {
<button
type="submit"
disabled={!isInputValid}
className={`${'via-button'} ${(isInputValid ? '!bg-cyan-900' : 'bg-red-400')} mx-0 w-full justify-center shadow-md`}
className={`${'via-button'} ${(isInputValid ? 'bg-theme-app-500' : 'bg-red-400')} mx-0 w-full justify-center shadow-md`}
>
<KeyIcon className="size-5 pr-2" />
{ i18n.t('login.connect') }

115
src/components/widgets/UserOptionsMenu.jsx
View File

@ -1,115 +0,0 @@
import React from 'react'
import { Menu } from '@headlessui/react'
import { MdOutlineCheckBox, MdOutlineCheckBoxOutlineBlank, MdOutlineLightMode, MdDarkMode } from 'react-icons/md'
import { TbColorPicker, TbLanguage } from 'react-icons/tb'
const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
return (
<>
<div className="flex items-center justify-center text-gray-900 dark:text-white">
<TbColorPicker className="mr-2 size-5" aria-hidden="true" />
{i18n.t('common.theme') || 'Tema'}
</div>
<div className="mb-2 grid grid-cols-2 gap-2 p-1">
<Menu.Item>
<button
className={`${
theme === 'light'
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
} group flex w-full items-center rounded-md p-2 text-sm`}
onClick={async () => {
setPreferences('light')
}}
>
<MdOutlineLightMode className="mr-2 size-5" aria-hidden="true" />
{i18n.t('common.themeLight') || 'Claro'}
</button>
</Menu.Item>
<Menu.Item>
<button
className={`${
theme === 'dark'
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
} group flex w-full items-center rounded-md p-2 text-sm`}
onClick={() => {
setPreferences('dark')
}}
>
<MdDarkMode className="mr-2 size-5" aria-hidden="true" />
{i18n.t('common.themeDark') || 'Oscuro'}
</button>
</Menu.Item>
</div>
<div className="flex items-center justify-center text-gray-900 dark:text-white">
<TbLanguage className="mr-2 size-5" aria-hidden="true" />
{i18n.t('common.language') || 'Idioma'}
</div>
<div className="mb-2 grid grid-cols-2 gap-2 p-1">
<Menu.Item>
<button
className={`${
i18n.activeLocale === 'es'
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
} group flex w-full items-center rounded-md p-2 text-sm`}
onClick={async () => {
setPreferences('es')
}}
>
{
i18n.activeLocale === 'es'
? (
<MdOutlineCheckBox
className="mr-2 size-5"
aria-hidden="true"
/>
)
: (
<MdOutlineCheckBoxOutlineBlank
className="mr-2 size-5"
aria-hidden="true"
/>
)
}
{i18n.t('common.languageSpanish') || 'Español'}
</button>
</Menu.Item>
<Menu.Item>
<button
className={`${
i18n.activeLocale === 'en'
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
} group flex w-full items-center rounded-md p-2 text-sm`}
onClick={() => {
setPreferences('en')
}}
>
{
i18n.activeLocale === 'en'
? (
<MdOutlineCheckBox
className="mr-2 size-5"
aria-hidden="true"
/>
)
: (
<MdOutlineCheckBoxOutlineBlank
className='mr-2 size-5'
aria-hidden='true'
/>
)
}
{i18n.t('common.languageEnglish') || 'Inglés'}
</button>
</Menu.Item>
</div>
</>
)
}
export default UserOptionsMenu

54
src/hooks/useGlobalFilters.js
View File

@ -1,54 +0,0 @@
import { useState, useEffect } from 'react'
import functions from 'v-functions'
const safeGetPathname = () => {
return typeof window !== 'undefined' ? window.location.pathname : ''
}
const useGlobalFilters = () => {
const [rutaActual, setRutaActual] = useState(safeGetPathname())
useEffect(() => {
setRutaActual(safeGetPathname())
}, [safeGetPathname()])
const getFiltersFromLocalStorage = () => {
const storedFilters = functions.getDecodeStorage('globalFilters')
const parsedFilters = storedFilters ? JSON.parse(storedFilters) : {}
return parsedFilters[rutaActual] || {}
}
const setFilters = (keyOrObject, value) => {
const prevFilters = getFiltersFromLocalStorage()
let updatedFilters
if (typeof keyOrObject === 'object' && value === undefined) {
updatedFilters = { ...prevFilters, ...keyOrObject }
} else {
updatedFilters = { ...prevFilters, [keyOrObject]: value }
}
const storedFilters = functions.getDecodeStorage('globalFilters')
const globalFilters = storedFilters ? JSON.parse(storedFilters) : {}
functions.setEncodeStorage(
'globalFilters',
JSON.stringify({ ...globalFilters, [rutaActual]: updatedFilters })
)
}
const clearFiltersForRoute = () => {
const storedFilters = functions.getDecodeStorage('globalFilters')
const globalFilters = storedFilters ? JSON.parse(storedFilters) : {}
functions.setEncodeStorage('globalFilters', JSON.stringify({ ...globalFilters, [rutaActual]: {} }))
}
const clearAllFilters = () => {
functions.setEncodeStorage('globalFilters', JSON.stringify({}))
}
const filters = getFiltersFromLocalStorage()
return [filters, setFilters, clearFiltersForRoute, clearAllFilters]
}
export default useGlobalFilters

120
src/hooks/useLocalStorage.js
View File

@ -1,120 +0,0 @@
import { useState, useEffect, useCallback } from 'react'
import PropTypes from 'prop-types'
import functions from 'v-functions'
/**
* Función para parsear JSON. Maneja los valores 'undefined' y errores de parseo.
* @param {string | null} value - El valor JSON como string para parsear.
* @returns {any} El objeto JavaScript parseado o undefined si hay un error.
*/
function parseJSON (value) {
try {
return value === 'undefined' ? undefined : JSON.parse(value ?? '')
} catch {
console.error('Error al parsear', { value })
return undefined
}
}
/**
* Hook personalizado para interactuar con el localStorage del navegador.
* Permite almacenar, actualizar y recuperar un valor de localStorage.
*
* @param {string} key - La clave bajo la cual almacenar el valor en localStorage.
* @param {any} initialValue - El valor inicial a usar si no hay nada en localStorage.
* @returns {Array} Un array con el valor almacenado y la función para actualizarlo.
*
* @example
*
* // Uso en un componente React funcional
* const MyComponent = () => {
* // Utiliza el hook para almacenar un valor en localStorage
* const [name, setName] = useLocalStorage('name', 'Nombre inicial');
*
* return (
* <div>
* <input
* type="text"
* value={name}
* onChange={(e) => setName(e.target.value)}
* />
* <p>El nombre es: {name}</p>
* </div>
* );
* }
*/
const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(initialValue)
const [initialized, setInitialized] = useState(false)
const readValue = useCallback(() => {
if (typeof window === 'undefined') {
return initialValue
}
try {
// const item = window.localStorage.getItem(key)
const item = functions.getDecodeStorage(key)
return item ? parseJSON(item) : initialValue
} catch (error) {
console.warn(`Error al leer la clave ${key} del localStorage:`, error)
return initialValue
}
}, [key, initialValue])
useEffect(() => {
setInitialized(true)
setStoredValue(readValue())
}, [readValue])
useEffect(() => {
if (!initialized) {
return
}
const handleStorageChange = (event) => {
if (event.key && event.key !== key) {
return
}
setStoredValue(readValue())
}
window.addEventListener('storage', handleStorageChange)
window.addEventListener('local-storage', handleStorageChange)
return () => {
window.removeEventListener('storage', handleStorageChange)
window.removeEventListener('local-storage', handleStorageChange)
}
}, [key, readValue, initialized])
const setValue = (value) => {
if (typeof window === 'undefined' || !initialized) {
console.warn(`Intentando establecer la clave ${key} del localStorage en un entorno no cliente.`)
return
}
try {
const newValue = value instanceof Function ? value(storedValue) : value
// window.localStorage.setItem(key, JSON.stringify(newValue))
functions.setEncodeStorage(key, JSON.stringify(newValue))
setStoredValue(newValue)
window.dispatchEvent(new Event('local-storage'))
} catch (error) {
console.warn(`Error al establecer la clave ${key} en el localStorage:`, error)
}
}
return [storedValue, setValue]
}
useLocalStorage.propTypes = {
key: PropTypes.string.isRequired,
initialValue: PropTypes.any
}
useLocalStorage.defaultProps = {
initialValue: null
}
export default useLocalStorage

76
src/hooks/useRoute.js
View File

@ -1,76 +0,0 @@
import { createContext, useContext, useState, useEffect } from 'react'
import environment from '@/utils/environment'
export const RouteContext = createContext()
export const useRoute = () => {
return useContext(RouteContext)
}
export const RouteProvider = ({ children }) => {
const [breadcrumbsList, setBreadcrumbsList] = useState([])
useEffect(() => {
const storedBreadcrumbs = JSON.parse(sessionStorage.getItem('breadcrumbsList')) || []
if (storedBreadcrumbs.length !== 0) {
setBreadcrumbsList(storedBreadcrumbs)
}
}, [])
useEffect(() => {
sessionStorage.setItem('breadcrumbsList', JSON.stringify(breadcrumbsList))
}, [breadcrumbsList])
const addBreadcrumb = (title, location) => {
const timestamp = '/' + environment.getTime()
if (location.endsWith(timestamp)) {
location = location.replace(timestamp, '')
} else if (location.endsWith('[...index]')) {
location = location.replace('/[...index]', '')
}
setBreadcrumbsList(prev => {
const lastBreadcrumb = prev[prev.length - 1]
if (lastBreadcrumb && lastBreadcrumb.location === location && lastBreadcrumb.title === title) {
return prev
}
return [...prev, { title, location }]
})
}
const breadcrumbsListArr = () => {
return breadcrumbsList.slice(0, breadcrumbsList.length - 1)
}
const truncateBreadcrumbs = (index) => {
setBreadcrumbsList(prev => prev.slice(0, index))
}
useEffect(() => {
const handlePopState = () => {
setBreadcrumbsList(prev => {
const newArr = [...prev]
newArr.pop()
return newArr
})
}
window.addEventListener('popstate', handlePopState)
return () => {
window.removeEventListener('popstate', handlePopState)
}
}, [])
const value = {
breadcrumbsListArr,
addBreadcrumb,
truncateBreadcrumbs,
breadcrumbsList
}
return (
<RouteContext.Provider value={value}>
{children}
</RouteContext.Provider>
)
}

35
src/hooks/useScreenType.js
View File

@ -1,35 +0,0 @@
import { useEffect, useState } from 'react'
import mq from 'js-mq'
const useScreenType = () => {
const [isMobile, setIsMobile] = useState(null)
useEffect(() => {
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
try {
mq.register([
{ name: 'mobile', query: '(max-width: 767px)' },
{ name: 'desktop', query: '(min-width: 768px)' }
])
mq.on('mobile', (e) => {
setIsMobile(true)
})
mq.on('desktop', (e) => {
setIsMobile(false)
})
const arrayEstadoMq = mq.getState()
if (arrayEstadoMq.length && (arrayEstadoMq[0] === 'not-mobile' || arrayEstadoMq[0] === 'desktop')) {
setIsMobile(false)
} else {
setIsMobile(true)
}
} catch (e) {
console.error(`Error al registrar mq breackpoints - ${e.message}`)
}
}
}, [])
return isMobile
}
export default useScreenType

18
src/layout/ResponsiveContainer.jsx
View File

@ -9,7 +9,7 @@ import { useStore } from '@/hooks/useStore'
import useHasMounted from '@/hooks/useHasMounted'
import useI18n from '@/hooks/useI18n'
import SessionTimeout from '@/components/SessionTimeout'
import UserOptionsMenu from '@/components/widgets/UserOptionsMenu'
// import UserOptionsMenu from '@/components/widgets/UserOptionsMenu'
import { toast } from 'react-toastify'
import { useTheme } from 'next-themes'
@ -191,7 +191,7 @@ const ResponsiveContainer = ({ children }) => {
return (
<LayoutContext.Provider value={containerWrapper}>
<div className={'flex h-screen overflow-hidden text-theme-text-principal'}>
<div className={'flex h-screen overflow-hidden'}>
{/* Sidebar */}
{userObj && userObj.nombre_usuario &&
<Sidebar
@ -215,14 +215,12 @@ const ResponsiveContainer = ({ children }) => {
<Navbar
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
navbarStyles="via-navbar"
menuButtonStyles="via-menu-btn-navbar"
userMenuButtonStyles="via-user-menu-btn-navbar"
userOptionStyles="via-user-options-navbar"
userOptionSelectedStyles="via-user-options-selected-navbar"
onClickLogout={() => doLogout()}
onClickProfile={() => router.push(`${presets.locations.profile}/${environment.getTime()}`)}
MenuOptions={() => <UserOptionsMenu setPreferences={setPreferences} theme={theme} i18n={i18n} />}
// MenuOptions={() => <UserOptionsMenu setPreferences={setPreferences} theme={theme} i18n={i18n} />}
i18n={i18n}
theme={theme}
setPreferences={setPreferences}
title={title}
userObj={userObj}
router={router}
@ -230,10 +228,8 @@ const ResponsiveContainer = ({ children }) => {
/>
}
<main>
<div className={userObj && userObj.nombre_usuario ? 'responsive-container' : ''}>
<main className={userObj && userObj.nombre_usuario ? 'responsive-container' : ''}>
{children}
</div>
</main>
{userObj && userObj.nombre_usuario &&

2
src/pages/404.jsx
View File

@ -22,7 +22,7 @@ const NotFound = () => {
return (
<div className='relative z-10 -m-2 h-[90dvh] overflow-hidden bg-gradient-to-br from-purple-950 via-violet-950 to-blue-950'>
<div className="absolute inset-0 z-[10]">
<div className="absolute inset-0 z-10">
{stars.map((_, index) => (
<div key={index} style={generateStarStyle()} />
))}

20
src/pages/_app.jsx
View File

@ -1,23 +1,21 @@
import { RouteProvider } from '@/hooks/useRoute'
// Estilos globales
import '@/styles/globals.css'
// Dependencias
import { ThemeProvider } from '@/components/theme-provider'
import ResponsiveContainer from '@/layout/ResponsiveContainer'
import LoadingProvider from '@/plugins/LoadingContext'
import I18nProvider from '@/plugins/i18nContext'
import Head from 'next/head'
// Estilos globales
import '@/styles/globals.css'
import 'vComponents/styles/generated/output.css'
import { Portal } from '@headlessui/react'
import { ToastContainer } from 'react-toastify'
import presets from '@/utils/globalPresets'
import { Portal } from '@headlessui/react'
import Head from 'next/head'
import { ToastContainer } from 'react-toastify'
export default function App ({ Component, pageProps }) {
return (
<>
<Head>
<link rel="icon" href="https://wiki.via-asesores.com/logo-orbis_min.png" type="image/x-icon" />
<link rel="icon" href={presets.images.icon} type="image/x-icon" />
<title>Orbis Template</title>
</Head>
@ -36,9 +34,7 @@ export default function App ({ Component, pageProps }) {
/>
</Portal>
<ResponsiveContainer>
<RouteProvider>
<Component {...pageProps} />
</RouteProvider>
</ResponsiveContainer>
</LoadingProvider>
</I18nProvider>

24
src/pages/dashboard/index.jsx
View File

@ -2,7 +2,29 @@ import React from 'react'
const DashboardPage = () => {
return (
<div>DashboardPage</div>
<>
<div className='border bg-background'>
<p className='font-normal'>Texto normal (font-normal - 400)</p>
<p className='font-semibold'>Texto semibold (font-semibold - 600)</p>
<p className='font-bold'>Texto bold (font-bold - 700)</p>
<p className='font-extrabold'>Texto extrabold (font-extrabold - 800)</p>
</div>
<div className='bg-primary'>
<p className='font-normal text-background'>Texto normal (font-normal - 400)</p>
<p className='font-semibold'>Texto semibold (font-semibold - 600)</p>
<p className='bg-them-500 font-bold'>Texto bold (font-bold - 700)</p>
<p className='font-extrabold'>Texto extrabold (font-extrabold - 800)</p>
</div>
<div className='mt-8 flex h-10 w-full flex-col items-center justify-center rounded-lg border bg-background shadow-md'>
<span className='text-base'>
Texto de prueba
</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, nobis.</p>
</div>
{/* <div class="{{ error ? 'text-red-600' : 'text-green-600' }}">Hello</div> */}
</>
)
}

19
src/styles/component-styles/navbar.css
View File

@ -1,19 +0,0 @@
.via-navbar {
@apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-300 ease-in-out !important;
}
.via-menu-btn-navbar {
@apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-300 ease-in-out !important;
}
.via-user-menu-btn-navbar {
@apply bg-slate-700 text-white transition-colors duration-300 ease-in-out !important;
}
.via-user-options-navbar {
@apply text-gray-900 bg-transparent transition-colors duration-300 ease-in-out !important;
}
.via-user-options-selected-navbar {
@apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-300 ease-in-out !important;
}

20
src/styles/globals.css
View File

@ -16,13 +16,29 @@
}
}
/* * {
@apply border-pink-500;
} */
/* Additional Styles */
@import 'additional-styles/toastify.css';
@import 'additional-styles/dropzone.css';
@import 'additional-styles/404.css';
/* Component Styles */
/* @import 'component-styles/navbar.css'; → use vComponents styles instead */
@import 'component-styles/loading.css';
@import 'component-styles/sidebar.css';
@import 'component-styles/navbar.css';
@import 'component-styles/datatable.css';
/* @import 'component-styles/via-ui.css'; */
/* Page Styles */
@import 'page-styles/common.css';
@import 'page-styles/login.css';
@import 'ui-styles/via-ui.css';
/* vComponent Styles */
@import 'vComponents/styles/generated/globals.min.css';
@import 'vComponents/styles/generated/component-styles/navbar.min.css';
/* Analytics Lib Styles */
/* @import 'analytics-lib/styles/generated/output.css'; */

21
src/styles/page-styles/common.css
View File

@ -7,23 +7,35 @@
}
.via-input {
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
@apply w-full text-md bg-background text-foreground rounded-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
}
.via-input:disabled {
@apply bg-gray-300 text-gray-700 dark:bg-gray-800 dark:text-gray-300 cursor-not-allowed !important;
}
.via-input:not(div) {
@apply px-2 !important;
}
.via-input:not(textarea) {
@apply h-7 !important;
@apply h-8 !important;
}
select.via-input {
@apply py-0 !important;
}
.via-input-focus {
@apply border-stone-500 border-[2px] !important;
}
.invalid-feedback {
@apply h-2;
}
.via-input-prepend {
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-l-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
@apply w-full text-sm text-foreground rounded-l-lg border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
}
.via-append-input {
@ -38,12 +50,13 @@ select.via-input {
}
.via-append-input-extra {
@apply w-8 absolute top-0 -right-1 h-full mr-7 text-sm font-medium text-white bg-theme-app-700 rounded-r-lg border border-theme-app-700 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
@apply absolute top-0 right-0 py-1 px-3 mr-[1.7rem] w-auto h-full text-sm font-medium text-white rounded-full bg-red-700 rounded-r-md hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800;
}
.via-button {
@apply cursor-pointer inline-flex items-center h-8 px-2 m-1 text-white ease-linear transition-colors duration-150 rounded-md border border-gray-300 dark:border-gray-700;
}
.via-div-actions {
@apply flex w-full justify-center flex-wrap;
}

2
src/utils/globalPresets.js
View File

@ -3,7 +3,7 @@ const theme = 'blue'
const presets = {
appTitle: 'Orbis Template',
theme: `${theme}`,
svgIconUrl: 'https://www.via-asesores.com/svgicons/smartoperation/',
svgIconUrl: 'https://www.via-asesores.com/logos/logo_icons/orbisprocess_icon.svg',
images: {
loginFondo: 'https://www.via-asesores.com/backgrounds/smartoperation/SmartOperation_background.png',
welcomeFondo: 'https://www.via-asesores.com/backgrounds/smartoperation/SmartOperation_background.png',

46
tailwind.config.ts
View File

@ -1,19 +1,7 @@
import type { Config } from 'tailwindcss'
import standard from 'via-tailwind'
import { standard, standardThemes } from 'via-tailwind'
const config: Config = {
darkMode: 'class',
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}'
],
theme: {
extend: {
colors: {
'theme-text': {
principal: '#334155',
disabled: '#cbd5e1'
},
'theme-app': {
const themeAppColors = {
50: '#DDE3EB',
100: '#B0C4D6',
200: '#83A5C1',
@ -25,10 +13,36 @@ const config: Config = {
800: '#153758',
900: '#112F4D',
950: '#0E2741'
}
}
const themeTextColors = {
principal: '#334155',
disabled: '#cbd5e1'
}
const config: Config = {
darkMode: 'class',
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/analytics-lib/dist/**/*.{js,ts,jsx,tsx}',
'./node_modules/vComponents/dist/**/*.{js,ts,jsx,tsx}',
'./node_modules/via-ui/dist/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
colors: {
'theme-text': themeTextColors,
'theme-app': themeAppColors
}
}
},
plugins: [standard]
plugins: [
standard,
standardThemes({
'theme-app': themeAppColors,
'theme-text': themeTextColors
})
]
}
export default config