From 49afb315ed5239d62930328cad0356f6ef2cc310 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 7 Feb 2023 10:10:50 -0700
Subject: [PATCH] Apply new design system style on share modal input (#11415)

GitOrigin-RevId: b7eb7e1e86786431415d69080a874508de143f22
---
 .../stylesheets/components/tags-input.less    | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/stylesheets/components/tags-input.less b/services/web/frontend/stylesheets/components/tags-input.less
index f10483022f..179893efbe 100644
--- a/services/web/frontend/stylesheets/components/tags-input.less
+++ b/services/web/frontend/stylesheets/components/tags-input.less
@@ -21,10 +21,8 @@
 
 .tags-input .tags {
   .form-control;
-  border-radius: 3px; /* overriding .form-control */
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
-  padding: 3px;
   overflow: hidden;
   word-wrap: break-word;
   cursor: text;
@@ -33,13 +31,19 @@
   display: flex;
   flex-wrap: wrap;
 }
-.tags-input .tags.focused,
-.tags-input .tags:focus-within {
+.tags-input .tags when(@is-new-css = false) {
+  padding: 3px;
+  border-radius: 3px; /* overriding .form-control */
+}
+.tags-input .tags:focus-within when(@is-new-css = false) {
   outline: none;
   -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
   -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
   box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
 }
+.tags-input .tags:focus-within when(@is-new-css = true) {
+  &:extend(.input-focus-style);
+}
 .tags-input .tags .tag-list {
   margin: 0;
   padding: 0;
@@ -75,13 +79,18 @@
 .tags-input .tags .input {
   border: 0;
   outline: none;
-  margin: 2px;
-  padding: 0;
-  padding-left: 5px;
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.tags-input .tags .input when(@is-new-css = false) {
+  margin: 2px;
+  padding: 0;
+  padding-left: 5px;
+}
+.tags-input .tags .input when(@is-new-css = true) {
+  .placeholder();
+}
 .tags-input .tags .input.invalid-tag {
   color: @brand-danger;
 }