Upgrade next

components/application/activity-select/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Icon, Drawer } from 'design'
 import { navigation } from 'texts'

components/application/index.jsx

@@ -6,7 +6,7 @@ import RepositorySelect from './repository-select'
 import ActivitySelect from './activity-select'
 import Head from './head'
 import Logout from './logout'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import activities from 'store/activities'
 

components/application/logout.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppBar } from '@oacore/design'
 
-import styles from './logout.css'
+import styles from './logout.module.css'
 
 import { withGlobalStore } from 'store'
 

components/application/repository-select.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AppBar } from '@oacore/design'
 import Router from 'next/router'
 
-import styles from './repository-select.css'
+import styles from './repository-select.module.css'
 
 import { withGlobalStore } from 'store'
 import { Select } from 'design'

components/document-link/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Button, Icon } from 'design'
 

components/forms/change-password/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { IframeForm } from 'components/forms'
 import { Card } from 'design'

components/forms/iframe-form.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useRef } from 'react'
 
 import { Card } from '../../design'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const IframeForm = ({ className, title, ...passProps }) => {
   const ref = useRef(null)

components/layout/app-bar.jsx

@@ -3,7 +3,7 @@ import { AppBar } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
 import LayoutContext from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { AppBarToggle, Logo } from 'design'
 

components/layout/container.jsx

@@ -2,7 +2,7 @@ import React, { useReducer } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import { Provider } from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const reducer = (state, action) => {
   switch (action.type) {

components/layout/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const Main = ({ children }) => {
   const child = React.Children.only(children)

components/layout/side-bar.jsx

@@ -3,7 +3,7 @@ import { AppBar } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
 import LayoutContext from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Logo, CloseIcon } from 'design'
 

components/layout/styles.css → components/layout/styles.module.css

@@ -1,12 +1,10 @@
-:root {
-  --side-bar-width: 13rem;
-  --app-bar-skip: 3.5rem;
-}
-
 @custom-media --screen-at-least-desktop (min-width: 728px);
 @custom-media --screen-until-desktop (max-width: 727px);
 
 .container {
+  --side-bar-width: 13rem;
+  --app-bar-skip: 3.5rem;
+
   display: flex;
   flex-direction: column;
   min-height: 100%;

components/loading-bar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const LoadingBar = ({ className, tag: Tag = 'div' }) => (
   <Tag className={classNames.use(styles.container).join(className)} />

components/performance-chart/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts'
 
 import NumericValue from '../numeric-value'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const PerformanceChart = ({ value, increase, caption }) => (
   <div className={styles.container}>

components/stacked-vertical-bar-chart/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const StackedVerticalBarChart = React.memo(({ data }) => {
   const [transformedData, setTransformedData] = useState([])

components/table/row.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 import { observer } from 'mobx-react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Table } from 'design'
 

components/table/sidebar.jsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { CloseIcon } from 'design'
 

components/table/styles.css → components/table/styles.module.css

@@ -1,8 +1,3 @@
-:root {
-  --table-sidebar-width: 30rem;
-  --table-border-color: var(--gray-200);
-}
-
 @custom-media --screen-at-least-desktop (min-width: 1200px);
 
 .detail-row {
@@ -13,6 +8,9 @@
 }
 
 .table {
+  --table-sidebar-width: 30rem;
+  --table-border-color: var(--gray-200);
+
   position: relative;
   right: 30rem;
   left: 0;

components/table/table.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 import NoDataFoundRow from './no-data-found-row'
 import TableRow from './row'
 import Sidebar from './sidebar'

components/takedown/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Button, Icon } from 'design'
 

components/time-lag-chart/index.jsx

@@ -13,7 +13,7 @@ import { nest } from 'd3-collection'
 import { sum, mean } from 'd3-array'
 
 import CustomTooltip from './tooltip'
-import styles from './index.css'
+import styles from './index.module.css'
 
 const customTicks = {
   ...Object.fromEntries(

components/time-lag-chart/tooltip.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Tooltip = ({ active, payload, label, aggregationSize }) => {
   const index = parseInt(label, 10) * aggregationSize

design/app-bar/toggle.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AppBar } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './toggle.css'
+import styles from './toggle.module.css'
 
 const Toggle = React.memo(({ className, tag = 'button', ...restProps }) => (
   <AppBar.Item

design/close-icon/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const CloseIcon = React.forwardRef(
   ({ className, tag: Tag = 'span', ...restProps }, ref) => (

design/drawer/item.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const FlatItem = ({
   children,

design/drawer/list.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const List = ({ children, className, tag: Tag = 'ul', ...restProps }) => (
   <Tag className={classNames.use(styles.list).join(className)} {...restProps}>

design/drawer/styles.css → design/drawer/styles.module.css

@@ -1,12 +1,10 @@
-:root {
+.list {
   --drawer-list-padding-y: calc(var(--component-padding-y, 1rem) / 2);
   --drawer-list-padding-x: calc(var(--component-padding-x, 1rem) / 2);
   --drawer-item-padding-y: calc(var(--component-padding-y, 1rem) / 2);
   --drawer-item-padding-x: calc(var(--component-padding-x, 1rem) / 2);
   --drawer-item-spacing: calc(var(--component-padding-x, 1rem) / 2);
-}
 
-.list {
   padding: var(--drawer-list-padding-y) var(--drawer-list-padding-x);
   margin: 0;
   line-height: 1;

design/logo/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import logoPath from './core-symbol.svg'
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Logo = React.memo(
   ({

design/numeral/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const Numeral = React.memo(
   ({ children, className, size, tag: Tag = 'div', ...restProps }) => (

design/numeral/styles.css → design/numeral/styles.module.css

@@ -1,11 +1,9 @@
-:root {
+.container {
   --numeral-value-sm-size: 2em;
   --numeral-value-md-size: 3em;
   --numeral-value-lg-size: 4em;
   --numeral-value-size: var(--numeral-value-md-size);
-}
 
-.container {
   /* For the future */
 }
 

design/overlay/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Overlay = ({
   children,

design/select/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 // TODO: Taken from @oacore/design
 const generateId = () => Math.random().toString(36).substr(2, 9)

design/select/styles.css → design/select/styles.module.css

@@ -1,9 +1,7 @@
-:root {
-  --select-background: var(--gray-50);
-}
-
 /* TODO: Better name, it's a div shown on top of input when not hovered */
 .input-container {
+  --select-background: var(--gray-50);
+
   position: absolute;
   top: 0;
   right: 0;