added new space variables to margins in AddPanelWidget, add_data_source, dashboard_settings and sidemenu

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-s: ${theme.spacing.s} !default;
 $space-m: ${theme.spacing.m} !default;
+$space-l: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $spacer;
+    margin-right: $space-m;
   }
 
   &:hover {
@@ -32,16 +32,16 @@
 .add-panel-widget__title {
   font-size: $font-size-md;
   font-weight: $font-weight-semi-bold;
-  margin-right: $spacer * 2;
+  margin-right: $space-xl;
 }
 
 .add-panel-widget__link {
-  margin: 0 8px;
+  margin: 0 $space-s;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: 8px;
+  margin-bottom: $space-s;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: 24px;
+  margin-bottom: $space-l;
   // this is to have the big button appear centered
   margin-top: 55px;
 }
@@ -72,7 +72,7 @@
 }
 
 .add-panel-widget__action {
-  margin: 0 4px;
+  margin: 0 $space-xs;
 }
 
 .add-panel-widget__btn-container {

public/sass/_variables.generated.scss

@@ -23,6 +23,7 @@ $enable-hover-media-query: false !default;
 $space-xs: 4px !default;
 $space-s: 8px !default;
 $space-m: 16px !default;
+$space-l: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;

public/sass/components/_add_data_source.scss

@@ -1,5 +1,5 @@
 .add-data-source-header {
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
   padding-top: $spacer;
   text-align: center;
 }
@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $panel-margin * 2;
+  margin-bottom: $space-l;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 15px;
+  margin: 0 $space-m;
   width: 55px;
 }

public/sass/components/_dashboard_settings.scss

@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
 
   i {
     font-size: 25px;
@@ -53,7 +53,7 @@
 
 .dashboard-settings__header {
   font-size: $font-size-h3;
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
 }
 
 .dashboard-settings__subheader {
@@ -89,13 +89,13 @@
   flex-direction: column;
   height: 100%;
   flex-grow: 1;
-  margin: $spacer * 3 $spacer * 2 0 0;
+  margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: 10px;
+    margin-bottom: $space-s;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $spacer;
+  margin-top: $space-m;
 }

public/sass/components/_sidemenu.scss

@@ -167,7 +167,7 @@
   font-size: $font-size-sm;
   color: $text-color-weak;
   border-bottom: 1px solid $dropdownDividerBottom;
-  margin-bottom: 0.25rem;
+  margin-bottom: $space-xs;
   white-space: nowrap;
 }
 
@@ -192,7 +192,7 @@ li.sidemenu-org-switcher {
   display: flex;
   align-items: center;
   > i.fa.fa-random {
-    margin-right: 4px;
+    margin-right: $space-xs;
     top: 1px;
   }
 }
@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: 0.5rem;
+      margin-top: $space-s;
-      margin-bottom: 0.5rem;
+      margin-bottom: $space-s;
 
       > li > a {
         padding-left: 15px;