adding missing styles

9 files changed, 77 insertions, 35 deletions

diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js
index b4c34a2..732e311 100644
--- a/client/src/admin/data/translations.js
+++ b/client/src/admin/data/translations.js
@@ -4,9 +4,9 @@ export const translations = {
   "en": {
     "main-title": "Website Manager",
     "login-to-admin": "Login to Admin Panel",
-    "login-info": "Put your user name and password, then click login button",
+    "login-info": "Put your email and password, then click login button",
     "login": "Login",
-    "user": "User name",
+    "email": "Email",
     "password": "Password",
     "no-saved-websites": "You don't have any saved projects, create a new one",
     "create-new-project": "Create new project",
@@ -16,9 +16,9 @@ export const translations = {
     "show-saved-projects": "Show saved projects",
     "show-saved-projects-hover": "Click to show list of all saved projects",
     "click-to-change-language": "Click to change language in the website manager",
-    "click-to-change-user": "Click to logout or change user password",
+    "click-to-change-user": "Click to logout or change user settings",
     "logout": "Logout",
-    "click-to-logout": "Click to logout/change current user",
+    "click-to-logout": "Click to logout current user",
     "user-settings": "User settings",
     "click-to-change-user-settings": "Click to change user name, password or to completely remove current user",
   },
diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss
index 0585cd6..e74c343 100644
--- a/client/src/admin/scss/_forms.scss
+++ b/client/src/admin/scss/_forms.scss
@@ -12,7 +12,7 @@
 }
 
 .text-input-label {
-  font-size: 1.25em;
+  font-size: 1em;
   width: 100%;
   color: #aaa;
   display:block;
@@ -21,10 +21,11 @@
   transition: all .3s;
   z-index: -1;
   cursor: text;
+  pointer-events: none;
 }
 
 .text-input-field {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   box-shadow: none;
   background: $background;
   color: $text;
diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss
index f03ad86..d15363f 100644
--- a/client/src/admin/scss/_globals.scss
+++ b/client/src/admin/scss/_globals.scss
@@ -3,10 +3,14 @@ html {
 }
 
 * {
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: -moz-none;
-    -o-user-select: none;
-    user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+p {
+  line-height: 1.5;
 }
 
diff --git a/client/src/admin/scss/_info.scss b/client/src/admin/scss/_info.scss
index ac32949..9c760db 100644
--- a/client/src/admin/scss/_info.scss
+++ b/client/src/admin/scss/_info.scss
@@ -3,6 +3,5 @@
   color: #ddd;
   flex-grow: 0;
   text-align: center;
-  padding-bottom: 3vh;
   padding-top: 3vh;
 }
diff --git a/client/src/admin/scss/_main.scss b/client/src/admin/scss/_main.scss
index e182f3c..a5e6636 100644
--- a/client/src/admin/scss/_main.scss
+++ b/client/src/admin/scss/_main.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: space-between;
   position: fixed;
+  padding: 1em 1.5em 1.5em 1.5em;
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/client/src/admin/scss/_mainScreen.scss b/client/src/admin/scss/_mainScreen.scss
index 4eec73a..e9eeeb3 100644
--- a/client/src/admin/scss/_mainScreen.scss
+++ b/client/src/admin/scss/_mainScreen.scss
@@ -1,13 +1,31 @@
 .main-screen {
   text-align: center;
 
+  @keyframes shine {
+    0% {background-size: 220% 100%;}
+    10% {background-position: 0 100%;}
+    100% {background-position: 0 100%;}
+  }
+
   &__header {
     display: block;
     margin-top: 10vh;
     margin-bottom: 20vh;
-    font-size: 300%;
-    color: white;
+    font-size: 2.5em;
+    font-weight: bold;
+    color: $text;
     text-align: center;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(to right, $text 50%, $text-selected 55%, $text 60%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-position: 110%;
+    animation: shine 15s ease-out;
+    background-size: 220% 100%;
+    animation-iteration-count: infinite;
+    animation-delay: 8s;
   }
 
   &__list {
@@ -15,7 +33,7 @@
   }
 
   &__item {
-    font-size: 175%;
+    font-size: 1.5em;
     color: white;
     transition: color .3s;
     cursor: pointer;
diff --git a/client/src/admin/scss/_topBar.scss b/client/src/admin/scss/_topBar.scss
index af9fcd6..3fe5006 100644
--- a/client/src/admin/scss/_topBar.scss
+++ b/client/src/admin/scss/_topBar.scss
@@ -5,10 +5,10 @@
 }
 
 .top-bar {
-  flex-grow: 0;
-  display: flex;
-  justify-content: end;
-  padding: 1em;
+  width: 100%;
+  text-align: right;
+  white-space: nowrap;
+  padding-bottom: 1em;
 
 
   &__fog {
@@ -22,6 +22,7 @@
 
 .user {
   position: relative;
+  display: inline-block;
 
   &__list {
     position: absolute;
diff --git a/client/src/login/jsx/LoginPanel.jsx b/client/src/login/jsx/LoginPanel.jsx
index c84e843..8a38f50 100644
--- a/client/src/login/jsx/LoginPanel.jsx
+++ b/client/src/login/jsx/LoginPanel.jsx
@@ -16,26 +16,26 @@ const LoginPanel = () => {
 
   const submit = (e) => {
     e.preventDefault();
-    login({email, password});
+    active && login({email, password});
   }
 
   return (
     <div className="login-panel">
+      <p className="login-panel__header">
+        {t('login-to-admin')}
+      </p>
       <form className="login-panel__form" onSubmit={submit}>
-        <p className="login-panel__header">
-          {t('login-to-admin')}
-        </p>
         <div className="text-input">
           <input
             onChange={e => setEmail(e.target.value)}
-            placeholder={t('user')}
-            id="admin-user-name"
-            name="admin-user-name"
+            placeholder={t('email')}
+            id="admin-email"
+            name="admin-email"
             type="text"
             className="text-input-field"
             value={email}
           />
-          <label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
+          <label htmlFor="admin-user-name" className="text-input-label">{t('email')}</label>
         </div>
         <div className="text-input">
           <input
diff --git a/client/src/login/scss/_loginPanel.scss b/client/src/login/scss/_loginPanel.scss
index 8afb066..b105784 100644
--- a/client/src/login/scss/_loginPanel.scss
+++ b/client/src/login/scss/_loginPanel.scss
@@ -1,14 +1,37 @@
 .login-panel {
   text-align: center;
+  padding: 1.5em;
 
   &__form {
     display: inline-block;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  @keyframes shine {
+    0% {background-size: 220% 100%;}
+    7% {background-position: 0 100%;}
+    100% {background-position: 0 100%;}
   }
 
   &__header {
-    color: white;
-    font-size: 2em;
+    color: $text;
+    font-size: 1.75em;
+    line-height: 1.5;
     margin-bottom: 4em;
+    position: relative;
+    display: inline-block;
+    color: $text;
+    overflow: hidden;
+    background: linear-gradient(to right, $text 50%, $text-selected 55%, $text 60%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-position: 110%;
+    animation: shine 15s ease-out;
+    background-size: 220% 100%;
+    animation-iteration-count: infinite;
+    animation-delay: 8s;
   }
 
   &__button {
@@ -21,14 +44,9 @@
     padding: .5em 1.5em;
     margin: 0 auto;
     transition: .3s color, .3s background;
-    cursor: pointer;
-
-    &:hover {
-      background: $text-inactive;
-      color: $background;
-    }
 
     &.active {
+      cursor: pointer;
       background: $background;
       color: $text-selected;
       border: 2px solid $text-selected;