Merge pull request 'fix: popupConfirm paddingTop UI;loading-spinner UI roundCorner' (#94) from popupconfirm_loadingspiner_UI into main

Reviewed-on: https://git.biggo.com/john/dive/pulls/94

Author: johnfunmula

src/components/PopupConfirm.tsx

@@ -101,7 +101,7 @@ const CancelButton = () => {
 
 	return (
 		<PopupWindow {...windowProps}>
-			<div className={`popup-confirm ${noBorder ? "no-border" : ""} ${className || ""}`}>
+			<div className={`popup-confirm ${noBorder && "no-border"} ${noBorder && !(title && children) && "popup-confirm-top"} ${className || ""}`}>
 				{showClose && (
 					<div className="close-btn" onClick={onClickOutside}>
 						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

src/styles/_variables.scss

@@ -134,6 +134,7 @@ $shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.2);
   --stroke-extremestrong: #000000;
   --stroke-op-dark-extremestrong: rgba(0, 0, 0, 0.7);
   --stroke-neg-medium: #f62257;
+  --stroke-success: #52c41a;
   --stroke-pri-purple: #9200FB;
   --filter-dark: brightness(300%);
 
@@ -260,6 +261,7 @@ $shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.2);
   --stroke-light-extremestrong: #fff;
   --stroke-extremestrong: #ffffff;
   --stroke-op-dark-extremestrong: rgba(255, 255, 255, 0.7);
+  --stroke-success: #52c41a;
   --stroke-neg-medium: #d11040;
   --stroke-pri-purple: #9200FB;
   --filter-dark: invert(27%) brightness(300%);
@@ -322,22 +324,41 @@ $z-sidebar: 200;
   }
 }
 
-@mixin loading-spinner($size: 16px, $border-width: 2px) {
+@mixin loading-spinner($size: 16px, $border-width: 2px, $color: var(--text-inverted), $bg-color: var(--border-inverted-op-mediumweak)) {
   width: $size;
   height: $size;
-  border: $border-width solid var(--border-inverted-op-mediumweak);
   border-radius: 50%;
-  border-top-color: var(--text-inverted);
+  position: relative;
   animation: spin 0.8s linear infinite;
-}
+  background: conic-gradient(
+    $color 0deg 90deg,
+    $bg-color 90deg 360deg
+  );
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - $border-width), black 0);
+          mask: radial-gradient(farthest-side, transparent calc(100% - $border-width), black 0);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: $border-width;
+    height: $border-width;
+    border-radius: 50%;
+    background: $color;
+    transform: translate(-50%, -50%);
+  }
 
-@mixin loading-spinner-dark($size: 16px, $border-width: 2px) {
-  width: $size;
-  height: $size;
-  border: $border-width solid var(--border-op-mediumweak);
-  border-radius: 50%;
-  border-top-color: var(--text);
-  animation: spin 0.8s linear infinite;
+  &::before {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(0deg) translate(calc($size / 2) - calc($border-width / 2));
+  }
+
+  &::after {
+    top: -50%;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(90deg) translate(calc($size / 2) - calc($border-width / 2));
+  }
 }
 
 // text line clamp

src/styles/components/_Button.scss

@@ -26,7 +26,7 @@
   &.white,
   &.gray {
     .loading-spinner {
-      @include loading-spinner-dark;
+      @include loading-spinner(16px, 2px, var(--text), var(--border-op-mediumweak));
     }
   }
 

src/styles/components/_PopupConfirm.scss

@@ -16,6 +16,13 @@
   max-height: 85vh;
   overflow: hidden;
 
+  &.popup-confirm-top {
+    .popup-confirm-header,
+    .popup-confirm-content {
+      padding-top: 36px;
+    }
+  }
+
   &.no-border {
     .popup-confirm-header,
     .popup-confirm-footer {

src/styles/overlay/_Model.scss

@@ -425,10 +425,6 @@
 }
 
 .models-delete-confirm {
-  .popup-confirm-content {
-    padding-bottom: 0px;
-  }
-
   .models-delete-confirm-content {
     display: flex;
     flex-direction: column;
@@ -457,7 +453,7 @@
   height: 100%;
 
   &.edit{
-    padding: 20px 86px 0 62px;
+    padding: 0 86px 0 62px;
 
     .title{
       font-weight: 700 !important;
@@ -793,7 +789,7 @@
             gap: 5px;
 
             .loading-spinner {
-              @include loading-spinner-dark;
+              @include loading-spinner(16px, 2px, var(--text), var(--border-op-mediumweak));
               width: 22px;
               height: 22px;
             }