From 2bf49ec9852dfff8637092679d985a9520e23530 Mon Sep 17 00:00:00 2001
From: Louis Charette <charette.louis@gmail.com>
Date: Thu, 14 Sep 2023 22:55:11 -0400
Subject: [PATCH] Proof of concept : Custom UF Theme

---
 app/assets/App.vue                      |  4 ++--
 app/assets/components/Navbar.vue        |  6 ++++--
 app/assets/less/components/navbar.less  | 15 +++++++++++++++
 app/assets/less/components/utility.less | 16 ++++++++++++++++
 app/assets/less/uf-theme.less           |  6 ++++++
 package-lock.json                       |  6 ++++++
 package.json                            |  1 +
 7 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/less/components/navbar.less
 create mode 100644 app/assets/less/components/utility.less
 create mode 100644 app/assets/less/uf-theme.less

diff --git a/app/assets/App.vue b/app/assets/App.vue
index ce29898..fb06914 100644
--- a/app/assets/App.vue
+++ b/app/assets/App.vue
@@ -8,11 +8,11 @@ UIkit.use(Icons);
 
 <template>
     <header>
-        <Navbar title="Website Title" />
+        <Navbar title="Userfrosting" />
     </header>
     <RouterView />
 </template>
 
 <style lang="less">
-@import "uikit/src/less/uikit.theme.less";
+@import "less/uf-theme.less";
 </style>
diff --git a/app/assets/components/Navbar.vue b/app/assets/components/Navbar.vue
index 916ba89..7584810 100644
--- a/app/assets/components/Navbar.vue
+++ b/app/assets/components/Navbar.vue
@@ -10,12 +10,14 @@ defineProps({
 
 <template>
     <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-        <div class="uk-navbar-container tm-navbar-container">
+        <div class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <nav class="uk-navbar" uk-navbar>
                     <div class="uk-navbar-left">
                         <a href="/" class="uk-navbar-item uk-logo">{{ title }}</a>
-                        <ul class="uk-navbar-nav">
+                    </div>
+                    <div class="uk-navbar-right">
+                       <ul class="uk-navbar-nav">
                             <li>
                                 <RouterLink to="/">Home</RouterLink>
                             </li>
diff --git a/app/assets/less/components/navbar.less b/app/assets/less/components/navbar.less
new file mode 100644
index 0000000..c336342
--- /dev/null
+++ b/app/assets/less/components/navbar.less
@@ -0,0 +1,15 @@
+// Variables
+// ========================================================================
+@navbar-background: #ee6e73;
+@navbar-nav-item-color: #ffffff;
+@navbar-nav-item-hover-color: #ffffff;
+@navbar-nav-item-height: 64px;
+@navbar-nav-gap: 0px;
+@navbar-nav-gap-m: 0px;
+@navbar-nav-item-padding-horizontal: 15px;
+
+// Custom hooks
+// ========================================================================
+.hook-navbar-nav-item-hover() {
+    background-color: rgb(239,139,140);
+}
\ No newline at end of file
diff --git a/app/assets/less/components/utility.less b/app/assets/less/components/utility.less
new file mode 100644
index 0000000..3c70060
--- /dev/null
+++ b/app/assets/less/components/utility.less
@@ -0,0 +1,16 @@
+@import "~@fontsource/montserrat/700.css";
+
+// Variables
+// ========================================================================
+@logo-color: #ffffff;
+@logo-hover-color: #ffffff;
+
+// Custom hooks
+// ========================================================================
+.hook-logo() {
+    text-transform: uppercase;
+    letter-spacing: -0.45px;
+    font-size: 2.1rem;
+    font-weight: 700;
+    font-family: "Montserrat","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
\ No newline at end of file
diff --git a/app/assets/less/uf-theme.less b/app/assets/less/uf-theme.less
new file mode 100644
index 0000000..ea89055
--- /dev/null
+++ b/app/assets/less/uf-theme.less
@@ -0,0 +1,6 @@
+// Core
+@import "uikit/src/less/uikit.theme.less";
+
+// Custom components
+@import "components/navbar.less";
+@import "components/utility.less";
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3400265..2fe3f53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@fontsource/montserrat": "^5.0.8",
                 "axios": "^1.5.0",
                 "uikit": "^3.16.26",
                 "vue": "^3.3.4",
@@ -1786,6 +1787,11 @@
                 "node": ">=10.0.0"
             }
         },
+        "node_modules/@fontsource/montserrat": {
+            "version": "5.0.8",
+            "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.0.8.tgz",
+            "integrity": "sha512-bNj6wfiWXXbsxb2ffatjpX+GBv30cWZ1lwNXW9qTeX2FnzPomsGRV4HdPrf3TqyTiVqX6fLo80zrQcMi7r8+fA=="
+        },
         "node_modules/@jest/schemas": {
             "version": "29.6.3",
             "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
diff --git a/package.json b/package.json
index 9650af8..c0f4c0e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
     "dependencies": {
+        "@fontsource/montserrat": "^5.0.8",
         "axios": "^1.5.0",
         "uikit": "^3.16.26",
         "vue": "^3.3.4",