style: fix uptime chip style

style: reduced the dropdown border-radius from 16px to 8px only when it's open

feat: scroll the table back up with a log level filter change

fix: dropdown border-radius bottom was still 16px instead of 8px when
opened

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

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core'
-import classnames from 'classnames'
+import Chip from '@material-ui/core/Chip'
 import * as R from 'ramda'
 import React from 'react'
 
@@ -8,13 +8,27 @@ import {
   secondaryColorDarker,
   offErrorColor,
   errorColor,
-  offColor
+  offColor,
+  inputFontWeight,
+  smallestFontSize,
+  inputFontFamily,
+  spacer
 } from 'src/styling/variables'
 import { onlyFirstToUpper } from 'src/utils/string'
 
 import typographyStyles from './typography/styles'
 const { label1 } = typographyStyles
 
+const colors = {
+  running: secondaryColorDarker,
+  notRunning: offErrorColor
+}
+
+const backgroundColors = {
+  running: secondaryColorLighter,
+  notRunning: errorColor
+}
+
 const styles = {
   uptimeContainer: {
     display: 'inline-block',
@@ -25,34 +39,33 @@ const styles = {
     extend: label1,
     paddingLeft: 4,
     color: offColor
-  },
-  uptime: {
-    extend: label1,
-    height: 24,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  running: {
-    backgroundColor: secondaryColorLighter,
-    color: secondaryColorDarker
-  },
-  notRunning: {
-    backgroundColor: offErrorColor,
-    color: errorColor
   }
 }
 
 const useStyles = makeStyles(styles)
 
+const useChipStyles = makeStyles({
+  root: {
+    borderRadius: spacer / 2,
+    marginTop: spacer / 2,
+    marginRight: spacer / 4,
+    marginBottom: spacer / 2,
+    marginLeft: spacer / 4,
+    height: spacer * 3,
+    backgroundColor: ({ type }) => backgroundColors[type]
+  },
+  label: {
+    fontSize: smallestFontSize,
+    fontWeight: inputFontWeight,
+    fontFamily: inputFontFamily,
+    padding: [[spacer / 2, spacer]],
+    color: ({ type }) => colors[type]
+  }
+})
+
 const Uptime = ({ process, ...props }) => {
   const classes = useStyles()
 
-  const uptimeClassNames = {
-    [classes.uptime]: true,
-    [classes.running]: process.state === 'RUNNING',
-    [classes.notRunning]: process.state !== 'RUNNING'
-  }
   const uptime = time => {
     if (time < 60) return `${time}s`
     if (time < 3600) return `${Math.floor(time / 60)}m`
@@ -63,11 +76,16 @@ const Uptime = ({ process, ...props }) => {
   return (
     <div className={classes.uptimeContainer}>
       <div className={classes.name}>{R.toLower(process.name)}</div>
-      <div className={classnames(uptimeClassNames)}>
+      <Chip
-        {process.state === 'RUNNING'
+        label={
-          ? `Running for ${uptime(process.uptime)}`
+          process.state === 'RUNNING'
-          : onlyFirstToUpper(process.state)}
+            ? `Running for ${uptime(process.uptime)}`
-      </div>
+            : onlyFirstToUpper(process.state)
+        }
+        classes={useChipStyles({
+          type: process.state === 'RUNNING' ? 'running' : 'notRunning'
+        })}
+      />
     </div>
   )
 }

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

@@ -42,7 +42,7 @@ export default {
       margin: 0,
       borderTop: 0,
       padding: 0,
-      borderRadius: [[0, 0, 16, 16]],
+      borderRadius: [[0, 0, 8, 8]],
       backgroundColor: subheaderColor,
       outline: '0 none',
       '& li': {
@@ -90,7 +90,7 @@ export default {
   },
   open: {
     '& button': {
-      borderRadius: [[16, 16, 0, 0]]
+      borderRadius: [[8, 8, 0, 0]]
     }
   }
 }

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
 import moment from 'moment'
 import * as R from 'ramda'
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Title from 'src/components/Title'
@@ -87,6 +87,8 @@ const SUPPORT_LOGS = gql`
 const Logs = () => {
   const classes = useStyles()
 
+  const tableEl = useRef()
+
   const [saveMessage, setSaveMessage] = useState(null)
   const [logLevel, setLogLevel] = useState(SHOW_ALL)
 
@@ -109,6 +111,12 @@ const Logs = () => {
     R.path(['serverLogs'])
   )
 
+  const handleLogLevelChange = logLevel => {
+    if (tableEl.current) tableEl.current.scrollTo(0, 0)
+
+    setLogLevel(logLevel)
+  }
+
   return (
     <>
       <div className={classes.titleWrapper}>
@@ -141,7 +149,7 @@ const Logs = () => {
       <div className={classes.headerLine2}>
         {data && (
           <Select
-            onSelectedItemChange={setLogLevel}
+            onSelectedItemChange={handleLogLevelChange}
             label="Level"
             items={getLogLevels(data)}
             default={SHOW_ALL}
@@ -156,7 +164,7 @@ const Logs = () => {
         </div>
       </div>
       <div className={classes.wrapper}>
-        <div className={classes.serverTableWrapper}>
+        <div ref={tableEl} className={classes.serverTableWrapper}>
           <Table className={classes.table}>
             <TableHead>
               <TableRow header>