edit styles of graph controls

Mikheull · Jan 19, 2021 · 526aa6c · 526aa6c
1 parent 856bb22
commit 526aa6c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/components/NextDay.js b/components/NextDay.js
@@ -8,7 +8,7 @@ class NextDay extends Component {
     render() {
         return (
             <div onClick={this.props.addMethod}>
-                x
+                <img src="images/icons/arrow-right-circle.svg" alt=""/>
             </div>
         )
     }

diff --git a/components/PrevDay.js b/components/PrevDay.js
@@ -8,7 +8,7 @@ class PrevDay extends Component {
     render() {
         return (
             <div onClick={this.props.remMethod}>
-                x
+                <img src="images/icons/arrow-left-circle.svg" alt=""/>
             </div>
         )
     }

diff --git a/components/Stats.js b/components/Stats.js
@@ -120,9 +120,11 @@ class Stats extends Component {
         return (
             <section>
                 <Line data={data} options={options} />
-                <p>{this.state.date_query}</p>
-                <PrevDay remMethod={() => this.remDay()} />
-                <NextDay addMethod={() => this.addDay()} />
+                <p className="statsTitle">{this.state.date_query}</p>
+                <div className="statsControll">
+                  <PrevDay remMethod={() => this.remDay()} />
+                  <NextDay addMethod={() => this.addDay()} />
+                </div>
             </section>
         )
     }

diff --git a/public/images/icons/arrow-left-circle.svg b/public/images/icons/arrow-left-circle.svg
diff --git a/public/images/icons/arrow-right-circle.svg b/public/images/icons/arrow-right-circle.svg
diff --git a/public/styles/map.module.css b/public/styles/map.module.css
@@ -54,7 +54,6 @@ body {margin: 0;padding: 0;}
 .station_details .header .title {
     position: absolute;
     bottom: 90px;
-    width: 100%;
     padding: 0 20px;
 }
 .station_details .header .affluence {
@@ -147,4 +146,19 @@ body {margin: 0;padding: 0;}
     height: 200px;
     overflow: scroll;
     color: #FFF;
+}
+
+
+.statsTitle {
+    text-align: center;
+    color: #FFF;
+    font-weight: bold;
+}
+.statsControll {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+.statsControll div {
+   cursor: pointer;
 }