Add primeflex css, header & NewSmile view

11 files changed, 144 insertions, 102 deletions

diff --git a/README.org b/README.org
index 13b99e2..53afb11 100644
--- a/README.org
+++ b/README.org
@@ -1,5 +1,5 @@
 #+title: Vela
-#+subtitle: Vela is a simple web application to share pictures with friends
+#+subtitle: Vela is a place to share smiles
 #+export_file_name: index
 #+setupfile: ~/.emacs.d/org-templates/projects.org
 
@@ -13,8 +13,8 @@ upload. They can share the public link with their friends. The upload
 link should be kept private.
 
 They can upload pictures of them or anything that they want to share
-with the private link. Visitors on the public link can view it but only
-once, pictures are deleted after someone views it once.
+with the private link. Visitors on the public link can view the /Smiles/
+but only once, pictures are deleted after it's viewed once.
 
 ** Why?
 
diff --git a/client/package-lock.json b/client/package-lock.json
index a75a2f9..c79c10a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8966,6 +8966,11 @@
         "renderkid": "^2.0.4"
       }
     },
+    "primeflex": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.1.2.tgz",
+      "integrity": "sha512-q63sFNk3KPHSoM4EEEgo0MFTJSQhz4PZpJoQnVa8bcju/N7D8koloF9fniXV8UBlKFQzh0DLr5iFZ4c6FFXO4g=="
+    },
     "primeicons": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index 3f922be..4ac22db 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
     },
     "dependencies": {
         "core-js": "^3.6.5",
+        "primeflex": "^3.1.2",
         "primeicons": "^5.0.0",
         "primevue": "^3.11.1",
         "vue": "^3.0.0",
diff --git a/client/src/App.vue b/client/src/App.vue
index 8e16cf8..5d44890 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,30 +1,55 @@
 <template>
-<div id="nav">
-  <router-link to="/">Home</router-link> |
-  <router-link to="/about">About</router-link>
+<Header />
+<div class="content-wrapper">
+  <router-view />
 </div>
-<router-view/>
 </template>
 
-<style>
-#app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-}
+<script>
+import Header from '@/components/Header.vue'
 
-#nav {
-    padding: 30px;
+export default {
+    components: {
+        Header
+    }
 }
+</script>
 
-#nav a {
-    font-weight: bold;
-    color: #2c3e50;
+<style>
+body {
+    background-color: var(--surface-b);
+    font-family: "Iosevka Aile", sans-serif;
+    color: var(--text-color);
 }
-
-#nav a.router-link-exact-active {
-    color: #42b983;
+.title { font-family: "Iosevka Etoile", serif; }
+h1, h2, h3, h4, h5,  h6 {
+    margin: 1.5rem 0 1rem 0;
+    font-family: "Iosevka Etoile", serif;
+    font-weight: 600;
+    line-height: 1.2;
+    color: inherit;
+}
+h1:first-child, h2:first-child, h3:first-child,
+h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+p {
+    line-height:1.5;
+    margin:0 0 1rem 0;
+}
+.content-wrapper {
+    padding: 0.8rem;
+}
+.card {
+    background: var(--surface-e);
+    padding: 2rem;
+    -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
+    border-radius: 4px;
+    margin-bottom: 2rem;
 }
 </style>
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
new file mode 100644
index 0000000..8ab29b2
--- /dev/null
+++ b/client/src/components/Header.vue
@@ -0,0 +1,38 @@
+<template>
+<div>
+  <Menubar :model="items">
+    <template #start>
+      <p id="header-title">Vela</p>
+    </template>
+  </Menubar>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label:'Home',
+                    icon:'pi pi-fw pi-home',
+                    to:'/'
+                },
+                {
+                    label:'New Smile',
+                    icon:'pi pi-fw pi-user-plus',
+                    to:'/new'
+                },
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+#header-title {
+    margin: 0 1ch 0 0;
+    font-size: 150%;
+    font-family: "Iosevka Etoile", serif;
+}
+</style>
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
deleted file mode 100644
index 649a596..0000000
--- a/client/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<div class="hello">
-  <h1>{{ msg }}</h1>
-  <p>
-    For a guide and recipes on how to configure / customize this project,<br>
-    check out the
-    <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-  </p>
-  <h3>Installed CLI Plugins</h3>
-  <ul>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-  </ul>
-  <h3>Essential Links</h3>
-  <ul>
-    <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-    <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-    <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-    <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-    <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-  </ul>
-  <h3>Ecosystem</h3>
-  <ul>
-    <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-    <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-    <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-    <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-    <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-  </ul>
-</div>
-</template>
-
-<script>
-export default {
-    name: 'HelloWorld',
-    props: {
-        msg: String
-    }
-}
-</script>
-
-<style scoped>
-h3 {
-    margin: 40px 0 0;
-}
-ul {
-    list-style-type: none;
-    padding: 0;
-}
-li {
-    display: inline-block;
-    margin: 0 10px;
-}
-a {
-    color: #42b983;
-}
-</style>
diff --git a/client/src/main.js b/client/src/main.js
index 22d1619..13ce79d 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,15 +1,27 @@
 import {createApp} from 'vue';
 import App from './App.vue';
 import router from './router'
+
 import PrimeVue from 'primevue/config';
+import Menubar from 'primevue/menubar';
+import Divider from 'primevue/divider';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
 
 import 'primevue/resources/themes/lara-dark-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
 import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
 
 const app = createApp(App);
-
 app.use(router);
+
 app.use(PrimeVue);
+app.component('Divider', Divider);
+app.component('Menubar', Menubar);
+app.component('InputText', InputText);
+app.component('Button', Button);
+app.component('Card', Card);
 
 app.mount('#app');
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 4300a69..f0d3113 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -8,12 +8,12 @@ const routes = [
         component: Home
     },
     {
-        path: '/about',
-        name: 'About',
+        path: '/new',
+        name: 'New Smile',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+        component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue')
     }
 ]
 
diff --git a/client/src/views/About.vue b/client/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/client/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 65a73a1..06ca2a3 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,17 +1,36 @@
 <template>
-  <div class="home">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+<div class="home">
+  <p id="subtitle">Vela is a place to share smiles.</p>
+
+  <div class="card">
+    <div class="grid">
+      <div class="col-12 md:col-8 lg:col-6">
+        <p>
+          The idea is simple, users create a <em>Smile</em> and receive two
+          links: public, upload. They can share the public link with their
+          friends. The upload link should be kept private.
+        </p>
+        <p>
+          They can upload pictures of them or anything that they want to
+          share with the private link. Visitors on the public link can view
+          the <em>Smiles</em> but only once, pictures are deleted after it's
+          viewed once.
+        </p>
+      </div>
+      <div class="col-12 md:col-4 lg:col-6 flex align-items-center justify-content-center">
+        <router-link to="/new">
+          <Button label="New Smile" icon="pi pi-user-plus" iconPos="left" />
+        </router-link>
+      </div>
+    </div>
   </div>
+</div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
+<style scoped>
+#subtitle {
+    font-size: 1.5rem;
+    text-align: center;
+    margin: 2rem 0;
 }
-</script>
+</style>
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
new file mode 100644
index 0000000..6927007
--- /dev/null
+++ b/client/src/views/NewSmile.vue
@@ -0,0 +1,5 @@
+<template>
+<div class="new-smile">
+  <h1>New Smile</h1>
+</div>
+</template>