refactor(client): standardize dark-light CSS format (#567)

ia-toki · Dec 30, 2023 · 9c40925 · 9c40925
1 parent dafd335
commit 9c40925
Show file tree

Hide file tree

Showing 18 changed files with 382 additions and 337 deletions.
diff --git a/judgels-client/src/components/Card/Card.scss b/judgels-client/src/components/Card/Card.scss
@@ -25,11 +25,3 @@
   margin-bottom: 10px;
   overflow-x: auto;
 }
-
-.bp5-dark .bp5-card {
-  background-color: #30404d;
-  box-shadow:
-    0 0 0 1px rgba(16, 22, 26, 0.4),
-    0 0 0 rgba(16, 22, 26, 0),
-    0 0 0 rgba(16, 22, 26, 0);
-}
diff --git a/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss b/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss
@@ -8,20 +8,21 @@
 
   .form-status {
     float: right;
+
     label {
       float: left;
       width: initial;
       line-height: 30px;
       margin-right: 5px;
     }
-    .form-group-select {
+
+    .form-group__select {
       float: left;
       width: initial;
     }
   }
 
   button {
     float: right;
-    margin-left: 5px;
   }
 }
diff --git a/judgels-client/src/components/ContentCard/ContentCard.scss b/judgels-client/src/components/ContentCard/ContentCard.scss
@@ -5,15 +5,15 @@
   margin-bottom: 10px;
   overflow: auto;
 
+  .bp5-dark & {
+    box-shadow: 0 0 0 0.5px $dark-secondary-background-color !important;
+  }
+
   h3 {
     margin-bottom: 5px;
   }
 }
 
-.bp5-dark .content-card {
-  box-shadow: 0 0 0 0.5px #5c7080 !important;
-}
-
 .content-card__section {
   margin-bottom: 15px;
 }

diff --git a/judgels-client/src/components/ContentCardLink/ContentCardLink.scss b/judgels-client/src/components/ContentCardLink/ContentCardLink.scss
@@ -10,14 +10,14 @@
 .content-card-link:hover {
   cursor: pointer;
   text-decoration: none;
-}
 
-.bp5-light .content-card-link:hover {
-  background-color: $secondary-background-color;
-}
+  .bp5-light & {
+    background-color: $secondary-background-color;
+  }
 
-.bp5-dark .content-card-link:hover {
-  background-color: $dark-secondary-background-color;
+  .bp5-dark & {
+    background-color: $dark-secondary-background-color;
+  }
 }
 
 .content-card-link__content {

diff --git a/judgels-client/src/components/Header/Header.scss b/judgels-client/src/components/Header/Header.scss
@@ -2,32 +2,32 @@
 
 .header {
   height: 50px;
-}
+  color: white;
 
-.bp5-light .header {
-  background-color: $primary-color !important;
-  height: 50px;
-}
+  .bp5-light & {
+    background-color: $primary-color !important;
+    height: 50px;
+  }
 
-.bp5-dark .header {
-  color: $dark-text-color !important;
-  background-color: $dark-blue-main-background-color !important;
-  box-shadow:
-    0 0 0 1px rgba(17, 20, 24, 0.1),
-    0 1px 1px rgba(17, 20, 24, 0.2);
-}
+  .bp5-dark & {
+    color: $dark-text-color !important;
+    background-color: $dark-blue-main-background-color !important;
+    box-shadow:
+      0 0 0 1px rgba(17, 20, 24, 0.1),
+      0 1px 1px rgba(17, 20, 24, 0.2);
+  }
 
-.bp5-dark .header a {
-  color: $dark-text-color !important;
-}
+  a {
+    color: white;
 
-.header,
-.header a {
-  color: white;
-}
+    .bp5-dark & {
+      color: $dark-text-color !important;
+    }
 
-.header a:hover {
-  text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 .header__wrapper {

diff --git a/judgels-client/src/components/HtmlText/HtmlText.scss b/judgels-client/src/components/HtmlText/HtmlText.scss
@@ -47,30 +47,27 @@
     cursor: pointer;
     font-family: $accent-font;
     font-weight: bold;
-  }
 
-  .spoiler:hover {
-    background-color: #e7e7e7;
-  }
+    .bp5-dark & {
+      background-color: $dark-secondary-background-color;
+    }
 
-  .spoiler .spoiler-content {
-    display: none;
-    border-top: 1px solid;
-    margin-top: 5px;
-    padding-top: 15px;
-    font-family: $primary-font;
-    font-style: normal;
-    font-weight: normal;
-  }
-}
+    &:hover {
+      background-color: #e7e7e7;
 
-.bp5-dark .html-text {
-  .spoiler {
-    background-color: #5c7080;
-    border: 2px dashed $gray5;
-  }
+      .bp5-dark & {
+        background-color: $dark-background-color;
+      }
+    }
 
-  .spoiler:hover {
-    background-color: $dark-background-color;
+    .spoiler-content {
+      display: none;
+      border-top: 1px solid;
+      margin-top: 5px;
+      padding-top: 15px;
+      font-family: $primary-font;
+      font-style: normal;
+      font-weight: normal;
+    }
   }
 }
diff --git a/...components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/...components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
@@ -32,7 +32,7 @@ export function ProblemStatementCard({ alias, statement: { title, text }, limits
         {alias ? `${alias}. ` : ''}
         {title}
       </h2>
-      <HTMLTable condensed className="programming-problem-statement__limits">
+      <HTMLTable compact className="programming-problem-statement__limits">
         <tbody>
           <tr>
             <td>Time limit</td>

diff --git a/judgels-client/src/components/Sidebar/Sidebar.scss b/judgels-client/src/components/Sidebar/Sidebar.scss
@@ -21,26 +21,68 @@
 
   .bp5-tab-indicator {
     border-radius: 0 !important;
-  }
 
-  .bp5-tab {
-    a {
-      width: 100%;
+    .bp5-light & {
+      background-color: $secondary-background-color !important;
+      border-left: 3px solid $primary-color;
+    }
+
+    .bp5-dark & {
+      background-color: $dark-secondary-background-color !important;
+      border-left: 3px solid $gray3;
     }
+  }
 
+  .bp5-tab {
     position: relative;
     padding-left: 20px !important;
     line-height: 50px;
     height: 50px;
-  }
 
-  .bp5-tab[aria-selected='true'] {
-    font-weight: bold;
+    &:hover {
+      .bp5-light & {
+        background-color: $tertiary-background-color !important;
+      }
+
+      .bp5-dark & {
+        background-color: $dark-tertiary-background-color !important;
+      }
+    }
+
+    &[aria-selected='true'] {
+      font-weight: bold;
+
+      .bp5-light & {
+        color: $text-color;
+      }
+
+      .bp5-dark & {
+        color: inherit;
+      }
+    }
+
+    &[aria-selected='false'] {
+      .bp5-light & {
+        color: $primary-color;
+      }
+    }
+
+    a {
+      width: 100%;
+
+      .bp5-dark & {
+        color: $dark-text-color !important;
+      }
+    }
   }
 }
 
 .card-sidebar__arrow {
   float: right;
+
+  .bp5-light & {
+    color: $primary-color !important;
+  }
 }
 
 .card-sidebar__full {
@@ -72,45 +114,3 @@
     }
   }
 }
-
-.bp5-light .card-sidebar {
-  .card-sidebar__arrow {
-    color: $primary-color !important;
-  }
-
-  .bp5-tab-indicator {
-    background-color: $secondary-background-color !important;
-    border-left: 3px solid $primary-color;
-  }
-
-  .bp5-tab:hover {
-    background-color: $tertiary-background-color !important;
-  }
-
-  .bp5-tab[aria-selected='true'] {
-    color: $text-color;
-  }
-
-  .bp5-tab[aria-selected='false'] {
-    color: $primary-color;
-  }
-}
-
-.bp5-dark .card-sidebar {
-  .bp5-tab a {
-    color: $dark-text-color !important;
-  }
-
-  .bp5-tab[aria-selected='true'] {
-    color: inherit;
-  }
-
-  .bp5-tab-indicator {
-    background-color: $dark-secondary-background-color !important;
-    border-left: 3px solid $gray3;
-  }
-
-  .bp5-tab:hover {
-    background-color: $dark-tertiary-background-color !important;
-  }
-}
diff --git a/judgels-client/src/components/SourceCode/SourceCode.scss b/judgels-client/src/components/SourceCode/SourceCode.scss
@@ -3,9 +3,9 @@
 pre.source-code {
   border-color: #cccccc;
   background-color: #f5f5f5 !important;
-}
 
-.bp5-dark pre.source-code {
-  border-color: #202b33;
-  background-color: #293742 !important;
+  .bp5-dark & {
+    border-color: #202b33;
+    background-color: #293742 !important;
+  }
 }
diff --git a/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss b/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss
@@ -16,13 +16,15 @@
   .form-username,
   .form-problem-alias {
     float: right;
+
     label {
       float: left;
       width: initial;
       line-height: 30px;
       margin-right: 5px;
     }
-    .form-group-select {
+
+    .form-group__select {
       float: left;
       width: initial;
     }

diff --git a/judgels-client/src/components/UserWidget/UserWidget.scss b/judgels-client/src/components/UserWidget/UserWidget.scss
@@ -8,6 +8,14 @@
   line-height: 30px;
   vertical-align: middle !important;
 
+  .bp5-light & {
+    background-color: #f4f5f6;
+  }
+
+  .bp5-dark & {
+    background-color: $dark-background-color;
+  }
+
   svg {
     vertical-align: middle !important;
   }
@@ -18,14 +26,6 @@
   color: inherit;
 }
 
-.bp5-light .widget-user__profile {
-  background-color: #f4f5f6;
-}
-
-.bp5-dark .widget-user__profile {
-  background-color: $dark-background-color;
-}
-
 .widget-user__avatar-wrapper {
   height: 60px;
   padding-top: 10px;