feat: switch to css-in-js (#386)

* feat: switch to css-in-js

* fix: match cypress to new classes

cypress/integration/gh-issue-open.spec.ts

@@ -8,6 +8,6 @@ describe( 'Line Options', () => {
 
   it( '3 Dots Menu', () => {
     cy.get( '[data-cy=menu-button-dots]' ).click()
-    cy.matchValue( '.menu-item', 'Report an issue' )
+    cy.matchValue( '.cy-menu-item', 'Report an issue' )
   } )
 } )

cypress/support/commands.ts

@@ -14,10 +14,10 @@ Cypress.Commands.add( 'goToNextLine', ( matchValue ) => {
 
 Cypress.Commands.add( 'goToSourceView', ( matchValue ) => {
   cy.get( '[data-cy=go-to-home-button]' ).click()
-  cy.matchValue( '.line', matchValue )
+  cy.matchValue( '.cy-line', matchValue )
 } )
 
 Cypress.Commands.add( 'goToLineViewer', ( matchValue ) => {
   cy.url().should( 'include', '/view' )
-  cy.matchValue( ':nth-child(1) > .source-name', matchValue )
+  cy.matchValue( ':nth-child(1) > .cy-source-name', matchValue )
 } )

frontend/src/App.css

@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=Mukta+Mahee:wght@400;500');
+@import url('https://fonts.googleapis.com/css2?family=Mukta+Mahee:wght@300;400;500&display=swap');
 @import url('./fonts/OpenGurbaniAkhar/index.css');

frontend/src/components/Button.tsx

@@ -4,7 +4,7 @@ import { createUseStyles } from 'react-jss'
 const useStyles = createUseStyles( {
   button: {
     textDecoration: 'none',
-    color: 'rgb(0% 50.81% 67.85%)',
+    color: 'rgb(0% 49.83% 75.18%)', // lch(50% 66 255)
     boxSizing: 'border-box',
     minWidth: '3rem',
     minHeight: '3rem',

frontend/src/components/Error.tsx

@@ -1,19 +1,42 @@
-import './Error.css'
-
 import { AlertCircle } from 'lucide-react'
+import { createUseStyles } from 'react-jss'
+
+const useStyles = createUseStyles( {
+  error: {
+    fontSize: '100px',
+    color: 'rgba(255, 0, 50, 0.8)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: '19px',
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  errorDetails: {
+    fontSize: '20px',
+    outline: 'none',
+    cursor: 'pointer',
+  },
+} )
 
 type ErrProps = {
   err: {
     message: string,
   },
 }
 
-const Err = ( { err: { message } }: ErrProps ) => (
-  <div className="error">
-    <AlertCircle />
-    <p className="text">Oh no! Looks like something went wrong.</p>
-    <details>{message}</details>
-  </div>
-)
+const Err = ( { err: { message } }: ErrProps ) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.error}>
+      <AlertCircle />
+      <p className={classes.errorText}>Oh no! Looks like something went wrong.</p>
+      <details className={classes.errorDetails}>{message}</details>
+    </div>
+  )
+}
 
 export default Err

frontend/src/components/Loader.tsx

@@ -1,16 +1,66 @@
-import './Loader.css'
+import { createUseStyles } from 'react-jss'
 
 type LoaderProps = {
   size?: string,
 }
 
-const Loader = ( { size: fontSize = '100px' }: LoaderProps ) => (
-  <div className="lds-ring" style={{ fontSize }}>
-    <div />
-    <div />
-    <div />
-    <div />
-  </div>
-)
+const useStyles = createUseStyles( {
+  ring: {
+    display: 'inline-block',
+    position: 'relative',
+    fontSize: '1rem',
+    width: '1em',
+    height: '1em',
+  },
+
+  div: {
+    boxSizing: 'border-box',
+    display: 'block',
+    position: 'absolute',
+    width: '1em',
+    height: '1em',
+    border: '0.2rem solid',
+    borderColor: '#db5c87 transparent transparent transparent',
+    borderRadius: '50%',
+    animationName: '$ring',
+    animation: '$ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite',
+
+    '&:nth-child(1)': {
+      animationDelay: '-0.45s',
+    },
+
+    '&:nth-child(2)': {
+      animationDelay: '-0.3s',
+    },
+
+    '&:nth-child(3)': {
+      animationDelay: '-0.15s',
+    },
+  },
+
+  '@keyframes ring': {
+
+    from: {
+      transform: 'rotate(0deg)',
+    },
+
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+} )
+
+const Loader = ( { size: fontSize = '1rem' }: LoaderProps ) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.ring} style={{ fontSize }}>
+      <div className={classes.div} />
+      <div className={classes.div} />
+      <div className={classes.div} />
+      <div className={classes.div} />
+    </div>
+  )
+}
 
 export default Loader

frontend/src/components/Menu.tsx

@@ -1,12 +1,25 @@
-import './Menu.css'
-
 import classNames from 'classnames'
 import { HTMLAttributes } from 'react'
+import { createUseStyles } from 'react-jss'
+
+const useStyles = createUseStyles( {
+  menu: {
+    listStyle: 'none',
+    background: '#ffffff',
+    border: '1px solid #c4c4c4',
+    padding: '0',
+  },
+
+} )
 
 type MenuProps = {
   className?: string,
 } & HTMLAttributes<HTMLUListElement>
 
-const Menu = ( { className, ...props }: MenuProps ) => <ul className={classNames( className, 'menu' )} {...props} />
+const Menu = ( { className, ...props }: MenuProps ) => {
+  const classes = useStyles()
+
+  return <ul className={classNames( className, classes.menu )} {...props} />
+}
 
 export default Menu

frontend/src/components/MenuItem.tsx

@@ -1,12 +1,25 @@
-import './MenuItem.css'
-
 import classNames from 'classnames'
 import { HTMLAttributes } from 'react'
+import { createUseStyles } from 'react-jss'
+
+const useStyles = createUseStyles( {
+  menuItem: {
+    padding: '1em',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: '#dddddd',
+    },
+  },
+} )
 
 type MenuItemProps = {
   className?: string,
 } & HTMLAttributes<HTMLLIElement>
 
-const MenuItem = ( { className, ...props }: MenuItemProps ) => <li className={classNames( className, 'menu-item' )} {...props} />
+const MenuItem = ( { className, ...props }: MenuItemProps ) => {
+  const classes = useStyles()
+
+  return <li className={classNames( className, 'cy-menu-item', classes.menuItem )} {...props} />
+}
 
 export default MenuItem