feature(database-connection): Fix error handling

frontend/src/components/ErrorContainer/ErrorContainer.scss

@@ -1,5 +1,11 @@
 .ErrorContainer {
-    .error-message {
-        color: red;
-    }
+    color: #f33c3c;
+    font-size: 32px;
+    //box-shadow:
+    //        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
+    //        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
+    //        0 12.5px 10px rgba(0, 0, 0, 0.06),
+    //        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
+    //        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
+    //        0 100px 80px rgba(0, 0, 0, 0.12);
 }

frontend/src/components/SeasonSwitch/SeasonSwitch.scss

@@ -10,4 +10,8 @@
     justify-content: center;
   }
 
+  .no-click {
+    cursor: none;
+  }
+
 }

frontend/src/components/SeasonSwitch/SeasonSwitch.tsx

@@ -10,21 +10,29 @@ const SeasonSwitch: React.FC<IUserListProperties> = (props: IUserListProperties)
     const maxSeasonId = Number(props.userStats.maxSeasonId)
 
     return (
-        <div className="SeasonSwitch" data-testid="SeasonSwitch">
+        <div className={"SeasonSwitch " + (!props.enabled && " no-click")} data-testid="SeasonSwitch">
             {
                 seasonId > 1
-                && <Link to={"/season/" + (seasonId - 1)} onClick={() => props.onSeasonIdChange('' + (seasonId - 1))}>
-                    <FontAwesomeIcon icon="arrow-circle-left"/>
-                </Link>
+                && (props.enabled
+                  ? <Link to={"/season/" + (seasonId - 1)} onClick={() => props.onSeasonIdChange('' + (seasonId - 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-left"/>
+                    </Link>
+                  : <Link to={""} onClick={(e) => e.preventDefault()}>
+                      <FontAwesomeIcon icon="arrow-circle-left"/>
+                  </Link>)
             }
 
             <SeasonDetail {...props} />
 
             {
                 seasonId < maxSeasonId
-                && <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
-                    <FontAwesomeIcon icon="arrow-circle-right"/>
-                </Link>
+                && (props.enabled
+                  ? <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-right"/>
+                    </Link>
+                  : <Link to={""} onClick={(e) => e.preventDefault()}>
+                      <FontAwesomeIcon icon="arrow-circle-right"/>
+                  </Link>)
             }
         </div>
     )

frontend/src/components/UserList/UserList.tsx

@@ -23,7 +23,7 @@ const createTableEntries = (entries: TableEntry[]) =>
 
 const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
     <div className="UserList" data-testid="UserList">
-        <SeasonSwitch onSeasonIdChange={props.onSeasonIdChange} userStats={props.userStats}/>
+        <SeasonSwitch {...props} />
         <table>
             <thead>
             <tr>
@@ -44,6 +44,7 @@ export interface IUserListProperties {
     userStats: UserStatsResponse
     mocked?: boolean
     onSeasonIdChange: any
+    enabled: boolean
 }
 
 export default UserList;