UI update

brokiem · Aug 5, 2024 · 28e1319 · 28e1319
1 parent 8e72fa9
commit 28e1319
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <script>
 import SettingsModal from "./components/SettingsModal.vue";
 import Shortcuts from "@/components/Shortcuts.vue";
+import {ref} from "vue";
 
 export default {
   components: {Shortcuts, SettingsModal},
@@ -11,17 +12,36 @@ export default {
       searchInput: 'default'
     };
 
+    const formattedTime = ref(``);
+    const formattedDate = ref(``);
+
+    function updateDate() {
+      const date = new Date();
+      formattedTime.value = `${date.getHours() <= 12 ? date.getHours() : date.getHours() % 12}:${date.getMinutes()}`;
+      formattedDate.value = `${date.toLocaleDateString("id-ID", {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+      })}`;
+    }
+
+    updateDate();
+
     if (!localStorage.getItem('settings')) {
       localStorage.setItem('settings', JSON.stringify(settings));
     } else {
       settings = JSON.parse(localStorage.getItem('settings'));
     }
 
+    setInterval(() => {
+      updateDate();
+    }, 30000);
+
     return {
-      isFirefox, settings
+      isFirefox, settings, formattedTime, formattedDate
     }
   },
-methods: {
+  methods: {
     openSettings() {
       document.getElementById('settings-modal').style.display = 'block';
     },
@@ -42,8 +62,14 @@ methods: {
   <div class="pt-[150px]"></div>
 
   <!-- Logo -->
-  <FirefoxLogo v-if="settings.logo === 'firefox' || (settings.logo === 'default' && isFirefox)"/>
-  <GoogleLogo v-if="settings.logo === 'google' || (settings.logo === 'default' && !isFirefox)"/>
+  <!--  <FirefoxLogo v-if="settings.logo === 'firefox' || (settings.logo === 'default' && isFirefox)"/>-->
+  <!--  <GoogleLogo v-if="settings.logo === 'google' || (settings.logo === 'default' && !isFirefox)"/>-->
+
+  <!-- Time and date -->
+  <div class="flex flex-col items-center gap-1">
+    <p class="font-semibold text-7xl dark:text-white text-gray-900">{{ formattedTime }}</p>
+    <p class="font-medium text-lg dark:text-white text-gray-900">{{ formattedDate }}</p>
+  </div>
 
   <!-- Search input -->
   <div class="text-center">

diff --git a/src/assets/base.css b/src/assets/base.css
@@ -1,11 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
+  --vt-c-black: #0f0f0f;
+  --vt-c-black-soft: #272727;
   --vt-c-black-mute: #282828;
 
   --vt-c-indigo: #2c3e50;
@@ -54,8 +56,7 @@ body {
   color: var(--color-text);
   background: var(--color-background);
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

diff --git a/src/components/Shortcuts.vue b/src/components/Shortcuts.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-wrap justify-center justify-items-center mx-5">
     <a :href="shortcut.url" class="hover:bg-white/20 transition duration-[20ms] rounded-md" v-for="shortcut in shortcuts">
       <div class="mx-6 mt-4">
-          <div class="text-center p-3" style="background-color: rgb(45, 45, 45)" :style="[{ 'border-radius': isRoundedFull ? '9999px' : '10px' }]">
+          <div class="text-center p-3 bg-dark-gray" :style="[{ 'border-radius': isRoundedFull ? '9999px' : '10px' }]">
           <img width="28" height="28" :class="shortcut.style" :src="`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${shortcut.url}&size=64`" alt="Shortcut icon">
         </div>
       </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
     extend: {
       colors: {
         'firefox-dark': '#20123A',
-        'dark-gray': '#3d3d3d'
+        'dark-gray': '#272727'
       }
     },
   },