partial: Funding and Logs pages

new-lamassu-admin/src/pages/Funding.jsx

@@ -1,6 +1,5 @@
 import { useQuery, gql } from '@apollo/client'
 import { formatCryptoAddress } from '@lamassu/coins/lightUtils'
-import { makeStyles } from '@mui/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
 import { format } from 'date-fns/fp'
@@ -23,12 +22,11 @@ import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
 
 import { primaryColor } from 'src/styling/variables'
 
-import styles from './Funding.styles'
+import classes from './Funding.module.css'
 
 const NODE_NOT_CONNECTED_ERR =
   "Couldn't establish connection with the node. Make sure it is installed and try again"
 
-const useStyles = makeStyles(styles)
 const sizes = {
   big: 165,
   time: 140,
@@ -79,7 +77,6 @@ const getPendingTotal = list => {
 const Funding = () => {
   const [selected, setSelected] = useState(null)
   const [viewHistory] = useState(false)
-  const classes = useStyles()
   const fundingHistory = [
     {
       cryptoAmount: 2.0,
@@ -194,7 +191,7 @@ const Funding = () => {
                 <Info1 inline noMargin>
                   {`${selected.confirmedBalance} ${selected.cryptoCode}`}
                 </Info1>
-                <Info2 inline noMargin className={classes.leftSpacer}>
+                <Info2 inline noMargin className="ml-2">
                   {`(${signIfPositive(selected.pending)} ${
                     selected.pending
                   } pending)`}
@@ -207,7 +204,7 @@ const Funding = () => {
                     selected.fiatCode
                   }`}
                 </Info3>
-                <Label3 inline noMargin className={classes.leftSpacer}>
+                <Label3 inline noMargin className="ml-2">
                   {`(${signIfPositive(selected.fiatPending)} ${formatNumber(
                     selected.fiatPending
                   )} pending)`}

new-lamassu-admin/src/pages/Funding.module.css

@@ -0,0 +1,107 @@
+.wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+}
+
+.firstSide {
+  margin: 0 64px 0 48px;
+}
+
+.secondSide {
+  margin-top: -29px;
+}
+
+.error {
+  color: var(--tomato);
+}
+
+.coinTotal {
+  margin: 12px 0;
+}
+
+.topSpacer {
+  margin-top: 40px;
+}
+
+.addressWrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: var(--zircon);
+}
+
+.address {
+  width: 375px;
+  margin: 12px 24px;
+}
+
+.itemWrapper {
+  text-align: end;
+}
+
+.item {
+  font-family: var(--museo);
+  font-size: 14px;
+  font-weight: 500;
+  margin: 2px;
+}
+
+.inactiveItem {
+  color: var(--comet);
+}
+
+.firstItem {
+  font-weight: 700;
+  margin: 2px;
+}
+
+.total {
+  margin-top: auto;
+  text-align: right;
+  margin-right: 24px;
+}
+
+.totalPending {
+  margin-top: 2px;
+}
+
+.totalTitle {
+  color: var(--comet);
+  margin-bottom: 2px;
+}
+
+.table {
+  margin-top: 8px;
+  margin-left: 48px;
+}
+
+.tableLabel {
+  justify-content: end;
+  margin-top: -38px;
+}
+
+.pending {
+  background-color: var(--zircon);
+}
+
+.copyToClipboard {
+  margin-left: auto;
+  padding-top: 6px;
+  padding-left: 15px;
+  margin-right: -11px;
+}
+
+.mono {
+  font-family: var(--bpmono);
+  font-size: 14px;
+  font-weight: 400;
+  width: 375px;
+  margin: 12px 24px;
+}

new-lamassu-admin/src/pages/Funding.styles.js

@@ -1,100 +0,0 @@
-import typographyStyles from 'src/components/typography/styles'
-import {
-  disabledColor2,
-  spacer,
-  subheaderColor,
-  errorColor,
-  placeholderColor,
-  comet
-} from 'src/styling/variables'
-
-const { label1, mono } = typographyStyles
-
-export default {
-  wrapper: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'row',
-    height: '100%'
-  },
-  main: {
-    display: 'flex',
-    flex: 1
-  },
-  firstSide: {
-    margin: `0 ${spacer * 8}px 0 ${spacer * 6}px`
-  },
-  secondSide: {
-    marginTop: -29
-  },
-  error: {
-    color: errorColor
-  },
-  coinTotal: {
-    margin: `${spacer * 1.5}px 0`
-  },
-  leftSpacer: {
-    marginLeft: spacer
-  },
-  topSpacer: {
-    marginTop: spacer * 5
-  },
-  addressWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    backgroundColor: subheaderColor
-  },
-  address: {
-    width: 375,
-    margin: `${spacer * 1.5}px ${spacer * 3}px`
-  },
-  itemWrapper: {
-    textAlign: 'end'
-  },
-  item: {
-    extend: label1,
-    margin: 2
-  },
-  inactiveItem: {
-    color: comet
-  },
-  firstItem: {
-    fontWeight: 700,
-    margin: 2
-  },
-  total: {
-    marginTop: 'auto',
-    textAlign: 'right',
-    marginRight: 24
-  },
-  totalPending: {
-    marginTop: 2
-  },
-  totalTitle: {
-    color: placeholderColor,
-    marginBottom: 2
-  },
-  table: {
-    marginTop: spacer,
-    marginLeft: spacer * 6
-  },
-  tableLabel: {
-    justifyContent: 'end',
-    marginTop: -38
-  },
-  pending: {
-    backgroundColor: disabledColor2
-  },
-  copyToClipboard: {
-    marginLeft: 'auto',
-    paddingTop: 6,
-    paddingLeft: 15,
-    marginRight: -11
-  },
-  mono: {
-    extend: mono,
-    width: 375,
-    margin: `${spacer * 1.5}px ${spacer * 3}px`
-  }
-}

new-lamassu-admin/src/pages/Logs.module.css

@@ -0,0 +1,74 @@
+.titleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+
+.wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.tableWrapper {
+  flex: 1;
+  margin-left: 40px;
+  display: block;
+  overflow-x: auto;
+  width: 100%;
+  max-width: 78%;
+  max-height: 70vh;
+}
+
+.table {
+  white-space: nowrap;
+  display: block;
+}
+
+.table th {
+  position: sticky;
+  top: 0;
+}
+
+.dateColumn {
+  min-width: 160px;
+}
+
+.levelColumn {
+  min-width: 100px;
+}
+
+.fillColumn {
+  width: 100%;
+}
+
+.shareButton {
+  margin: 8px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  padding: 0 12px;
+}
+
+.shareIcon {
+  margin-right: 6px;
+}
+
+.button {
+  margin: 8px;
+}
+
+.titleAndButtonsContainer {
+  display: flex;
+}
+
+.buttonsWrapper {
+  display: flex;
+  margin-left: 16px;
+}
+
+.buttonsWrapper > * {
+  margin: auto 6px;
+}

new-lamassu-admin/src/pages/Logs.styles.js

@@ -1,65 +0,0 @@
-import { fontSize5 } from 'src/styling/variables'
-
-export default {
-  titleWrapper: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  wrapper: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'row',
-    height: '100%'
-  },
-  tableWrapper: {
-    flex: 1,
-    marginLeft: 40,
-    display: 'block',
-    overflowX: 'auto',
-    width: '100%',
-    maxWidth: '78%',
-    maxHeight: '70vh'
-  },
-  table: {
-    whiteSpace: 'nowrap',
-    display: 'block',
-    '& th': {
-      position: 'sticky',
-      top: 0
-    }
-  },
-  dateColumn: {
-    minWidth: 160
-  },
-  levelColumn: {
-    minWidth: 100
-  },
-  fillColumn: {
-    width: '100%'
-  },
-  shareButton: {
-    margin: 8,
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: fontSize5,
-    padding: [[0, 12]]
-  },
-  shareIcon: {
-    marginRight: 6
-  },
-  button: {
-    margin: 8
-  },
-  titleAndButtonsContainer: {
-    display: 'flex'
-  },
-  buttonsWrapper: {
-    display: 'flex',
-    marginLeft: 16,
-    '& > *': {
-      margin: 'auto 6px'
-    }
-  }
-}

new-lamassu-admin/src/pages/MachineLogs.jsx

@@ -1,5 +1,4 @@
 import { useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
@@ -17,9 +16,7 @@ import {
 } from 'src/components/table'
 import { formatDate } from 'src/utils/timezones'
 
-import styles from './Logs.styles'
+import classes from './Logs.module.css'
-
-const useStyles = makeStyles(styles)
 
 const GET_MACHINES = gql`
   {
@@ -73,8 +70,6 @@ const GET_DATA = gql`
 `
 
 const Logs = () => {
-  const classes = useStyles()
-
   const [selected, setSelected] = useState(null)
   const [saveMessage, setSaveMessage] = useState(null)
 

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.styles.js

@@ -1,90 +0,0 @@
-import typographyStyles from 'src/components/typography/styles'
-import baseStyles from 'src/pages/Logs.styles'
-import { offColor, white } from 'src/styling/variables'
-
-const { label1, mono, p } = typographyStyles
-const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
-
-const cpcStyles = {
-  wrapper: {
-    extend: mono,
-    display: 'flex',
-    alignItems: 'center',
-    height: 32
-  },
-  address: {
-    lineBreak: 'anywhere'
-  },
-  buttonWrapper: {
-    '& button': {
-      border: 'none',
-      backgroundColor: 'transparent',
-      cursor: 'pointer'
-    }
-  },
-  popoverContent: {
-    extend: label1,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: white,
-    borderRadius: 4,
-    padding: [[5, 9]]
-  }
-}
-
-const detailsRowStyles = {
-  idCardDataCard: {
-    extend: p,
-    display: 'flex',
-    padding: [[11, 8]],
-    '& > div': {
-      display: 'flex',
-      flexDirection: 'column',
-      '& > div': {
-        width: 144,
-        height: 37,
-        marginBottom: 15,
-        '&:last-child': {
-          marginBottom: 0
-        }
-      }
-    }
-  }
-}
-
-const labelStyles = {
-  label: {
-    extend: label1,
-    color: offColor,
-    marginBottom: 4
-  }
-}
-
-const mainStyles = {
-  titleWrapper,
-  titleAndButtonsContainer,
-  buttonsWrapper,
-  headerLabels: {
-    display: 'flex',
-    flexDirection: 'row',
-    '& div': {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    '& > div:first-child': {
-      marginRight: 24
-    },
-    '& span': {
-      extend: label1,
-      marginLeft: 6
-    }
-  },
-  overflowTd: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  }
-}
-
-export { cpcStyles, detailsRowStyles, labelStyles, mainStyles }

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

@@ -1,5 +1,4 @@
-import { useQuery, gql } from "@apollo/client";
+import { useQuery, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, useRef } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
@@ -16,47 +15,23 @@ import {
   TableBody,
   TableCell
 } from 'src/components/table'
-import typographyStyles from 'src/components/typography/styles'
-import { offColor } from 'src/styling/variables'
 import { startCase } from 'src/utils/string'
 import { formatDate } from 'src/utils/timezones'
 
-import logsStyles from './Logs.styles'
+import logsClasses from './Logs.module.css'
-
+import classes from './ServerLogs.module.css'
-const { p } = typographyStyles
-const { tableWrapper } = logsStyles
-
-const localStyles = {
-  serverTableWrapper: {
-    extend: tableWrapper,
-    maxWidth: '100%',
-    marginLeft: 0
-  },
-  serverVersion: {
-    extend: p,
-    color: offColor,
-    margin: 'auto 0 auto 0'
-  },
-  headerLine2: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: 24
-  },
-  uptimeContainer: {
-    margin: 'auto 0 auto 0'
-  }
-}
-
-const styles = R.merge(logsStyles, localStyles)
-
-const useStyles = makeStyles(styles)
 
 const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' }
 
 const NUM_LOG_RESULTS = 500
 
 const GET_CSV = gql`
-  query ServerData($limit: Int, $from: DateTimeISO, $until: DateTimeISO, $timezone: String) {
+  query ServerData(
+    $limit: Int
+    $from: DateTimeISO
+    $until: DateTimeISO
+    $timezone: String
+  ) {
     serverLogsCsv(
       limit: $limit
       from: $from
@@ -90,8 +65,6 @@ const GET_DATA = gql`
 `
 
 const Logs = () => {
-  const classes = useStyles()
-
   const tableEl = useRef()
 
   const [saveMessage, setSaveMessage] = useState(null)
@@ -135,11 +108,11 @@ const Logs = () => {
 
   return (
     <>
-      <div className={classes.titleWrapper}>
+      <div className={logsClasses.titleWrapper}>
-        <div className={classes.titleAndButtonsContainer}>
+        <div className={logsClasses.titleAndButtonsContainer}>
           <Title>Server</Title>
           {data && (
-            <div className={classes.buttonsWrapper}>
+            <div className={logsClasses.buttonsWrapper}>
               <LogsDowloaderPopover
                 title="Download logs"
                 name="server-logs"
@@ -174,14 +147,18 @@ const Logs = () => {
             ))}
         </div>
       </div>
-      <div className={classes.wrapper}>
+      <div className={logsClasses.wrapper}>
         <div ref={tableEl} className={classes.serverTableWrapper}>
-          <Table className={classes.table}>
+          <Table className={logsClasses.table}>
             <TableHead>
               <TableRow header>
-                <TableHeader className={classes.dateColumn}>Date</TableHeader>
+                <TableHeader className={logsClasses.dateColumn}>
-                <TableHeader className={classes.levelColumn}>Level</TableHeader>
+                  Date
-                <TableHeader className={classes.fillColumn} />
+                </TableHeader>
+                <TableHeader className={logsClasses.levelColumn}>
+                  Level
+                </TableHeader>
+                <TableHeader className={logsClasses.fillColumn} />
               </TableRow>
             </TableHead>
             <TableBody>

new-lamassu-admin/src/pages/ServerLogs.module.css

@@ -0,0 +1,20 @@
+.serverTableWrapper {
+  composes: tableWrapper from './Logs.module.css';
+  max-width: 100%;
+  margin-left: 0;
+}
+
+.serverVersion {
+  color: var(--comet);
+  margin: auto 0 auto 0;
+}
+
+.headerLine2 {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.uptimeContainer {
+  margin: auto 0 auto 0;
+}