add improvements

ORCID · Dec 9, 2024 · 7744308 · 7744308
1 parent 6a968af
commit 7744308
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git a/src/app/cdk/alert-message/alert-message.component.html b/src/app/cdk/alert-message/alert-message.component.html
@@ -35,7 +35,7 @@
   </div>
 
   <div>
-    <strong class="title">
+    <strong class="title orc-font-body">
       <ng-content select="[title]"></ng-content>
     </strong>
     <div class="content orc-font-body-small">

diff --git a/src/app/cdk/alert-message/alert-message.component.scss b/src/app/cdk/alert-message/alert-message.component.scss
@@ -1,23 +1,21 @@
 :host {
-  ::ng-deep {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 0 0 8px 0 !important;
-    }
-  }
   width: 100%;
   display: inline-block;
 }
 
 .title {
+  ::ng-deep * {
+    margin: 0;
+  }
   line-height: 24px;
 }
 
 .content {
+  ::ng-deep {
+    > :first-child {
+      margin-top: 8px;
+    }
+  }
   line-height: 21px !important;
 }
 

diff --git a/src/app/cdk/alert-message/alert-message.component.ts b/src/app/cdk/alert-message/alert-message.component.ts
@@ -12,8 +12,8 @@ import { AlertType } from 'src/app/constants'
 /**
  * Use `title` and `content` attributes to display the message
  * Use headings (h1, h2...) for the title
- * Margin is set to `0 0 8px 0` for all headings
- * Line height is also standardized
+ * Title is stripped of any margin, has 24px line height and is bold
+ * Content has `margin-top: 8px` on its first child if it has any, line height is 21px
  */
 export class AlertMessageComponent {
   @Input() type: AlertType = 'notice'

diff --git a/src/app/cdk/top-bar-verification-email/top-bar-verification-email.component.scss b/src/app/cdk/top-bar-verification-email/top-bar-verification-email.component.scss
@@ -3,10 +3,6 @@
   box-sizing: border-box;
 }
 
-button {
-  margin-top: 8px;
-}
-
 .need-help {
   margin-bottom: 0;
 }

diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -198,7 +198,13 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
           </p>
 
           <app-alert-message class="redirect-uri-notice">
-            <h4 title i18n="@@developerTools.pleaseNote">Please note</h4>
+            <h4
+              title
+              i18n="@@developerTools.pleaseNote"
+              class="orc-font-body-small"
+            >
+              Please note
+            </h4>
             <ul content>
               <li>
                 <ng-container i18n="@@developerTools.only"> Only</ng-container>