login screens

label_studio/users/templates/users/new-ui/user_base.html

@@ -20,9 +20,8 @@
 {% block content %}
 <div class="login_page_new_ui">
   <div class="left">
-    <h2>Welcome</h2>
-    <img src="{{ settings.HOSTNAME }}{% static 'images/label_studio_logo.svg' %}" height="93"  alt="Label Studio Logo"/>
-    <h3>A full-fledged open source solution for data labeling test</h3>
+    <img src="{{ settings.HOSTNAME }}{% static 'icons/logo-black.svg' %}" height="64"  alt="Label Studio Logo"/>
+    <h3>A full-fledged open source solution for data labeling</h3>
 
     {% include 'users/new-ui/user_tips.html' %}
 
@@ -32,12 +31,6 @@ <h3>A full-fledged open source solution for data labeling test</h3>
     </div>
   </div>
   <div class="right">
-    <div class="toggle">
-        {% if not settings.DISABLE_SIGNUP_WITHOUT_LINK %}
-        <a href="{{ settings.HOSTNAME }}/user/signup" class="{% if 'signup' in request.path %}active{% endif %}">Sign up</a>
-        <a href="{{ settings.HOSTNAME }}/user/login" class="{% if 'login' in request.path %}active{% endif %}">Log in</a>
-        {% endif %}
-    </div>
     {% block user_content %}
   </div>
 </div>

label_studio/users/templates/users/new-ui/user_login.html

@@ -1,22 +1,34 @@
 {% extends 'users/new-ui/user_base.html' %}
 
 {% block user_content %}
-  <form id="login-form" action="{% url 'user-login' %}{% if next %}?next={{ next }}{% endif %}" method="post">
-    {% csrf_token %}
-    <p><input type="text" class="ls-input" name="email" id="email" placeholder="Email" value="{{ form.data.email }}"></p>
-    <p><input type="password" class="ls-input" name="password" id="password" placeholder="Password"></p>
-    {% if form.non_field_errors %}
-      {% for error in form.non_field_errors %}
-        <p class="error">
-          {{ error }}
-        </p>
-      {% endfor %}
-    {% endif %}
-    <p>
-      <input type="checkbox" id="persist_session" name="persist_session" class="ls-checkbox" checked="checked" style="width: auto;" />
-      <label for="persist_session">Keep me logged in this browser</label>
-    </p>
-    <p><button type="submit" aria-label="Log In" class="ls-button ls-button_look_primary">Log in</button></p>
-  </form>
-
+  <div class="form-wrapper">
+    <h2>Log in</h2>
+    <form id="login-form" action="{% url 'user-login' %}{% if next %}?next={{ next }}{% endif %}" method="post">
+      {% csrf_token %}
+      <div class="input-wrapper">
+        <label>Email Address</label>
+        <input type="text" class="ls-input" name="email" id="email" value="{{ form.data.email }}">
+      </div>
+      <div class="input-wrapper">
+        <label>Password</label>
+        <input type="password" class="ls-input" name="password" id="password">
+      </div>
+      {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+          <p class="error">
+            {{ error }}
+          </p>
+        {% endfor %}
+      {% endif %}
+      <div class="form-group">
+        <input type="checkbox" id="persist_session" name="persist_session" class="ls-checkbox" checked="checked" style="width: auto;" />
+        <label for="persist_session">Keep me logged in this browser</label>
+      </div>
+      <button type="submit" aria-label="Log In" class="ls-button ls-button_look_primary">Log in</button>
+    </form>
+  </div>
+  <div class="text-wrapper">
+    <p class="">Don't have an account?</p>
+    <a href="{{ settings.HOSTNAME }}/user/signup">Sign up</a>
+  </div>
 {% endblock %}

label_studio/users/templates/users/new-ui/user_signup.html

@@ -2,55 +2,60 @@
 {% load static %}
 
 {% block user_content %}
-
-  <form id="signup-form"
+  <div class="form-wrapper">
+    <h2>Sign Up</h2>
+    <form id="signup-form"
         action="{% url 'user-signup' %}?{% if next %}&next={{ next }}{% endif %}{% if token %}&token={{ token }}{% endif %}"
         method="post"
-  >
+    >
     {% csrf_token %}
-    <div>
-      <input type="text" class="ls-input" name="email" id="email" placeholder="Email" value="{{ form.data.email }}">
-      {% if user_form.errors.email %}
-        <ul class="field_errors">
-          {% for error in user_form.errors.email %}
-            <li>{{ error }}</li>
-          {% endfor %}
-        </ul>
-      {% endif %}
+      <div class="input-wrapper">
+        <label>Email Address</label>
+        <input type="text" class="ls-input" name="email" id="email" value="{{ form.data.email }}">
+        {% if user_form.errors.email %}
+          <ul class="field_errors">
+            {% for error in user_form.errors.email %}
+              <li>{{ error }}</li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+        </div>
+      <div class="input-wrapper">
+        <label>Password</label>
+        <input type="password" class="ls-input" name="password" id="password">
+        {% if user_form.errors.password %}
+          <ul class="field_errors">
+            {% for error in user_form.errors.password %}
+              <li>{{ error }}</li>
+            {% endfor %}
+          </ul>
+        {% endif %}
       </div>
-    <div>
-      <input type="password" class="ls-input" name="password" id="password" placeholder="Password">
-      {% if user_form.errors.password %}
-        <ul class="field_errors">
-          {% for error in user_form.errors.password %}
-            <li>{{ error }}</li>
-          {% endfor %}
-        </ul>
-      {% endif %}
+      <div class="form-group">
+        <input name="allow_newsletters" id="allow_newsletters" type="hidden" value="true">
+        <input name="allow_newsletters_visual" id="allow_newsletters_visual" class="ls-checkbox"
+                type="checkbox" style="width: auto" checked="true"
+                onchange="document.getElementById('allow_newsletters').value=document.getElementById('allow_newsletters_visual').checked">
+        <label for="allow_newsletters_visual" style="display: inline-block; cursor: pointer;">
+          Get the latest news from Heidi
+          <img src="{{ settings.HOSTNAME }}{% static 'images/heidi.png' %}" alt="Heidi"
+              width="25" style="position: absolute; right: -2.5em; top: -.25rem;">
+        </label>
       </div>
 
-    <div>
-      <input name="allow_newsletters" id="allow_newsletters" type="hidden" value="true">
-      <label for="allow_newsletters_visual" style="display: inline-block; cursor: pointer;">
-
-        <input name="allow_newsletters_visual" id="allow_newsletters_visual"
-               type="checkbox" style="width: auto" checked="true"
-               onchange="document.getElementById('allow_newsletters').value=document.getElementById('allow_newsletters_visual').checked">
-        Get the latest news from Heidi
-        <img src="{{ settings.HOSTNAME }}{% static 'images/heidi.png' %}" alt="Heidi"
-             width="25" style="display: inline; margin: 0; position: relative; top: 5px; left: 0px">
-
-      </label>
-    </div>
-
-    {% if form.non_field_errors %}
-      {% for error in form.non_field_errors %}
-        <p class="error">
-          {{ error }}
-        </p>
-      {% endfor %}
-    {% endif %}
-    <p><button type="submit" aria-label="Create Account" class="ls-button ls-button_look_primary">Create Account</button></p>
-  </form>
+      {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+          <p class="error">
+            {{ error }}
+          </p>
+        {% endfor %}
+      {% endif %}
+      <p><button type="submit" aria-label="Create Account" class="ls-button ls-button_look_primary">Create Account</button></p>
+    </form>
+  </div>
+  <div class="text-wrapper">
+    <p class="">Already have an account?</p>
+    <a href="{{ settings.HOSTNAME }}/user/login">Log in</a>
+  </div>
 
 {% endblock %}

web/apps/labelstudio/src/components/Form/Elements/Input/Input.styl

@@ -3,7 +3,7 @@
 .textarea
   height 40px
   min-height 40px
-  background #FAFAFA
+  background var(--sand_0)
   font-size 16px
   line-height 22px
   border 1px solid var(--sand_300)

web/libs/datamanager/src/components/MainView/DataView/Table.styl

@@ -25,17 +25,16 @@
   align-items center
   font-size 16px
   text-align center
-  color rgba(#000, 0.6)
+  color var(--sand_600)
 
   .button
-    color rgba(9, 109, 217, 1)
+    color var(--primary_link)
     padding 8px 16px
-    border 1px solid rgba(9, 109, 217, 0.16)
+    border 1px solid var(--primary_link)
     border-radius 4px
     box-shadow none
-    font-size 16px
+    font-size 1rem
     font-weight 500
     line-height 24px
-    letter-spacing 0.15px
   &__text
     margin-bottom 1em