diff --git a/src/App.css b/src/App.css index 55c16c4..3b7fa38 100644 --- a/src/App.css +++ b/src/App.css @@ -10,10 +10,25 @@ z-index: 1000; height: 10vh; display: flex; + flex-direction: row; + justify-content: space-between; align-items: center; - justify-content: center; font-size: calc(10px + 2vmin); background-color: var(--color-background-header); + padding: 0 var(--container-padding); +} + +.App-header-text { + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.App-header-side { + display: flex; + align-items: center; + width: 72px; } .App-body { @@ -24,7 +39,7 @@ flex: 1; overflow-y: auto; - padding: 20px; + padding: var(--container-padding); gap: 24px; } @@ -41,8 +56,30 @@ gap: 4px; font-size: calc(10px + 2vmin); background-color: var(--color-background-header); + padding: 0 var(--container-padding); } .App-link { - color: #61dafb; + color: var(--color-dark); +} + +.App-logo { + height: 3vmin; + background-color: var(--color-dark); + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } diff --git a/src/App.scss b/src/App.scss index 8bbf546..f3dc26e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -14,6 +14,8 @@ --size-radius: 4px; --gap: 4px; + + --container-padding: 20px; line-height: 1.4; diff --git a/src/App.tsx b/src/App.tsx index 84e79fe..1c1392e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,16 +5,24 @@ import { Fieldset, PasswordInput, PasswordGenerator } from "./components"; import { translations } from "./translations"; import LanguageSelect from "./components/LanguagueSelect"; import useLanguage from "./hooks/useLanguage"; +import reactLogo from "./assets/react.svg"; function App() { const { translate } = useLanguage(); return (