fix: notification icon button in learning-mfe (#30)

edly-io · Dec 6, 2024 · 87b4604 · 87b4604
1 parent af3a97f
commit 87b4604
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 82 deletions.
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
@@ -60,85 +60,6 @@ html {
             position: absolute;
             right: 0;
             top: -22px;
-            .mt-3, .ml-1, >div {
-                margin: 0 !important;
-                border: none !important;
-                &:first-child {
-                    button {
-                        span {
-                            border: none;
-                            transform: none;
-                            width: 21px;
-                            height: auto;
-                            &:after, &:before {
-                                display: none;
-                            }
-                        }
-                        svg {
-                            display: block;
-                            width: 24px;
-                            height: auto;
-                            path {
-                                fill: #9CA3AF;
-                            }
-                        }
-                    }
-                }
-                button {
-                    height: auto;
-                    padding: 5px;
-                    border: 1px solid #D1D5DB !important;
-                    position: relative;
-                    margin: 0 0 0 12px;
-                    border-radius: 6px;
-                    .icon-container {
-                        width: 21px !important;
-                        height: 21px !important;
-                    }
-                    span {
-                        box-sizing: border-box;
-                        position: relative;
-                        display: block;
-                        transform: scale(var(--ggs,1));
-                        border: 2px solid #9CA3AF;
-                        border-bottom: 0;
-                        width: 14px;
-                        height: 14px;
-                        border-top-left-radius: 100px;
-                        border-top-right-radius: 100px;
-                        &:after, &:before {
-                            content: "";
-                            display: block;
-                            box-sizing: border-box;
-                            position: absolute;
-                        }
-                        &:after {
-                            border-radius: 3px;
-                            width: 16px;
-                            height: 10px;
-                            border: 6px solid transparent;
-                            border-top: 1px solid transparent;
-                            box-shadow: inset 0 0 0 4px #9CA3AF,  0 -2px 0 0 #9CA3AF;
-                            top: 14px;
-                            left: -3px;
-                            border-bottom-left-radius: 100px;
-                            border-bottom-right-radius: 100px;
-                        }
-                        &:before {
-                            background: #9CA3AF;
-                            width: 4px;
-                            height: 4px;
-                            top: -4px;
-                            left: 3px;
-                            border-top-left-radius: 100px;
-                            border-top-right-radius: 100px;
-                        }
-                    }
-                    svg {
-                        display: none;
-                    }
-                }
-            }
         }
          + .w-100.d-flex div.d-flex.ml-auto {
             @media only screen and (max-width: 576px) {
@@ -156,6 +77,15 @@ html {
                 border: none !important;
 
                 button {
+                    padding: 5px;
+                    border: 1px solid #D1D5DB !important;
+                    position: relative;
+                    margin: 0 0 0 12px;
+                    border-radius: 6px;
+                    .icon-container {
+                        width: 21px !important;
+                        height: 21px !important;
+                    }
                     span {
                         border: none;
                         transform: none;
@@ -189,7 +119,7 @@ html {
                         box-sizing: border-box;
                         position: relative;
                         display: block;
-                        transform: scale(0.7);
+                        transform: scale(0.95);
                         border: 2px solid #9CA3AF;
                         border-bottom: 0;
                         width: 14px;
@@ -224,6 +154,10 @@ html {
                             border-top-right-radius: 100px;
                         }
                     }
+                    span.rounded-circle{
+                        width: 2px;
+                        height: 2px;
+                    }
                     svg {
                         display: none;
                     }

diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss
@@ -1308,6 +1308,9 @@ svg {
         color: $text-color;
         background: $primary-light;
         border-color: $primary-light;
+        &.text-secondary{
+            color: $text-color !important;
+        }
     }
     .btn-link {
         color: $primary !important;

diff --git a/themes/dark/_utilities.scss b/themes/dark/_utilities.scss
@@ -245,12 +245,15 @@ a.muted-link {
 }
 
 .btn-icon.btn-icon-primary:hover {
-    background-color: $primary-700 !important;
-    color: $primary-500 !important
+    background-color: $light-500 !important;
+    color: $primary-500;
 }
 
 .btn-tertiary{
     color: #a6a6a6;
+    &:hover{
+      color: $primary-light;
+    }
 }
 
 .nav-button-group {