update: Change cards design and write documentation

.gitignore

@@ -0,0 +1,2 @@
+# Created by .ignore support plugin (hsz.mobi)
+.idea/

CHANGELOG.md

@@ -1,3 +1,5 @@
 ## Changelog
 
-Here goes the changelog text.
+- Write documentation, description and FAQ.
+- Change the style of the search bar (QuickAccess)
+- Change the style of the small buttons at the top of the dashboard.

README.md

@@ -1,4 +1,15 @@
 # Google Theme
+Want to find the design of the current Google Analytics interface? This theme allows you to keep a visual aspect fairly close to the Google Analytics interface, without losing the organization and the power of Matomo's functionalities.
 
 ## Description
-Want to find the design of the current Google Analytics interface? This theme allows you to keep a visual aspect fairly close to the Google Analytics interface, without losing the organization and the power of Matomo's functionalities.
+The theme is realized in LESS and uses the variables predefined in Matomo for better maintenance of the project in the long term.
+However, some CSS classes have been rewritten in order to have a more coherent visual rendering.
+This theme was created to set the interface of Matomo more user-friendly with users who used to use Google Analytics before.
+
+If you enjoy this theme, I will do my best to keep it updated regularly, and to stay as faithful as possible to the current design of Google Analytics.
+This theme is only visual, it does not add any functionality, and does not in any way modify the HTML structure of Matomo, so there should never be any conflict with your installation of Matomo.
+
+__Thank you for installing !__
+  
+## Want more ?
+If you want to have your own theme or want to develop a theme for your customers, please contact me using my email in the marketplace official page or go to https://lazuli.agency (french)

docs/faq.md

@@ -1,5 +1,22 @@
 ## FAQ
 
-__My question?__
+__How to install this theme__
+
+This theme is available in the official marketplace of Matomo. You have to install the same way as a plugin
+- Go to the administration panel
+- Look for the Marketplace section and select "Theme" in the dropdown
+- Then search for 'Google Theme' and install it.
+- Activate the theme and you're done !
+
+__Is the theme active for all Matomo users in my instance ?__
+
+Yes, if you choose this theme for your Matomo instance, all users will see it.
+
+__How can I contribute to this theme ?__
+
+You can help me developping this theme by contacting me. You can also fork the project and ask for an integration. All way you consider as legit to contribute are welcome.
+
+__How long this theme will be maintained ?__
+
+As long as possible, I have many project to maintain, I'm the first user of this theme and I use Matomo on many project, if I see errors, I'll patch this theme faster as possible !
 
-My answer

docs/index.md

@@ -1 +1,16 @@
-## Documentation
+## Documentation
+
+This theme use LESS to override current CSS. All files and assets are in the "stylesheets" folder at the root of the theme.
+To make it more readable, all differents parts are splitted in the "component" folder.
+
+If you want to contribute, please download the folder and continue in this direction using small and maintainable components. 
+
+Consider this is my first Matomo theme, be compliant and please tell me how to make it better if you see any errors.
+
+### Overrided componants
+- Page card style
+- Dashboard widgets
+- Header
+- Site menu
+- Search bar
+- Sparkline (thank to https://lw1.at for showing the right way)

plugin.json

@@ -1,7 +1,7 @@
 {
     "name": "GoogleTheme",
     "description": "A sublime Google Analytics theme for Matomo",
-    "version": "0.1.11",
+    "version": "1.0.0",
     "theme": true,
     "require": {
         "piwik": ">=3.13.1-stable,<4.0.0-b1"
@@ -11,12 +11,11 @@
     "homepage": "https://lazuli.agency",
     "license": "GPL v3+",
     "keywords": [
-        "Modern", "Google"
+        "Google Analytics", "Google", "Modern", "GA"
     ],
     "support": {
         "email": "contact@ronan-hello.fr",
         "issues": "https://lazuli.agency",
-        "forum": "https://lazuli.agency",
         "source": "https://lazuli.agency"
     },
     "authors": [

stylesheets/components/_admin_users_list.less

@@ -0,0 +1,3 @@
+.userListFilters  {
+  margin-bottom: 20px !important;
+}

stylesheets/components/_button.less

@@ -0,0 +1,9 @@
+.btn, input[type="button"], .button {
+  box-shadow: none;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 0.8;
+    box-shadow: none;
+  }
+}

stylesheets/components/_card.less

@@ -1,11 +1,21 @@
 .card {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+  //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+  box-shadow: none;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  overflow: hidden;
 
   .card-content {
+    padding: 5px 20px 20px 20px !important;
+  }
 
-    .card-title {
-
-    }
+  .card-table {
+    margin: 0 -20px !important;
+    border: 0;
+  }
 
+  .enrichedHeadline .title, .card-title {
+    position: relative;
+    font-weight: 300 !important;
   }
 }

stylesheets/components/_control.less

@@ -0,0 +1,25 @@
+#root .borderedControl {
+  background-color: transparent;
+  border: 1px solid #e6e6e6; //#dadce1;
+  box-shadow: none;
+  transition: .2s ease all;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, .65) !important;
+  min-width: 18px;
+
+  .title {
+    color: rgba(0, 0, 0, .65) !important;
+  }
+
+  &:hover {
+    transition: .2s ease all;
+    background: #e6e6e6 !important;
+    color: rgba(0, 0, 0, .75) !important;
+
+    .title {
+      color: rgba(0, 0, 0, .75) !important;
+    }
+  }
+}

stylesheets/components/_menu.less

@@ -16,7 +16,8 @@
         font-weight: 500;
         font-size: 14px;
         //letter-spacing: .25px;
-        color: rgba(0,0,0,0.54);
+        color: rgba(0, 0, 0, 0.54);
+        padding: 9px 21px 10px 19px !important;
 
         &:focus {
           outline: none !important;
@@ -29,4 +30,8 @@
       }
     }
   }
+}
+
+#root #secondNavBar .navbar > li > ul li .item {
+  padding-left: 65px !important;
 }

stylesheets/components/_visitor_log.less

@@ -0,0 +1,9 @@
+.theWidgetContent h2 {
+  font-weight: 300 !important;
+}
+
+.dataTableVizVisitorLog .card {
+  box-shadow: none;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+}

stylesheets/components/_widget.less

@@ -35,10 +35,21 @@
   }
 
   .widgetContent {
-    border-radius: 2px;
+    background-color: #ffffff;
+    /*border-radius: 2px;
     border: none;
     padding: 14px;
-    background-color: #ffffff;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);*/
+
+    padding-top: 15px;
+    box-shadow: none;
+    border: 1px solid #e6e6e6;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .dataTable, .card {
+      margin-top: -15px;
+      border: none !important;
+    }
   }
 }

stylesheets/theme.less

@@ -1,11 +1,15 @@
 @import "_colors";
 @import "_variables";
 
+@import "components/_admin_users_list";
+@import "components/_button";
 @import "components/_card";
+@import "components/_control";
 @import "components/_header";
 @import "components/_menu";
 @import "components/_search";
 @import "components/_sparkline";
+@import "components/_visitor_log";
 @import "components/_widget";
 
 @theme-color-brand: #1a73e8;