diff --git a/frontend/package.json b/frontend/package.json index 5df2b3561..48b2100e1 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,8 +4,7 @@ "private": true, "scripts": { "start": "node run/server.js", - "predev": "yarn compile-scss", - "dev": "vite", + "dev": "concurrently \"yarn watch-scss\" \"vite\"", "prebuild": "yarn compile-scss", "build": "vite build", "preserve": "yarn compile-scss", @@ -19,7 +18,8 @@ "test:debug": "cross-env TZ=UTC node --inspect-brk ./node_modules/vitest/vitest.mjs", "test:watch": "cross-env TZ=UTC vitest", "locales": "scripts/sort.sh", - "compile-scss": "sass --load-path=node_modules --load-path=src/assets/scss src/assets/scss/gradido.scss src/assets/css/gradido.css" + "compile-scss": "sass --load-path=node_modules --load-path=src/assets/scss src/assets/scss/gradido.scss src/assets/css/gradido.css", + "watch-scss": "sass --watch --load-path=node_modules --load-path=src/assets/scss src/assets/scss/gradido.scss src/assets/css/gradido.css" }, "dependencies": { "@babel/core": "^7.13.13", @@ -79,6 +79,7 @@ "@vue/test-utils": "^2.4.5", "babel-plugin-component": "^1.1.0", "babel-plugin-transform-require-context": "^0.1.1", + "concurrently": "^9.1.2", "cross-env": "^7.0.3", "dotenv-webpack": "^7.0.3", "eslint": "8.57.0", diff --git a/frontend/src/assets/scss/auth-navbar.scss b/frontend/src/assets/scss/auth-navbar.scss new file mode 100644 index 000000000..1dcd038d5 --- /dev/null +++ b/frontend/src/assets/scss/auth-navbar.scss @@ -0,0 +1,13 @@ +.auth-navbar > a, .auth-navbar > a:hover { + color: #0e79bc; +} + +.auth-navbar > a.router-link-exact-active { + color: #383838; +} + +.auth-template a:hover, +.auth-template .btn:hover, +.auth-template .language-switch .locales:hover { + text-decoration: underline; +} diff --git a/frontend/src/assets/scss/custom/gradido-custom/_color.scss b/frontend/src/assets/scss/custom/gradido-custom/_color.scss index fa77c1dd2..b741f6be3 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_color.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_color.scss @@ -19,6 +19,7 @@ $gradido-205: rgb(205 86 86) ; $gradido-197: rgb(197 141 56) ; $gradido-209: rgb(209 209 209) ; $gradido-4: rgb(4 112 6) ; +$gradido-56: rgb(56 56 56) ; $black: #000 ; $grays: () ; $grays: map.merge( diff --git a/frontend/src/assets/scss/custom/gradido-custom/_links.scss b/frontend/src/assets/scss/custom/gradido-custom/_links.scss index ae871f7bf..d7d5e1a1a 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_links.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_links.scss @@ -1,7 +1,8 @@ // Links @use "sass:color"; -$link-color: $primary ; +$link-color: $gradido-4; $link-decoration: none ; -$link-hover-color: color.adjust($link-color, $lightness: -15%) ; -$link-hover-decoration: none ; +$link-hover-color: $gradido-56; +$link-hover-decoration: underline; +$link-active-color: $gradido-56; diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index 9464525ec..9feb7fc09 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -45,23 +45,6 @@ html > body { box-shadow: 20pt 20pt 50pt 0 #3838384f !important; } -/* Navbar */ -a, -.navbar-light, -.navbar-nav, -.nav-link { - color: #047006 !important; -} - -a:hover, -.nav-link:hover { - color: #383838 !important; -} - -.navbar-light .navbar-nav .nav-link.active { - color: rgb(35 121 188 / 90%); -} - /* Button */ .btn { border-radius: 25px; diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss index ed81832e4..6a872ee37 100644 --- a/frontend/src/assets/scss/gradido.scss +++ b/frontend/src/assets/scss/gradido.scss @@ -50,3 +50,6 @@ @import "bootstrap/scss/bootstrap"; // Bootstrap-vue (2.21.1) scss + + +@import "auth-navbar"; diff --git a/frontend/src/components/Auth/AuthNavbar.vue b/frontend/src/components/Auth/AuthNavbar.vue index e173408e9..710d15b30 100644 --- a/frontend/src/components/Auth/AuthNavbar.vue +++ b/frontend/src/components/Auth/AuthNavbar.vue @@ -8,9 +8,13 @@ - {{ $t('signup') }} + + {{ $t('signup') }} + {{ $t('|') }} - {{ $t('signin') }} + + {{ $t('signin') }} + @@ -19,6 +23,7 @@ diff --git a/frontend/src/components/Menu/NavItem.vue b/frontend/src/components/Menu/NavItem.vue new file mode 100644 index 000000000..af8760dce --- /dev/null +++ b/frontend/src/components/Menu/NavItem.vue @@ -0,0 +1,19 @@ + + + diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue index 50645ed65..958405b45 100644 --- a/frontend/src/components/Menu/Navbar.vue +++ b/frontend/src/components/Menu/Navbar.vue @@ -79,18 +79,10 @@ export default { height: 150px; } -.auth-navbar > .nav-link { - color: #383838 !important; -} - .navbar-toggler { font-size: 2.25rem; } -.auth-navbar > .router-link-exact-active { - color: #0e79bc !important; -} - button.navbar-toggler > span.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue index a24796d18..82576bbd0 100644 --- a/frontend/src/pages/Login.vue +++ b/frontend/src/pages/Login.vue @@ -38,8 +38,8 @@ - - + + {{ $t('signup') }} @@ -161,8 +161,4 @@ const enterData = computed(() => !showPageMessage.value) padding-right: 0; padding-left: 0; } - -a.register-nav-item { - color: #0e79bc !important; -} diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue index a8044b330..e6c4f0399 100755 --- a/frontend/src/pages/Register.vue +++ b/frontend/src/pages/Register.vue @@ -76,8 +76,8 @@ - -