diff --git a/frontend/src/components/home/Updates/update.module.scss b/frontend/src/components/home/Updates/update.module.scss index 574e7d8fc..687715950 100644 --- a/frontend/src/components/home/Updates/update.module.scss +++ b/frontend/src/components/home/Updates/update.module.scss @@ -1,18 +1,28 @@ @use "../../../style/colors.scss" as c; +@keyframes Enter { + from { + transform: scaleY(0); + opacity: 0; + } + to { + transform: scaleY(1); + opacity: 1; + } +} + .Update { background-color: c.$lightgrey; padding: 0.75rem; + transform-origin: top; + animation-name: Enter; + animation-duration: 750ms; } .Update:global(.dark) { background-color: c.$lightgrey-dark; } -.Update.NoName { - height: 70px; -} - .LogContainer { max-height: 80vh; } diff --git a/frontend/src/components/update/update.module.scss b/frontend/src/components/update/update.module.scss index 98efac1b7..0feb891b7 100644 --- a/frontend/src/components/update/update.module.scss +++ b/frontend/src/components/update/update.module.scss @@ -1,17 +1,44 @@ @use "../../style/colors.scss" as c; +@keyframes Enter { + from { + transform: scaleY(0); + opacity: 0; + } + to { + transform: scaleY(1); + opacity: 1; + } +} + .Update { background-color: c.$lightgrey; padding: 0.75rem; height: 90px; + transform-origin: top; + animation-name: Enter; + animation-duration: 750ms; } .Update:global(.dark) { background-color: c.$lightgrey-dark; } +@keyframes EnterNoName { + from { + transform: scaleY(0); + opacity: 0; + } + + to { + transform: scaleY(1); + opacity: 1; + } +} + .Update.NoName { height: 70px; + animation-name: EnterNoName; } .LogContainer {