added lots of css to style site.

removed mainbody class and did switching stuff in app.js

src/css/App.css

@@ -1,11 +1,12 @@
-.nav-item{
+.nav-item {
     cursor: pointer;
 }
-.nav-link{
-    color: rgba(255,255,255,.5);
+
+.nav-link {
+    color: rgba(255, 255, 255, .5);
     font-weight: bold;
 }
 
-.nav-link:hover{
-    color: rgba(255,255,255,1);
-}
+.nav-link:hover {
+    color: rgba(255, 255, 255, 1);
+}

src/css/DefaultPage.css

@@ -0,0 +1,18 @@
+.pageheader {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding-left: 22%;
+    padding-right: 12%;
+}
+
+.pageheadertitle {
+    font-size: 40pt;
+    font-weight: bold;
+}
+
+.pageheadersubtitle {
+    margin-left: 20px;
+    font-size: 23pt;
+    opacity: 0.6;
+}
+

src/css/HomePage.css

@@ -1,14 +1,9 @@
-.sideinfo{
-    width: 20%;
-    float: left;
-}
-
-.maincontent{
+.maincontent {
     float: left;
     width: 70%;
 }
 
-.rightinfo{
+.rightinfo {
     float: left;
     width: 10%;
-}
+}

src/css/Player.css

@@ -1,26 +1,14 @@
 .closebutton {
     color: white;
-    height: 35px;
-    width: 90px;
-    margin-right: 80px;
-    float: right;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
     background-color: #FF0000;
-    cursor: pointer;
+    margin-top: 25px;
+    margin-left: 25px;
 }
 
-.myvideo {
-    width: 100%;
-    float: left;
-}
-
-.videoleftbanner{
-    float: left;
-    width: 100%;
-    height: 100%;
-    background-color: #e5e5ff;
-    border-radius: 40px;
-}
-.likefield{
+.likefield {
     margin-top: 15px;
     margin-left: 15px;
     margin-right: 15px;
@@ -29,5 +17,16 @@
     border-radius: 10px;
     text-align: center;
     color: white;
-
+}
+
+.videowrapper {
+    margin-left: 20px;
+    display: block;
+    float: left;
+    width: 60%;
+    margin-top: 25px;
+}
+
+.videoactions{
+    margin-top: 15px;
 }

src/css/Preview.css

@@ -1,7 +1,8 @@
 .previewtitle {
     height: 10%;
-    color: white;
+    color: #3d3d3d;
     text-align: center;
+    font-weight: bold;
 }
 
 .previewpic {
@@ -17,8 +18,10 @@
     height: 300px;
     width: 30%;
     float: left;
-    margin: 1%;
-    background-color: #7F7F7F;
+    margin-left: 25px;
+    margin-top: 25px;
+    /*background-color: #7F7F7F;*/
+    background-color: #a8c3ff;
     cursor: pointer;
     opacity: 0.9;
     border: 10px;
@@ -29,10 +32,3 @@
     opacity: 1;
     transition: opacity 0.5s;
 }
-
-/* todo check if neccessary*/
-.previewcontainer {
-    margin-left: 10%;
-    width: 80%;
-    margin-right: 10%;
-}

src/css/RandomPage.css

@@ -1,4 +1,21 @@
-.Shufflebutton{
+.Shufflebutton {
     width: 100%;
     align-content: center;
-}
+}
+
+.btnshuffle{
+    background-color: #39a945;
+
+    color: white;
+    margin-top: 20px;
+    margin-left: 45%;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 25px 15px 25px;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.btnshuffle:focus{
+    outline: none;
+}

src/css/SideBar.css

@@ -0,0 +1,43 @@
+.sideinfo {
+    width: 20%;
+    float: left;
+    padding: 20px;
+    margin-top: 25px;
+    margin-left: 15px;
+    background-color: #b4c7fe;
+    border-radius: 20px;
+    border: 2px #3574fe solid;
+}
+
+.tagbtn {
+    color: white;
+    margin: 10px;
+    background-color: #3574fe;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
+    /*font-weight: bold;*/
+    display: block;
+}
+
+.tagbtn:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtn:hover {
+    background-color: #004eff;
+}
+
+.sidebartitle {
+    font-weight: bold;
+    font-size: larger;
+}
+
+.sidebarinfo {
+    margin-top: 5px;
+    background-color: #8ca3fc;
+    border-radius: 5px;
+    padding: 2px 10px 2px 15px;
+    width: 60%;
+}