improve styling

src/pages/commitListPage/commitListPage.tsx

@@ -27,7 +27,8 @@ const SingleCommit: FC<iSingleCommit> = (props) => {
                 <b>Author: </b>
                 <p>
                     {props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth() + 1}
-                    - {props.created_at.getUTCHours()}:{props.created_at.getUTCMinutes()}
+                    - {props.created_at.getUTCHours() + 2}:{props.created_at.getUTCMinutes().toString().length === 2
+                    ? props.created_at.getUTCMinutes() : "0" + props.created_at.getUTCMinutes().toString()}
                 </p>
             </div>
         </div>)

src/pages/landingPage/landingPage.module.css

 
+.picture{
+    max-width: 550px;
+}
 
 .inputField{
     width: 50%;
@@ -11,12 +14,26 @@
     margin-left: 15%;
     display: flex;
     flex-direction: column;
+    background-color: #1C1644;
+    height: 100%;
 }
 
 form {
     display: flex;
     flex-direction: column;
+}
+
+.buttonDiv{
+    margin-left: 20%;
+    width: 60%;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 50px;
+}
 
+button{
+    width: 130px;
 }
 
 .defaultButton {

src/pages/landingPage/landingPage.tsx

@@ -6,7 +6,8 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ConnectionTest, queryTypes } from "../../utils/queryType";
 import { useGitlabApi } from "../../utils/gitlab_api_service";
-import visualization from "../../assets/gitlab.jpeg";
+//import visualization from "../../assets/gitlab.jpeg";
+import visualization from "../../assets/data_visualization.jpeg";
 
 
 const LandingPage = () => {
@@ -69,16 +70,18 @@ const LandingPage = () => {
 
     return (
         <div className={style.inputWrapper}>
-            <img alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/>
-            <button className={style.defaultButton} onClick={()=> setDefaultValues()}>set default values</button>
+            <img className={style.picture} alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/>
             <form onSubmit={handleSubmit}>
                 <input className={style.inputField}  value = {projectId} type="Text" onChange={e => setProjectId(e.target.value)} id="ProjektIDInput"
                        placeholder="ProjectId" required/>
                 <input className={style.inputField} value = {key} type="Text" onChange={e => setKey(e.target.value)} id="KeyInput"
                        placeholder="Key" required/>
-                <button className={style.submitButton} type="submit" disabled={disableButton}>Use values</button>
-                <ToastContainer autoClose={3000} />
+                <div className={style.buttonDiv}>
+                    <button className={style.defaultButton} onClick={()=> setDefaultValues()}>Set default values</button>
+                    <button className={style.submitButton} type="submit" disabled={disableButton}>Use current values</button>
+                </div>
             </form>
+            <ToastContainer autoClose={2000} />
 
         </div>
     );

src/pages/overviewPage/Overview.tsx

@@ -15,20 +15,27 @@ const OverviewPage = () => {
 
     return (
         <div className={style.wrapper}>
+            <div className={style.stats}>
                 <h1>Stats:</h1>
                 {isLoading ? <ClipLoader loading={isLoading}/> :
-                <StatsBox content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`): ["Loading ..."] } />
+                    <StatsBox
+                        content={data as Languages ? Object.entries(data as Languages).map(element => `${element[0]}: ${element[1]} %`) : ["Loading ..."]}/>
                 }
-            <h2 style={{marginTop: "50px"}}>More info:</h2> 
+            </div>
+            <div className={style.buttons}>
+                <h1 style={{marginTop: "50px"}}>More info:</h1>
                 <div className={style.buttonWrapper}>
-            <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/issue" : `${slug}graph`)}>
+                    <button className={style.button}
+                            onClick={() => history.push(slug === "/overview" ? "/issue" : `${slug}graph`)}>
                         {slug === "/overview" ? "Issues" : "Graph"}
                     </button>
-            <button className={style.button} onClick= {() => history.push(slug=== "/overview" ? "/commit" : `${slug}list`)}>
+                    <button className={style.button}
+                            onClick={() => history.push(slug === "/overview" ? "/commit" : `${slug}list`)}>
                         {slug === "/overview" ? "Commits" : "List"}
                     </button>
                 </div>
             </div>
+        </div>
     );
 };
 

src/pages/overviewPage/overview.module.css

+
 .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    grid-column-gap: 1em;
+    grid-row-gap: 1em;
+}
+
+.stats{
+    background-color: lightgrey;
+    border-radius: 10px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    align-items: center;
+
+}
+
+.buttons{
+    background-color: lightcoral;
+    border-radius: 10px;
+    padding: 20px;
 }
 
 .buttonWrapper{
@@ -10,7 +26,7 @@
  flex-direction: row;
  justify-content: center;
  width: 100%;
- height: 40%;
+ height: 100%;
 }
 
 .button{
@@ -20,6 +36,8 @@
     height: 250px;
     border-radius: 16px;
     margin: 75px;
+    text-align: center;
+    font-size: 3em;
 }
 
 .button:hover,