Changed website title to 'Word of Mouth', updated HelloWorld component message and content, changed color scheme from green to pink, removed the logo, and updated the e2e test to match the new title

2 months ago · e203ec98ca
5 changed files with 13 additions and 26 deletions
--- a/e2e/vue.spec.ts
+++ b/e2e/vue.spec.ts
@ -4,5 +4,5 @@ import { test, expect } from '@playwright/test'
				@@ -4,5 +4,5 @@ import { test, expect } from '@playwright/test'
 // https://playwright.dev/docs/intro
 test('visits the app root url', async ({ page }) => {
  await page.goto('/')
-  await expect(page.locator('h1')).toHaveText('You did it!')
+  await expect(page.locator('h1')).toHaveText('Word of Mouth')
 })
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
				@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Word of Mouth</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -5,10 +5,8 @@ import HelloWorld from './components/HelloWorld.vue'
				@@ -5,10 +5,8 @@ import HelloWorld from './components/HelloWorld.vue'

 <template>
  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+      <HelloWorld msg="Word of Mouth" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
@ -26,11 +24,6 @@ header {
				@@ -26,11 +24,6 @@ header {
  max-height: 100vh;
 }

-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
 nav {
  width: 100%;
  font-size: 12px;
@ -63,10 +56,6 @@ nav a:first-of-type {
				@@ -63,10 +56,6 @@ nav a:first-of-type {
    padding-right: calc(var(--section-gap) / 2);
  }

-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
  header .wrapper {
    display: flex;
    place-items: flex-start;
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -8,16 +8,16 @@
				@@ -8,16 +8,16 @@
 }

 a,
-.green {
+.pink {
  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: hsla(330, 100%, 50%, 1);
  transition: 0.4s;
  padding: 3px;
 }

@media (hover: hover) {
  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: hsla(330, 100%, 50%, 0.2);
  }
 }

--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -6,11 +6,9 @@ defineProps<{
				@@ -6,11 +6,9 @@ defineProps<{

 <template>
  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
+    <h1 class="pink">{{ msg }}</h1>
    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
+      Data Driven Marketing
    </h3>
  </div>
 </template>