Optimise the Like button for dark mode and light mode

Author: JakeLin

Moments/Moments/Assets.xcassets/Colors/background2.colorset/Contents.json renamed to Moments/Moments/Assets.xcassets/Colors/background.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "1.000",
-          "green" : "1.000",
-          "red" : "1.000"
+          "blue" : "0.922",
+          "green" : "0.882",
+          "red" : "0.882"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.000",
-          "green" : "0.000",
-          "red" : "0.000"
+          "blue" : "0.118",
+          "green" : "0.098",
+          "red" : "0.098"
         }
       },
       "idiom" : "universal"

Moments/Moments/Assets.xcassets/Colors/card4.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.988",
-          "green" : "0.333",
-          "red" : "0.416"
+          "blue" : "0.471",
+          "green" : "0.314",
+          "red" : "0.118"
         }
       },
       "idiom" : "universal"

Moments/Moments/Assets.xcassets/Colors/card5.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.992",
-          "green" : "0.745",
-          "red" : "0.078"
+          "blue" : "0.941",
+          "green" : "0.627",
+          "red" : "0.235"
         }
       },
       "idiom" : "universal"

Moments/Moments/Assets.xcassets/Colors/background1.colorset/Contents.json renamed to Moments/Moments/Assets.xcassets/Colors/likeButtonEnd.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.922",
+          "green" : "0.882",
+          "red" : "0.882"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Moments/Moments/Assets.xcassets/Colors/card1.colorset/Contents.json renamed to Moments/Moments/Assets.xcassets/Colors/likeButtonFillEnd.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "1.000",
-          "green" : "1.000",
-          "red" : "1.000"
+          "blue" : "0.922",
+          "green" : "0.882",
+          "red" : "0.882"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.133",
-          "green" : "0.133",
-          "red" : "0.133"
+          "blue" : "0.255",
+          "green" : "0.235",
+          "red" : "0.196"
         }
       },
       "idiom" : "universal"

Moments/Moments/Assets.xcassets/Colors/card2.colorset/Contents.json renamed to Moments/Moments/Assets.xcassets/Colors/likeButtonFillStart.colorset/Contents.json

@@ -15,55 +15,29 @@ private struct IdentifiableURL: Identifiable {
     var id = UUID()
 }
 
-extension Color {
-    static let offWhite = Color(red: 225 / 255, green: 225 / 255, blue: 235 / 255)
-
-    static let darkStart = Color(red: 50 / 255, green: 60 / 255, blue: 65 / 255)
-    static let darkEnd = Color(red: 25 / 255, green: 25 / 255, blue: 30 / 255)
-
-    static let lightStart = Color(red: 60 / 255, green: 160 / 255, blue: 240 / 255)
-    static let lightEnd = Color(red: 30 / 255, green: 80 / 255, blue: 120 / 255)
-}
-
 struct LikeToggleBackground<S: Shape>: View {
     var isHighlighted: Bool
     var shape: S
 
+    //swiftlint:disable no_hardcoded_strings
     var body: some View {
         ZStack {
             if isHighlighted {
                 shape
-                    .fill(LinearGradient(Color.lightEnd, Color.lightStart))
-                    .overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 2))
-                    .shadow(color: Color.darkStart, radius: 5, x: 5, y: 5)
-                    .shadow(color: Color.darkEnd, radius: 5, x: -5, y: -5)
-//                    .fill(Color.offWhite)
-//                    .overlay(
-//                        Circle()
-//                            .stroke(Color.gray, lineWidth: 4)
-//                            .blur(radius: 4)
-//                            .offset(x: 2, y: 2)
-//                            .mask(Circle().fill(LinearGradient(Color.black, Color.clear)))
-//                    )
-//                    .overlay(
-//                        Circle()
-//                            .stroke(Color.white, lineWidth: 8)
-//                            .blur(radius: 4)
-//                            .offset(x: -2, y: -2)
-//                            .mask(Circle().fill(LinearGradient(Color.clear, Color.black)))
-//                    )
+                    .fill(LinearGradient(Color("likeButtonFillEnd"), Color("likeButtonFillStart")))
+                    .overlay(shape.stroke(LinearGradient(Color("likeButtonFillStart"), Color("likeButtonFillEnd")), lineWidth: 2))
+                    .shadow(color: Color("likeButtonStart"), radius: 5, x: 5, y: 5)
+                    .shadow(color: Color("likeButtonEnd"), radius: 5, x: -5, y: -5)
             } else {
                 shape
-                    .fill(LinearGradient(Color.darkStart, Color.darkEnd))
-                    .overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 2))
-                    .shadow(color: Color.darkStart, radius: 5, x: 5, y: 5)
-                    .shadow(color: Color.darkEnd, radius: 5, x: -5, y: -5)
-//                    .fill(Color.offWhite)
-//                    .shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
-//                    .shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
+                    .fill(LinearGradient(Color("likeButtonFillStart"), Color("likeButtonFillEnd")))
+                    .overlay(shape.stroke(LinearGradient(Color("likeButtonFillStart"), Color("likeButtonFillEnd")), lineWidth: 2))
+                    .shadow(color: Color("likeButtonStart"), radius: 5, x: 5, y: 5)
+                    .shadow(color: Color("likeButtonEnd"), radius: 5, x: -5, y: -5)
             }
         }
     }
+    //swiftlint:enable no_hardcoded_strings
 }
 
 struct LikeToggleStyle: ToggleStyle {
@@ -72,7 +46,7 @@ struct LikeToggleStyle: ToggleStyle {
             configuration.isOn.toggle()
         }, label: {
             configuration.label
-                .padding(8)
+                .padding(Spacing.extraSmall)
                 .contentShape(Circle())
         })
         .background(
@@ -144,7 +118,7 @@ struct SwiftUIMomentListItemView: View {
             Toggle(isOn: $isLiked) {
                 //swiftlint:disable no_hardcoded_strings
                 Image(systemName: "heart.fill")
-                    .foregroundColor(isLiked == true ? .red : .white)
+                    .foregroundColor(isLiked == true ? Color("likeButtonSelected") : Color("likeButtonNotSelected"))
                     .animation(.easeIn)
                 //swiftlint:enable no_hardcoded_strings
             }