Highlight DFIQ context card (#2996)

* Highlight DFIQ info card * fix gh actions
google · Nov 24, 2023 · 38d6295 · 38d6295
1 parent 532c0ac
commit 38d6295
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
@@ -45,7 +45,6 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: |
-          sudo apt install yarn npm --no-install-recommends
           yarn install
 
       - name: Run unit tests with yarn

diff --git a/timesketch/frontend-ng/src/assets/main.scss b/timesketch/frontend-ng/src/assets/main.scss
@@ -161,16 +161,26 @@ html {
 }
 
 .light-info-card {
-  background-color: rgba(33, 150, 243, .1);
+  background-color: #e7f4fe;
   color: #333;
   border-radius: 6px;
 }
 
 .dark-info-card {
-  background-color: rgba(33, 150, 243, .1);
+  background-color: #131F29;
   color:#fff;
   border-radius: 6px;
-  border:1px solid rgba(33, 150, 243, 0.3);
+  border:1px solid #174366;
+}
+
+.light-info-accordion {
+  background-color: #e7f4fe;
+  color: #333;
+}
+
+.dark-info-accordion {
+  background-color: #131F29;
+  color:#fff;
 }
 
 .timeline-name-ellipsis {

diff --git a/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue b/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-card outlined rounded class="mt-3 mx-3" v-if="activeContext.question">
+  <div
+    v-if="activeContext.question"
+    class="mt-3 mx-3 pb-1"
+    :class="$vuetify.theme.dark ? 'dark-info-card' : 'light-info-card'"
+  >
     <v-toolbar flat dense style="background-color: transparent">
       <h3>
         {{ activeContext.question.display_name }}
@@ -58,10 +62,10 @@ limitations under the License.
 
         <!--Approaches-->
         <div v-if="activeContext.question.approaches.length">
-          <div class="px-4 pb-3">
-            <v-btn depressed small @click="showApproaches = !showApproaches">
+          <div class="px-4 pb-4">
+            <v-btn depressed outlined small @click="showApproaches = !showApproaches">
               <span v-if="!showApproaches">Show {{ activeContext.question.approaches.length }} approaches</span>
-              <span v-else>Hide approaches</span>
+              <span v-else>Hide {{ activeContext.question.approaches.length }} approaches</span>
             </v-btn>
           </div>
           <v-expand-transition>
@@ -72,10 +76,14 @@ limitations under the License.
                   v-for="(approach, index) in activeContext.question.approaches"
                   :key="approach.display_name"
                 >
-                  <v-expansion-panel-header>
+                  <v-expansion-panel-header
+                    :class="$vuetify.theme.dark ? 'dark-info-accordion' : 'light-info-accordion'"
+                  >
                     <span>{{ approach.display_name }}</span>
                   </v-expansion-panel-header>
-                  <v-expansion-panel-content>
+                  <v-expansion-panel-content
+                    :class="$vuetify.theme.dark ? 'dark-info-accordian' : 'light-info-accordion'"
+                  >
                     <ts-context-card-approach :approachJSON="approach"></ts-context-card-approach>
                   </v-expansion-panel-content>
                   <v-divider v-if="index != activeContext.question.approaches.length - 1"></v-divider>
@@ -86,7 +94,7 @@ limitations under the License.
         </div>
       </div>
     </v-expand-transition>
-  </v-card>
+  </div>
 </template>
 
 <script>

diff --git a/timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue b/timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue
@@ -31,15 +31,15 @@ limitations under the License.
       </ul>
     </div>
 
-    <v-sheet style="max-width: 80%" class="mb-3">
+    <v-sheet style="max-width: 80%; background-color: transparent" class="mb-3">
       <v-icon color="success" class="mr-2">mdi-check</v-icon>
       <strong>Covered</strong>
       <ul class="mt-2">
         <li v-for="note in approach._view.notes.covered" :key="note">{{ note }}</li>
       </ul>
     </v-sheet>
 
-    <v-sheet style="max-width: 80%">
+    <v-sheet style="max-width: 80%; background-color: transparent">
       <v-icon color="error" class="mr-2">mdi-close</v-icon>
       <strong>Not covered</strong>
       <ul class="mt-2">

diff --git a/timesketch/frontend-ng/src/views/Explore.vue b/timesketch/frontend-ng/src/views/Explore.vue
@@ -64,9 +64,9 @@ limitations under the License.
               v-bind="attrs"
               v-on="on"
             >
-            <template v-slot:append>
-               <v-icon title="Run search" @click="search()">mdi-magnify</v-icon>
-            </template>
+              <template v-slot:append>
+                <v-icon title="Run search" @click="search()">mdi-magnify</v-icon>
+              </template>
             </v-text-field>
           </template>
 
@@ -275,7 +275,7 @@ limitations under the License.
     </v-card>
 
     <!-- Eventlist -->
-    <v-card flat class="mt-5 mx-3">
+    <v-card flat class="mt-5 mx-3" color="transparent">
       <ts-event-list
         :query-request="activeQueryRequest"
         @countPerIndex="updateCountPerIndex($event)"