Refactor styles across components to utilize variable-based border-radius for consistency and improved maintainability. Added SkeletonUI component and corresponding styles for loading states.

app/src/styles/components/simulation/simulation.scss

@@ -12,7 +12,7 @@
   .simulation-player-container {
     background: var(--background-color);
     padding: 7px;
-    border-radius: 15px;
+    border-radius: #{$border-radius-xlarge};
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -22,7 +22,7 @@
     .progresser-wrapper {
       outline: 1px solid var(--border-color);
       background: var(--background-color);
-      border-radius: 12px;
+      border-radius: #{$border-radius-large};
       display: flex;
       flex-direction: column;
       gap: 12px;
@@ -35,14 +35,17 @@
       @include flex-space-between;
       gap: 12px;
       justify-content: space-between;
+
       .header {
         @include flex-center;
         gap: 6px;
         padding: 0 8px;
+
         svg {
           scale: 1.3;
         }
       }
+
       .production-details,
       .controls-wrapper {
         @include flex-center;
@@ -65,11 +68,11 @@
           .progress-wrapper {
             width: 164px;
             height: 8px;
-            border-radius: 5px;
+            border-radius: #{$border-radius-small};
             background: var(--background-color-solid);
 
             .progress {
-              border-radius: 5px;
+              border-radius: #{$border-radius-small};
               height: 100%;
               background-color: var(--background-color-accent);
             }
@@ -152,6 +155,7 @@
           width: 100%;
           height: 3px;
         }
+
         .custom-slider-wrapper {
           height: 100%;
           width: 100%;
@@ -159,6 +163,7 @@
           background: transparent;
           border-radius: #{$border-radius-large};
         }
+
         .custom-slider {
           height: 100%;
           width: 100%;
@@ -196,7 +201,6 @@
           opacity: 0.6;
           width: 2px;
           height: 12px;
-          border-radius: 1px;
           top: 8px;
           z-index: 1;
         }
@@ -250,6 +254,7 @@
       .end-time-wrappper {
         @include flex-center;
         gap: 4px;
+
         .icon {
           @include flex-center;
         }
@@ -262,7 +267,7 @@
           padding: 16px;
           outline: 1px solid var(--border-color);
           background: var(--background-color);
-          border-radius: 30px;
+          border-radius: #{$border-radius-xxx};
           display: flex;
           align-items: center;
           width: 100%;
@@ -284,7 +289,7 @@
             .dot {
               width: 14px;
               height: 14px;
-              border-radius: 50%;
+              border-radius: #{$border-radius-circle};
               background-color: #d3d3e2;
 
               &.filled {
@@ -310,6 +315,7 @@
   }
 
   .open {
+
     .start-displayer,
     .end-displayer {
       display: none;
@@ -318,6 +324,7 @@
     .timmer {
       display: none;
     }
+
     .progresser-wrapper {
       padding-top: 4px;
     }
@@ -347,6 +354,7 @@
   background: var(--background-color);
   padding: 20px 6px;
   position: relative;
+
   .timmer {
     width: auto;
     position: absolute;
@@ -364,6 +372,7 @@
     width: auto;
     right: 16px;
   }
+
   .process-player {
     position: absolute;
     top: 50%;
@@ -371,10 +380,11 @@
     width: 3.946108102798462px;
     height: 26px;
     left: 86.81px;
-    border-radius: 14px;
+    border-radius: #{$border-radius-large};
     border-width: 1px;
     background: var(--background-color-accent, #6f42c1);
   }
+
   .process-wrapper {
     .process-container {
       position: relative;
@@ -383,7 +393,7 @@
 
       .process {
         height: 5px;
-        border-radius: 4px;
+        border-radius: #{$border-radius-small};
         color: white;
         text-align: center;
         line-height: 30px;
@@ -391,4 +401,4 @@
       }
     }
   }
-}
+}