From 63156766213d45117948682364419010c3cd2ee3 Mon Sep 17 00:00:00 2001
From: Thomas Maas <thomas@webtypes.com>
Date: Thu, 12 Sep 2019 23:53:12 +0200
Subject: [PATCH] basics (need dry up)

---
 app/assets/stylesheets/provider/_charts.scss  |  2 +-
 .../stylesheets/provider/_colorbox.scss       |  3 +-
 app/assets/stylesheets/provider/_colors.scss  |  2 +-
 app/assets/stylesheets/provider/_commons.scss | 37 +++++++++++++++++--
 app/assets/stylesheets/provider/_forms.scss   |  7 +++-
 .../stylesheets/provider/_legacy_theme.scss   |  5 ++-
 app/assets/stylesheets/provider/_menu.scss    |  3 ++
 app/assets/stylesheets/provider/_tables.scss  |  3 ++
 .../provider/admin/_dashboard.scss            |  5 ++-
 .../stylesheets/provider/layouts/_main.scss   |  2 +-
 config/webpacker.yml                          |  2 +-
 11 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/provider/_charts.scss b/app/assets/stylesheets/provider/_charts.scss
index 2fd1cc8a47..202d04e7a7 100644
--- a/app/assets/stylesheets/provider/_charts.scss
+++ b/app/assets/stylesheets/provider/_charts.scss
@@ -17,7 +17,7 @@
 #mini-charts .charts {
   position: relative;
   border-radius: $border-radius;
-  background: $content-background;
+  background: $body-background;
   border: $border-width solid $border-color;
   min-width: 0;
   height: line-height-times(3.5);
diff --git a/app/assets/stylesheets/provider/_colorbox.scss b/app/assets/stylesheets/provider/_colorbox.scss
index 29299e72d4..6df18d230a 100644
--- a/app/assets/stylesheets/provider/_colorbox.scss
+++ b/app/assets/stylesheets/provider/_colorbox.scss
@@ -14,13 +14,14 @@
 
 #colorbox {
   box-shadow: 0 0 line-height-times(1/2) $box-shadow-color;
-  background: rgba($content-background, .99);
+  background: rgba($body-background, .99);
   border: $border-width solid $border-color;
   text-align: left;
   border-radius: $border-radius;
 
   form.formtastic {
     width: 100%;
+    padding: 0;
 
     fieldset.inputs {
       border-top: 0;
diff --git a/app/assets/stylesheets/provider/_colors.scss b/app/assets/stylesheets/provider/_colors.scss
index 7668cf8e15..f4a603b2ac 100644
--- a/app/assets/stylesheets/provider/_colors.scss
+++ b/app/assets/stylesheets/provider/_colors.scss
@@ -27,7 +27,7 @@ $facebook-color: #3b5998;
 
 // Functional color names
 $body-background: $white;
-$content-background: $body-background;
+$content-background: $gallery;
 $background-color-base: $body-background;
 
 $font-color: $outerSpaceGray;
diff --git a/app/assets/stylesheets/provider/_commons.scss b/app/assets/stylesheets/provider/_commons.scss
index 3d3369aefa..ff2844a8e2 100644
--- a/app/assets/stylesheets/provider/_commons.scss
+++ b/app/assets/stylesheets/provider/_commons.scss
@@ -14,6 +14,19 @@ main >  h2,
   font-weight: $font-weight-light;
 }
 
+.subsubmenu + h1,
+.subsubmenu + h2,
+#subsubmenu + h1,
+#subsubmenu + h2,
+main > h1:first-child,
+main >  h2:first-child,
+#tab-content > h1:first-child,
+#tab-content > h2:first-child {
+  padding: line-height-times(1);
+  margin: line-height-times(-1);
+  margin-bottom: line-height-times(1);
+  background-color: $body-background;
+}
 
 h1 {
   font-size: $main-title-font-size;
@@ -30,13 +43,21 @@ h2, h3 {
   margin-bottom: line-height-times(1/2);
 }
 
+.subsubmenu {
+  padding: line-height-times(1);
+  margin: line-height-times(-1);
+  background-color: $body-background;
+}
+
 #tab-content > h2:first-child,
 #content > h2:first-child,
 #subsubmenu + h2 {
   font-size: $main-title-font-size;
-  padding-top: 0;
-  margin-bottom: line-height-times(1/2);
+  padding: line-height-times(1);
+  margin: line-height-times(-1);
+  margin-bottom: line-height-times(1);
   line-height: 1;
+  background-color: $body-background;
 }
 
 h2 {
@@ -55,7 +76,15 @@ h3 {
 
 p {
   margin: line-height-times(1/2) 0 line-height-times(1) 0;
-  max-width: line-height-times(36);
+  //max-width: line-height-times(36);
+}
+
+h1 + p,
+h2 + p {
+  padding: line-height-times(1);
+  margin: line-height-times(-1);
+  margin-bottom: line-height-times(1);
+  background-color: $body-background;
 }
 
 dd p {
@@ -143,7 +172,7 @@ a img {
 }
 
 .round, #page_templates, .alwaysontop {
-  @include border-radius($border-radius);
+  //@include border-radius($border-radius);
 }
 
 pre code {
diff --git a/app/assets/stylesheets/provider/_forms.scss b/app/assets/stylesheets/provider/_forms.scss
index 53d1863e75..202eb741a0 100644
--- a/app/assets/stylesheets/provider/_forms.scss
+++ b/app/assets/stylesheets/provider/_forms.scss
@@ -156,7 +156,7 @@ form.formtastic fieldset.inputs > ol > li.select select {
 form.formtastic fieldset.buttons {
   border-top: $border-width solid $border-color;
   margin: line-height-times(2) 0;
-  padding: line-height-times(1/2) 0 0 0;
+  padding: line-height-times(1/2) 0 line-height-times(1) 0;
   text-align: right;
 
   li {
@@ -243,6 +243,11 @@ form.formtastic {
   min-width: line-height-times(20);
   width: 100%;
 
+  padding: line-height-times(1);
+  padding-bottom: line-height-times(0);
+  background-color: $body-background;
+  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
+
   fieldset.inputs[data-behavior~=toggle-inputs] {
     border: $border-width $border-color solid;
     border-radius: $border-radius;
diff --git a/app/assets/stylesheets/provider/_legacy_theme.scss b/app/assets/stylesheets/provider/_legacy_theme.scss
index 1804722a68..0ba8d6da3b 100644
--- a/app/assets/stylesheets/provider/_legacy_theme.scss
+++ b/app/assets/stylesheets/provider/_legacy_theme.scss
@@ -2,6 +2,9 @@ div.dashboard_bubble, div.wide_dashboard_bubble, div.narrow_dashboard_bubble {
   border: $border-width solid  $border-color;
   padding: line-height-times(1);
   margin-bottom: line-height-times(1);
+  background-color: $body-background;
+  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
+  border: none;
 
   &> table.list:first-child {
     margin-top: line-height-times(-1/2);
@@ -10,7 +13,7 @@ div.dashboard_bubble, div.wide_dashboard_bubble, div.narrow_dashboard_bubble {
   &> table.list:last-child {
     margin-bottom: line-height-times(-1/2);
 
-    tr:last-child th,    
+    tr:last-child th,
     tr:last-child td {
       border-bottom: 0;
     }
diff --git a/app/assets/stylesheets/provider/_menu.scss b/app/assets/stylesheets/provider/_menu.scss
index cb1c41e909..dae6f9f98c 100644
--- a/app/assets/stylesheets/provider/_menu.scss
+++ b/app/assets/stylesheets/provider/_menu.scss
@@ -39,6 +39,9 @@ ul.login-form-links {
   height: line-height-times(1);
   padding: 0 0 line-height-times(1.5) 0;
   font-size: $font-size-sm;
+  padding: line-height-times(1);
+  margin: line-height-times(-1);
+  background-color: $body-background;
 
   .active {
     color: $subsubmenu-active-color;
diff --git a/app/assets/stylesheets/provider/_tables.scss b/app/assets/stylesheets/provider/_tables.scss
index aa83bfce7c..dbc411f045 100644
--- a/app/assets/stylesheets/provider/_tables.scss
+++ b/app/assets/stylesheets/provider/_tables.scss
@@ -14,6 +14,7 @@ $search-header-width: line-height-times(4);
 
 table {
   width: 100%;
+  background-color: $body-background;
 
   .search th {
     height: line-height-times(3);
@@ -53,8 +54,10 @@ th.header {
 }
 
 table.data {
+  border: solid $body-background line-height-times(1);
   margin-bottom: line-height-times(1);
   margin-top: line-height-times(1/2);
+  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
   width: 100%;
 
   a.is-inline {
diff --git a/app/assets/stylesheets/provider/admin/_dashboard.scss b/app/assets/stylesheets/provider/admin/_dashboard.scss
index 79403f8ee1..37d37362b2 100644
--- a/app/assets/stylesheets/provider/admin/_dashboard.scss
+++ b/app/assets/stylesheets/provider/admin/_dashboard.scss
@@ -74,12 +74,14 @@
 }
 
 .DashboardWidget {
+  background-color: $body-background;
   width: 50%;
   float: left;
   position: relative;
   height: line-height-times(10);
   overflow: hidden;
-  border: $border-width solid $border-color;
+  //border: $border-width solid $border-color;
+  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
   padding: line-height-times(1/2);
 
   .Dashboard-chart {
@@ -449,4 +451,3 @@ a:hover .u-notice {
     }
   }
 }
-
diff --git a/app/assets/stylesheets/provider/layouts/_main.scss b/app/assets/stylesheets/provider/layouts/_main.scss
index 91724df146..93b0df3bf0 100644
--- a/app/assets/stylesheets/provider/layouts/_main.scss
+++ b/app/assets/stylesheets/provider/layouts/_main.scss
@@ -10,7 +10,7 @@ body {
 }
 
 #border {
-  background-color: #fff; // HACK: this will be taken care by PF4
+  background-color: $content-background; // HACK: this will be taken care by PF4
   min-height: calc(100vh - 92px); // Header's height
   position: relative;
   text-align: left;
diff --git a/config/webpacker.yml b/config/webpacker.yml
index 4b2a50f3ef..cc740b5a25 100644
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -31,7 +31,7 @@ default: &default
 
 development:
   <<: *default
-  compile: true
+  compile: false
 
   dev_server:
     host: localhost