Polish GraphInfo styling
diff --git a/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.js b/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.js
index d8e5938..4a85700 100644
--- a/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.js
+++ b/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.js
@@ -257,8 +257,10 @@
value={sliderValue}
className={styles.slider}
handleClassName={`${styles.handle} ${isAccessible ? styles.accessibleHandle : styles.notAccessibleHandle}`}
+ handleActiveClassName={styles.activeHandle}
onChange={this.onChange} />
<GraphInfo contrast={currentYvalue}
+ isAccessible={isAccessible}
textColorValue={textColorValue}
backgroundColorValue={backgroundColorValue} />
</div>
diff --git a/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.less b/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.less
index 3fd2de7..48538c8 100644
--- a/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.less
+++ b/src/components/App/components/SeeBehindTheScenes/SeeBehindTheScenes.less
@@ -156,6 +156,10 @@
}
}
+.activeHandle {
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+}
+
.accessibleHandle {
@accessibleColor: #3d854d;
diff --git a/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.js b/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.js
index 29a20b4..3c78f2b 100644
--- a/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.js
+++ b/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.js
@@ -7,33 +7,53 @@
import MultilineEllipsis from 'MultilineEllipsis/MultilineEllipsis';
const loremIpsum = `
- Lorem ipsum dolor sit amet, ut pri essent facilis constituto, etiam assueverit
- signiferumque ex ius. Quas quaestio ea duo. Purto magna aperiam no pri. Pri
- prompta partiendo efficiendi ne, sed tritani deterruisset necessitatibus id,
- ad est sint noluisse.
+ Lorem ipsum dolor sit amet, et modo impedit sadipscing quo, te has expetendis
+ efficiendi assueverit, quas corpora accusamus vim ne. Usu ex platonem mandamus
+ theophrastus, duo dictas inimicus an, vim ei recusabo salutatus. Has cu iriure
+ fabulas laboramus. Et quidam omittantur voluptatibus per, illum partem mollis
+ ea eum, sale possim in vix. Copiosae invenire intellegebat mea te. Has quando
+ mollis an. Falli saepe euismod an per, no graeco aperiri sed. Ea per postea
+ necessitatibus, his ut odio commodo sententiae. Legere accusata sed an, mollis
+ convenire accusamus te pri, aperiam nusquam ocurreret quo cu. Ne semper docendi
+ fastidii vis, in has debet torquatos necessitatibus. Solet postea albucius an
+ pri, cum ut sint definiebas. Case inimicus id quo, dolore temporibus has ei.
`;
function calcLinesToShow(fontSize) {
+ if (fontSize <= 10) {
+ return 10;
+ }
+
if (fontSize <= 12) {
- return 5;
+ return 9;
+ }
+
+ if (fontSize <= 14) {
+ return 8;
}
if (fontSize <= 16) {
- return 4;
+ return 7;
}
- return 3;
+ if (fontSize <= 18) {
+ return 6;
+ }
+
+ return 5;
}
function mapStateToProps(state) {
return {
fontSize: state.fontSize,
- isFontBold: state.isFontBold
+ isFontBold: state.isFontBold,
+ accessibilityLevel: state.accessibilityLevel
};
}
function GraphInfo(props) {
- const { fontSize, isFontBold, contrast, textColorValue, backgroundColorValue } = props;
+ const { fontSize, isFontBold, accessibilityLevel, contrast, isAccessible,
+ textColorValue, backgroundColorValue } = props;
const colorStr = str2sixDigitHex(textColorValue);
const backgroundColorStr = str2sixDigitHex(backgroundColorValue);
const colorHsl = str2hsl(colorStr);
@@ -60,6 +80,9 @@
<div className={styles.contrastContent}>
{contrast.toFixed(2)}
</div>
+ <div className={styles.passesOrFails}>
+ {isAccessible ? 'Passes' : 'Fails'} {accessibilityLevel}
+ </div>
</div>
<div className={styles.sampleContainer}>
<div className={styles.title}>
@@ -100,8 +123,10 @@
GraphInfo.propTypes = {
fontSize: PropTypes.object.isRequired,
isFontBold: PropTypes.bool.isRequired,
+ accessibilityLevel: PropTypes.string.isRequired,
contrast: PropTypes.number.isRequired,
+ isAccessible: PropTypes.bool.isRequired,
textColorValue: PropTypes.string.isRequired,
backgroundColorValue: PropTypes.string.isRequired
};
diff --git a/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.less b/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.less
index 03fbff7..cedd05b 100644
--- a/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.less
+++ b/src/components/App/components/SeeBehindTheScenes/components/GraphInfo/GraphInfo.less
@@ -1,5 +1,5 @@
.container {
- margin-top: 54px;
+ margin-top: 59px;
}
.sectionContainer {
@@ -8,7 +8,7 @@
}
.content {
- margin-top: 18px;
+ margin-top: 21px;
}
.contrastContainer {
@@ -18,10 +18,16 @@
.contrastContent {
composes: content;
- font-size: 40px;
+ font-size: 48px;
+ line-height: 38px;
font-weight: 400;
}
+.passesOrFails {
+ margin-top: 6px;
+ font-size: 14px;
+}
+
.sampleContainer {
composes: sectionContainer;
margin-left: 60px;
@@ -30,7 +36,8 @@
.sampleContent {
composes: content;
- padding: 18px 20px;
+ padding: 20px;
+ height: 162px;
}
.colorsContainer {
@@ -46,16 +53,18 @@
.backgroundColorTitle {
composes: title;
- margin-top: 54px;
+ margin-top: 45px;
}
.textColorContent {
composes: content;
+ margin-top: 12px;
font-size: 14px;
}
.backgroundColorContent {
composes: content;
+ margin-top: 12px;
font-size: 14px;
}
@@ -63,4 +72,5 @@
display: flex;
width: 180px;
justify-content: space-between;
+ line-height: 24px;
}