featt; DIA-2175: [TEMP] New button

label_studio/core/static/css/login.css

@@ -207,9 +207,20 @@ html, body {
   font-family: 'Hellix', sans-serif;
 }
 
-.login_page_new_ui form .lsf-button-ls.lsf-button-ls_look_primary {
+.login_page_new_ui form input {
+  padding: 10px 15px;
+  border-radius: 100px;
+  box-sizing: border-box;
+  border: 1px solid var(--sand_400);
+}
+
+.login_page_new_ui form button {
   --button-color: var(--color-neutral-inverted-content);
   border-radius: 4rem;
+  background: var(--sand_900);
+  color: white;
+  padding: 10px 0;
+  border: none;
   background: var(--color-neutral-inverted-surface);
 }
 
@@ -270,6 +281,10 @@ label{
   display: block;
 }
 
+.login-button {
+  font-size: 16px;
+}
+
 .form-group {
   display: block;
   margin-bottom: .5rem;

label_studio/core/static/css/uikit.css

@@ -0,0 +1,250 @@
+body {
+  --border-color: rgba(0, 0, 0, 0.15);
+  --color-error: #d00;
+}
+
+.full_content {
+  padding: 20px;
+}
+
+.full_content > header {
+  font-size: 1.5em;
+  margin-bottom: 20px;
+}
+
+.field {
+  display: grid;
+  grid-template-columns: 92px auto;
+  align-items: center;
+  gap: 16px;
+  row-gap: 4px;
+}
+
+.field--wide {
+  display: block;
+}
+
+.field--wide > *:not(:first-child) {
+  display: block;
+  margin-top: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.field > * {
+  grid-column: 2;
+}
+
+.field > label {
+  grid-column: 1;
+}
+
+.field .actions {
+  display: flex;
+  gap: 10px;
+}
+
+.field.error {
+  background: unset;
+}
+
+.field.error input {
+  color: var(--color-error);
+}
+
+span.error {
+  background: unset;
+  color: var(--color-error);
+}
+
+/**
+* [data-ignore-uikit] allows skip styling from this file
+* uikit is a redundant legacy and it messes up the styles
+* in a lot of places by using global styles for elements
+* like inputs and buttonts. if your button looks weird, try
+* adding data-ignore-uikit. most probably it will help
+*/
+
+input:not([data-ignore-uikit]),
+textarea:not([data-ignore-uikit]) {
+  font: inherit;
+}
+
+a.button:not([data-ignore-uikit]),
+input:not([data-ignore-uikit]),
+textarea:not([data-ignore-uikit]) {
+  border: 1px solid var(--border-color);
+  padding: 9px 16px;
+}
+
+input[type=text][disabled]:not([data-ignore-uikit]) {
+  background: rgba(0, 0, 0, 0.03);
+  color: rgba(0, 0, 0, 0.4)
+}
+
+a.button:not([data-ignore-uikit]),
+input[type=button]:not([data-ignore-uikit]),
+input[type=submit]:not([data-ignore-uikit]),
+input[type=reset]:not([data-ignore-uikit]) {
+  background: white;
+  border-radius: 5px;
+  /* min-width: 140px; */
+  text-align: center;
+  line-height: 1;
+  font-weight: 500;
+  color: #555;
+  cursor: pointer;
+}
+
+a.button:hover,
+input[type=button]:hover,
+input[type=submit]:hover,
+input[type=reset]:hover {
+  filter: brightness(0.98);
+}
+
+a.button.primary,
+input[type=button].primary,
+input[type=submit].primary,
+input[type=reset].primary {
+  background: #1890FF;
+  border: 1px solid #1890FF;
+  color: white;
+}
+
+input[type=button].danger,
+input[type=submit].danger,
+input[type=reset].danger {
+  color: var(--color-error);
+}
+
+input[type=button][disabled]:not([data-ignore-uikit]),
+input[type=submit][disabled]:not([data-ignore-uikit]),
+input[type=reset][disabled]:not([data-ignore-uikit]) {
+  background: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+
+ul.toggle {
+  display: flex;
+  justify-content: stretch;
+  list-style: none;
+  padding: 4px;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0px 1px 0px rgb(0 0 0 / 5%), inset 0px 0px 0px 1px rgb(0 0 0 / 5%);
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+ul.toggle--big {
+  font-size: 16px;
+}
+
+ul.toggle--big li {
+  padding: 4px 20px;
+}
+
+ul.toggle li {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  padding: 2px 16px;
+  flex-grow: 1;
+  text-align: center;
+}
+
+ul.toggle li.active {
+  color: black;
+  background: white;
+  box-shadow: 0px 1px 0px rgb(0 0 0 / 10%), 0px 0px 0px 1px rgb(0 0 0 / 2%), 0px 5px 10px rgb(0 0 0 / 15%);
+}
+
+
+.userpic {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  border-radius: 50%;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.04);
+  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  font-size: 12px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.userpic--medium {
+  width: 64px;
+  height: 64px;
+  font-size: 28px;
+}
+
+.userpic--big {
+  width: 92px;
+  height: 92px;
+  font-size: 32px;
+}
+
+.userpic--small {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+
+.userpic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+
+/* file upload button */
+.file-input {
+  border: none;
+  padding-left: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.file-input::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+.file-input::before {
+  content: 'Choose file';
+  display: inline-block;
+  background: none;
+  border: 1px solid #CCC;
+  border-radius: 3px;
+  padding: 5px 8px;
+  outline: none;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  cursor: pointer;
+  text-shadow: 1px 1px #fff;
+  font-weight: 400;
+  font-size: 1em;
+}
+
+.file-input:hover::before {
+  border-color: #333;
+}
+
+.file-input:active::before {
+  background: #e3e3e3;
+}
+
+.file-input:active {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}

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

@@ -36,7 +36,7 @@ <h2>Log in</h2>
         <input type="checkbox" id="persist_session" name="persist_session" class="lsf-checkbox-ls" 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="lsf-button-ls lsf-button-ls_look_primary">Log in</button>
+      <button type="submit" aria-label="Log In" class="login-button">Log in</button>
     </form>
   </div>
   {% if not settings.DISABLE_SIGNUP_WITHOUT_LINK %}