Merge pull request #31 from Vizzuality/feature/language-selector

Feature/language selector

src/components/button/style.module.scss

@@ -19,20 +19,10 @@
     cursor: pointer;
   }
 
-  &: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;
-    }
+
     &.contrast {
       background-color: $white;
       color: $primary;
@@ -41,15 +31,14 @@
   }
 
   &.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;
-    }
+
     &.contrast {
       color: $white;
     }
@@ -59,9 +48,6 @@
       &:hover {
         border-color: rgba(0,0,0,0.4);
       }
-      &:focus {
-        border-color: $body-color;
-      }
     }
   }
 

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;;
 
+    }
   }
 }

src/components/spinner/style.module.scss

@@ -3,13 +3,13 @@
 .loader {
   position: relative;
   margin: auto;
-  border: 16px solid rgba(0, 133, 127, .1);
-  border-top: 16px solid $primary;
+  border: 8px solid rgba(0, 133, 127, .1);
+  border-top: 8px solid $primary;
   opacity: 0.4;
   border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: loading 3s linear infinite;
+  width: 40px;
+  height: 40px;
+  animation: loading 2s linear infinite;
 
   @keyframes loading {
     0% { transform: rotate(0deg); }

src/components/widget/component.js

@@ -23,14 +23,14 @@ class Widget extends PureComponent {
     toggleCollapse: PropTypes.func
   };
 
-static defaultProps = {
-  isActive: false,
-  isCollapsed: false,
-  layerId: null,
-  layersIds: null,
-  toggleActive: () => { },
-  toggleCollapse: () => { }
-};
+  static defaultProps = {
+    isActive: false,
+    isCollapsed: false,
+    layerId: null,
+    layersIds: null,
+    toggleActive: () => { },
+    toggleCollapse: () => { }
+  };
 
 
   activeToggleHandler = () => {
@@ -49,7 +49,7 @@ static defaultProps = {
 
   render() {
     const { isLoading } = this.props;
-    const { name, widgetConfig, isCollapsed, isActive, layerId, children, id, slug } = this.props;
+    const { name, widgetConfig, isCollapsed, isActive, layerId, children, id, slug, ...props } = this.props;
 
     const widgetData = widgetConfig.parse({});
 
@@ -74,26 +74,29 @@ static defaultProps = {
             {name}
           </button>
           {layerId && (
-            <Button isActive={isActive} onClick={this.activeToggleHandler}>
+            <Button
+              hasBackground={isActive}
+              hasContrast={!isActive}
+              isActive={isActive}
+              onClick={this.activeToggleHandler}
+            >
               {isActive ? 'Hide layer' : 'Show layer'}
             </Button>
           )}
         </div>
-
         {isLoading && <Spinner isLoading />}
-
         <div className={classnames(styles.content)}>
           {children({
             id,
             name,
             slug,
             isCollapsed,
             data: widgetData,
+            ...props
           })}
         </div>
       </div>
     );
   }
 }
-
 export default Widget;

src/components/widgets/component.js

@@ -42,9 +42,10 @@ class WidgetList extends PureComponent {
         <div className={styles.actionBar}>
           {
             isCollapsed
-              ? <Button isTransparent isGrey onClick={this.onClickExpandAll}>Expand all widgets</Button>
+              ? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
               : <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
           }
+
         </div>
         {widgets.map(widget => (
           <Widget

src/components/widgets/style.module.scss

@@ -3,5 +3,7 @@
 }
 
 .actionBar {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 20px;
 }