Prepare for dark mode by adjusting colors to be good for both themes

PurdueIEEE · Jul 21, 2023 · 890ce74 · 890ce74
1 parent 68445af
commit 890ce74
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 38 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
     <title>Boiler Books</title>
   </head>
-  <body>
+  <body data-bs-theme="light">
     <noscript>
       <strong>We're sorry but Boiler Books doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0",
     "core-js": "^3.31.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
 
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <nav class="navbar navbar-expand-md fixed-top bg-dark-subtle" data-bs-theme="dark">
         <div class="container-lg">
           <router-link class="navbar-brand fw-bold" to="/">Boiler Books {{dev ? "[DEV]" : ""}}</router-link>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarlink" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@@ -27,7 +27,7 @@
 
     <footer>
         <div class="container-fluid text-center py-3">
-            <p class="text-center fs-5 my-0"><a href="https://github.com/PurdueIEEE/boilerbooks" target="_blank" class="dark-link">View page on GitHub</a></p>
+            <p class="text-center fs-5 my-0"><a href="https://github.com/PurdueIEEE/boilerbooks" target="_blank" class="link-secondary">View page on GitHub</a></p>
             <p class="text-center">{{version_string}}</p>
             <p class="text-center lead">Copyright © Purdue IEEE<br>with Hadi Ahmed and Kyle Rakos</p>
         </div>
@@ -93,16 +93,6 @@ export default {
   text-align: center;
 }
 
-.dark-link {
-  text-decoration: none;
-  color: black;
-}
-
-.dark-link:hover {
-  text-decoration: underline;
-  color: black;
-}
-
 .debug {
   outline: 2px solid red;
 }

diff --git a/ui/src/views/BoilerBooksHome.vue b/ui/src/views/BoilerBooksHome.vue
@@ -2,7 +2,7 @@
   <div class="container-lg my-5 pt-5">
     <h1>Boiler Books v2</h1>
     <h3>Financial Recordkeeping Software</h3>
-    <h6 class="fst-italic">Now supporting Unicode and emojis!</h6>
+    <h6 class="fst-italic">Now supporting Unicode and dark mode!</h6>
 
     <!-- Begin the DIV SOUP -->
     <div class="row mt-5 justify-content-center">

diff --git a/ui/src/views/budget/BudgetApprove.vue b/ui/src/views/budget/BudgetApprove.vue
@@ -4,7 +4,7 @@
     <div v-if="dispmsg!==''" class="lead fw-bold my-1 fs-3" v-bind:class="{'text-success':!error,'text-danger':error}">{{dispmsg}}</div>
     <br v-else>
     <div class="my-3 row justify-content-center">
-      <div v-for="(items, comm) in submittedBudgets" v-bind:key="comm" class="p-3 m-2 bg-light border rounded-3 row text-start col-md-10">
+      <div v-for="(items, comm) in submittedBudgets" v-bind:key="comm" class="p-3 m-2 bg-light-subtle border rounded-3 row text-start col-md-10">
         <p class="fs-2 fw-bold">{{committeeList[comm]}}</p>
         <ul>
           <li v-for="item in items" v-bind:key="comm+item.category" class="fs-2 ms-5">{{item.category}} - <span class="fw-bold">${{item.amount}}</span></li>

diff --git a/ui/src/views/budget/BudgetModify.vue b/ui/src/views/budget/BudgetModify.vue
@@ -17,7 +17,7 @@
       <p class="fs-2">Current budget status: <span v-bind:class="budgetStatus()">{{financialSummary.length == 0 ? "Not Submitted" : financialSummary[0].budget}}</span></p>
       <form v-on:submit.prevent="pushNewBudget">
 
-        <div v-for="(item, idx) in currBudget" v-bind:key="item.category" class="p-3 m-2 bg-light border rounded-3 row text-start">
+        <div v-for="(item, idx) in currBudget" v-bind:key="item.category" class="p-3 m-2 bg-light-subtle border rounded-3 row text-start">
           <div class="col-md-5 mt-1">
             <label v-bind:for="'cat-input-'+idx" class="form-label fw-bold">Category</label>
             <input v-bind:id="'cat-input-'+idx" type="text" v-model="currEditBudget[idx].category" class="form-control" required>
@@ -34,7 +34,7 @@
           </div>
         </div>
 
-        <div class="p-3 m-2 bg-light border rounded-3 row text-start">
+        <div class="p-3 m-2 bg-light-subtle border rounded-3 row text-start">
           <div class="col-md-5 mt-1">
             <label for="cat-input-new" class="form-label fw-bold">Category</label>
             <input id="cat-input-new" type="text" v-model="newCat" class="form-control" placeholder="Category name...">

diff --git a/ui/src/views/dues/DuesEdit.vue b/ui/src/views/dues/DuesEdit.vue
@@ -87,11 +87,11 @@
           <td>{{dues.row.fiscal_year}}</td>
           <td>{{dues.row.status}}</td>
           <td>
-            <button class="btn btn-outline-info my-1" v-on:click="triggerAmountModal(dues.row.duesid, 'Paid')">Paid</button>
+            <button class="btn btn-info my-1" v-on:click="triggerAmountModal(dues.row.duesid, 'Paid')">Paid</button>
             <br>
-            <button class="btn btn-outline-dark my-1" v-on:click="triggerAmountModal(dues.row.duesid, 'Exempt')">Exempt</button>
+            <button class="btn btn-secondary my-1" v-on:click="triggerAmountModal(dues.row.duesid, 'Exempt')">Exempt</button>
           </td>
-          <td><button class="btn btn-outline-primary" v-on:click="triggerUpdateModal(dues.row)">Edit</button></td>
+          <td><button class="btn btn-primary" v-on:click="triggerUpdateModal(dues.row)">Edit</button></td>
         </template>
       </DataTable>
       <br/><br/>

diff --git a/ui/src/views/income/IncomeModify.vue b/ui/src/views/income/IncomeModify.vue
@@ -29,13 +29,13 @@
         <td>{{income.row.status}}</td>
         <td>{{income.row.refnumber}}</td>
         <td>
-          <button class="btn btn-outline-info my-1" v-if="income.row.status !== 'Expected'" v-on:click="updateStatus(income.row.incomeid, 'Expected')">Expected</button>
+          <button class="btn btn-info my-1" v-if="income.row.status !== 'Expected'" v-on:click="updateStatus(income.row.incomeid, 'Expected')">Expected</button>
           <br v-if="income.row.status !== 'Expected'">
-          <button class="btn btn-outline-success my-1" v-if="income.row.status !== 'Received'" v-on:click="updateStatus(income.row.incomeid, 'Received')">Received</button>
+          <button class="btn btn-success my-1" v-if="income.row.status !== 'Received'" v-on:click="updateStatus(income.row.incomeid, 'Received')">Received</button>
           <br v-if="income.row.status !== 'Received'">
-          <button class="btn btn-outline-dark my-1" v-if="income.row.status !== 'Unreceived'" v-on:click="updateStatus(income.row.incomeid, 'Unreceived')">Unreceived</button>
+          <button class="btn btn-warning my-1" v-if="income.row.status !== 'Unreceived'" v-on:click="updateStatus(income.row.incomeid, 'Unreceived')">Unreceived</button>
           <br v-if="income.row.status !== 'Unreceived'">
-          <button class="btn btn-outline-secondary my-1" v-if="income.row.status !== 'Credit'" v-on:click="updateStatus(income.row.incomeid, 'Credit')">Credit</button>
+          <button class="btn btn-secondary my-1" v-if="income.row.status !== 'Credit'" v-on:click="updateStatus(income.row.incomeid, 'Credit')">Credit</button>
         </td>
       </template>
     </DataTable>

diff --git a/ui/src/views/infra/InfraCommittees.vue b/ui/src/views/infra/InfraCommittees.vue
@@ -25,7 +25,7 @@
       </div>
     </div>
 
-    <div class="p-3 m-2 bg-light border rounded-3 row text-start">
+    <div class="p-3 m-2 bg-light-subtle border rounded-3 row text-start">
       <div class="col-md-1">
         <p class="fs-3 fw-bold">ID</p>
       </div>
@@ -45,7 +45,7 @@
         <p class="fs-3 fw-bold">Edit</p>
       </div>
     </div>
-    <div v-for="(item, idx) in committeeList" v-bind:key="idx" class="p-3 m-2 bg-light border rounded-3 row text-start">
+    <div v-for="(item, idx) in committeeList" v-bind:key="idx" class="p-3 m-2 bg-light-subtle border rounded-3 row text-start">
       <div class="col-md-1">
         <p class="fs-5 fw-bold">{{ item.committee_id }}</p>
       </div>
@@ -79,7 +79,7 @@
         <button v-if="activeEditList[idx]" v-on:click="saveEdit(idx)" class="btn btn-primary"><i class="bi bi-check-lg"></i></button>
       </div>
     </div>
-    <div class="p-3 m-2 bg-light border rounded-3 row text-start">
+    <div class="p-3 m-2 bg-light-subtle border rounded-3 row text-start">
       <div class="col-md-1 my-3">
         <p class="fs-5 fw-bold">#</p>
       </div>

diff --git a/ui/src/views/infra/InfraFiscal.vue b/ui/src/views/infra/InfraFiscal.vue
@@ -6,7 +6,7 @@
 
     <div class="row">
       <div v-for="(item, idx) in fiscalYearList" v-bind:key="idx" class="col-md-4">
-        <div class="row p-3 m-2 bg-light border rounded-3 text-start">
+        <div class="row p-3 m-2 bg-light-subtle border rounded-3 text-start">
           <div class="col-md-2">
             <p class="fs-5 fw-bold">{{ item.fyid }}</p>
           </div>
@@ -17,7 +17,7 @@
       </div>
     </div>
 
-    <div class="row p-3 m-2 bg-light border rounded-3 text-start">
+    <div class="row p-3 m-2 bg-light-subtle border rounded-3 text-start">
       <div class="offset-md-2 col-md-4 my-3">
         <input id="fiscal-input-new" type="text" v-model="new_fiscalyear" class="form-control" placeholder="20XX-20YY">
       </div>