diff --git a/docs/docs/contributors/developers-guide/general-guidelines.md b/docs/docs/contributors/developers-guide/general-guidelines.md index 4a707283a..5604f766d 100644 --- a/docs/docs/contributors/developers-guide/general-guidelines.md +++ b/docs/docs/contributors/developers-guide/general-guidelines.md @@ -2,4 +2,6 @@ ## Python -## Vue \ No newline at end of file +## Vue + +[See The Style Guide](/mealie/contributors/developers-guide/style-guide/) \ No newline at end of file diff --git a/docs/docs/contributors/developers-guide/style-guide.md b/docs/docs/contributors/developers-guide/style-guide.md new file mode 100644 index 000000000..342374c64 --- /dev/null +++ b/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 + + mdi-plus + Primary Button + + +``` + + diff --git a/docs/docs/overrides/api.html b/docs/docs/overrides/api.html index 1b051eda4..fbb71d9fc 100644 --- a/docs/docs/overrides/api.html +++ b/docs/docs/overrides/api.html @@ -14,7 +14,7 @@
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index b47bcc4f0..68685fa9d 100644 --- a/docs/mkdocs.yml +++ b/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" diff --git a/frontend/src/utils/globals.js b/frontend/src/utils/globals.js index e6cece405..c1c3d4a11 100644 --- a/frontend/src/utils/globals.js +++ b/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