Fonts & Icons

diff --git a/client/assets/fonts/Poppins/OFL.txt b/client/assets/fonts/Poppins/OFL.txt
new file mode 100644 (file)
index 0000000..76df3b5
--- /dev/null
+++ b/client/assets/fonts/Poppins/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/client/assets/fonts/Poppins/Poppins-Regular.ttf b/client/assets/fonts/Poppins/Poppins-Regular.ttf
new file mode 100644 (file)
index 0000000..9f0c71b
Binary files /dev/null and b/client/assets/fonts/Poppins/Poppins-Regular.ttf differ

diff --git a/client/components/Button.vue b/client/components/Button.vue
index 782f7951a2b7f7545055d89f4215f2b29bfc78ab..7a06d79cf81fcf06df6762622e5d4f982606632b 100644 (file)
--- a/client/components/Button.vue
+++ b/client/components/Button.vue
@@ -1,11 +1,23 @@
 <template>
-  <button class="text-theme-text-muted">
+  <button
+    class="hover:bg-theme-background-hover flex items-center rounded px-2 py-1 text-theme-text-muted"
+  >
+    <SvgIcon
+      v-if="iconPath"
+      type="mdi"
+      :path="iconPath"
+      size="1.25em"
+      class="mr-1"
+    ></SvgIcon>
     <span>{{ label }}</span>
   </button>
 </template>
 
 <script setup>
+import SvgIcon from "@jamescoyle/vue-icon";
+
 defineProps({
+  iconPath: String,
   label: String,
 });
 </script>

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index ff3e08b0b6adbda8867487e1d91cd888b6cb65d2..48457b28ef4ebae78d3804ec2954de6eb51ebe91 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -2,12 +2,18 @@
   <nav class="flex justify-between">
     <Logo></Logo>
     <div>
-      <Button label="Toggle Theme" @click="toggleTheme"></Button>
+      <Button
+        :iconPath="mdilPlusCircle"
+        label="New Note"
+        @click="toggleTheme"
+      ></Button>
     </div>
   </nav>
 </template>
 
 <script setup>
+import { mdilPlusCircle } from "@mdi/light-js";
+
 import Button from "/components/Button.vue";
 import Logo from "/components/Logo.vue";
 

diff --git a/client/style.css b/client/style.css
index b91ad0a42d9539f10a12fe7377d948e9b5c7606a..e188fee44cdb59682f0cd25ddb5f598f2e26a1e7 100644 (file)
--- a/client/style.css
+++ b/client/style.css
@@ -3,6 +3,14 @@
 @tailwind utilities;
 
 @layer base {
+    @font-face {
+        font-family: "Poppins";
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url("/assets/fonts/Poppins/Poppins-Regular.ttf");
+    }
+
     body {
         --theme-brand: 248 166 107;
 
@@ -10,6 +18,7 @@
         --theme-background-elevated: 255 255 255;
         --theme-background-tint: 243 244 245;
         --theme-background-highlight: 239 243 255;
+        --theme-background-hover: var(--theme-background-tint);
 
         --theme-text: 44 49 57;
         --theme-text-muted: 136 145 161;
@@ -26,6 +35,7 @@
         --theme-background-elevated: 44 49 57;
         --theme-background-tint: 34 38 44;
         --theme-background-highlight: 136 145 161;
+        --theme-background-hover: var(--theme-background-elevated);
 
         --theme-text: 193 199 208;
         --theme-text-muted: 136 145 161;

diff --git a/package-lock.json b/package-lock.json
index 1fd2abfc712984b480c544572f235cf8fa084c97..149c65503882e69314c9414315fdf62e220b94b0 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,18 +9,21 @@
       "version": "4.0.3",
       "license": "MIT",
       "dependencies": {
+        "@jamescoyle/vue-icon": "0.1.2",
+        "@mdi/js": "7.4.47",
+        "@mdi/light-js": "0.2.63",
         "axios": "1.6.8",
         "mousetrap": "1.6.5",
-        "vue": "^3.4.24",
-        "vue-router": "^4.3.2"
+        "vue": "3.4.24",
+        "vue-router": "4.3.2"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^5.0.4",
-        "autoprefixer": "^10.4.19",
-        "postcss": "^8.4.38",
+        "@vitejs/plugin-vue": "5.0.4",
+        "autoprefixer": "10.4.19",
+        "postcss": "8.4.38",
         "prettier-plugin-tailwindcss": "0.5.14",
-        "tailwindcss": "^3.4.3",
-        "vite": "^5.2.9"
+        "tailwindcss": "3.4.3",
+        "vite": "5.2.9"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -431,6 +434,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@jamescoyle/vue-icon": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@jamescoyle/vue-icon/-/vue-icon-0.1.2.tgz",
+      "integrity": "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -490,6 +498,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
+    },
+    "node_modules/@mdi/light-js": {
+      "version": "0.2.63",
+      "resolved": "https://registry.npmjs.org/@mdi/light-js/-/light-js-0.2.63.tgz",
+      "integrity": "sha512-+SUtJIOxvEy6DiVq0wTRPIzVuoPB5fhnubmzaN7e2ew0v3/nvnpC4mqbGCjiTK0diVd3+zvhEQHZzPDErGb1fg=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

diff --git a/package.json b/package.json
index e4c6c1d080cf8ac50e35a2775c456e7fda25b8e0..27db7f8727f2277f9a9114d6ab817b6a9e1ec0ba 100644 (file)
--- a/package.json
+++ b/package.json
@@ -11,6 +11,9 @@
   "author": "Adam Dullage",
   "license": "MIT",
   "dependencies": {
+    "@jamescoyle/vue-icon": "0.1.2",
+    "@mdi/js": "7.4.47",
+    "@mdi/light-js": "0.2.63",
     "axios": "1.6.8",
     "mousetrap": "1.6.5",
     "vue": "3.4.24",

diff --git a/tailwind.config.js b/tailwind.config.js
index 85594e2e7c5f840e6d13313bb4b08d4c67f6e4b0..cd380af3e215b952298345b84e7248e914591b99 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@
 module.exports = {
   content: ["client/**/*.{html,js,vue}"],
   theme: {
+    fontFamily: {
+      sans: ["Poppins", "sans-serif"],
+    },
     screens: {
       sm: "640px",
       md: "768px",
@@ -18,6 +21,8 @@ module.exports = {
           "rgb(var(--theme-background-tint) / <alpha-value>)",
         "theme-background-highlight":
           "rgb(var(--theme-background-highlight) / <alpha-value>)",
+        "theme-background-hover":
+          "rgb(var(--theme-background-hover) / <alpha-value>)",
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",
         "theme-text-very-muted":