fix: apply styles

new-lamassu-admin/src/components/LogsDownloaderPopover.js

@@ -17,14 +17,14 @@ const { h4 } = typographyStyles
 
 const styles = {
   popoverContent: {
-    minWidth: 315
+    width: 272
   },
   popoverHeader: {
     extend: h4,
-    padding: [[20, 15, 0, 15]]
+    padding: [[15, 15, 0, 15]]
   },
   radioButtonsContainer: {
-    padding: [[10, 15, 10, 15]]
+    padding: [[5, 15, 5, 15]]
   },
   radioButtons: {
     display: 'flex',
@@ -41,7 +41,7 @@ const styles = {
     height: 0
   },
   download: {
-    padding: [[30, 15, 30, 15]]
+    padding: [[10, 15]]
   }
 }
 

new-lamassu-admin/src/components/Popover.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { makeStyles, Popover as MaterialPopover } from '@material-ui/core'
 
+const arrowHeight = 10
+
 const styles = {
   arrow: {
     width: 0,
@@ -8,12 +10,12 @@ const styles = {
     position: 'absolute',
     borderStyle: 'solid',
     margin: 5,
-    borderWidth: [[0, 15, 18, 15]],
+    borderWidth: [[0, 15, arrowHeight, 15]],
     borderLeftColor: 'transparent',
     borderRightColor: 'transparent',
     borderTopColor: 'transparent',
-    top: -18,
-    left: 138,
+    top: arrowHeight * -1,
+    left: 116,
     marginTop: 0,
     marginBottom: 0,
     borderColor: '#ffffff'
@@ -36,7 +38,7 @@ const Popover = ({ children, ...props }) => {
       {...props}
     >
       {children}
-      <div class={classes.arrow} />
+      <div className={classes.arrow} />
     </MaterialPopover>
   )
 }

new-lamassu-admin/src/components/Uptime.js

@@ -3,32 +3,35 @@ import { floor, lowerCase, startCase } from 'lodash/fp'
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 
-import { spring3, spring2, mistyRose, tomato, comet } from '../styling/variables'
+import { secondaryColorLighter, secondaryColorDarker, offErrorColor, errorColor, offColor } from '../styling/variables'
 import typographyStyles from './typography/styles'
-const { label } = typographyStyles
+const { label1 } = typographyStyles
 
 const styles = {
   uptimeContainer: {
     display: 'inline-block',
-    minWidth: 120,
-    margin: '0 20px 0 20px'
+    minWidth: 104,
+    margin: [[0, 20]]
   },
   name: {
-    paddingLeft: 8,
-    color: comet
+    extend: label1,
+    paddingLeft: 4,
+    color: offColor
   },
   uptime: {
-    extend: label,
-    textAlign: 'center',
-    padding: 4
+    extend: label1,
+    height: 24,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   running: {
-    backgroundColor: spring3,
-    color: spring2
+    backgroundColor: secondaryColorLighter,
+    color: secondaryColorDarker
   },
   notRunning: {
-    backgroundColor: mistyRose,
-    color: tomato
+    backgroundColor: offErrorColor,
+    color: errorColor
   }
 }
 

new-lamassu-admin/src/components/buttons/BaseButton.styles.js

@@ -19,7 +19,7 @@ const colors = (color1, color2, color3) => {
   }
 }
 
-const buttonHeight = 45
+const buttonHeight = 32
 
 export default {
   baseButton: {

new-lamassu-admin/src/components/buttons/FeatureButton.js

@@ -6,8 +6,6 @@ import baseButtonStyles from './BaseButton.styles'
 
 const { baseButton, primary } = baseButtonStyles
 
-const svgSize = 25
-
 const styles = {
   featureButton: {
     extend: baseButton,
@@ -17,11 +15,7 @@ const styles = {
   },
   primary,
   buttonIcon: {
-    margin: 'auto',
-    '& svg': {
-      width: svgSize,
-      height: svgSize
-    }
+    margin: 'auto'
   },
   buttonIconActive: {} // required to extend primary
 }

new-lamassu-admin/src/components/date-range-picker/Calendar.js

@@ -4,18 +4,25 @@ import { toInteger } from 'lodash/fp'
 import { makeStyles } from '@material-ui/core/styles'
 
 import { ReactComponent as Arrow } from '../../styling/icons/arrow/month_change.svg'
-import { primaryColor, zircon, fontSecondary } from '../../styling/variables'
+import { primaryColor, zircon } from '../../styling/variables'
 import typographyStyles from '../typography/styles'
 
 import Tile from './Tile'
 
-const { label2 } = typographyStyles
+const { p, label2 } = typographyStyles
 
 const styles = {
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
   navbar: {
+    extend: p,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    width: '100%',
     padding: [[15, 15]],
     color: primaryColor,
     '& button': {
@@ -34,13 +41,11 @@ const styles = {
         position: 'absolute',
         left: 0
       }
-    },
-    fontFamily: fontSecondary,
-    fontSize: 16,
-    fontWeight: 500
+    }
   },
   table: {
     borderCollapse: 'collapse',
+    width: '100%',
     color: primaryColor,
     '& tr': {
       '&:first-child': {

new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js

@@ -8,11 +8,12 @@ import { ReactComponent as Arrow } from '../../styling/icons/arrow/download_logs
 import { primaryColor, offColor, zircon } from '../../styling/variables'
 import typographyStyles from '../typography/styles'
 
-const { info1, label, label3 } = typographyStyles
+const { info1, label1, label2 } = typographyStyles
 
 const dateContainerStyles = {
   wrapper: {
-    minWidth: 118
+    height: 46,
+    width: 99
   },
   container: {
     display: 'flex'
@@ -22,20 +23,23 @@ const dateContainerStyles = {
     flexDirection: 'column'
   },
   label: {
-    extend: label,
+    extend: label1,
+    lineHeight: 1.33,
     color: primaryColor
   },
   bigNumber: {
     extend: info1,
+    lineHeight: 1,
     marginRight: 7
   },
   monthYear: {
-    extend: label3,
+    extend: label2,
+    lineHeight: 1.17,
     color: primaryColor
   },
   weekDay: {
-    extend: label,
-    lineHeight: 1,
+    extend: label1,
+    lineHeight: 1.33,
     color: offColor
   }
 }
@@ -68,17 +72,18 @@ const styles = {
     borderRadius: 10
   },
   dateThingyContainer: {
-    height: 80,
     display: 'flex',
     justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'relative',
     backgroundColor: zircon,
-    padding: [[5, 15, 0, 15]]
+    padding: [[0, 15]],
+    minHeight: 70
   },
   arrowContainer: {
-    width: 39,
-    display: 'flex',
-    alignSelf: 'center',
-    alignItems: 'center'
+    position: 'absolute',
+    left: 116,
+    top: 26
   },
   arrow: {
     margin: 'auto'

new-lamassu-admin/src/components/date-range-picker/Tile.js

@@ -2,36 +2,33 @@ import React from 'react'
 import classnames from 'classnames'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { primaryColor, spring2, spring3, fontSecondary, disabledColor } from '../../styling/variables'
+import { primaryColor, spring2, spring3, disabledColor } from '../../styling/variables'
+import typographyStyles from '../typography/styles'
+
+const { label1 } = typographyStyles
 
 const styles = {
   wrapper: {
-    width: 45,
+
     height: 26,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'relative'
+    position: 'relative',
+    overflow: 'hidden'
   },
   button: {
+    extend: label1,
     border: 'none',
-    width: '100%',
-    height: '100%',
     cursor: 'pointer',
-    padding: 0,
     backgroundColor: 'transparent',
     color: primaryColor,
-    zIndex: 2,
-    fontFamily: fontSecondary,
-    fontSize: 14,
-    fontWeight: 500
+    zIndex: 2
   },
   lowerBound: {
-    width: [['50%', '!important']],
     left: '50%'
   },
   upperBound: {
-    width: [['50%', '!important']],
     right: '50%'
   },
   selected: {

new-lamassu-admin/src/components/inputs/base/RadioGroup.js

@@ -7,8 +7,11 @@ import {
   FormControlLabel
 } from '@material-ui/core'
 
+import typographyStyles from '../../typography/styles'
 import { secondaryColor } from '../../../styling/variables'
 
+const { p } = typographyStyles
+
 const GreenRadio = withStyles({
   root: {
     color: secondaryColor,
@@ -19,13 +22,19 @@ const GreenRadio = withStyles({
   checked: {}
 })(props => <MaterialRadio color='default' {...props} />)
 
+const Label = withStyles({
+  label: {
+    extend: p
+  }
+})(props => <FormControlLabel {...props} />)
+
 const RadioGroup = ({ name, value, labels, ariaLabel, onChange, className, ...props }) => {
   return (
     <>
       {labels && (
         <MaterialRadioGroup aria-label={ariaLabel} name={name} value={value} onChange={onChange} className={classnames(className)}>
           {labels.map((label, idx) => (
-            <FormControlLabel key={idx} value={idx} control={<GreenRadio />} label={label} />
+            <Label key={idx} value={idx} control={<GreenRadio />} label={label} />
           ))}
         </MaterialRadioGroup>
       )}

new-lamassu-admin/src/components/inputs/base/Select.js

@@ -40,7 +40,8 @@ function Select ({ label, items, ...props }) {
       <button
         {...getToggleButtonProps()}
       >
-        {startCase(selectedItem)} <Arrowdown />
+        <span className={classes.selectedItem}>{startCase(selectedItem)}</span>
+        <Arrowdown />
       </button>
       <ul {...getMenuProps()}>
         {isOpen &&
@@ -49,7 +50,7 @@ function Select ({ label, items, ...props }) {
               key={`${item}${index}`}
               {...getItemProps({ item, index })}
             >
-              {startCase(item)}
+              <span>{startCase(item)}</span>
             </li>
           ))}
       </ul>

new-lamassu-admin/src/components/inputs/base/Select.styles.js

@@ -1,30 +1,36 @@
-import { zircon, comet, white } from '../../../styling/variables'
+import { subheaderColor, offColor, white } from '../../../styling/variables'
 import typographyStyles from '../../typography/styles'
 
-const { select, regularLabel } = typographyStyles
+const { p, label1 } = typographyStyles
 
 const WIDTH = 152
 
 export default {
+  selectedItem: {
+    width: WIDTH - 41,
+    display: 'block',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  },
   select: {
     width: WIDTH,
     zIndex: 1000,
     '& label': {
-      extend: regularLabel,
-      color: comet,
+      extend: label1,
+      color: offColor,
       paddingLeft: 10
     },
     '& button': {
-      extend: select,
+      extend: p,
       position: 'relative',
       border: 0,
-      backgroundColor: zircon,
+      backgroundColor: subheaderColor,
       width: WIDTH,
-      padding: '6px 0 6px 12px',
+      padding: [[6, 0, 6, 12]],
       borderRadius: 20,
       lineHeight: '1.14',
       textAlign: 'left',
-      color: comet,
+      color: offColor,
       cursor: 'pointer',
       outline: '0 none'
     },
@@ -36,16 +42,23 @@ export default {
       margin: 0,
       borderTop: 0,
       padding: 0,
-      borderRadius: '0 0 16px 16px',
-      backgroundColor: zircon,
+      borderRadius: [[0, 0, 16, 16]],
+      backgroundColor: subheaderColor,
       outline: '0 none',
       '& li': {
+        extend: p,
         listStyleType: 'none',
-        padding: '6px 0 6px 12px',
-        cursor: 'pointer'
+        padding: [[6, 12]],
+        cursor: 'pointer',
+        '& span': {
+          width: '100%',
+          display: 'block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        }
       },
       '& li:hover': {
-        backgroundColor: comet,
+        backgroundColor: offColor,
         color: white
       }
     },
@@ -53,31 +66,31 @@ export default {
       position: 'absolute',
       top: 12,
       right: 14,
-      fill: comet
+      fill: offColor
     }
   },
   selectFiltered: {
     '& button': {
-      backgroundColor: comet,
+      backgroundColor: offColor,
       color: white
     },
     '& ul': {
       '& li': {
-        backgroundColor: comet,
+        backgroundColor: offColor,
         color: white
       },
       '& li:hover': {
-        backgroundColor: zircon,
-        color: comet
+        backgroundColor: subheaderColor,
+        color: offColor
       }
     },
     '& svg': {
-      fill: `${white} !important`
+      fill: [[white], '!important']
     }
   },
   open: {
     '& button': {
-      borderRadius: '16px 16px 0 0'
+      borderRadius: [[16, 16, 0, 0]]
     }
   }
 }

new-lamassu-admin/src/components/typography/styles.js

@@ -119,16 +119,6 @@ export default {
     fontWeight: 500,
     color: fontColor
   },
-  label3: {
-    fontSize: fontSize5,
-    fontFamily: fontSecondary,
-    fontWeight: 700
-  },
-  select: {
-    fontSize: fontSize3,
-    fontFamily: fontSecondary,
-    fontWeight: 500
-  },
   inline: {
     display: 'inline'
   },

new-lamassu-admin/src/pages/ServerLogs.js

@@ -13,12 +13,12 @@ import Uptime from '../components/Uptime'
 import LogsDowloaderPopover from '../components/LogsDownloaderPopover'
 import { ReactComponent as Download } from '../styling/icons/button/download/zodiac.svg'
 import { ReactComponent as DownloadActive } from '../styling/icons/button/download/white.svg'
-import { comet } from '../styling/variables'
+import { offColor } from '../styling/variables'
 import typographyStyles from '../components/typography/styles'
 
 import logsStyles from './Logs.styles'
 
-const { regularLabel } = typographyStyles
+const { p } = typographyStyles
 const { tableWrapper } = logsStyles
 
 const localStyles = {
@@ -28,8 +28,8 @@ const localStyles = {
     marginLeft: 0
   },
   serverVersion: {
-    extend: regularLabel,
-    color: comet,
+    extend: p,
+    color: offColor,
     margin: 'auto 0 auto 0'
   },
   headerLine2: {

new-lamassu-admin/src/styling/variables.js

@@ -35,6 +35,7 @@ const primaryColor = zodiac
 const secondaryColor = spring
 const secondaryColorDark = spring2
 const secondaryColorDarker = spring4
+const secondaryColorLighter = spring3
 
 const backgroundColor = ghost
 const subheaderColor = zircon
@@ -46,6 +47,7 @@ const offColor = comet
 const offDarkColor = comet2
 const placeholderColor = comet
 const errorColor = tomato
+const offErrorColor = mistyRose
 const inputBorderColor = primaryColor
 
 // General
@@ -121,6 +123,7 @@ export {
   secondaryColor,
   secondaryColorDark,
   secondaryColorDarker,
+  secondaryColorLighter,
   subheaderColor,
   subheaderDarkColor,
   backgroundColor,
@@ -132,6 +135,8 @@ export {
   disabledColor2,
   linkPrimaryColor,
   linkSecondaryColor,
+  errorColor,
+  offErrorColor,
 
   fontSize1,
   fontSize2,