- Finished NeoButton UI

- Working with NeoButton highlighted state

1Weather/Resources/PrimaryColorsAsset.xcassets/primary_color.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "1.000",
-          "green" : "1.000",
-          "red" : "1.000"
+          "blue" : "254",
+          "green" : "248",
+          "red" : "247"
         }
       },
       "idiom" : "universal"

1Weather/UI/Buttons/NeoButton.swift

@@ -8,14 +8,40 @@
 import UIKit
 
 class NeoButton: UIButton {
+    //Private
+    private let lightColor = UIColor.white
+    private let darkColor = UIColor(hex: 0xe7e9fc)
     private let backgroundLayer = CALayer()
-    private let outerDarkShadow = CALayer()
-    private let outerLightShadow = CALayer()
+    private let highlightedGradientLayer = CAGradientLayer()
+    private let outerDarkShadowLayer = CALayer()
+    private let outerLightShadowLayer = CALayer()
+    private let borderGradient = CAGradientLayer()
+    private let borderLayer = CAShapeLayer()
+    private var cornerRadiusObserver:NSKeyValueObservation?
+    private var highlightedObserver:NSKeyValueObservation?
     
     init() {
         super.init(frame: .zero)
-        prepareOuterShadows()
+        
         prepareBackgroundLayer()
+        prepareHighlightedGradient()
+        prepareOuterShadows()
+        prepareBorderLayer()
+        prepareObservers()
+    }
+    
+    override var backgroundColor: UIColor? {
+        get {
+            guard let color = backgroundLayer.backgroundColor else {
+                return nil
+            }
+            
+            return UIColor(cgColor: color)
+        }
+        
+        set {
+            self.backgroundLayer.backgroundColor = newValue?.cgColor
+        }
     }
     
     required init?(coder: NSCoder) {
@@ -26,48 +52,91 @@ class NeoButton: UIButton {
         super.layoutSubviews()
         
         self.backgroundLayer.frame = self.bounds
+        self.borderGradient.frame = self.bounds
+        self.borderLayer.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
         self.refreshShadows()
+        self.updateHighlightedGradient()
     }
     
+    //Public
+    
+    //Private
     private func refreshShadows() {
-        outerLightShadow.shadowPath = UIBezierPath(rect: self.bounds).cgPath
-        outerLightShadow.masksToBounds = false
-        outerLightShadow.shadowColor = UIColor.white.cgColor
-        outerLightShadow.shadowOpacity = 0.5
-        outerLightShadow.shadowOffset = .init(width: -10, height: -10)
-        outerLightShadow.shadowRadius = 8
-        
-        outerDarkShadow.shadowPath = UIBezierPath(rect: self.bounds).cgPath
-        outerDarkShadow.masksToBounds = false
-        outerDarkShadow.shadowColor = UIColor(hex: 0xe7e9fc).cgColor
-        outerDarkShadow.shadowOpacity = 1
-        outerDarkShadow.shadowOffset = .init(width: 6, height: 6)
-        outerDarkShadow.shadowRadius = 8
+        outerLightShadowLayer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
+        outerLightShadowLayer.masksToBounds = false
+        outerLightShadowLayer.shadowColor = lightColor.cgColor
+        outerLightShadowLayer.shadowOpacity = 0.5
+        outerLightShadowLayer.shadowOffset = .init(width: -10, height: -10)
+        outerLightShadowLayer.shadowRadius = 8
+        
+        outerDarkShadowLayer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
+        outerDarkShadowLayer.masksToBounds = false
+        outerDarkShadowLayer.shadowColor = darkColor.cgColor
+        outerDarkShadowLayer.shadowOpacity = 1
+        outerDarkShadowLayer.shadowOffset = .init(width: 6, height: 6)
+        outerDarkShadowLayer.shadowRadius = 8
     }
     
-//    private func addDropShadow(color: UIColor, offset: CGSize, btnLayer : CALayer) {
-//        testLayer.masksToBounds = false
-//        testLayer.shadowColor = color.cgColor
-//        testLayer.shadowOpacity = 0.2
-//        testLayer.shadowOffset = offset
-//        testLayer.shadowRadius = 4
-//
-////        btnLayer.masksToBounds = false
-////        btnLayer.shadowColor = color.cgColor
-////        btnLayer.shadowOpacity = 1
-////        btnLayer.shadowOffset = offset
-////        btnLayer.shadowRadius = 4
-//    }
+    private func updateHighlightedGradient() {
+        guard !self.bounds.isEmpty else { return }
+        
+        self.highlightedGradientLayer.frame = self.bounds
+        
+        let hypotenuse = sqrt(pow(bounds.size.width, 2) + pow(bounds.size.height, 2))
+        // area of square = height * width = hypotenuse * (maximum distance length perpendicular to hypotenuse)
+        let heightOfGradient = (bounds.size.width * bounds.size.height * 2) / hypotenuse
+        let angleInRadians = atan(bounds.size.height/bounds.size.width)
+        
+        let newBounds = CGRect(x: bounds.size.width, y: bounds.size.height, width: hypotenuse, height: heightOfGradient)
+        self.highlightedGradientLayer.bounds = newBounds
+        self.highlightedGradientLayer.setAffineTransform(CGAffineTransform(rotationAngle: -angleInRadians))
+    }
 }
 
 private extension NeoButton {
     private func prepareOuterShadows() {
-        layer.insertSublayer(outerLightShadow, at: 0)
-        layer.insertSublayer(outerDarkShadow, at: 0)
+        layer.insertSublayer(outerLightShadowLayer, below: backgroundLayer)
+        layer.insertSublayer(outerDarkShadowLayer, below: backgroundLayer)
     }
     
     private func prepareBackgroundLayer() {
-        layer.backgroundColor = UIColor.red.cgColor
-        layer.addSublayer(backgroundLayer)
+        self.backgroundColor = .clear
+        self.backgroundLayer.masksToBounds = true
+        layer.insertSublayer(backgroundLayer, below: self.imageView?.layer)
+    }
+    
+    private func prepareHighlightedGradient() {
+        self.highlightedGradientLayer.colors = [self.backgroundColor!.cgColor, self.darkColor.cgColor]
+        self.highlightedGradientLayer.startPoint = .zero
+        self.highlightedGradientLayer.endPoint = .init(x: 0, y: 1)
+        self.highlightedGradientLayer.isHidden = true
+        
+        backgroundLayer.addSublayer(self.highlightedGradientLayer)
+    }
+    
+    private func prepareBorderLayer() {
+        borderGradient.colors = [UIColor.white.cgColor, UIColor.white.withAlphaComponent(0.15).cgColor]
+        
+        borderLayer.lineWidth = 1 / UIScreen.main.scale
+        borderLayer.strokeColor = UIColor.black.cgColor
+        borderLayer.fillColor = UIColor.clear.cgColor
+        borderGradient.mask = borderLayer
+        
+        self.layer.addSublayer(borderGradient)
+    }
+    
+    private func prepareObservers() {
+        cornerRadiusObserver = observe(\NeoButton.layer.cornerRadius, options: .new, changeHandler: { (button, change) in
+            self.backgroundLayer.cornerRadius = change.newValue ?? 0
+            self.borderGradient.cornerRadius = change.newValue ?? 0
+        })
+        highlightedObserver = observe(\NeoButton.isHighlighted, options: .new, changeHandler: { (button, change) in
+            print("isHighlighted: \(change.newValue)")
+            guard let state = change.newValue else {
+                return
+            }
+            
+            self.highlightedGradientLayer.isHidden = !state
+        })
     }
 }

1Weather/UI/Helpers/ThemeManager.swift

@@ -25,5 +25,6 @@ public struct ThemeManager {
         UINavigationBar.appearance().barTintColor = currentTheme.navigationBarBackgroundColor
         UINavigationBar.appearance().isTranslucent = false
         UINavigationBar.appearance().tintColor = currentTheme.navigationTintColor
+        UINavigationBar.appearance().shadowImage = UIImage()
     }
 }

1Weather/UI/View controllers/Today/TodayViewController.swift

@@ -40,18 +40,14 @@ private extension TodayViewController {
         
         //Notification button
         let notificationButton = NeoButton()
+        notificationButton.backgroundColor = UIColor(hex: 0xf4f5fb)
         notificationButton.setImage(UIImage(named: "bell"), for: .normal)
         notificationButton.tintColor = ThemeManager.currentTheme.primaryTextColor
         notificationButton.frame = .init(origin: .zero, size: CGSize(width: 42, height: 42))
+        notificationButton.layer.cornerRadius = 4
         notificationButton.addTarget(self, action: #selector(handleNotificationButton), for: .touchUpInside)
-//        let notificationBarItem = UIBarButtonItem(customView: notificationButton)
-        view.addSubview(notificationButton)
-        notificationButton.snp.makeConstraints { (make) in
-            make.size.equalTo(CGSize(width: 42, height: 42))
-            make.center.equalToSuperview()
-        }
         
         self.navigationItem.leftBarButtonItems = [barSpacer, cityBarItem]
-//        self.navigationItem.rightBarButtonItem = notificationBarItem
+        self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: notificationButton)
     }
 }