Skip to content

Commit

Permalink
Add tailwindcss
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kessir
Kessir committed Oct 28, 2023
1 parent d55bc38 commit 1123202
Show file tree
Hide file tree
Showing 10 changed files with 1,567 additions and 249 deletions.
1,350 changes: 1,350 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/test-utils": "^2.3.0",
"@vueuse/head": "^1.1.26",
"autoprefixer": "^10.4.16",
"decimal.js": "^10.4.3",
"eslint": "^8.34.0",
"eslint-plugin-vue": "^9.9.0",
"jsdom": "^21.1.0",
"postcss": "^8.4.31",
"prettier": "^2.8.4",
"tailwindcss": "^3.3.5",
"vite": "4.3.9",
"vite-ssg": "^0.22.2",
"vitest": "^0.29.1"
Expand Down
6 changes: 6 additions & 0 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
34 changes: 18 additions & 16 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,43 +30,45 @@ const taxResult = computed(() => {

<template>
<div>
<section id="container" class="container grid-xs">
<section id="container" class="max-w-sm m-auto">
<Banner />
<div class="card content" style="padding: 1rem;">
<h2 class="text-center">Tax Calculator 🇬🇭</h2>
<h6 class="text-center">
Compute your net income,
<a target="_blank" href="https://gra.gov.gh/domestic-tax/tax-types/paye/">PAYE</a> income
tax and SSNIT deduction
</h6>
<h2 class="text-2xl text-center">Tax Calculator 🇬🇭</h2>
<p class="text-center mt-3">
Compute your <span class="font-medium">net income</span>,
<a target="_blank" href="https://gra.gov.gh/domestic-tax/tax-types/paye/">PAYE</a> <span class="font-medium">income
tax</span> and <span class="font-medium">SSNIT deduction</span>.
</p>

<InputForm
<InputForm class="sm:px-10 py-4"
v-model:gross-income="grossIncome"
v-model:allowances="allowances"
v-model:tax-relief="taxRelief"
/>

<div class="my-2 text-center text-danger" v-if="taxResult.errorMessage">{{ taxResult.errorMessage }}</div>
<div class="my-2 text-center text-red-400" v-if="taxResult.errorMessage">{{ taxResult.errorMessage }}</div>

<ResultSection :tax-result="taxResult" v-else />

<div class="disclaimer">* Allowances are also taxed</div>
<div class="mt-4">* Allowances are also taxed</div>
</div>
</section>
<div class="text-center" style="margin: 2rem 0">Last updated: April 29, 2023</div>
<div class="text-center" style="margin: 2rem 0">Last updated: October 28, 2023</div>
<hr />
<section id="footer">
<div class="text-center disclaimer" style="margin-top: 0">
<footer id="footer" class="text-gray-600">
<div class="text-center mt-4">
Disclaimer: We do our best to ensure the accuracy of this tool but we cannot be held
responsible for any errors.
</div>
<div class="text-center">
<div class="text-center mt-4">
Send <strong>feedback</strong> and suggestions to
<a target="_blank" href="mailto:tax.calculator@kessir.com?subject=Tax%20calculator"
<a class="underline underline-offset-2" target="_blank" href="mailto:tax.calculator@kessir.com?subject=Tax%20calculator"
>tax.calculator@kessir.com</a
>
</div>

<SocialShare />
</section>

</footer>
</div>
</template>
67 changes: 6 additions & 61 deletions src/assets/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
@import './base.css';
@import './spectre.min.css';

@tailwind base;
@tailwind components;
@tailwind utilities;


body {
background-color: #fafafa;
}
Expand All @@ -9,11 +14,6 @@ body {
padding: 10px;
margin-bottom: 1.6rem;
}
#footer div {
/* font-size: 1.2rem; */
color: #5d5d5d;
margin-top: 14px;
}

.card,
.content {
Expand All @@ -23,11 +23,6 @@ body {
border: 0.1rem solid #e9e9e9;
}

#results {
padding: 1rem 0;
margin-top: 2rem;
margin-bottom: 1rem;
}

.primary-result-color {
color: #5764c6;
Expand All @@ -41,56 +36,6 @@ body {
display: none;
}

.text-danger {
color: #ea8479;
}

hr {
border: 1px solid #efefef;
}

ul.share-buttons {
list-style: none;
padding: 0;
margin: 4px;
}

ul.share-buttons li {
display: inline;
padding: 0 4px;
}

ul.share-buttons .sr-only {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.share-buttons svg {
max-height: 25px;
max-width: 25px;
fill: #5764c6;
}
.tax-alert {
width: 100%;
text-align: center;
padding: 12px 6px;
margin-top: 2rem;
margin-bottom: 1rem;
color: #fff;
background: #6684ea;

border-radius: 3px;
}
.tax-alert > a {
color: #fff;
text-decoration: underline;
}
.tax-alert > a {
color: #fff;
text-decoration: underline;
}
}
114 changes: 56 additions & 58 deletions src/components/InputForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,69 +9,67 @@ defineEmits(["update:gross-income", "update:allowances", "update:tax-relief"]);
</script>

<template>
<div style="margin-top: 1rem; padding: 0 1rem;">
<form class="" v-cloak>
<div class="form-group">
<div class="">
<label class="form-label" for="gross-income">Monthly gross income</label>
</div>
<div class="">
<div class="input-group ">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="gross-income"
type="text"
inputmode="decimal"
:value="grossIncome"
@input="$emit('update:gross-income', $event.target.value)"
/>
</div>
<form v-cloak>
<div class="form-group">
<div class="">
<label class="form-label" for="gross-income">Monthly gross income</label>
</div>
<div class="">
<div class="input-group ">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="gross-income"
type="text"
inputmode="decimal"
:value="grossIncome"
@input="$emit('update:gross-income', $event.target.value)"
/>
</div>
</div>
</div>

<div class="form-group">
<div class="">
<label
class="form-label tooltip"
for="allowances"
data-tooltip="Like transport allowance etc"
>Monthly allowances*</label
>
</div>
<div class="">
<div class="input-group">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="allowances"
type="text"
inputmode="decimal"
:value="allowances"
@input="$emit('update:allowances', $event.target.value)"
/>
</div>
</div>
<div class="form-group">
<div class="">
<label
class="form-label tooltip"
for="allowances"
data-tooltip="Like transport allowance etc"
>Monthly allowances*</label
>
</div>
<div class="form-group">
<div class="">
<label class="form-label tooltip" for="relief" data-tooltip="Like mortgage etc"
>Tax relief</label>
<div class="">
<div class="input-group">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="allowances"
type="text"
inputmode="decimal"
:value="allowances"
@input="$emit('update:allowances', $event.target.value)"
/>
</div>
<div class="">
<div class="input-group">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="relief"
type="text"
inputmode="decimal"
:value="taxRelief"
@input="$emit('update:tax-relief', $event.target.value)"
/>
</div>
</div>
</div>
<div class="form-group">
<div class="">
<label class="form-label tooltip" for="relief" data-tooltip="Like mortgage etc"
>Tax relief</label>
</div>
<div class="">
<div class="input-group">
<span class="input-group-addon addon-lg">GH₵</span>
<input
class="form-input input-lg text-right"
id="relief"
type="text"
inputmode="decimal"
:value="taxRelief"
@input="$emit('update:tax-relief', $event.target.value)"
/>
</div>
</div>
</form>
</div>
</div>
</form>
</template>
Loading

0 comments on commit 1123202

Please sign in to comment.