Merge branch 'develop' of https://github.com/Nexters/mashow-iOS into …

…feature/19-choose-type-UI

Targets/Mashow/Resources/Asset.xcassets/Images/FoodSelection/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Targets/Mashow/Resources/Asset.xcassets/Images/FoodSelection/glass.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "glass.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "glass@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "glass@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Targets/Mashow/Resources/Asset.xcassets/Images/Rating/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Targets/Mashow/Resources/Asset.xcassets/Images/Rating/Flushed Face.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Flushed Face.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Flushed Face@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Flushed Face@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Targets/Mashow/Resources/Asset.xcassets/Images/Rating/face_icon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "face_icon.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "face_icon@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "face_icon@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Targets/Mashow/Sources/Common/BlurredButton.swift

@@ -0,0 +1,67 @@
+//
+//  BlurredButton.swift
+//  Mashow
+//
+//  Created by Kai Lee on 8/18/24.
+//  Copyright © 2024 com.alcoholers. All rights reserved.
+//
+
+import UIKit
+
+class BlurredButton: UIButton {
+
+    private let blurEffectView: UIVisualEffectView
+
+    override init(frame: CGRect) {
+        // Initialize the blur effect with a light style
+        let blurEffect = UIBlurEffect(style: .dark)
+        blurEffectView = UIVisualEffectView(effect: blurEffect)
+
+        super.init(frame: frame)
+
+        // Set up the blur effect view
+        self.setupBlurEffectView()
+
+        // Customize the button
+        self.setupButton()
+    }
+
+    required init?(coder: NSCoder) {
+        // Initialize the blur effect with a light style
+        let blurEffect = UIBlurEffect(style: .dark)
+        blurEffectView = UIVisualEffectView(effect: blurEffect)
+
+        super.init(coder: coder)
+
+        // Set up the blur effect view
+        self.setupBlurEffectView()
+
+        // Customize the button
+        self.setupButton()
+    }
+
+    private func setupBlurEffectView() {
+        blurEffectView.layer.cornerRadius = 13
+        blurEffectView.clipsToBounds = true
+        blurEffectView.isUserInteractionEnabled = false // Pass touches through
+
+        // Add blur effect as a background view
+        self.insertSubview(blurEffectView, at: 0)
+
+        // Set up constraints for the blur effect view
+        blurEffectView.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+    }
+
+    private func setupButton() {
+        self.layer.cornerRadius = 13
+        self.clipsToBounds = true
+        self.backgroundColor = .hex("FCFCFC").withAlphaComponent(0.12)
+    }
+
+    // Method to update the blur effect style
+    func updateBlurEffectStyle(_ style: UIBlurEffect.Style) {
+        blurEffectView.effect = UIBlurEffect(style: style)
+    }
+}

Targets/Mashow/Sources/Common/DecoratedTextField.swift

@@ -6,10 +6,16 @@
 //  Copyright © 2024 com.alcoholers. All rights reserved.
 //
 
-import Foundation
 import UIKit
 
 class DecoratedTextField: UITextField {
+
+    var onDeleteButtonTapped: (() -> Void)?
+
+    lazy var paddingView: UIView = {
+        let view = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: self.frame.height))
+        return view
+    }()
 
     override init(frame: CGRect) {
         super.init(frame: frame)
@@ -31,7 +37,12 @@ class DecoratedTextField: UITextField {
 
         // Set text color
         self.textColor = .white
-
+        self.clearButtonMode = .whileEditing
+        self.setClearButton(
+            with: UIImage(systemName: "xmark.circle.fill")!
+                .withTintColor(.white.withAlphaComponent(0.3), renderingMode: .alwaysOriginal),
+            mode: .whileEditing)
+
         // Set border
         self.borderStyle = .roundedRect
         self.layer.cornerRadius = 14
@@ -40,11 +51,104 @@ class DecoratedTextField: UITextField {
         self.layer.masksToBounds = true
 
         // Set padding view for text
-        let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: self.frame.height))
         self.leftView = paddingView
         self.leftViewMode = .always
         self.backgroundColor = UIColor.hex("1B1F26", alpha: 0.7)
 
-        // Additional configurations if needed
+        // Add target for editing events
+        self.addTarget(self, action: #selector(editingBegan), for: .editingDidBegin)
+        self.addTarget(self, action: #selector(editingEnded), for: .editingDidEnd)
+    }
+
+    func reset() {
+        self.leftView = paddingView
+    }
+
+    func showDeleteButtonIfNeeded() {
+        if onDeleteButtonTapped != nil, let text, !text.isEmpty {
+            setDeleteButton(
+                with: UIImage(systemName: "minus.circle.fill")!
+                    .withTintColor(.white.withAlphaComponent(0.3), renderingMode: .alwaysOriginal),
+                mode: .always)
+        }
+    }
+}
+
+// MARK: - Actions
+
+private extension DecoratedTextField {
+    func setDeleteButton(with image: UIImage, mode: UITextField.ViewMode, padding: CGFloat = 14) {
+        let clearButton = UIButton(type: .custom)
+        clearButton.setImage(image, for: .normal)
+        clearButton.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
+        clearButton.contentMode = .scaleAspectFit
+        clearButton.addTarget(self, action: #selector(didTapDeleteButton), for: .touchUpInside)
+
+        // Create a container view for the clear button to add padding
+        let container = UIView(frame: CGRect(x: 0, y: 0, width: 24 + padding, height: 24))
+        container.addSubview(clearButton)
+
+        // Position the clear button within the container
+        clearButton.frame = CGRect(x: padding, y: 0, width: 24, height: 24)
+
+        // Set the container as the right view
+        self.leftView = container
+        self.leftViewMode = mode
+    }
+
+    @objc func didTapDeleteButton() {
+        // Clear the text when the "-" button is tapped
+        self.text = ""
+        sendActions(for: .editingChanged)
+        self.leftView = paddingView
+        onDeleteButtonTapped?()
+    }
+
+    @objc func editingBegan() {
+        // Change border color to white when editing begins
+        self.layer.borderColor = .hex("818181")
+        self.leftView = paddingView
+    }
+
+    @objc func editingEnded() {
+        // Revert border color to the original color when editing ends
+        self.layer.borderColor = UIColor.hex("555555", alpha: 0.4).cgColor
+        showDeleteButtonIfNeeded()
+    }
+}
+
+extension UITextField {
+    func setClearButton(with image: UIImage, mode: UITextField.ViewMode, padding: CGFloat = 14) {
+        let clearButton = UIButton(type: .custom)
+        clearButton.setImage(image, for: .normal)
+        clearButton.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
+        clearButton.contentMode = .scaleAspectFit
+        clearButton.addTarget(self, action: #selector(UITextField.clear(sender:)), for: .touchUpInside)
+
+        // Create a container view for the clear button to add padding
+        let container = UIView(frame: CGRect(x: 0, y: 0, width: 24 + padding * 2, height: 24))
+        container.addSubview(clearButton)
+
+        // Position the clear button within the container
+        clearButton.frame = CGRect(x: padding, y: 0, width: 24, height: 24)
+
+        // Set the container as the right view
+        self.rightView = container
+        self.rightViewMode = mode
+
+        // Ensure the clear button is displayed appropriately
+        self.addTarget(self, action: #selector(UITextField.displayClearButtonIfNeeded), for: .editingDidBegin)
+        self.addTarget(self, action: #selector(UITextField.displayClearButtonIfNeeded), for: .editingChanged)
+    }
+
+    @objc
+    private func displayClearButtonIfNeeded() {
+        self.rightView?.isHidden = (self.text?.isEmpty) ?? true
+    }
+
+    @objc
+    private func clear(sender: AnyObject) {
+        self.text = ""
+        sendActions(for: .editingChanged)
     }
 }

Targets/Mashow/Sources/Common/GradientButton.swift

@@ -0,0 +1,85 @@
+//
+//  GradientButton.swift
+//  Mashow
+//
+//  Created by Kai Lee on 8/19/24.
+//  Copyright © 2024 com.alcoholers. All rights reserved.
+//
+
+import Foundation
+import UIKit
+
+class GradientButton: UIButton {
+
+    // Gradient layer
+    private var gradientLayer: CAGradientLayer?
+
+    // Colors for the gradient
+    var gradientColors: [UIColor] = [] {
+        didSet {
+            setGradient()
+        }
+    }
+
+    // Start and End points for the gradient (used differently for radial)
+    var startPoint: CGPoint = .init(x: 0.0, y: 0.5) {
+        didSet {
+            setGradient()
+        }
+    }
+
+    var endPoint: CGPoint = .init(x: 1.0, y: 0.5) {
+        didSet {
+            setGradient()
+        }
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        setup()
+    }
+
+    private func setup() {
+        setGradient(with: GradientButton.doneButtonColorSet)
+    }
+
+    private func setGradient(with colorSet: [UIColor] = GradientButton.doneButtonColorSet) {
+        gradientLayer?.removeFromSuperlayer()
+
+        let gradientLayer = CAGradientLayer()
+        // Configure the colors
+        gradientLayer.colors = gradientColors.isEmpty ? colorSet.map(\.cgColor) : gradientColors.map(\.cgColor)
+
+        // Set the locations for each color in the gradient
+        gradientLayer.locations = [0.0, 0.5] as [NSNumber]
+
+        // Set the start and end points
+        gradientLayer.startPoint = startPoint
+        gradientLayer.endPoint = endPoint
+
+        // Configure the frame and corner radius
+        gradientLayer.frame = bounds
+        gradientLayer.cornerRadius = layer.cornerRadius
+        gradientLayer.masksToBounds = true
+
+        layer.insertSublayer(gradientLayer, at: 0)
+
+        self.gradientLayer = gradientLayer
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        gradientLayer?.frame = bounds
+    }
+}
+
+extension GradientButton {
+    static var doneButtonColorSet: [UIColor] {
+        return [.hex("F9FFF4"), .hex("FFCDCD"), .hex("F9FFF4")]
+    }
+}