refactor: make modals like widgets

src/components/modals/feedback/Feedback.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import './feedback.scss';
+
+export default function FeedbackModal(props) {
+  return (
+    <div className='feedback'>
+      <h1>{props.language.modals.feedback.title}</h1>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <label>{props.language.modals.feedback.question_one}</label>
+      <br/><br/>
+      <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+      <br/><br/>
+      <label>{props.language.modals.feedback.question_two}</label>
+      <br/><br/>
+      <input type='text'/>
+      <br/><br/>
+      <label>{props.language.modals.feedback.question_three}</label>
+      <br/><br/>
+      <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+      <br/><br/><br/>
+      <button>{props.language.modals.feedback.submit}</button>
+    </div>
+  );
+}

src/components/modals/feedback/feedback.scss

@@ -0,0 +1,54 @@
+@import '../main/scss/index.scss';
+
+#feedbackmodal {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 400px;
+  height: 100px;
+}
+
+.feedback {
+  width: 400px;
+  padding: 5px;
+
+  h1,
+  .closeModal {
+    font-size: 2.5em;
+  }
+
+  span {
+    font-size: 6em;
+  }
+
+  button {
+    width: 100%;
+    border-radius: 48px;
+    outline: none;
+    border: none;
+    padding: 15px 20px;
+    font-size: 1.5em;
+    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+    color: #ffffff;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  input[type=text] {
+    width: 100%;
+    font-size: 1em;
+  }
+
+  input[type=range] {
+    margin-left: 20px;
+    margin-right: 20px;
+    vertical-align: middle;
+  }
+
+  label.values {
+    font-weight: 700;
+  }
+}