[PVI-011] - fix language and password functionality

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);
+  }
 }

src/App.scss

@@ -14,6 +14,8 @@
   --size-radius: 4px;
 
   --gap: 4px;
+
+  --container-padding: 20px;
 
   line-height: 1.4;
 

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 (
     <div className="App">
       <header className="App-header">
-        <h1>{translate(`passwordValidator`, translations)}</h1>
+        <div className="App-header-side">
+          <img src={reactLogo} className="App-logo" alt="React logo" />
+        </div>
+        <h1 className="App-header-text">
+          {translate(`passwordValidator`, translations)}
+        </h1>
+        <div className="App-header-side">
+          <LanguageSelect />
+        </div>
       </header>
       <div className="App-body">
-        <LanguageSelect />
         <Fieldset>{<PasswordInput validate showCriteria />}</Fieldset>
         <Fieldset>{<PasswordGenerator />}</Fieldset>
       </div>