Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add transition effects for smoother UI interactions

Browse source
This commit is contained in:
Chneemann 2025-04-18 05:29:47 +02:00
parent a63e03ebc9
commit be468cabd6
17 changed files with 122 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/components/board/task/task.component.scss
View file

@ -10,10 +10,11 @@ section {
justify-content: center;
width: 238px;
padding: 16px;
margin-bottom: 16px;
border-radius: 24px;
background-color: var(--white);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
margin-bottom: 16px;
transition: box-shadow 0.3s ease;
cursor: pointer;
&:hover {

10
src/app/components/contacts/contacts.component.scss
View file

@ -19,10 +19,12 @@
cursor: pointer;
font-size: 21px;
font-weight: 700;
&:hover {
background-color: var(--light-blue);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
img {
padding-left: 12px;
}
@ -83,9 +85,11 @@
align-items: center;
padding: 16px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
background-color: var(--very-light-gray);
background-color: var(--light-gray);
}
}
@ -93,6 +97,7 @@
color: var(--white);
background-color: var(--dark-blue);
cursor: unset;
&:hover {
background-color: var(--dark-blue);
}
@ -108,12 +113,14 @@
height: 42px;
border-radius: 100%;
border: 2px solid var(--white);
.initials {
font-size: 12px;
font-weight: 400;
color: var(--white);
text-shadow: 1px 1px 2px var(--black);
}
img {
position: absolute;
width: 12px;
@ -225,6 +232,7 @@
margin: 0;
z-index: 1;
cursor: pointer;
img {
display: flex;
align-items: center;

4
src/app/components/login/footer/footer.component.scss
View file

@ -6,17 +6,19 @@
left: 0;
width: 100%;
margin-bottom: 36px;
a {
text-align: center;
font-size: 16px;
font-weight: 400;
color: var(--gray);
padding: 8px;
cursor: pointer;
width: fit-content;
height: 19px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
color: var(--light-blue);
font-weight: 600;

7
src/app/components/login/header/header.component.scss
View file

@ -13,6 +13,7 @@
right: 100px;
display: inline-flex;
align-items: center;
p {
display: flex;
align-items: center;
@ -20,6 +21,7 @@
font-size: 16px;
font-weight: 400;
}
button {
display: flex;
justify-content: center;
@ -32,8 +34,9 @@
font-size: 16px;
font-weight: 700;
border: 0px;
transition: 125ms ease-in-out;
transition: box-shadow 0.3s ease, background-color 0.3s ease;
cursor: pointer;
&:hover {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue);
@ -45,7 +48,9 @@
position: absolute;
top: 12px;
right: 12px;
transition: filter 0.3s ease;
cursor: pointer;
&:hover {
filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
hue-rotate(154deg) brightness(92%) contrast(92%);

1
src/app/components/login/login-loader/login-loader.component.scss
View file

@ -32,6 +32,7 @@
margin-top: 200px;
color: var(--white);
text-shadow: 3px 3px 3px var(--black);
p {
font-size: 21px;
font-weight: 400px;

39
src/app/components/login/login.component.scss
View file

@ -17,10 +17,12 @@ section {
box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
border-radius: 30px;
padding: 48px 64px;
p {
font-size: 61px;
font-weight: 700;
}
img {
padding: 12px 0 24px 0;
}
@ -32,9 +34,11 @@ section {
align-items: center;
position: relative;
width: 90%;
.custom-input::-webkit-contacts-auto-fill-button {
visibility: hidden;
}
.custom-input {
font-size: 20px;
font-weight: 400;
@ -43,24 +47,34 @@ section {
border: 1px solid var(--light-gray);
padding: 12px 16px;
}
.custom-img {
&:nth-child(2) {
position: absolute;
right: 0;
top: 5px;
}
&:nth-child(5) {
position: absolute;
right: 0;
top: 88px;
}
}
.passwordEye {
position: absolute;
right: -5px;
top: 88px;
transition: filter 0.3s ease;
cursor: pointer;
&:hover {
filter: brightness(0) saturate(100%) invert(53%) sepia(83%) saturate(480%)
hue-rotate(155deg) brightness(94%) contrast(88%);
}
}
.custom-input:focus + .custom-img {
display: none;
}
@ -73,6 +87,7 @@ section {
height: 24px;
padding: 6px;
width: 120%;
p {
color: var(--red);
font-size: 12px !important;
@ -88,15 +103,17 @@ section {
.forgot-pw {
margin: 12px 0;
a {
text-align: center;
font-size: 16px;
font-weight: 400;
color: var(--gray);
cursor: pointer;
width: fit-content;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
color: var(--light-blue);
font-weight: 600;
@ -119,7 +136,9 @@ section {
align-items: center;
font-size: 16px;
color: var(--gray);
transition: all 0.3s ease;
cursor: pointer;
&:hover {
color: var(--light-blue);
font-weight: 600;
@ -131,12 +150,12 @@ input[type="checkbox"] {
height: 20px;
margin-right: 8px;
accent-color: var(--light-blue);
transition: all 0.3s ease;
cursor: pointer;
transition: all 0.2s ease;
}
input[type="checkbox"]:hover {
&:hover {
transform: scale(1.1);
}
}
/*------------- RESPONSIVE -------------*/
@ -152,9 +171,11 @@ input[type="checkbox"]:hover {
width: 352px;
height: fit-content;
padding: 24px 36px;
p {
font-size: 47px;
}
.line {
img {
width: 120px;
@ -167,9 +188,11 @@ input[type="checkbox"]:hover {
.content {
width: calc(100vw - 96px);
padding: 24px 36px;
p {
font-size: 36px;
}
.line {
img {
width: 100px;
@ -179,6 +202,7 @@ input[type="checkbox"]:hover {
.loading-text {
margin-top: 180px;
p {
font-size: 18px;
font-weight: 400px;
@ -187,6 +211,7 @@ input[type="checkbox"]:hover {
.error-msg {
height: 21px;
p {
font-size: 11px !important;
}
@ -197,9 +222,11 @@ input[type="checkbox"]:hover {
.content {
width: calc(100vw - 72px);
padding: 12px 24px;
p {
font-size: 32px;
}
.line {
img {
width: 80px;
@ -212,14 +239,17 @@ input[type="checkbox"]:hover {
font-size: 16px;
padding: 12px;
}
.custom-img {
&:nth-child(2) {
top: 2px;
}
&:nth-child(5) {
top: 73px;
}
}
.passwordEye {
top: 76px;
}
@ -227,6 +257,7 @@ input[type="checkbox"]:hover {
.error-msg {
height: 18px;
p {
font-size: 10px !important;
}

63
src/app/components/login/register/register.component.scss
View file

@ -25,11 +25,13 @@ section {
align-items: center;
justify-content: space-between;
width: 100%;
.headline {
text-align: center;
font-size: 61px;
font-weight: 700;
}
.spacer {
padding-left: 38px;
}
@ -47,9 +49,11 @@ section {
align-items: center;
position: relative;
width: 90%;
.custom-input::-webkit-contacts-auto-fill-button {
visibility: hidden;
}
.custom-input {
font-size: 20px;
font-weight: 400;
@ -58,40 +62,51 @@ section {
border: 1px solid var(--light-gray);
padding: 12px 16px;
}
.custom-img {
&:nth-child(2) {
position: absolute;
right: 0;
top: 15px;
}
&:nth-child(5) {
position: absolute;
right: 0;
top: 102px;
}
&:nth-child(8) {
position: absolute;
right: 0;
top: 186px;
}
&:nth-child(11) {
position: absolute;
right: 0px;
top: 272px;
}
}
.passwordEye {
position: absolute;
right: -5px;
top: 186px;
cursor: pointer;
}
.passwordEye,
.passwordEyeConfirm {
position: absolute;
right: -5px;
top: 272px;
top: 186px;
transition: filter 0.3s ease;
cursor: pointer;
&:hover {
filter: brightness(0) saturate(100%) invert(53%) sepia(83%) saturate(480%)
hue-rotate(155deg) brightness(94%) contrast(88%);
}
}
.passwordEyeConfirm {
top: 272px;
}
.custom-input:focus + .custom-img {
display: none;
}
@ -104,6 +119,7 @@ section {
height: 24px;
padding: 6px;
width: 120%;
p {
color: var(--red);
font-size: 12px !important;
@ -121,33 +137,27 @@ section {
align-items: center;
justify-content: center;
width: 100%;
input[type="checkbox"] {
width: 24px;
height: 24px;
margin: 0 10px 0 15px;
appearance: none;
border: 0;
border-radius: 0;
background-image: url("./../../../../assets/img/login/checkbox.svg");
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
margin-right: 8px;
accent-color: var(--light-blue);
transition: all 0.3s ease;
cursor: pointer;
&:checked {
background-image: url("./../../../../assets/img/login/checkbox-checked.svg");
&:hover {
background-image: url("./../../../../assets/img/login/checkbox-checked-hover.svg");
}
}
&:hover {
background-image: url("./../../../../assets/img/login/checkbox-hover.svg");
transform: scale(1.1);
}
}
.label {
p {
font-size: 14px;
font-weight: 400;
padding-right: 20px;
}
a {
text-decoration: none;
color: var(--light-blue);
@ -229,23 +239,29 @@ section {
font-size: 16px;
padding: 12px;
}
.custom-img {
&:nth-child(2) {
top: 15px;
}
&:nth-child(5) {
top: 90px;
}
&:nth-child(8) {
top: 162px;
}
&:nth-child(11) {
top: 237px;
}
}
.passwordEye {
top: 162px;
}
.passwordEyeConfirm {
top: 237px;
}
@ -253,6 +269,7 @@ section {
.error-msg {
height: 18px;
p {
font-size: 10px !important;
}

6
src/app/components/summary/summary.component.html
View file

@ -84,13 +84,15 @@
</div>
<!-- GREETING CONTAINER -->
@if (currentUser) {
<div class="welcome-container">
<p>{{ greeting }},</p>
<span id="welcome-user">
{{ currentUser!.firstName }}<br />
{{ currentUser!.lastName }}
{{ currentUser.firstName }}<br />
{{ currentUser.lastName }}
</span>
</div>
}
</div>
<!-- Show loading spinner if loading -->

3
src/app/components/summary/summary.component.scss
View file

@ -53,11 +53,12 @@
height: 168px;
border-radius: 30px;
background-color: var(--white);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
transition: all 0.5s ease;
cursor: pointer;
&:hover {
transform: scale(1.02);
transition: 500ms ease-out;
background-color: var(--dark-blue);
p,

1
src/app/interfaces/task.interface.ts
View file

@ -24,7 +24,6 @@ export interface Subtask {
}
export interface Assignee {
id?: string;
userId: string;
}

7
src/app/shared/components/buttons/btn-back/btn-back.component.scss
View file

@ -4,19 +4,24 @@
align-items: center;
width: 38px;
height: 38px;
border-radius: 100%;
transition: all 0.3s ease;
cursor: pointer;
img {
width: 22px;
height: 22px;
filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
hue-rotate(154deg) brightness(92%) contrast(92%);
}
&:hover {
background-color: var(--light-blue);
border-radius: 100%;
scale: 1.1;
img {
scale: 1.1;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
}

7
src/app/shared/components/buttons/btn-close/btn-close.component.scss
View file

@ -4,19 +4,24 @@
align-items: center;
width: 38px;
height: 38px;
border-radius: 100%;
transition: all 0.3s ease;
cursor: pointer;
img {
width: 22px;
height: 22px;
filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
hue-rotate(154deg) brightness(92%) contrast(92%);
}
&:hover {
background-color: var(--light-blue);
border-radius: 100%;
scale: 1.1;
img {
scale: 1.1;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
}

1
src/app/shared/components/buttons/form-btn/form-btn.component.scss
View file

@ -8,6 +8,7 @@
cursor: pointer;
background-color: var(--white);
border: 1px solid var(--black);
transition: all 0.3s ease;
&:hover:not(:disabled) {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

1
src/app/shared/components/header/header.component.scss
View file

@ -27,6 +27,7 @@
border-radius: 25px;
background-color: var(--white);
color: var(--light-blue);
transition: all 0.3s ease;
cursor: pointer;
&:hover {
background-color: var(--very-light-gray);

1
src/app/shared/components/header/navbar/navbar.component.scss
View file

@ -26,6 +26,7 @@
padding: 8px 16px;
border-radius: 8px;
color: var(--white);
transition: all 0.3s ease;
cursor: pointer;
span {
width: 118px;

1
src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
View file

@ -18,6 +18,7 @@ nav {
width: 80px;
height: 65px;
border-radius: 16px;
transition: background-color 0.3s ease;
cursor: pointer;
&:hover {
background-color: var(--very-dark-blue);

3
src/app/shared/components/sidebar/sidebar.component.scss
View file

@ -26,6 +26,7 @@ nav {
padding: 4px 0;
padding-left: 56px;
height: 46px;
transition: background-color 0.3s ease;
cursor: pointer;
img {
@ -68,12 +69,14 @@ nav {
text-align: center;
text-decoration: none;
color: var(--light-gray);
transition: color 0.3s ease;
cursor: pointer;
img {
display: none;
width: 30px;
height: 30px;
transition: filter 0.3s ease;
cursor: pointer;
&:hover {