diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-05-11 15:40:11 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-05-12 22:50:49 +0200 |
| commit | 873ddacf5abafe43fbc2b6c1033e473c3366dc62 (patch) | |
| tree | a2cc2ec17c7356a6097febfc648e3222617f7cac /opendc-web/opendc-web-ui/src/components/projects | |
| parent | 1ce710ebaa8b071a3b30447d431f4af422f25156 (diff) | |
ui: Move component styling into CSS modules
This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.
These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/projects')
3 files changed, 9 insertions, 7 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js index 2b9795d0..89b483fb 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js @@ -1,9 +1,9 @@ import React from 'react' import FilterLink from '../../containers/projects/FilterLink' -import './FilterPanel.sass' +import { filterPanel } from './FilterPanel.module.scss' const FilterPanel = () => ( - <div className="btn-group filter-panel mb-2"> + <div className={`btn-group ${filterPanel} mb-2`}> <FilterLink filter="SHOW_ALL">All Projects</FilterLink> <FilterLink filter="SHOW_OWN">My Projects</FilterLink> <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss new file mode 100644 index 00000000..79cdf81a --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss @@ -0,0 +1,7 @@ +.filterPanel { + display: flex; + + button { + flex: 1 !important; + } +} diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass deleted file mode 100644 index f71cf6c8..00000000 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass +++ /dev/null @@ -1,5 +0,0 @@ -.filter-panel - display: flex - - button - flex: 1 !important |