Merge pull request #488 from OpenCovenant/bootsrap-classes-overide

Bootsrap classes overides
OpenCovenant · Jun 17, 2024 · 0d9b6ef · 0d9b6ef
2 parents 4abfc2e + 0f7c18c
commit 0d9b6ef
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 26 deletions.
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
@@ -10,8 +10,32 @@
     margin-left: 3rem;
 }
 
-.card-header {
-    border-bottom: 0px solid rgba(0, 0, 0, 0.125);
+.typo-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.loanword-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.stylistic-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.grammatical-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.generated-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.highlighted-marking-card-header {
+    border-bottom: 0px solid var(--light-black);
+}
+
+.loading-reading-text-card-header {
+    border-bottom: 0px solid var(--light-black);
 }
 
 .card-fade {
@@ -22,12 +46,11 @@
     display: none;
 }
 
-.card-body {
+.input-container-card-body {
     padding: 1rem;
     border-radius: 0.25rem;
     background-color: var(--light-mode-color);
 }
-
 .editor-flex {
     display: flex;
 }
@@ -141,7 +164,27 @@
     color: black;
 }
 
-.list-group-item {
+.typo-list-group-item {
+    background-color: var(--light-mode-color);
+}
+
+.loanword-list-group-item {
+    background-color: var(--light-mode-color);
+}
+
+.stylistic-list-group-item {
+    background-color: var(--light-mode-color);
+}
+
+.grammatical-list-group-item {
+    background-color: var(--light-mode-color);
+}
+
+.generated-marking-list-group-item {
+    background-color: var(--light-mode-color);
+}
+
+.highlighted-marking-list-group-item {
     background-color: var(--light-mode-color);
 }
 
@@ -274,7 +317,12 @@
     padding-bottom: 3px;
 }
 
-.bi-stars {
+.grammatical-marking-stars {
+    padding-right: 7px;
+    color: purple;
+}
+
+.generated-grammatical-marking-star {
     padding-right: 7px;
     color: purple;
 }
@@ -297,11 +345,15 @@
 
 .dismiss-marking-element-dark-mode {
     background: transparent
-        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
-        center/1em auto no-repeat;
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
+    center/1em auto no-repeat;
+}
+
+.close-button-text-reset {
+    cursor: pointer;
 }
 
-.text-reset {
+.dismiss-marking-close-button {
     cursor: pointer;
 }
 

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -7,7 +7,7 @@
             }"
         >
             <div
-                class="card-body"
+                class="card-body input-container-card-body"
                 [ngClass]="{
                     'card-body-dark-mode': darkModeService.isDarkMode
                 }"
@@ -59,7 +59,7 @@
                     <div *ngIf="editorHasText()">
                         <button
                             type="button"
-                            class="btn-close text-reset"
+                            class="btn-close text-reset close-button-text-reset"
                             [ngClass]="{
                                 'clear-element-dark-mode':
                                     darkModeService.isDarkMode
@@ -165,7 +165,7 @@
                 </div>
                 <ul class="list-group list-group-flush">
                     <li
-                        class="list-group-item"
+                        class="list-group-item typo-list-group-item"
                         [ngClass]="{
                             'list-group-item-dark-mode':
                                 darkModeService.isDarkMode
@@ -181,7 +181,7 @@
             </div>
             <div class="card loanword-marking-card border-secondary mt-4">
                 <div
-                    class="card-header second-header"
+                    class="card-header loanword-marking-card-header second-header"
                     [ngClass]="{
                         'second-header-dark-mode': darkModeService.isDarkMode
                     }"
@@ -195,7 +195,7 @@
                 </div>
                 <ul class="list-group list-group-flush">
                     <li
-                        class="list-group-item"
+                        class="list-group-item loanword-list-group-item"
                         [ngClass]="{
                             'list-group-item-dark-mode':
                                 darkModeService.isDarkMode
@@ -211,7 +211,7 @@
             </div>
             <div class="card stylistic-marking-card border-secondary mt-4">
                 <div
-                    class="card-header second-header"
+                    class="card-header stylistic-marking-card-header second-header"
                     [ngClass]="{
                         'second-header-dark-mode': darkModeService.isDarkMode
                     }"
@@ -225,7 +225,7 @@
                 </div>
                 <ul class="list-group list-group-flush">
                     <li
-                        class="list-group-item"
+                        class="list-group-item stylistic-list-group-item"
                         [ngClass]="{
                             'list-group-item-dark-mode':
                                 darkModeService.isDarkMode
@@ -238,7 +238,7 @@
             </div>
             <div class="card grammatical-marking-card border-secondary mt-4">
                 <div
-                    class="card-header second-header"
+                    class="card-header grammatical-marking-card-header second-header"
                     [ngClass]="{
                         'second-header-dark-mode': darkModeService.isDarkMode
                     }"
@@ -252,13 +252,13 @@
                 </div>
                 <ul class="list-group list-group-flush">
                     <li
-                        class="list-group-item"
+                        class="list-group-item grammatical-list-group-item"
                         [ngClass]="{
                             'list-group-item-dark-mode':
                                 darkModeService.isDarkMode
                         }"
                     >
-                        <i class="bi bi-stars"></i>
+                        <i class="bi bi-stars grammatical-marking-stars"></i>
                         <b>sipas rregullave gramatikore</b> -
                         <span
                             >shenjime për gabime gramatikore të llojeve të
@@ -284,7 +284,7 @@
                     data-test="marking-card"
                 >
                     <div
-                        class="card-header second-header"
+                        class="card-header generated-marking-card-header second-header"
                         [ngClass]="{
                             'second-header-dark-mode':
                                 darkModeService.isDarkMode
@@ -303,7 +303,7 @@
                             <button
                                 (click)="dismissMarking(i)"
                                 type="button"
-                                class="btn-close text-reset"
+                                class="btn-close text-reset dismiss-marking-close-button"
                                 [ngClass]="{
                                     'dismiss-marking-element-dark-mode':
                                         darkModeService.isDarkMode
@@ -316,7 +316,7 @@
                     </div>
                     <ul class="list-group list-group-flush">
                         <li
-                            class="list-group-item"
+                            class="list-group-item generated-marking-list-group-item"
                             [ngClass]="{
                                 'list-group-item-dark-mode':
                                     darkModeService.isDarkMode
@@ -326,7 +326,7 @@
                                 <div>
                                     <i
                                         *ngIf="marking.type === 'grammatical'"
-                                        class="bi bi-stars"
+                                        class="bi bi-stars generated-grammatical-marking-star"
                                     ></i>
                                     <b>{{ marking.subtype }}</b> -
                                     <span>{{ marking.description }}</span>
@@ -392,7 +392,7 @@
                     data-test="marking-card"
                 >
                     <div
-                        class="card-header second-header"
+                        class="card-header highlighted-marking-card-header second-header"
                         [ngClass]="{
                             'second-header-dark-mode':
                                 darkModeService.isDarkMode
@@ -423,7 +423,7 @@
                     </div>
                     <ul class="list-group list-group-flush">
                         <li
-                            class="list-group-item"
+                            class="list-group-item highlighted-marking-list-group-item"
                             [ngClass]="{
                                 'list-group-item-dark-mode':
                                     darkModeService.isDarkMode
@@ -555,7 +555,7 @@
             *ngIf="loading$ | async"
         >
             <div
-                class="card-header second-header"
+                class="card-header loading-reading-text-card-header second-header"
                 [ngClass]="{
                     'second-header-dark-mode': darkModeService.isDarkMode
                 }"

diff --git a/src/styles.css b/src/styles.css
@@ -23,6 +23,7 @@
     --active-dropdown-menu-dark-mode: #6e6e6e;
     --skeleton-color: #d9d9d9;
     --modal-go-back-button-color: #0d6efd;
+    --light-black: #00000020;
     /*TODO: these two should be in header.component.css but it doesn't seem to work?*/
     --light: #eaeaea;
     --dark: #28292c;