jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Implement simple dark mode #32

Merged
jacob1123 merged 1 commits from dark-mode into master 2022-03-01 21:48:05 +01:00
Conversation 0 Commits 1 Files Changed 6 +12 -12
6 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

2
web/src/App.vue
View File

@ -28,7 +28,7 @@ export default defineComponent({
<template> <template>
<div class="box-border w-full"> <div class="box-border w-full">
<div class="flex bg-gray-400 p-4 m-2 rounded-lg"> <div class="flex bg-gray-400 dark:bg-gray-600 p-4 m-2 rounded-lg">
<span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span> <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span> <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>

2
web/src/components/Card.vue
View File

@ -2,7 +2,7 @@
</script> </script>
<template> <template>
<div class="flex flex-row items-center bg-gray-300 rounded-lg"> <div class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

4
web/src/components/TransactionRow.vue
View File

@ -46,12 +46,12 @@ function getStatusSymbol() {
<template> <template>
<tr v-if="dateChanged()" class="table-row md:hidden"> <tr v-if="dateChanged()" class="table-row md:hidden">
<td class="bg-gray-200 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td> <td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
</tr> </tr>
<tr <tr
v-if="!edit" v-if="!edit"
class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}" class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'md:bg-gray-300' : 'md:bg-gray-100']" :class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
> >
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">--> <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td class="hidden md:block">{{ formatDate(TX.Date) }}</td> <td class="hidden md:block">{{ formatDate(TX.Date) }}</td>

2
web/src/pages/Account.vue
View File

@ -68,7 +68,7 @@ function createReconcilationTransaction() {
</span> </span>
</div> </div>
<span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2"> <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 dark:bg-gray-800 rounded-lg p-2">
Is Is
<Currency :value="transactions.ReconcilingBalance" />your current balance? <Currency :value="transactions.ReconcilingBalance" />your current balance?
<Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button> <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>

12
web/src/pages/BudgetSidebar.vue
View File

@ -24,12 +24,12 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<router-link to="/dashboard">⌂</router-link> <router-link to="/dashboard">⌂</router-link>
{{CurrentBudgetName}} {{CurrentBudgetName}}
</span> </span>
<span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col"> <span class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3 flex flex-col">
<router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br /> <router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br />
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>--> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>--> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
</span> </span>
<li class="bg-orange-200 rounded-lg m-1 p-1 px-3"> <li class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3">
<div class="flex flex-row justify-between font-bold"> <div class="flex flex-row justify-between font-bold">
<span>On-Budget Accounts</span> <span>On-Budget Accounts</span>
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" /> <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
@ -39,7 +39,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" /> <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
</div> </div>
</li> </li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<div class="flex flex-row justify-between font-bold"> <div class="flex flex-row justify-between font-bold">
<span>Off-Budget Accounts</span> <span>Off-Budget Accounts</span>
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" /> <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
@ -49,7 +49,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" /> <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
</div> </div>
</li> </li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<div class="flex flex-row justify-between font-bold"> <div class="flex flex-row justify-between font-bold">
<span>Closed Accounts</span> <span>Closed Accounts</span>
</div> </div>
@ -57,10 +57,10 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<!--<li> <!--<li>
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link> <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
</li>--> </li>-->
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
+ Add Account + Add Account
</li> </li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link> <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
</li> </li>
<!--<li><router-link to="/admin">Admin</router-link></li>--> <!--<li><router-link to="/admin">Admin</router-link></li>-->