change create icon view layout

when random make all colors random

Shared/views/CreateIconView.swift

@@ -31,7 +31,7 @@ struct CreateIconView: View {
                                                      bgOverlayColor: .black,
                                                      rightEyeColor: .orange,
                                                      leftEyeColor: .yellow,
-                                                     mouthColor: .green,
+                                                     mouthColor: .purple,
                                                      circleStrokeColor: .pink)
     private var randomElements: [AnyView] = [
         AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
@@ -62,6 +62,10 @@ struct CreateIconView: View {
         customIcon.bgColor = Color.random()
         customIcon.innerColor = Color.random()
         customIcon.bgOverlayColor = Color.random()
+        customIcon.circleStrokeColor = Color.random()
+        customIcon.leftEyeColor = Color.random()
+        customIcon.rightEyeColor = Color.random()
+        customIcon.mouthColor = Color.random()
         
         update(eye: .left, eyeOption: EyeOptions.allCases.randomElement()!)
         update(eye: .right, eyeOption: EyeOptions.allCases.randomElement()!)
@@ -109,7 +113,7 @@ struct CreateIconView: View {
     }
     
     var body: some View {
-        VStack {
+        VStack(spacing: 0) {
             iconView
                 .frame(width: 256, height: 256)
                 .cornerRadius(10)
@@ -117,8 +121,87 @@ struct CreateIconView: View {
             
             Spacer()
             
-            ZStack {
+            Group {
-                Color(theme.currentTheme.secondaryBGColor)
+                Divider().background(Color(UIColor.tertiarySystemBackground))
+                
+                HStack {
+                    Spacer()
+                    VStack(alignment: .center) {
+                        Menu("Left Eye") {
+                            ForEach(EyeOptions.allCases, id: \.self) { option in
+                                Button(action: {
+                                    update(eye: .left, eyeOption: option)
+                                }, label: {
+                                    Label(option.rawValue, image: option.rawValue)
+                                })
+                            }
+                        }
+                        .foregroundColor(Color(UIColor.label))
+                    }
+                    Spacer()
+                    VStack(alignment: .center) {
+                        Menu("Right Eye") {
+                            ForEach(EyeOptions.allCases, id: \.self) { option in
+                                Button(action: {
+                                    update(eye: .right, eyeOption: option)
+                                }, label: {
+                                    Label(option.rawValue, image: option.rawValue)
+                                })
+                            }
+                        }
+                        .foregroundColor(Color(UIColor.label))
+                    }
+                    Spacer()
+                    VStack(alignment: .center) {
+                        Menu("Mouth") {
+                            ForEach(MouthOptions.allCases, id: \.self) { option in
+                                Button(action: {
+                                    update(mouthOption: option)
+                                }, label: {
+                                    Label(option.rawValue, image: option.rawValue)
+                                })
+                            }
+                        }
+                        .foregroundColor(Color(UIColor.label))
+                    }
+                    Spacer()
+                }
+            }
+            .frame(height: 5)
+            .padding([.leading, .trailing])
+            .padding([.top, .bottom], 10)
+            
+            Group {
+                Divider().background(Color(UIColor.tertiarySystemBackground))
+                
+                VStack{
+                    HStack {
+                        ForEach(BackGroundOptions.selectable, id: \.self) { bg in
+                            Image(bg.rawValue, bundle: .main)
+                                .resizable()
+                                .aspectRatio(contentMode: .fill)
+                                .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
+                                       minHeight: 10, idealHeight: 40, maxHeight: 40,
+                                       alignment: .center)
+                                .onTapGesture {
+                                    update(background: bg)
+                                }
+                        }
+                        mixBG
+                            .onTapGesture {
+                                update(background: .random)
+                            }
+                        
+                        ColorPicker("", selection: $customIcon.bgOverlayColor)
+                    }
+                }
+            }
+            .padding([.leading, .trailing])
+            .padding([.top, .bottom], 10)
+            
+            Group {
+                Divider().background(Color(UIColor.tertiarySystemBackground))
+                
                 HStack {
                     Spacer()
                     VStack(alignment: .center) {
@@ -140,93 +223,36 @@ struct CreateIconView: View {
                     }
                     Spacer()
                 }
-            }
-            .frame(height: 75)
-            .frame(minWidth: 0, maxWidth: .infinity)
                 
-            ZStack {
-                Color(theme.currentTheme.secondaryBGColor)
                 HStack {
                     Spacer()
-                    VStack {
+                    VStack(alignment: .center) {
-                        Menu("Left Eye") {
+                        Text("Left Eye")
-                            ForEach(EyeOptions.allCases, id: \.self) { option in
-                                Button(action: {
-                                    update(eye: .left, eyeOption: option)
-                                }, label: {
-                                    Label(option.rawValue, image: option.rawValue)
-                                })
-                            }
-                        }
                         ColorPicker("", selection: $customIcon.leftEyeColor)
                             .labelsHidden()
                     }
                     Spacer()
-                    VStack {
+                    VStack(alignment: .center) {
-                        Menu("Right Eye") {
+                        Text("right eye")
-                            ForEach(EyeOptions.allCases, id: \.self) { option in
-                                Button(action: {
-                                    update(eye: .right, eyeOption: option)
-                                }, label: {
-                                    Label(option.rawValue, image: option.rawValue)
-                                })
-                            }
-                        }
                         ColorPicker("", selection: $customIcon.rightEyeColor)
                             .labelsHidden()
                     }
                     Spacer()
-                    VStack {
+                    VStack(alignment: .center) {
-                        Menu("Mouth") {
+                        Text("mouth")
-                            ForEach(MouthOptions.allCases, id: \.self) { option in
-                                Button(action: {
-                                    update(mouthOption: option)
-                                }, label: {
-                                    Label(option.rawValue, image: option.rawValue)
-                                })
-                            }
-                        }
                         ColorPicker("", selection: $customIcon.mouthColor)
                             .labelsHidden()
                     }
                     Spacer()
                 }
             }
-            .frame(height: 75)
+            .padding([.leading, .trailing])
-            .frame(minWidth: 0, maxWidth: .infinity)
+            .padding([.top, .bottom], 10)
             
-            ZStack {
+            Group {
-                Color(theme.currentTheme.secondaryBGColor)
+                Divider().background(Color(UIColor.tertiarySystemBackground))
-                VStack{
-                    Text("Background")
                 
-                    HStack {
+                HStack(alignment: .center, spacing: 0) {
-                        ForEach(BackGroundOptions.selectable, id: \.self) { bg in
-                            Image(bg.rawValue, bundle: .main)
-                                .resizable()
-                                .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
-                                       minHeight: 10, idealHeight: 40, maxHeight: 40,
-                                       alignment: .center)
-                                .onTapGesture {
-                                    update(background: bg)
-                                }
-                        }
-                        mixBG
-                            .onTapGesture {
-                                update(background: .random)
-                            }
-                        
-                        ColorPicker("", selection: $customIcon.bgOverlayColor)
-                    }
-                    .padding([.leading, .trailing])
-                }
-            }
-            .frame(height: 75)
-            .frame(minWidth: 0, maxWidth: .infinity)
-            
-            ZStack {
-                VStack{
-                    Color(theme.currentTheme.secondaryBGColor)
                     Button(action: {
                         createRandom()
                     }, label: {
@@ -234,9 +260,9 @@ struct CreateIconView: View {
                             .font(.title)
                             .fontWeight(.bold)
                             .foregroundColor(Color(UIColor.white))
-                            .frame(minWidth: 0, maxWidth: .infinity)
+                            
                     })
-                        .frame(height: 44)
+                        .frame(minWidth: 0, maxWidth: .infinity)
                         .background(.blue)
                     
                     Button(action: {
@@ -252,18 +278,13 @@ struct CreateIconView: View {
                             .font(.title)
                             .fontWeight(.bold)
                             .foregroundColor(Color(UIColor.white))
-                            .frame(minWidth: 0, maxWidth: .infinity)
+                         
-                            .background(.green)
                     })
-                        .frame(height: 44)
+                        .frame(minWidth: 0, maxWidth: .infinity)
+                        .background(.green)
                 }
             }
-            .frame(height: 88)
         }
-        .background(
-            theme.currentTheme.bg
-                .edgesIgnoringSafeArea(.all)
-        )
     }
 }