Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

TheNoiseClock/Views/Clock/Components/ColonView.swift

@@ -0,0 +1,66 @@
+//
+//  ColonView.swift
+//  TheNoiseClock
+//
+//  Created by Matt Bruce on 9/11/25.
+//
+
+import SwiftUI
+
+/// Component for displaying colon separator (two dots in horizontal or vertical arrangement)
+struct ColonView: View {
+    let dotDiameter: CGFloat
+    let spacing: CGFloat
+    let opacity: Double
+    let digitColor: Color
+    let glowIntensity: Double
+    let fontWeight: Font.Weight
+    let isHorizontal: Bool
+    
+    var body: some View {
+        let clamped = ColorUtils.clampOpacity(opacity)
+        
+        Group {
+            if isHorizontal {
+                HStack(spacing: spacing) {
+                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                }
+            } else {
+                VStack(spacing: spacing) {
+                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                }
+            }
+        }
+        .fixedSize(horizontal: true, vertical: true)
+        .accessibilityHidden(true)
+    }
+}
+
+// MARK: - Preview
+#Preview("Horizontal Colon") {
+    ColonView(
+        dotDiameter: 12,
+        spacing: 8,
+        opacity: 1.0,
+        digitColor: .white,
+        glowIntensity: 0.3,
+        fontWeight: .regular,
+        isHorizontal: true
+    )
+    .background(Color.black)
+}
+
+#Preview("Vertical Colon") {
+    ColonView(
+        dotDiameter: 12,
+        spacing: 8,
+        opacity: 1.0,
+        digitColor: .white,
+        glowIntensity: 0.3,
+        fontWeight: .regular,
+        isHorizontal: false
+    )
+    .background(Color.black)
+}

TheNoiseClock/Views/Clock/Components/HorizontalColon.swift

@@ -1,41 +0,0 @@
-//
-//  HorizontalColon.swift
-//  TheNoiseClock
-//
-//  Created by Matt Bruce on 9/9/25.
-//
-
-import SwiftUI
-
-/// Component for displaying horizontal colon separator (two dots side by side)
-struct HorizontalColon: View {
-    let dotDiameter: CGFloat
-    let spacing: CGFloat
-    let opacity: Double
-    let digitColor: Color
-    let glowIntensity: Double
-    let fontWeight: Font.Weight
-    
-    var body: some View {
-        let clamped = ColorUtils.clampOpacity(opacity)
-        HStack(spacing: spacing) {
-            DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
-            DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
-        }
-        .fixedSize(horizontal: true, vertical: true)
-        .accessibilityHidden(true)
-    }
-}
-
-// MARK: - Preview
-#Preview {
-    HorizontalColon(
-        dotDiameter: 12,
-        spacing: 8,
-        opacity: 1.0,
-        digitColor: .white,
-        glowIntensity: 0.3,
-        fontWeight: .regular
-    )
-    .background(Color.black)
-}

TheNoiseClock/Views/Clock/Components/TimeDisplayView.swift

@@ -80,20 +80,20 @@ struct TimeDisplayView: View {
                 if portrait {
                     VStack(alignment: .center) {
                         TimeSegment(text: hour, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
-                        HorizontalColon(dotDiameter: dotDiameter, spacing: hSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                        ColonView(dotDiameter: dotDiameter, spacing: hSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: true)
                         TimeSegment(text: minute, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
                         if showSeconds {
-                            HorizontalColon(dotDiameter: dotDiameter, spacing: hSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                            ColonView(dotDiameter: dotDiameter, spacing: hSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: true)
                             TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
                         }
                     }
                 } else {
                     HStack(alignment: .center) {
                         TimeSegment(text: hour, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
-                        VerticalColon(dotDiameter: dotDiameter, spacing: vSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                        ColonView(dotDiameter: dotDiameter, spacing: vSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false)
                         TimeSegment(text: minute, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
                         if showSeconds {
-                            VerticalColon(dotDiameter: dotDiameter, spacing: vSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
+                            ColonView(dotDiameter: dotDiameter, spacing: vSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false)
                             TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign)
                         }
                     }

TheNoiseClock/Views/Clock/Components/VerticalColon.swift

@@ -1,41 +0,0 @@
-//
-//  VerticalColon.swift
-//  TheNoiseClock
-//
-//  Created by Matt Bruce on 9/9/25.
-//
-
-import SwiftUI
-
-/// Component for displaying vertical colon separator (two dots stacked vertically)
-struct VerticalColon: View {
-    let dotDiameter: CGFloat
-    let spacing: CGFloat
-    let opacity: Double
-    let digitColor: Color
-    let glowIntensity: Double
-    let fontWeight: Font.Weight
-    
-    var body: some View {
-        let clamped = ColorUtils.clampOpacity(opacity)
-        VStack(spacing: spacing) {
-            DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
-            DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
-        }
-        .fixedSize(horizontal: true, vertical: true)
-        .accessibilityHidden(true)
-    }
-}
-
-// MARK: - Preview
-#Preview {
-    VerticalColon(
-        dotDiameter: 12,
-        spacing: 8,
-        opacity: 1.0,
-        digitColor: .white,
-        glowIntensity: 0.3,
-        fontWeight: .regular
-    )
-    .background(Color.black)
-}