Color Literal, Gradient and Overlay

p5150j · Jul 11, 2021 · 4b6f65b · 4b6f65b
1 parent 3894bb2
commit 4b6f65b
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/DesignCode/MenuView.swift b/DesignCode/MenuView.swift
@@ -12,16 +12,38 @@ struct MenuView: View {
         VStack {
             Spacer()
             VStack(spacing: 16) {
+                Text ("Patrick- 25% done")
+                Color.white
+                    .font(.caption)
+                    .frame(width: 38, height: 6)
+                    .cornerRadius(3)
+                    .frame(width: 130, height: 6, alignment: .leading)
+                    .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.08))
+                    .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
+                    .padding()
+                    .frame(width: 150, height: 24)
+                    .background(Color.black.opacity(0.1))
+                    .cornerRadius(12)
+
+
                 MenuRow(title: "Account", icon: "gear")
                 MenuRow(title: "Billing", icon: "creditcard")
                 MenuRow(title: "Sign Out", icon: "person.crop.circle")
             }
             .frame(maxWidth: .infinity)
             .frame(height: 300)
-            .background(Color.white)
+            .background(LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), Color(#colorLiteral(red: 0.8705882353, green: 0.8941176471, blue: 0.9450980392, alpha: 1))]), startPoint: .top, endPoint: .bottom))
             .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
-            .shadow(radius: 30)
+            .shadow(color: Color.black.opacity(0.2), radius: 20, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: 20)
             .padding(.horizontal, 30)
+            .overlay(
+                Image("Avatar")
+                    .resizable()
+                    .aspectRatio(contentMode: /*@START_MENU_TOKEN@*/.fill/*@END_MENU_TOKEN@*/)
+                    .frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
+                    .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
+                    .offset(y: -150)
+            )
         }
         .padding(.bottom, 30)
     }