Small fixs (#647)

* hide Ref/test/scrubber buttons if there is no diff * Fix height of toolbar * give the Ref/test/scrubber buttons a selected state * Fix responsive scrubber * Fix scrubber positions * Prettier! * prettier * true prettier! * Fix modal scrubber header * Another round of prettier * Another round of prettier * Remove npm format script * prettier ok * bigger border status card
garris · Jan 28, 2018 · a7d391d · a7d391d
1 parent 1525d02
commit a7d391d
Show file tree

Hide file tree

Showing 35 changed files with 425 additions and 419 deletions.
diff --git a/compare/src/actions/index.js b/compare/src/actions/index.js
@@ -2,61 +2,61 @@ export const filterTests = status => {
   return {
     type: 'FILTER_TESTS',
     status
-  }
-}
+  };
+};
 
 export const findTests = value => {
   return {
     type: 'SEARCH_TESTS',
     value
-  }
-}
+  };
+};
 
 export const updateSettings = id => {
   return {
     type: 'UPDATE_SETTINGS',
     id
-  }
-}
+  };
+};
 
 export const toggleAllImages = value => {
   return {
     type: 'TOGGLE_ALL_IMAGES',
     value
-  }
-}
+  };
+};
 
 export const openModal = value => {
   return {
     type: 'OPEN_SCRUBBER_MODAL',
     value
-  }
-}
+  };
+};
 
 export const closeModal = value => {
   return {
     type: 'CLOSE_SCRUBBER_MODAL',
     value
-  }
-}
+  };
+};
 
 export const showScrubberTestImage = value => {
   return {
     type: 'SHOW_SCRUBBER_TEST_IMAGE',
     value
-  }
-}
+  };
+};
 
 export const showScrubberRefImage = value => {
   return {
     type: 'SHOW_SCRUBBER_REF_IMAGE',
     value
-  }
-}
+  };
+};
 
 export const showScrubber = value => {
   return {
     type: 'SHOW_SCRUBBER',
     value
-  }
-}
+  };
+};
diff --git a/compare/src/components/App.js b/compare/src/components/App.js
@@ -1,14 +1,14 @@
-import React from 'react'
-import styled from 'styled-components'
-import { StickyContainer } from 'react-sticky'
+import React from 'react';
+import styled from 'styled-components';
+import { StickyContainer } from 'react-sticky';
 
-import Header from './ecosystems/Header'
-import List from './ecosystems/List'
-import ScrubberModal from './ecosystems/ScrubberModal'
+import Header from './ecosystems/Header';
+import List from './ecosystems/List';
+import ScrubberModal from './ecosystems/ScrubberModal';
 
 const Wrapper = styled.section`
   padding: 0 30px;
-`
+`;
 
 export default class App extends React.Component {
   render() {
@@ -20,6 +20,6 @@ export default class App extends React.Component {
         </Wrapper>
         <ScrubberModal />
       </StickyContainer>
-    )
+    );
   }
 }
diff --git a/compare/src/components/atoms/ButtonFilter.js b/compare/src/components/atoms/ButtonFilter.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from 'react';
+import styled from 'styled-components';
 
-import { colors, fonts, shadows } from '../../styles'
+import { colors, fonts, shadows } from '../../styles';
 
 const Button = styled.button`
   font-size: 20px;
@@ -34,11 +34,11 @@ const Button = styled.button`
     background-color: ${colors.red};
     color: ${colors.white};
   }
-`
+`;
 
 export default class ButtonFilter extends React.Component {
   render() {
-    let { count, label, status } = this.props
+    let { count, label, status } = this.props;
 
     return (
       <Button
@@ -48,6 +48,6 @@ export default class ButtonFilter extends React.Component {
       >
         {status !== 'all' ? count : ''} {label}
       </Button>
-    )
+    );
   }
 }
diff --git a/compare/src/components/atoms/ButtonSettings.js b/compare/src/components/atoms/ButtonSettings.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from 'react';
+import styled from 'styled-components';
 
-import { colors, fonts, shadows } from '../../styles'
+import { colors, fonts, shadows } from '../../styles';
 
-import settingsIcon from '../../assets/icons/settings.png'
+import settingsIcon from '../../assets/icons/settings.png';
 
 const Button = styled.button`
   border: none;
@@ -45,17 +45,17 @@ const Button = styled.button`
     font-family: ${fonts.latoRegular};
     color: ${colors.secondaryText};
   }
-`
+`;
 
 export default class ButtonSettings extends React.Component {
   render() {
-    let isActive = this.props.active ? 'active' : ''
+    let isActive = this.props.active ? 'active' : '';
 
     return (
       <Button onClick={this.props.onClick} className={isActive}>
         <span className="icon" />
         {/* <span className="label">settings</span> */}
       </Button>
-    )
+    );
   }
 }
diff --git a/compare/src/components/atoms/IdContainer.js b/compare/src/components/atoms/IdContainer.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
+import React from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
 
-import { colors, fonts } from '../../styles'
+import { colors, fonts } from '../../styles';
 
 const IdTitle = styled.h3`
   font-size: 14px;
@@ -27,20 +27,20 @@ const IdTitle = styled.h3`
     left: 0;
     top: -10px;
   }
-`
+`;
 
 class IdConfig extends React.Component {
   render() {
-    return <IdTitle>{this.props.idConfig}</IdTitle>
+    return <IdTitle>{this.props.idConfig}</IdTitle>;
   }
 }
 
 const mapStateToProps = state => {
   return {
     idConfig: state.suiteInfo.idConfig
-  }
-}
+  };
+};
 
-const IdContainer = connect(mapStateToProps)(IdConfig)
+const IdContainer = connect(mapStateToProps)(IdConfig);
 
-export default IdContainer
+export default IdContainer;
diff --git a/compare/src/components/atoms/ImagePreview.js b/compare/src/components/atoms/ImagePreview.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
+import React from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
 
-import { colors, fonts } from '../../styles'
+import { colors, fonts } from '../../styles';
 
 const Image = styled.img`
   width: auto;
@@ -12,14 +12,14 @@ const Image = styled.img`
   &:hover {
     cursor: pointer;
   }
-`
+`;
 
 const Wrapper = styled.div`
   flex: 1 1 auto;
   padding: 0 25px;
   padding-top: ${props => (props.withText ? '10px' : '20px')};
   text-align: center;
-`
+`;
 
 const Label = styled.span`
   text-align: center;
@@ -31,27 +31,27 @@ const Label = styled.span`
   padding: 5px 0;
   padding-bottom: 15px;
   font-size: 12px;
-`
+`;
 
 class ImagePreview extends React.Component {
   render() {
-    let { hidden, settings } = this.props
+    let { hidden, settings } = this.props;
 
     return (
       <Wrapper hidden={hidden} withText={settings.textInfo}>
         <Label>{this.props.label}</Label>
         <Image {...this.props} />
       </Wrapper>
-    )
+    );
   }
 }
 
 const mapStateToProps = state => {
   return {
     settings: state.layoutSettings
-  }
-}
+  };
+};
 
-const ImagePreviewContainer = connect(mapStateToProps)(ImagePreview)
+const ImagePreviewContainer = connect(mapStateToProps)(ImagePreview);
 
-export default ImagePreviewContainer
+export default ImagePreviewContainer;
diff --git a/compare/src/components/atoms/ImageScrubber.js b/compare/src/components/atoms/ImageScrubber.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
-import TwentyTwenty from 'react-twentytwenty'
+import React from 'react';
+import styled from 'styled-components';
+import TwentyTwenty from 'react-twentytwenty';
 
-import { colors, fonts, shadows } from '../../styles'
+import { colors, fonts, shadows } from '../../styles';
 
 const ScrubberViewBtn = styled.button`
   margin: 1em;
@@ -29,7 +29,7 @@ const ScrubberViewBtn = styled.button`
     cursor: pointer;
     box-shadow: ${props => (!props.selected ? shadows.shadow02 : '')};
   }
-`
+`;
 
 const Wrapper = styled.div`
   height: 100%;
@@ -51,12 +51,12 @@ const Wrapper = styled.div`
   .refImage {
     width: 100%;
   }
-`
+`;
 
 const WrapTitle = styled.div`
   display: flex;
   justify-content: center;
-`
+`;
 
 export default function ImageScrubber({
   position,
@@ -75,23 +75,23 @@ export default function ImageScrubber({
             <ScrubberViewBtn
               selected={position === 100}
               onClick={() => {
-                showScrubberRefImage()
+                showScrubberRefImage();
               }}
             >
               REFERENCE
             </ScrubberViewBtn>
             <ScrubberViewBtn
               selected={position === 0}
               onClick={() => {
-                showScrubberTestImage()
+                showScrubberTestImage();
               }}
             >
               TEST
             </ScrubberViewBtn>
             <ScrubberViewBtn
               selected={position !== 100 && position !== 0}
               onClick={() => {
-                showScrubber()
+                showScrubber();
               }}
             >
               SCRUBBER
@@ -111,6 +111,6 @@ export default function ImageScrubber({
         <div className="slider" />
       </TwentyTwenty>
     </Wrapper>
-  )
+  );
   // }
 }
diff --git a/compare/src/components/atoms/InputTextSearch.js b/compare/src/components/atoms/InputTextSearch.js
@@ -1,10 +1,10 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
+import React from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
 
-import { colors, fonts } from '../../styles'
+import { colors, fonts } from '../../styles';
 
-import searchIcon from '../../assets/icons/search.png'
+import searchIcon from '../../assets/icons/search.png';
 
 const Input = styled.input`
   display: block;
@@ -33,7 +33,7 @@ const Input = styled.input`
     font-style: italic;
     color: ${colors.secondaryText};
   }
-`
+`;
 
 export default class ButtonFilter extends React.Component {
   render() {
@@ -42,6 +42,6 @@ export default class ButtonFilter extends React.Component {
         placeholder="Filter tests with search..."
         onChange={this.props.onChange.bind(this)}
       />
-    )
+    );
   }
 }