From 3ee98bd65c19c5ee63f149570e91736e73bb34dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20L=C3=B6hnertz?= <mail@jakob.codes>
Date: Sun, 7 Jul 2024 23:57:42 +0200
Subject: [PATCH] Fix styling bugs

---
 .eslintrc.cjs                      |  6 +++---
 src/assets/main.css                | 12 ------------
 src/components/CustomSettings.vue  |  2 +-
 src/components/TimerAdjustment.vue |  2 +-
 src/views/AboutView.vue            |  2 +-
 src/views/BrewView.vue             | 10 ++--------
 src/views/HomeView.vue             |  2 +-
 src/views/NotFoundView.vue         |  2 +-
 8 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 845f606..c50eb11 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -8,12 +8,12 @@ module.exports = {
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
   },
   rules: {
-    'comma-dangle': ['error', 'always-multiline']
+    'comma-dangle': ['error', 'always-multiline'],
   },
 }
diff --git a/src/assets/main.css b/src/assets/main.css
index 0362ac1..ab83b82 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,17 +1,5 @@
 @import 'https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css';
 
-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-}
-
-.box {
-  min-width: 350px;
-  max-width: 750px;
-}
-
 .buttons .button {
   flex: 1;
 }
diff --git a/src/components/CustomSettings.vue b/src/components/CustomSettings.vue
index 8e4a749..3aac60b 100644
--- a/src/components/CustomSettings.vue
+++ b/src/components/CustomSettings.vue
@@ -21,10 +21,10 @@
         <input
           id="incrementTime"
           :value="incrementTime"
-          @change="updateIncrementTime"
           class="input"
           min="1"
           type="number"
+          @change="updateIncrementTime"
         />
       </div>
     </div>
diff --git a/src/components/TimerAdjustment.vue b/src/components/TimerAdjustment.vue
index acb9810..12731b0 100644
--- a/src/components/TimerAdjustment.vue
+++ b/src/components/TimerAdjustment.vue
@@ -8,9 +8,9 @@
           :disabled="timerRunning"
           :value="offsetTime"
           class="input"
-          type="number"
           max="100"
           min="-100"
+          type="number"
           @input="updateOffsetTime"
         />
       </div>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 6af7791..5be4064 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box">
       <h1 class="title is-1 has-text-centered">🍵 Tea Timer</h1>
       <p class="content">
diff --git a/src/views/BrewView.vue b/src/views/BrewView.vue
index abdf87d..00c9abd 100644
--- a/src/views/BrewView.vue
+++ b/src/views/BrewView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="box">
+  <div class="container columns is-centered">
+    <div class="box has-text-centered">
       <SettingsPanel
         v-if="showSettings"
         :customDefaults="customDefaults"
@@ -189,9 +189,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.box {
-  text-align: center;
-}
-</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ccf6470..e2eb90e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box has-text-centered">
       <h1 class="title is-1">🍵 Tea Timer</h1>
       <p class="content">
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 9edf597..dae75a4 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box">
       <h1 class="title is-1 has-text-centered">Page Not Found</h1>
       <p class="content">