From 01c9b053340e4fb2e0a1d0a1e0c1281e1b427cd6 Mon Sep 17 00:00:00 2001
From: Max Goedjen <max.goedjen@gmail.com>
Date: Sun, 20 Sep 2020 18:11:49 -0700
Subject: [PATCH] Resolving layout issues

---
 Secretive/Views/SetupView.swift | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/Secretive/Views/SetupView.swift b/Secretive/Views/SetupView.swift
index d36c035..43a70db 100644
--- a/Secretive/Views/SetupView.swift
+++ b/Secretive/Views/SetupView.swift
@@ -7,11 +7,11 @@ struct SetupView: View {
     @Binding var setupComplete: Bool
 
     var body: some View {
-        GeometryReader { outerProxy in
+        GeometryReader { proxy in
             VStack {
-                StepView(numberOfSteps: 3, currentStep: stepIndex, width: 100)
-                GeometryReader { proxy in
-                    HStack {
+                StepView(numberOfSteps: 3, currentStep: stepIndex, width: proxy.size.width)
+                GeometryReader { _ in
+                    HStack(spacing: 0) {
                         SecretAgentSetupView(buttonAction: advance)
                             .frame(width: proxy.size.width)
                         SSHAgentSetupView(buttonAction: advance)
@@ -63,7 +63,7 @@ struct StepView: View {
                 .frame(height: 5)
             Rectangle()
                 .foregroundColor(.green)
-                .frame(width: max(0, (width / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep)), height: 5)
+                .frame(width: max(0, ((width - (Constants.padding * 2)) / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep) - (Constants.circleWidth / 2)), height: 5)
                 .animation(.spring())
             HStack {
                 ForEach(0..<numberOfSteps) { index in
@@ -71,18 +71,18 @@ struct StepView: View {
                         if currentStep > index {
                             Circle()
                                 .foregroundColor(.green)
-                                .frame(width: 30, height: 30)
+                                .frame(width: Constants.circleWidth, height: Constants.circleWidth)
                             Text("✓")
                                 .foregroundColor(.white)
                                 .bold()
                         } else {
                             Circle()
                                 .foregroundColor(.blue)
-                                .frame(width: 30, height: 30)
+                                .frame(width: Constants.circleWidth, height: Constants.circleWidth)
                             if currentStep == index {
                                 Circle()
                                     .strokeBorder(Color.white, lineWidth: 3)
-                                    .frame(width: 30, height: 30)
+                                    .frame(width: Constants.circleWidth, height: Constants.circleWidth)
                             }
                             Text(String(describing: index + 1))
                                 .foregroundColor(.white)
@@ -94,8 +94,18 @@ struct StepView: View {
                     }
                 }
             }
-        }
-        .padding()
+        }.padding(Constants.padding)
+    }
+
+}
+
+extension StepView {
+
+    enum Constants {
+
+        static let padding: CGFloat = 15
+        static let circleWidth: CGFloat = 30
+
     }
 
 }
@@ -136,8 +146,7 @@ struct SetupStepView<Content> : View where Content : View {
             Button(buttonTitle) {
                 buttonAction()
             }
-        }
-        .padding()
+        }.padding()
     }
 
 }