From 88c2fa63eb8c3ade93914f77d427219b3233ca02 Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Sat, 28 Nov 2020 00:49:09 +0100
Subject: adding missing styles

---
 client/src/login/jsx/LoginPanel.jsx    | 16 ++++++++--------
 client/src/login/scss/_loginPanel.scss | 34 ++++++++++++++++++++++++++--------
 2 files changed, 34 insertions(+), 16 deletions(-)

(limited to 'client/src/login')

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;
-- 
cgit v1.2.3