fix: labeled text field UI

WireUI/Sources/WireAuthenticationUI/Components/Logo.swift

@@ -24,7 +24,7 @@ struct Logo: View {
             Image(ImageResource(name: "logo", bundle: .module))
                 .resizable()
                 .scaledToFit()
-                .padding(.all, min(geometry.size.height, geometry.size.width) / 2.97)
+                .padding(.all, min(geometry.size.height, geometry.size.width) / 3)
         }
     }
 }

WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift

@@ -49,7 +49,7 @@ package struct AuthenticationIdentityInputView: View {
             Text(L10n.Authentication.Identity.Input.body)
                 .wireTextStyle(.body1)
             LabeledTextField(
-                isMandatory: true,
+                isMandatory: false,
                 placeholder: L10n.Authentication.Identity.Input.Field.placeholder,
                 title: L10n.Authentication.Identity.Input.Field.title,
                 string: $identity

WireUI/Sources/WireDesign/Colors/ColorTheme.swift

@@ -46,6 +46,9 @@ public enum ColorTheme {
         public static let secondaryText = UIColor(light: .gray70, dark: .gray60)
 
         public static let requiredField = UIColor(light: .red500Light, dark: .red500Dark)
+
+        public static let labelTitle = UIColor(light: .gray80, dark: .gray50)
+        public static let onDisabled = UIColor(light: .gray80, dark: .gray50)
     }
 
     public enum Backgrounds {
@@ -145,6 +148,7 @@ public enum ColorTheme {
     public enum Strokes {
 
         public static let outline = UIColor(light: .gray40, dark: .gray90)
+        public static let disabledOutline = UIColor(light: .gray50, dark: .gray80)
         public static let dividersOutlineVariant = UIColor(light: .gray20, dark: .gray100)
     }
 

WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift

@@ -21,22 +21,29 @@ import WireDesign
 import WireFoundation
 
 public struct LabeledTextField: View {
+    @Environment(\.isEnabled) private var isEnabled
 
     private let isMandatory: Bool
     private let placeholder: String?
     private let title: String?
 
+    @FocusState var isFocused: Bool
     @Binding private var string: String
 
-    public init(isMandatory: Bool = false, placeholder: String?, title: String?, string: Binding<String>) {
+    public init(
+        isMandatory: Bool = false,
+        placeholder: String?,
+        title: String?,
+        string: Binding<String>
+    ) {
         self.isMandatory = isMandatory
         self.placeholder = placeholder
         self.title = title
         self._string = string
     }
 
     public var body: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 2) {
             if let title {
                 (
                     isMandatory ? (
@@ -45,12 +52,74 @@ public struct LabeledTextField: View {
                             .foregroundColor(ColorTheme.Base.requiredField.color)
                     ) : Text(title)
                 )
-                .wireTextStyle(.h4)
+                .foregroundStyle(Self.titleColor(isEnabled: isEnabled, isFocused: isFocused))
+                .wireTextStyle(.subline1)
             }
-            TextField(placeholder ?? "", text: $string)
-                .textFieldStyle(.roundedBorder)
-                .wireTextStyle(.body1)
+            HStack(spacing: 0) {
+                TextField(placeholder ?? "", text: $string)
+                    .wireTextStyle(.body1)
+                    .focused($isFocused)
+                    .foregroundStyle(Self.labelColor(isEnabled: isEnabled))
+                    .padding(.vertical, 12)
+                if !string.isEmpty && isEnabled {
+                    Button(action: {
+                        string = ""
+                    }, label: {
+                        Image(systemName: "xmark.circle.fill")
+                            .foregroundStyle(.black)
+                            .frame(width: 16, height: 16)
+                            .padding(19)
+                    })
+                }
+            }
+            .padding(.leading, 16)
+            .background {
+                if #available(iOS 17.0, *) {
+                    RoundedRectangle(cornerRadius: 12)
+                        .fill(Self.labelBackgroundColor(isEnabled: isEnabled))
+                        .stroke(Self.labelBorderColor(isEnabled: isEnabled, isFocused: isFocused), lineWidth: 1)
+                } else {
+                    RoundedRectangle(cornerRadius: 12)
+                        .stroke(Self.labelBorderColor(isEnabled: isEnabled, isFocused: isFocused), lineWidth: 1)
+                        .background(Self.labelBackgroundColor(isEnabled: isEnabled))
+                        .cornerRadius(12)
+                }
+            }
+        }
+    }
+
+    static func titleColor(isEnabled: Bool, isFocused: Bool) -> Color {
+        if isEnabled && isFocused {
+            return ColorTheme.Base.onPrimaryVariant.color
+        }
+        if isEnabled {
+            return ColorTheme.Base.labelTitle.color
         }
+        return ColorTheme.Base.labelTitle.color
+    }
+
+    static func labelColor(isEnabled: Bool) -> Color {
+        if isEnabled {
+            return .primaryText
+        }
+        return ColorTheme.Base.onDisabled.color
+    }
+
+    static func labelBackgroundColor(isEnabled: Bool) -> Color {
+        if isEnabled {
+            return .clear
+        }
+        return ColorTheme.Backgrounds.background.color
+    }
+
+    static func labelBorderColor(isEnabled: Bool, isFocused: Bool) -> Color {
+        if isEnabled && isFocused {
+            return ColorTheme.Base.onPrimaryVariant.color
+        }
+        if isEnabled {
+            return ColorTheme.Strokes.outline.color
+        }
+        return ColorTheme.Strokes.outline.color
     }
 }
 
@@ -61,22 +130,34 @@ public struct LabeledTextField: View {
         title: nil,
         string: .constant("")
     )
+    .padding()
     LabeledTextField(
         isMandatory: false,
         placeholder: "Placeholder",
         title: "Some Title",
         string: .constant("")
     )
+    .padding()
     LabeledTextField(
         isMandatory: true,
         placeholder: "Placeholder",
         title: "Some Title",
         string: .constant("")
     )
+    .padding()
+    LabeledTextField(
+        isMandatory: true,
+        placeholder: "Placeholder",
+        title: "Some Title",
+        string: .constant("Lorem ipsum dolor sit amet, consectetur [...]")
+    )
+    .padding()
     LabeledTextField(
         isMandatory: true,
         placeholder: "Placeholder",
         title: "Some Title",
-        string: .constant("Lorem ipsum sic amet [...]")
+        string: .constant("Lorem ipsum dolor sit amet, consectetur [...]")
     )
+    .padding()
+    .disabled(true)
 }