new css in Question page, add question counter

user-frontend/src/components/DemoQuestion.js

 import React, { useRef, useState } from 'react';
 import Likert from './likert.js';
-import unisport_logo from './images/logo_unisport.png';
-
+//import PropTypes from 'prop-types';
+//import unisport_logo from './logo_unisport.png';
 
 const likertOptions = {
-    question: "Ich würde am liebsten gemeinsam mit anderen trainieren. Teamgeist und Wir-Gefühl sind für mich beim Sport eine große Motivation.",
+  question:
+    'Ich würde am liebsten gemeinsam mit anderen trainieren. Teamgeist und Wir-Gefühl sind für mich beim Sport eine große Motivation.',
   responses: [
-    { value: 0, text: "Stimme nicht zu" },
-    { value: 1, text: "Stimme eher nicht zu" },
-    { value: 2, text: "Stimme eher zu"},
-    { value: 3, text: "Stimme zu" }
-    ],
+    { value: 0, text: 'Stimme nicht zu' },
+    { value: 1, text: 'Stimme eher nicht zu' },
+    { value: 2, text: 'Stimme eher zu' },
+    { value: 3, text: 'Stimme zu' }
+  ]
+};
+const counter = {
+  backgroundColor: '#F0F0F0',
+  color: '#8192A6',
+  padding: '10px',
+  width: '164px',
+  height: '50px',
+  borderRadius: '0.5em',
+  fontFamily: 'Roboto',
+  fontSize: '22px',
+  position: 'relativ',
+  display: 'block',
+  alignItems: 'center',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  textAlign: 'center'
 };
 
-export default function DemoQuestion() {
-  let style = {
-        uniSportLogoStyle :
-        {
-            width : '163px',
-            height : '72px',
-        }
-      }
-        
+export default function DemoInsteracion() {
   const refLikert = useRef(null);
   const [chosen, setChosen] = useState(null);
 
-  const onChange = (chosen) => {
-    const content = (
-      <span>
-        You chose:{" "}
-        <strong>
-          {chosen?.value}—{chosen?.text}
-        </strong>
-      </span>
-    );
-    setChosen(content);
-  };
-
   const getAlertMessage = () => {
     const rect = refLikert.current.getBoundingClientRect();
     return `This demonstrates how you can get access to the underlying DOM element.
@@ -46,27 +43,46 @@ and ${parseInt(rect.height)}px tall.`;
   };
 
   return (
-    <>
-      <question>Question </question>
+    <div className='app'>
+      <h4 style={counter}> Frage 1/10 </h4>
       <Likert
         {...likertOptions}
-        onChange={onChange}
+        id='q1'
+        onClick={() => {}}
+        //onChange={props.onAnswerSelected}
         ref={refLikert}
-        className= 'withBorder'
+        className='question_likert'
       />
-      <p style={{ textAlign: 'center' }}>
-          {chosen}
-      </p>
-      <style>{`
-        .withBorder {
+      <p style={{ textAlign: 'center' }}>{chosen}</p>
+      <style>
+        {`
+        .app {
           color: #003466;
-          padding: 2em;
+          padding: 1em;
+          border: thin solid darkgray;
+          margin: 1.5em;
+          border-radius: 0.5em;
           font-family: roboto-bold, sans-serif;
+          font-size: 50px;
           font-weight: 700;
-          height: 315px;
-          min-height: 420px;
-          width: 702px;
-      `}</style>
-    </>
+          align-items: center;
+          left: Thank 30%;
+          display: 'block',
+          justify-content: center;
+        }
+        .likertText {
+          color: #6B9E1F;
+          display: inline-block;
+          font-family: roboto-normal, sans-serif;
+          font-size: 20px;
+          padding-top: 1em;
+          padding-left: 0.4em;
+          padding-right: 0.4em;
+          width: 100%;
+          box-sizing: border-box;
+        }
+      `}
+      </style>
+    </div>
   );
 }

user-frontend/src/components/QuestionCount.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+function QuestionCount(props) {
+  return (
+    <div className="questionCount">
+      Question <span>{props.counter}</span> of <span>{props.total}</span>
+    </div>
+  );
+}
+
+QuestionCount.propTypes = {
+  counter: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+};
+
+export default QuestionCount;

user-frontend/src/components/likert.css

+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
+
 .likertScale {
   margin-bottom: 1em;
   border: none;
@@ -18,10 +20,9 @@
   flex-grow: 4; /* This can get overridden by the “flexible” prop. */
   flex-shrink: 0;
   flex-basis: auto;
-
   display: flex;
-  padding-top: 2em;
-  padding-bottom: 1em;
+  padding-top: 1.5em;
+  padding-bottom: 0.5em;
 }
 .layout--stacked .likertBand {
   align-self: stretch;
@@ -38,7 +39,7 @@
   display: inline-block;
   width: 50%;
   vertical-align: top;
-  margin-top: 1em;
+  margin-top: 0.3em;
   border-top: 2px solid #99cc01;
 }
 .likertResponse:first-child .likertLine:first-child {
@@ -72,7 +73,9 @@
 }
 .likertText {
   display: inline-block;
-  padding-top: 2em;
+  font-family: roboto-normal, sans-serif;
+  font-size: var(--font-size-m);
+  padding-top: 1em;
   padding-left: 0.4em;
   padding-right: 0.4em;
   width: 100%;