From 86c6c541a86e630b97fcaa45fbc2451f0bf29721 Mon Sep 17 00:00:00 2001
From: Michael Kurz <michael.kurz@student.tuwien.ac.at>
Date: Wed, 13 Apr 2022 21:10:38 +0200
Subject: [PATCH] #38: add styling to config components

---
 .../visualizations/team-awareness/config.js   | 33 +++++++++++--------
 .../visualizations/team-awareness/config.scss |  3 --
 .../visualizations/team-awareness/styles.scss | 13 ++++++++
 3 files changed, 33 insertions(+), 16 deletions(-)
 delete mode 100644 ui/src/visualizations/team-awareness/config.scss
 create mode 100644 ui/src/visualizations/team-awareness/styles.scss

diff --git a/ui/src/visualizations/team-awareness/config.js b/ui/src/visualizations/team-awareness/config.js
index 3e6d83ce..5705b4e0 100644
--- a/ui/src/visualizations/team-awareness/config.js
+++ b/ui/src/visualizations/team-awareness/config.js
@@ -7,7 +7,7 @@ import * as d3 from 'd3';
 import { getState } from './util/util';
 import _ from 'lodash';
 import ActivityTimeline from './components/Timeline/ActivityTimeline';
-import styles from './config.scss';
+import styles from './styles.scss';
 
 const mapStateToProps = (appState /*, ownProps*/) => {
   const { config, data } = getState(appState);
@@ -34,23 +34,30 @@ class ConfigComponent extends React.Component {
   }
 
   render() {
-    const { onActivityDimensionsRestricted, onSelectActivityScale } = this.props;
+    const { onActivityDimensionsRestricted, onSelectActivityScale, config } = this.props;
     const { activityTimeline, yDims } = this.props.data;
     return (
       <div className={styles.configContainer}>
-        <div>
-          <div>Activity:</div>
-          <div>
-            <select value={this.props.config.selectedActivityScale} onChange={value => onSelectActivityScale(value)}>
-              <option value="commits">Commits</option>
-              <option value="activity">Additions & Deletions</option>
-              <option value="additions">Additions</option>
-              <option value="deletions">Deletions</option>
-            </select>
+        <form>
+          <div className="field">
+            <label className="label">Activity</label>
+            <div className="control">
+              <div className={'select ' + styles.activitySelect}>
+                <select
+                  className={styles.activitySelect}
+                  value={config.selectedActivityScale}
+                  onChange={value => onSelectActivityScale(value)}>
+                  <option value="commits">Commits</option>
+                  <option value="activity">Additions & Deletions</option>
+                  <option value="additions">Additions</option>
+                  <option value="deletions">Deletions</option>
+                </select>
+              </div>
+            </div>
           </div>
-        </div>
+        </form>
         <div>
-          <div>Timeline</div>
+          <label className="label">Timeline</label>
           <ActivityTimeline
             palette={{ activity: '#00bcd4' }}
             paddings={{ top: 20, left: 25, bottom: 30, right: 30 }}
diff --git a/ui/src/visualizations/team-awareness/config.scss b/ui/src/visualizations/team-awareness/config.scss
deleted file mode 100644
index 42d1787c..00000000
--- a/ui/src/visualizations/team-awareness/config.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.configContainer {
-  width: 100%;
-}
diff --git a/ui/src/visualizations/team-awareness/styles.scss b/ui/src/visualizations/team-awareness/styles.scss
new file mode 100644
index 00000000..2dff22a3
--- /dev/null
+++ b/ui/src/visualizations/team-awareness/styles.scss
@@ -0,0 +1,13 @@
+@import '~bulma';
+
+.configContainer {
+  width: 100%;
+
+  .select {
+    display: block;
+  }
+}
+
+.activitySelect {
+  width:100%;
+}