From 00134594946394e1641fe96a04238cc846500765 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Tue, 30 Jul 2019 10:35:09 +0200
Subject: [PATCH 1/4] language-selector

---
 src/components/widgets/component.js      | 6 ++++++
 src/components/widgets/style.module.scss | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/components/widgets/component.js b/src/components/widgets/component.js
index b6f0c1925..f6081b27f 100644
--- a/src/components/widgets/component.js
+++ b/src/components/widgets/component.js
@@ -2,6 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Widget from 'components/widget';
 import Button from 'components/button';
+import ButtonGroup from 'components/buttonGroup';
 import TEMPLATES from 'components/widget/templates';
 import CONFIGS from 'components/widget/templates/configs';
 import styles from './style.module.scss';
@@ -45,6 +46,11 @@ class WidgetList extends PureComponent {
               ? <Button onClick={this.onClickExpandAll}>Expand all widgets</Button>
               : <Button onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
           }
+          <ButtonGroup onClick={this.onClickExpandAll}>
+            <Button>Français</Button>
+            <Button>English</Button>
+          </ButtonGroup>
+
         </div>
         {widgets.map(widget => (
           <Widget
diff --git a/src/components/widgets/style.module.scss b/src/components/widgets/style.module.scss
index 605e270b3..bf308a524 100644
--- a/src/components/widgets/style.module.scss
+++ b/src/components/widgets/style.module.scss
@@ -3,5 +3,7 @@
 }
 
 .actionBar {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 20px;
 }

From f987a8d3f465526cef259e3bc3bcbfbbb7ea7a23 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 31 Jul 2019 14:00:46 +0200
Subject: [PATCH 2/4] btn styles on active bar

---
 src/components/button/style.module.scss | 48 ++++++++++++++-----------
 src/components/widget/component.js      |  7 +++-
 src/components/widgets/component.js     |  8 ++---
 3 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/components/button/style.module.scss b/src/components/button/style.module.scss
index e996b9362..ab8815a51 100644
--- a/src/components/button/style.module.scss
+++ b/src/components/button/style.module.scss
@@ -14,42 +14,48 @@
 
   transition: all 0.25s ease;
 
-  &:hover {
-    border-color: rgba($primary, 0.4);
-    cursor: pointer;
-  }
+  // &:hover {
+  //   border-color: rgba($primary, 0.4);
+  //   cursor: pointer;
+  // }
 
-  &:focus {
-    border-color: $primary;
-  }
+  // &:focus {
+  //   border-color: $primary;
+  // }
 
   &.background {
     background-color: $primary;
     color:$white;
-    &:focus {
-      height: 26px;
-      width: 124.8px;
-      border: 2px solid $white;
-      opacity: 0.4;
-      border-radius: 15px;
-    }
+    // height: 26px;
+    // width: 124.8px;
+    // border: 2px solid $white;
+    //
+    // border-radius: 15px;
     &.contrast {
       background-color: $white;
       color: $primary;
       border-color: $white;
     }
+    // &:focus {
+    //   height: 26px;
+    //   width: 124.8px;
+    //   border: 2px solid $white;
+    //   opacity: 0.4;
+    //   border-radius: 15px;
+    // }
   }
 
   &.transparent {
-    border-color: rgba(0, 133, 127, 0.2);
+    border-color: rgba(0, 133, 127, 0.4);
     background-color: transparent;
     color: $primary;
+
     &:hover {
       border: 2px solid rgba(0, 133, 127, 0.4);
     }
-    &:focus {
-      border-color: $primary;
-    }
+    // &:focus {
+    //   border-color: $primary;
+    // }
     &.contrast {
       color: $white;
     }
@@ -59,9 +65,9 @@
       &:hover {
         border-color: rgba(0,0,0,0.4);
       }
-      &:focus {
-        border-color: $body-color;
-      }
+      // &:focus {
+      //   border-color: $body-color;
+      // }
     }
   }
 
diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index c90e7fef7..70a76126b 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -54,7 +54,12 @@ const Widget = ({
           {name}
         </button>
         {layerId && (
-          <Button isActive={isActive} onClick={activeToggleHandler}>
+          <Button
+            hasBackground={isActive}
+            hasContrast={!isActive}
+            isActive={isActive}
+            onClick={activeToggleHandler}
+          >
             {isActive ? 'Hide layer' : 'Show layer'}
           </Button>
         )}
diff --git a/src/components/widgets/component.js b/src/components/widgets/component.js
index f6081b27f..1ae840647 100644
--- a/src/components/widgets/component.js
+++ b/src/components/widgets/component.js
@@ -43,12 +43,12 @@ class WidgetList extends PureComponent {
         <div className={styles.actionBar}>
           {
             isCollapsed
-              ? <Button onClick={this.onClickExpandAll}>Expand all widgets</Button>
-              : <Button onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
+              ? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
+              : <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
           }
           <ButtonGroup onClick={this.onClickExpandAll}>
-            <Button>Français</Button>
-            <Button>English</Button>
+            <Button onClick={this.onClickExpandAll}>Français</Button>
+            <Button onClick={this.onClickExpandAll}>English</Button>
           </ButtonGroup>
 
         </div>

From 737ca010f151ace3b41f4faa3111b11d05330d2d Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 1 Aug 2019 11:21:46 +0200
Subject: [PATCH 3/4] option button styles

---
 src/components/buttonGroup/style.module.scss | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/buttonGroup/style.module.scss b/src/components/buttonGroup/style.module.scss
index ec200629d..d48b38feb 100644
--- a/src/components/buttonGroup/style.module.scss
+++ b/src/components/buttonGroup/style.module.scss
@@ -1,20 +1,28 @@
 @import '../../styles/vars';
 
 .container {
-  display: inline-flex;
   border: 2px solid rgba(0,0,0,0.2);
-  height: 30px;
+  display:inline-flex;
+  position: relative;
+  height: 26px;
   border-radius: 15px;
 
-  * {
+  button {
+    display: block;
+    position: relative;
+    margin: -2px;
     border: none;
+    text-align: center;
     color: $body-color;
-
     &:focus {
-      border-radius: 15px;
+      text-align: center;
+      border: 2px solid white;
+      margin: -2px;
+      height: 30px;
       background-color: $white;
       color: $primary;
-    }
+      border-bottom: 3px solid white;;
 
+    }
   }
 }

From e5ef9d8cb72268e27d547c6c42cbb8ac373a40e6 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 1 Aug 2019 17:33:49 +0200
Subject: [PATCH 4/4] PR - #31 amendments

---
 src/components/button/style.module.scss      | 32 ++++----------------
 src/components/buttonGroup/style.module.scss |  2 +-
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/components/button/style.module.scss b/src/components/button/style.module.scss
index ab8815a51..75b2781e9 100644
--- a/src/components/button/style.module.scss
+++ b/src/components/button/style.module.scss
@@ -14,35 +14,20 @@
 
   transition: all 0.25s ease;
 
-  // &:hover {
-  //   border-color: rgba($primary, 0.4);
-  //   cursor: pointer;
-  // }
-
-  // &:focus {
-  //   border-color: $primary;
-  // }
+  &:hover {
+    border-color: rgba($primary, 0.4);
+    cursor: pointer;
+  }
 
   &.background {
     background-color: $primary;
     color:$white;
-    // height: 26px;
-    // width: 124.8px;
-    // border: 2px solid $white;
-    //
-    // border-radius: 15px;
+
     &.contrast {
       background-color: $white;
       color: $primary;
       border-color: $white;
     }
-    // &:focus {
-    //   height: 26px;
-    //   width: 124.8px;
-    //   border: 2px solid $white;
-    //   opacity: 0.4;
-    //   border-radius: 15px;
-    // }
   }
 
   &.transparent {
@@ -53,9 +38,7 @@
     &:hover {
       border: 2px solid rgba(0, 133, 127, 0.4);
     }
-    // &:focus {
-    //   border-color: $primary;
-    // }
+
     &.contrast {
       color: $white;
     }
@@ -65,9 +48,6 @@
       &:hover {
         border-color: rgba(0,0,0,0.4);
       }
-      // &:focus {
-      //   border-color: $body-color;
-      // }
     }
   }
 
diff --git a/src/components/buttonGroup/style.module.scss b/src/components/buttonGroup/style.module.scss
index d48b38feb..a376c290a 100644
--- a/src/components/buttonGroup/style.module.scss
+++ b/src/components/buttonGroup/style.module.scss
@@ -2,7 +2,7 @@
 
 .container {
   border: 2px solid rgba(0,0,0,0.2);
-  display:inline-flex;
+  display: inline-flex;
   position: relative;
   height: 26px;
   border-radius: 15px;