Merge pull request #12 from YasserSE/develop

YasserSE · web-flow · commit e74923c09605 · 2023-05-02T19:08:52.000+02:00
Fixed mobile bug + Icons
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/public/icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Task-AP</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/public/icon.png b/public/icon.png
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -23,15 +23,15 @@
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
+  --color-background: var(--vt-c-black);
+  --color-background-soft: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
 
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
 
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-2);
 
   --section-gap: 160px;
 }
diff --git a/src/assets/taskapp.png b/src/assets/taskapp.png
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
@@ -1,6 +1,6 @@
 <template>
     <nav>
-        <router-link to="/">Home</router-link>
+        <router-link to="/"><img src="../assets/taskapp.png" class="navLogo"></router-link>
         <div v-if="!store.user">
             <router-link to="/auth/login" class="marginRight">LogIn</router-link>
             <router-link to="/auth/signup">SignUp</router-link>
@@ -42,6 +42,9 @@ const handleLogOut = async () => {
 </script>
 
 <style scoped>
+.navLogo{
+    width: 100px;
+}
 nav {
     display: flex;
     width: 100%;
@@ -55,7 +58,7 @@ div {
     width: fit-content;
     padding: 0;
     margin: 0;
-    justify-content: space-around;
+    align-items: center;
 }
 
 p {
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
@@ -1,6 +1,7 @@
 <template>
-    <form @keydown.enter="handleCreate" @submit.prevent>
+    <form @submit.prevent="handleCreate">
         <label>New task:</label><input class="formInput" type="text" v-model="taskTitle">
+        <button type="submit">Create</button>
     </form>
     <main>
         <div class="taskContainer">
@@ -142,9 +143,10 @@ form {
     padding: 30px 0px;
 }
 .formInput {
-    margin-left: 10px;
+    margin: 0px 10px;
     border-radius: 15px;
     padding: 2px;
+    width: 150px;
 }
 .status--Complete{
     background-color: #3b8cf5;
