Merge pull request #103 from ahmed-deriv/ahmed/DAPI-662/fix--improve-…

…text-alignment-popups Ahmed/dapi-662/fix--improve-text-alignment-popups
deriv-com · Aug 30, 2024 · 062750c · 062750c
2 parents 30c5256 + 82b0a83
commit 062750c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 64 deletions.
diff --git a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/delete-token-dialog.scss b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/delete-token-dialog.scss
@@ -10,23 +10,6 @@
   background: var(--core-color-solid-red-100);
 }
 
-.delete-content {
-  padding: 24px 32px;
-  text-align: center;
-
-  h4 {
-    margin-bottom: 32px;
-    color: var(--core-color-solid-slate-1400);
-    font-size: 18px;
-    @extend .align-center;
-  }
-
-  p {
-    color: var(--core-color-opacity-black-600);
-    font-size: 14px;
-  }
-}
-
 .quill-modal__button-wrapper {
   padding: 24px 32px;
 }

diff --git a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx
@@ -53,7 +53,7 @@ const DeleteTokenDialog = ({ token, onClose }: TDeleteTokenDialogProps) => {
       <div className='deleteicon'>
         <StandaloneTrashRegularIcon fill='#C40000' iconSize='2xl' />
       </div>
-      <div className='delete-content'>
+      <div className='modal__content'>
         <h4>Delete token</h4>
         <p>Are you sure you want to delete this token?</p>
       </div>

diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/delete-app-dialog.scss b/src/features/dashboard/components/Dialogs/DeleteAppDialog/delete-app-dialog.scss
@@ -1,49 +1,3 @@
-.align-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal__icon {
-  @extend .align-center;
-  padding: 24px;
-}
-
-.modal__text {
-  padding: 24px 32px;
-  gap: 32px;
-}
-
-.modal__header {
-  @extend .align-center;
-  padding-bottom: 32px;
-  font-size: 18px;
-}
-
-.modal__content {
-  padding: 24px 32px;
-  text-align: center;
-
-  h4 {
-    margin-bottom: 32px;
-    color: var(--core-color-solid-slate-1400);
-    font-size: 18px;
-    @extend .align-center;
-  }
-
-  p {
-    color: var(--core-color-opacity-black-600);
-    font-size: 14px;
-  }
-
-  ul {
-    padding-top: 16px;
-    li {
-      list-style: disc;
-    }
-  }
-}
-
 .quill-modal__button-wrapper {
   padding: 24px 32px;
 }

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -103,6 +103,12 @@ h4 {
   }
 }
 
+.align-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .error-message {
   color: var(--colors-coral500) !important;
   margin-left: rem(1.5);
@@ -215,6 +221,43 @@ div[class*='sidebarViewport'] {
   }
 }
 
+.modal__icon {
+  @extend .align-center;
+  padding: 24px;
+}
+
+.modal__text {
+  padding: 24px 32px;
+  gap: 32px;
+}
+
+.modal__header {
+  padding-bottom: 32px;
+  font-size: 18px;
+}
+
+.modal__content {
+  padding: 24px 32px;
+
+  h4 {
+    margin-bottom: 32px;
+    color: var(--core-color-solid-slate-1400);
+    font-size: 18px;
+  }
+
+  p {
+    color: var(--core-color-opacity-black-600);
+    font-size: 14px;
+  }
+
+  ul {
+    padding-top: 16px;
+    li {
+      list-style: disc;
+    }
+  }
+}
+
 .loading {
   position: absolute;
   width: 100%;