From dccb73d66c488e6ef37e3815a4f942e14bd87e82 Mon Sep 17 00:00:00 2001
From: Kifungo A <45813955+adkif@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:34:23 +0200
Subject: [PATCH] fix: styles for switch theme component, including toggle
 button layout, icon display, and animation.

---
 .../switch-theme/switch-theme.component.scss  | 144 ++++++++++--------
 1 file changed, 83 insertions(+), 61 deletions(-)

diff --git a/packages/desktop-ui-lib/src/lib/theme-selector/switch-theme/switch-theme.component.scss b/packages/desktop-ui-lib/src/lib/theme-selector/switch-theme/switch-theme.component.scss
index 8792a97ac2a..0023d6cffc7 100644
--- a/packages/desktop-ui-lib/src/lib/theme-selector/switch-theme/switch-theme.component.scss
+++ b/packages/desktop-ui-lib/src/lib/theme-selector/switch-theme/switch-theme.component.scss
@@ -1,74 +1,96 @@
 @import 'var';
 
 :host .switch-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
 
-  nb-toggle.switch ::ng-deep .toggle {
-    height: 1.5rem;
-    width: 3.375rem;
-    font-family: 'Font Awesome 6 Free' !important;
-    font-size: .625rem;
-    display: flex;
-    align-items: center;
-    background-color: rgba(126, 126, 143, 0.5);
-    border-width: 0;
-    .toggle-switcher{
-      height: 1rem;
-      width: 1rem;
-    }
-    span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      justify-self: flex-end;
-    }
+	nb-toggle.switch ::ng-deep .toggle {
+		height: 1.5rem;
+		width: 3.375rem;
+		font-family: 'Font Awesome 6 Free' !important;
+		font-size: .625rem;
+		display: flex;
+		align-items: center;
+		background-color: rgba(126, 126, 143, 0.5);
+		border-width: 0;
 
-    nb-icon{
-      display: none;
-    }
-  }
-  nb-toggle.light ::ng-deep .toggle {
-    justify-content: end;
-    &:before {
-      content: '\f186';
-      @include nb-rtl(margin-left, .275rem);
-      @include nb-ltr(margin-right, .275rem);
-      color: rgba(255, 255, 255, 0.25);
-    }
-    span {
-      &:before {
-        content: '\f185';
-      }
-    }
-    .toggle-switcher{
-      @include nb-ltr(margin-left, .25rem);
-      @include nb-rtl(margin-right, .25rem);
-    }
-  }
+		.toggle-switcher {
+			height: 1rem;
+			width: 1rem;
+			@include nb-rtl(left, 3px !important);
+			@include nb-ltr(right, 3px !important);
+		}
 
-  nb-toggle.dark ::ng-deep .toggle {
-    justify-content: flex-start;
-    &:before {
-      content: '\f185';
-      @include nb-ltr(margin-left, .325rem);
-      @include nb-rtl(margin-right, .325rem);
-      color: rgba(255, 255, 255, 0.25);
-    }
-    span {
-      &:before {
-        content: '\f186';
-      }
-    }
-  }
+		span {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			justify-self: flex-end;
+		}
+
+		nb-icon {
+			display: none;
+		}
+	}
+
+	nb-toggle.light ::ng-deep .toggle {
+		justify-content: end;
+
+		&:before {
+			content: '\f186';
+			position: absolute;
+			@include nb-rtl(right, 6px);
+			@include nb-ltr(left, 6px);
+			color: rgba(255, 255, 255, 0.5);
+			animation: slide 0.4s ease-out forwards;
+		}
+
+		span {
+			&:before {
+				content: '\f185';
+			}
+		}
+
+		.toggle-switcher {
+			@include nb-ltr(margin-left, .25rem);
+			@include nb-rtl(margin-right, .25rem);
+		}
+	}
+
+	nb-toggle.dark ::ng-deep .toggle {
+		justify-content: flex-start;
+
+		&:before {
+			content: '\f185';
+			@include nb-ltr(margin-left, .325rem);
+			@include nb-rtl(margin-right, .325rem);
+			color: rgba(255, 255, 255, 0.5);
+			animation: slide 0.4s ease-out forwards;
+		}
+
+		span {
+			&:before {
+				content: '\f186';
+			}
+		}
+	}
 }
 
 ::ng-deep [dir=ltr] nb-toggle.switch .toggle.checked .toggle-switcher {
-  left: calc(100% - 1.375rem);
+	left: calc(100% - 1.375rem);
 }
 
 ::ng-deep [dir=rtl] nb-toggle.switch .toggle.checked .toggle-switcher {
-  right: calc(100% - 1.375rem);
+	right: calc(100% - 1.375rem);
 }
+
+@keyframes slide {
+	from {
+	  transform: translateX(300%);
+	}
+	to {
+	  transform: translateX(0%);
+	}
+  }