refactor: use styles from short css file

src/components/GoalsComponents/DisplayChangesModal/ShowChanges.scss

@@ -1,79 +1,35 @@
 .move-info-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  background: var(--secondary-background);
-  border-radius: 12px;
   padding: 24px;
-  border: 1px solid var(--default-border-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
   .move-info-item {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
     .move-info-label {
-      font-size: 12px;
       color: var(--text-secondary);
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
     }
 
     .move-info-value {
-      font-size: 14px;
       color: var(--text-primary);
       padding: 12px 16px;
-      background: var(--primary-background);
-      border-radius: 8px;
-      border: 1px solid var(--default-border-color);
-      line-height: 1.4;
-
-      &.highlight-box {
-        background: var(--selection-color);
-        border: none;
-        font-weight: 500;
-      }
     }
   }
 
   .move-direction-container {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
-    gap: 12px;
     padding: 16px;
     background: var(--primary-background);
-    border-radius: 12px;
-    border: 1px solid var(--default-border-color);
 
     .arrow {
       width: 32px;
       height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--secondary-background);
       border-radius: 50%;
-      color: var(--text-secondary);
-      font-size: 18px;
       margin-top: 24px;
     }
   }
 
   .warning-message {
-    display: flex;
-    align-items: center;
-    gap: 8px;
     padding: 12px 16px;
     background: var(--bottom-nav-color);
-    border-radius: 8px;
     margin-top: 4px;
-    font-size: 13px;
-
-    .anticon {
-      font-size: 16px;
-    }
   }
 }

src/components/GoalsComponents/DisplayChangesModal/ShowChanges.tsx

@@ -11,28 +11,28 @@ export const getMovedSubgoalsList = (
   if (!goalUnderReview) return null;
 
   return (
-    <div className="move-info-container">
-      <div className="move-info-item">
-        <span className="move-info-label">Goal Being Moved</span>
-        <div className="move-info-value highlight-box">{goalUnderReview.title}</div>
+    <div className="move-info-container d-flex f-col gap-20 bordered br-12 bg-sec">
+      <div className="move-info-item d-flex f-col gap-8">
+        <span className="move-info-label text-sm fw-600">Goal Being Moved</span>
+        <div className="move-info-value bg-primary  br-8 bordered">{goalUnderReview.title}</div>
       </div>
 
-      <div className="move-direction-container">
+      <div className="move-direction-container br-12 gap-8 bordered br-12">
         <div className="move-info-item">
           <span className="move-info-label">From</span>
-          <div className="move-info-value">{oldParentTitle}</div>
+          <div className="move-info-value  br-8 bordered">{oldParentTitle}</div>
         </div>
 
-        <div className="arrow">→</div>
+        <div className="arrow place-middle text-sm bg-sec">→</div>
 
         <div className="move-info-item">
           <span className="move-info-label">To</span>
-          <div className="move-info-value">{newParentTitle}</div>
+          <div className="move-info-value br-8 bordered">{newParentTitle}</div>
         </div>
       </div>
 
       {newParentTitle === "Non-shared goal" && (
-        <div className="warning-message">
+        <div className="warning-message place-middle gap-8 text-sm br-8">
           <InfoCircleOutlined />
           <span>The new parent goal is not shared. The goal will be moved to the root.</span>
         </div>

src/short.scss

@@ -96,6 +96,14 @@
   font-size: 1.25rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
 .m-0 {
   margin: 0;
 }