button style docs

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

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

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"

frontend/src/utils/globals.js

@@ -4,7 +4,7 @@ const icons = {
   // Crud
   create: "mdi-plus",
   delete: "mdi-delete",
-  save: "mdi-save-content",
+  save: "mdi-content-save",
   edit: "mdi-square-edit-outline",
 
   // Organization