Feature/style unification (#420)

* set global icons

* fixes #419

* button style docs

* category/tag page updates

* dynamic router imports

Co-authored-by: hay-kot <hay-kot@pm.me>

docs/docs/contributors/developers-guide/general-guidelines.md

@@ -2,4 +2,6 @@
 
 ## Python
 
-## Vue
+## Vue
+
+[See The Style Guide](/mealie/contributors/developers-guide/style-guide/)

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -18,20 +18,29 @@ Prerequisites
 - Nodejs
 - npm
 
-Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make vue` to start the backend and frontend servers. 
+Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make frontend` to start the backend and frontend servers. 
 
 ## Make File Reference 
-`make setup` installs python and node dependencies
 
-`make backend` Starts the backend server on port `9000`
+Run `make help` for reference
 
-`make vue` Starts the frontend server on port `8080`
-
-`make mdocs` Starts the documentation server on port `8000`
-
-`make docker-dev` Builds docker-compose.dev.yml 
-
-`make docker-prod` Builds docker-compose.yml to test for production
+```
+clean                remove all build, test, coverage and Python artifacts
+clean-pyc            remove Python file artifacts
+clean-test           remove test and coverage artifacts
+test                 run tests quickly with the default Python
+lint                 check style with flake8
+test-all             Check Lint Format and Testing
+setup                Setup Development Instance
+backend              Start Mealie Backend Development Server
+frontend             Start Mealie Frontend Development Server
+frontend-build       Build Frontend in frontend/dist
+docs                 Start Mkdocs Development Server
+docker-dev           Build and Start Docker Development Stack
+docker-prod          Build and Start Docker Production Stack
+code-gen             Run Code-Gen Scripts
+coverage             check code coverage quickly with the default Python
+```
 
 ## Before you Commit! 
 

docs/docs/contributors/developers-guide/style-guide.md

@@ -0,0 +1,33 @@
+# Style Guide
+
+!!! note
+    Unifying styles across the application is an ongoing process, we are working on making the site more consistent.
+
+## Button Guidelines
+
+1. Buttons should follow the general color/icon scheme as outlined. 
+2. All buttons should have an icon on the left side of the button and text on the right. 
+3. Primary action buttons should be the default Vuetify styling. 
+4. Primary action buttons should be right aligned
+5. Secondary buttons should be `text` or `outlined`. Text is preferred
+6. Other buttons should generally be "info" or "primary" color and can take any style type depending on context
+
+### Button Colors and Icons
+
+| Type        | Color               | Icon                                               |
+| ----------- | :------------------ | :------------------------------------------------- |
+| Default     | `info` or `primary` | None                                               |
+| Create/New  | `success`           | `mdi-plus` or `$globals.icons.create`              |
+| Update/Save | `success`           | `mdi-save-content` or `$globals.icons.save`        |
+| Edit        | `info`              | `mdi-square-edit-outline` or `$globals.icons.edit` |
+
+### Example
+```html
+<v-btn color="primary">
+  <v-icon left> mdi-plus </v-icon>
+  Primary Button
+</v-btn>
+
+```
+
+

docs/mkdocs.yml

@@ -76,6 +76,7 @@ nav:
           - Code Contributions: "contributors/developers-guide/code-contributions.md"
           - Dev Getting Started: "contributors/developers-guide/starting-dev-server.md"
           - Guidelines: "contributors/developers-guide/general-guidelines.md"
+          - Style Guide: "contributors/developers-guide/style-guide.md"
   - Development Road Map: "roadmap.md"
   - Change Log:
       - v0.5.0 General Upgrades: "changelog/v0.5.0.md"