Browse Source

chore(gui-v2): update transitions & styles

pull/3249/head
braks 2 years ago
parent
commit
c323a53b88
  1. 30
      packages/nc-gui-v2/assets/style-v2.scss
  2. 7
      packages/nc-gui-v2/pages/signin.vue
  3. 5
      packages/nc-gui-v2/pages/signup/[[token]].vue
  4. 19
      packages/nc-gui-v2/windi.config.ts

30
packages/nc-gui-v2/assets/style-v2.scss

@ -27,17 +27,8 @@ main {
overflow-x: hidden; overflow-x: hidden;
} }
nav,
nav .v-list {
@apply dark:(!bg-gray-900 text-white)
}
.v-divider {
@apply dark:bg-white
}
a { a {
@apply prose text-primary underline hover:opacity-75 dark:(text-secondary); @apply prose text-primary !underline hover:!text-pink-500;
} }
h1, h2, h3, h4, h5, h6, p, label, button, textarea, select { h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@ -159,25 +150,24 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
.page-leave-active, .page-leave-active,
.layout-enter-active, .layout-enter-active,
.layout-leave-active { .layout-leave-active {
@apply transition-opacity duration-300 ease-in-out; @apply transition-opacity duration-400 ease-in-out;
} }
.page-enter-active, .page-enter-from,
.page-leave-active, .page-leave-to,
.layout-enter-active, .layout-enter-from,
.layout-leave-active { .layout-leave-to {
@apply opacity-0; @apply opacity-0;
} }
.slide-enter-active, .slide-enter-active,
.slide-leave-active { .slide-leave-active {
@apply transition-all duration-200 ease-in-out; @apply transition-all duration-200 ease-in-out;
transform: translate(100%, 0);
} }
.slide-enter, .slide-enter-from,
.slide-leave-active { .slide-leave-to {
transform: translate(-100%, 0); transform: translate(-100%, 0);
} }
@ -190,8 +180,8 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@apply ring ring-xl; @apply ring ring-xl;
} }
.glow-enter, .glow-enter-from,
.glow-leave-active { .glow-leave-to {
@apply opacity-0; @apply opacity-0;
} }

7
packages/nc-gui-v2/pages/signin.vue

@ -128,8 +128,11 @@ function resetError() {
</div> </div>
<div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"> <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
<button class="submit" type="submit"> <button class="submit group" type="submit">
<span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span> <span class="flex items-center gap-2">
<MdiLogin />
{{ $t('general.signIn') }}
</span>
</button> </button>
<div class="text-end prose-sm"> <div class="text-end prose-sm">

5
packages/nc-gui-v2/pages/signup/[[token]].vue

@ -10,6 +10,7 @@ import {
useApi, useApi,
useGlobal, useGlobal,
useI18n, useI18n,
useNuxtApp,
useRoute, useRoute,
} from '#imports' } from '#imports'
@ -17,6 +18,8 @@ definePageMeta({
requiresAuth: false, requiresAuth: false,
}) })
const { $e } = useNuxtApp()
const route = useRoute() const route = useRoute()
const { appInfo, signIn } = useGlobal() const { appInfo, signIn } = useGlobal()
@ -84,6 +87,8 @@ async function signUp() {
signIn(token!) signIn(token!)
await navigateTo('/') await navigateTo('/')
$e('a:auth:sign-up')
}) })
.catch(async (err) => { .catch(async (err) => {
error = await extractSdkResponseErrorMsg(err) error = await extractSdkResponseErrorMsg(err)

19
packages/nc-gui-v2/windi.config.ts

@ -55,27 +55,10 @@ export default defineConfig({
mono: ['Roboto', 'mono'], mono: ['Roboto', 'mono'],
}, },
extend: { extend: {
typography: {
DEFAULT: {
css: {
'a': {
'color': '#1348ba',
'&:hover': {
color: 'rgba(19,72,186,0.75)',
},
},
'nuxt-link': {
'color': '#1348ba',
'&:hover': {
color: 'rgba(19,72,186,0.75)',
},
},
},
},
},
colors: { colors: {
...windiColors, ...windiColors,
...themeColors, ...themeColors,
accent: windiColors.pink['500'],
dark: colors.dark, dark: colors.dark,
light: colors.light, light: colors.light,
}, },

Loading…
Cancel
Save