Dark Theme, fixed css issues, fixed bug with homepage

app/Http/Controllers/SettingController.php

@@ -130,7 +130,7 @@ class SettingController extends Controller
     public function change_theme(Request $request)
     {
         $request->validateWithBag('theme', [
-            'theme_change' => ['required', 'string', 'in:1,2'],
+            'theme_change' => ['required', 'string', 'in:1,2,3'],
         ]);
 
         $userSetting = Auth::user()->settings;

public/css/2018.css

@@ -41,11 +41,12 @@ body {
     outline: 0px;
 }
 
-.content_signup, .profilefriend #FeedContainerBox1Username {
+.content_signup, .profilefriend #FeedContainerBox1Username, .content p a, .content a, .content_signup p a, .content_signup a, .content_special p a, .content_special a {
 	color: #191919
 }
 
 .content {
+	color: #000000;
     background-color: #E3E3E3;
     padding-top: 12px;
     margin: 40px auto 0;

public/css/app.css

@@ -8,9 +8,9 @@
       background-position-x: 2000px;
       animation-timing-function: linear;
     }
-}
+  }
   
-@keyframes alertanim {
+  @keyframes alertanim {
       0% {
         top: 0px;
         animation-timing-function: linear;
@@ -20,25 +20,25 @@
         background-position-x: 72px;
         animation-timing-function: linear;
       }
-}
+  }
   
-.catalogitem, .catalogitemimage {
+  .catalogitem, .catalogitemimage {
     width: 126px;
     padding: 5px;
-}
+  }
   
-.arkoticon_small {
+  .arkoticon_small {
     margin: 0px;
     width: 12px;
-}
+  }
   
-.arkoticon_navbar {
+  .arkoticon_navbar {
     margin: 0px;
     margin-right: 3px;
     width: 20px;
-}
+  }
   
-.arkotcontainer {
+  .arkotcontainer {
     position: relative;
     padding-right: 10px;
     margin-right: 0%;
@@ -49,23 +49,23 @@
     align-content: center;
     justify-content: center;
     align-items: center;
-}
+  }
   
-.smallnavbarbuttoncontainer {
+  .smallnavbarbuttoncontainer {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: center;
     justify-content: flex-end;
     align-items: center;
-}
+  }
   
-.arkotlabel {
+  .arkotlabel {
     color: rgb(35, 98, 222);
     font-weight: bold;
-}
+  }
   
-#alert, #success {
+  #alert, #success {
     height: fit-content;
     margin: 0px;
     animation: alertanim;
@@ -80,60 +80,60 @@
     padding-left: 5px;
     width: 100%;
     text-align: center;
-}
+  }
   
-#alert {
+  #alert {
     background: linear-gradient(#f07575 10%, #de2323 100%);
-}
+  }
   
-#success {
+  #success {
     background:linear-gradient(#a3e2bd 10%,#02b757 100%)
-}
+  }
   
-.warningtext {
+  .warningtext {
     color: red;
-}
+  }
   
-#logo_full {
+  #logo_full {
     display: none;
-}
+  }
-#logo_small {
+  #logo_small {
     display: block;
-}
+  }
-@media (min-width: 1688px) {
+  @media (min-width: 1688px) {
     #logo_full {
         display: block;
     }
     #logo_small {
         display: none;
     }
-}
+  }
-@media (max-width: 730px) {
+  @media (max-width: 730px) {
-.navbarbuttoncontainer a {
+  .navbarbuttoncontainer a {
     position: relative;
-}
+  }
-}
+  }
-@media (max-width: 970px) {
+  @media (max-width: 970px) {
-.navbarbuttoncontainer a {
+  .navbarbuttoncontainer a {
     font-size: 14px;
-}
+  }
-}
+  }
-@media (max-width: 640px) {
+  @media (max-width: 640px) {
-.navbarbuttoncontainer a {
+  .navbarbuttoncontainer a {
     font-size: 12px;
-}
+  }
-}
+  }
   
-.popupcontainer {
+  .popupcontainer {
     top: 0%;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     height: 100%;
     z-index: 100000000;
-}
+  }
   
-.popup {
+  .popup {
     color: #000000;
     text-align: center;
     position: fixed;
@@ -150,9 +150,9 @@
     background: rgb(80, 80, 80);
     /* Fallback for IE 11*/
     background: linear-gradient(#cacbcc 10%, #2d2d2d 100%);
-}
+  }
   
-.navbar {
+  .navbar {
     height: 40px;
     margin: 0px;
     padding-right: 5px;
@@ -170,11 +170,11 @@
     width: 100%;
     background: #2362DE;
     /* Fallback for IE 11*/
-  background: linear-gradient(#759CF0 10%, #2362DE 100%);
+    background: linear-gradient(#5082ed 10%, #0a44b7 100%);
-}
+  }
   
-.navbarbuttoncontainer,
+  .navbarbuttoncontainer,
-.navbarlogincontainer {
+  .navbarlogincontainer {
     padding-left: 5px;
     vertical-align: middle;
     display: flex;
@@ -183,10 +183,10 @@
     align-content: center;
     justify-content: center;
     align-items: center;
-}
+  }
   
-#navbarlogincontainer,
+  #navbarlogincontainer,
-#navbarsignedincontainer {
+  #navbarsignedincontainer {
     position: relative;
     padding-right: 10px;
     margin-right: 0%;
@@ -197,79 +197,79 @@
     align-content: center;
     justify-content: flex-end;
     align-items: center;
-}
+  }
   
-#profilefriendscontainer p,
+  #profilefriendscontainer p,
-#profilefriendscontainer a {
+  #profilefriendscontainer a {
     display: inline;
-}
+  }
   
-#profiletopcontainer {
+  #profiletopcontainer {
     margin-bottom: 30px;
     display: block;
     width: 100%;
-}
+  }
   
-.onlinestatus_website {
+  .onlinestatus_website {
     color: #2260DD;
-}
+  }
   
-.onlinestatus_studio {
+  .onlinestatus_studio {
     color: rgb(185, 135, 20);
-}
+  }
   
-.onlinestatus_ingame {
+  .onlinestatus_ingame {
     color: green;
-}
+  }
   
-.onlinestatus_offline {
+  .onlinestatus_offline {
     color: black;
-}
+  }
   
-.important {
+  .important {
     color: red;
     font-weight: bold;
-}
+  }
-#yes,
+  #yes,
-#no {
+  #no {
     width: 50%;
-}
+  }
   
-#FeedBox {
+  #FeedBox {
     width: 100%;
     height: 22px;
-}
+  }
   
-#FeedButton {
+  #FeedButton {
     width: 100%;
     height: 22px;
-}
+  }
   
-#logo_signup,
+  #logo_signup,
-#logo-signup p {
+  #logo-signup p {
     margin: auto;
     text-align: center;
     width: 200px;
-}
+  }
   
-#feed,
+  #feed,
-#profileleftcontainer {
+  #profileleftcontainer {
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
     width: 50%;
-}
+  }
   
-#gamesframe,
+  #gamesframe,
-#profilerightcontainer {
+  #profilerightcontainer {
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
     width: 50%;
-}
+  }
   
-.FeedContainerBox,
+  .FeedContainerBox,
-.ProfileContainerBox {
+  .ProfileContainerBox {
     border-radius: 1px;
     text-align: left;
     width: 100%;
@@ -280,9 +280,9 @@
     overflow-x: hidden;
     border-width: 1px;
     margin-bottom: 5px;
-}
+  }
   
-.FriendsContainerBox {
+  .FriendsContainerBox {
     border-radius: 1px;
     text-align: left;
     width: 100%;
@@ -292,27 +292,27 @@
     border: 1px solid #000000;
     border-width: 1px;
     margin-bottom: 5px;
-}
+  }
   
-#btncontainer {
+  #btncontainer {
     margin-left: 75%;
-}
+  }
   
-.navbarbutton {
+  .navbarbutton {
     position: relative;
     padding-right: 5px;
     text-align: center;
     font-size: 18px;
-}
+  }
   
-.smallnavbarbutton {
+  .smallnavbarbutton {
     position: relative;
     padding-right: 5px;
     text-align: center;
     font-size: 15px;
-}
+  }
   
-.smallnav {
+  .smallnav {
     height: 25px;
     margin: 0px;
     padding-left: 5px;
@@ -331,14 +331,14 @@
     text-align: left;
     background: #000000;
     background: linear-gradient(#303030 10%, #000000 100%);
-}
+  }
   
-.invisible,
+  .invisible,
-#invisible {
+  #invisible {
     display: none !important;
-}
+  }
   
-html {
+  html {
     animation-name: animatedbackground;
     animation-duration: 50s;
     animation-iteration-count: infinite;
@@ -353,9 +353,9 @@ html {
     background-color: rgb(49, 107, 223);
     height: 100%;
     color: white;
-}
+  }
   
-body {
+  body {
     margin-left: 0px;
     margin-right: 0px;
     margin-top: 0px;
@@ -363,10 +363,10 @@ body {
     margin-bottom: 0px;
     padding-bottom: 0px;
     height: 100%;
-}
+  }
   
-.content_special,
+  .content_special,
-#content_special {
+  #content_special {
     display: inline-flex;
     width: 100%;
     flex-direction: row;
@@ -374,9 +374,9 @@ body {
     align-content: center;
     justify-content: flex-start;
     flex-wrap: nowrap;
-}
+  }
   
-.content {
+  .content {
     color: black;
     max-width: 1000px;
     margin: auto;
@@ -389,9 +389,9 @@ body {
     background-color: rgb(255, 255, 255);
     padding-bottom: 5px;
     padding-top: 5px;
-}
+  }
   
-.content_signup {
+  .content_signup {
     color: black;
     max-width: 500px;
     margin: auto;
@@ -403,26 +403,26 @@ body {
     background-color: rgb(255, 255, 255);
     padding-bottom: 5px;
     padding-top: 5px;
-}
+  }
   
-.content_signup button {
+  .content_signup button {
     width: 100%;
-}
+  }
   
-.content_signup input {
+  .content_signup input {
     width: 98%;
-}
+  }
   
-.content p a,
+  .content p a,
-.content a,
+  .content a,
-.content_signup p a,
+  .content_signup p a,
-.content_signup a,
+  .content_signup a,
-.content_special p a,
+  .content_special p a,
-.content_special a {
+  .content_special a {
     color: black
-}
+  }
   
-#footer {
+  #footer {
     text-align: center;
     max-width: 1000px;
     margin: auto;
@@ -434,9 +434,9 @@ body {
     /* Fallback for IE 11*/
     background-color: rgb(172, 172, 172);
     min-height: fit-content;
-}
+  }
   
-.tab {
+  .tab {
     background: #747474;
     background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
     font-weight: 400;
@@ -448,9 +448,9 @@ body {
     padding-left: 5px;
     padding-right: 5px;
     color: #fff !important;
-}
+  }
   
-.tab_selected {
+  .tab_selected {
     background: #2362DE;
     background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
     font-weight: 400;
@@ -462,11 +462,11 @@ body {
     padding-left: 5px;
     padding-right: 5px;
     color: #fff !important;
-}
+  }
   
   
-/*Button gradients by TersisWilvin*/
+  /*Button gradients by TersisWilvin*/
-button {
+  button {
     background: rgb(45, 45, 45);
     /*Fallback for IE 11*/
     background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
@@ -477,65 +477,65 @@ button {
     border: 1px solid #3D414A;
     font-family: "Helvetica";
     color: #fff;
-}
+  }
   
-button:hover {
+  button:hover {
     cursor: pointer;
-}
+  }
   
-button:disabled {
+  button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
-}
+  }
   
   
-button.bluebutton {
+  button.bluebutton {
     background: rgb(35, 98, 222);
     /*Fallback for IE 11*/
     background: linear-gradient(0deg,#00a2ff 0%,#0074bd 49%,#08f 50%,#57c2fe 95%,#99daff 100%);
-}
+  }
   
-button:hover.bluebutton {
+  button:hover.bluebutton {
     background: linear-gradient(0deg,#32b5ff 0%,#0074bd 49%,#2c99f8 50%,#71c9fa 95%,#b6e5ff 100%);
-}
+  }
   
-button:active.bluebutton, button:focus.bluebutton  {
+  button:active.bluebutton, button:focus.bluebutton  {
     background: linear-gradient(0deg,#32b5ff 0%,#0074bd 49%,#2c99f8 50%,#71c9fa 95%,#b6e5ff 100%);
-}
+  }
   
-button.greybutton {
+  button.greybutton {
     background: rgb(255, 255, 255);
     color: black;
     /*Fallback for IE 11*/
     background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
-}
+  }
   
-button:hover.greybutton {
+  button:hover.greybutton {
     background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
-}
+  }
   
-button.redbutton {
+  button.redbutton {
     background: rgb(223, 24, 24);
     /*Fallback for IE 11*/
     background: linear-gradient(0deg,#d86868 0%,#a95151 49%,#bc5c5c 50%,#e96f6f 95%,#fe7979 100%);
-}
+  }
   
-button:hover.redbutton {
+  button:hover.redbutton {
     background: linear-gradient(0deg,#e27676 0%,#a95151 49%,#ca6363 50%,#f07272 95%,#fd8888 100%);
-}
+  }
   
-button.greenbutton {
+  button.greenbutton {
     background: rgb(26, 92, 46);
     /*Fallback for IE 11*/
     background: linear-gradient(0deg,#02b757 0%,#118237 49%,#01a64e 50%,#3fc679 95%,#a3e2bd 100%);
-}
+  }
   
-button:hover.greenbutton {
+  button:hover.greenbutton {
     background: linear-gradient(0deg,#3fc679 0%,#15933f 49%,#3cc175 50%,#46dc86 95%,#53ff9d 100%);
-}
+  }
   
   
-#footer_signup {
+  #footer_signup {
     text-align: center;
     max-width: 500px;
     margin: auto;
@@ -547,41 +547,41 @@ button:hover.greenbutton {
     /* Fallback for IE 11*/
     background-color: rgb(172, 172, 172);
     min-height: fit-content;
-}
+  }
   
-#footer p,
+  #footer p,
-#footer a,
+  #footer a,
-#footer_signup p,
+  #footer_signup p,
-#footer_signup a {
+  #footer_signup a {
     color: black;
-}
+  }
   
-p,
+  p,
-h1,
+  h1,
-h2,
+  h2,
-h3,
+  h3,
-h4,
+  h4,
-h5,
+  h5,
-h6 {
+  h6 {
     margin: 0px;
-}
+  }
   
-img {
+  img {
     object-fit: contain;
-}
+  }
   
-a,
+  a,
-#navbarusername {
+  #navbarusername {
     color: white;
     text-decoration: none;
     font-weight: bolder;
-}
+  }
   
-.nonbolded {
+  .nonbolded {
     font-weight: normal !important;
-}
+  }
   
-.logoutframe {
+  .logoutframe {
     color: black;
     max-width: fit-content;
     margin: auto;
@@ -592,19 +592,19 @@ a,
     background-color: rgb(255, 255, 255);
     padding-bottom: 5px;
     padding-top: 5px;
-}
+  }
   
-.w-5 {
+  .w-5 {
     display: none;
-}
+  }
   
-.flex {
+  .flex {
     display: table;
     margin-right: auto;
     margin-left: auto;
-}
+  }
   
-.iphone-sidebar {
+  .iphone-sidebar {
     position: fixed;
     color: rgb(255, 255, 255);
     width: 20%;
@@ -613,9 +613,9 @@ a,
     background-color: rgb(0,0,0);
     padding-bottom: 5px;
     padding-top: 5px;
-}
+  }
   
-.iphone-content {
+  .iphone-content {
     position: relative;
     color: white;
     width: 80%;
@@ -629,8 +629,8 @@ a,
     overflow-x: hidden; 
     position: fixed; 
     height: 100%;
-}
+  }
   
-#InviteTreeContainer {
+  #InviteTreeContainer {
     background-color: rgb(255, 255, 255);
-}
+  }

public/css/appdark.css

@@ -0,0 +1,629 @@
+@keyframes animatedbackground {
+  from {
+    background-position-x: 0px;
+    animation-timing-function: linear;
+  }
+
+  to {
+    background-position-x: 2000px;
+    animation-timing-function: linear;
+  }
+}
+
+@keyframes alertanim {
+	0% {
+	  top: 0px;
+	  animation-timing-function: linear;
+	}
+  
+	100% {
+	  background-position-x: 72px;
+	  animation-timing-function: linear;
+	}
+}
+
+.catalogitem, .catalogitemimage {
+  width: 126px;
+  padding: 5px;
+}
+
+.arkoticon_small {
+  margin: 0px;
+  width: 12px;
+}
+
+.arkoticon_navbar {
+  margin: 0px;
+  margin-right: 3px;
+  width: 20px;
+}
+
+.arkotcontainer {
+  position: relative;
+  padding-right: 10px;
+  margin-right: 0%;
+  margin-left: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.smallnavbarbuttoncontainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.arkotlabel {
+  color: rgb(35, 98, 222);
+  font-weight: bold;
+}
+
+#alert, #success {
+  height: fit-content;
+  margin: 0px;
+  animation: alertanim;
+	animation-duration: 250ms;
+	animation-iteration-count: 1; 
+  position: fixed;
+  z-index: 10;
+  top: 72px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  width: 100%;
+  text-align: center;
+}
+
+#alert {
+  background: linear-gradient(#f07575 10%, #de2323 100%);
+}
+
+#success {
+  background:linear-gradient(#a3e2bd 10%,#02b757 100%)
+}
+
+.warningtext {
+  color: red;
+}
+
+#logo_full {
+  display: none;
+}
+#logo_small {
+  display: block;
+}
+@media (min-width: 1688px) {
+  #logo_full {
+      display: block;
+  }
+  #logo_small {
+      display: none;
+  }
+}
+@media (max-width: 730px) {
+.navbarbuttoncontainer a {
+  position: relative;
+}
+}
+@media (max-width: 970px) {
+.navbarbuttoncontainer a {
+  font-size: 14px;
+}
+}
+@media (max-width: 640px) {
+.navbarbuttoncontainer a {
+  font-size: 12px;
+}
+}
+
+.popupcontainer {
+  top: 0%;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  z-index: 100000000;
+}
+
+.popup {
+  color: #000000;
+  text-align: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  transform: translate(-50%, -50%);
+  width: max-content;
+  border-radius: 3px;
+  border: 1px solid #3D414A;
+  background: #cacbcc;
+  /* Fallback for IE 11*/
+  background: linear-gradient(#cacbcc 10%, #606060 100%);
+}
+
+.navbar {
+  height: 40px;
+  margin: 0px;
+  padding-right: 5px;
+  align-content: center;
+  padding-left: 5px;
+  padding-top: 2px;
+  position: fixed;
+  top: 0px;
+  padding-bottom: 2px;
+  color: white;
+  line-height: normal;
+  z-index: 100;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  background: #2362DE;
+  /* Fallback for IE 11*/
+  background: linear-gradient(#3690df 10%, #0d1085 100%);
+}
+
+.navbarbuttoncontainer,
+.navbarlogincontainer {
+  padding-left: 5px;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+#navbarlogincontainer,
+#navbarsignedincontainer {
+  position: relative;
+  padding-right: 10px;
+  margin-right: 0%;
+  margin-left: 0%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#profilefriendscontainer p,
+#profilefriendscontainer a {
+  display: inline;
+}
+
+#profiletopcontainer {
+  margin-bottom: 30px;
+  display: block;
+  width: 100%;
+}
+
+.onlinestatus_website {
+  color: #2260DD;
+}
+
+.onlinestatus_studio {
+  color: rgb(185, 135, 20);
+}
+
+.onlinestatus_ingame {
+  color: green;
+}
+
+.onlinestatus_offline {
+  color: white;
+}
+
+.important {
+  color: red;
+  font-weight: bold;
+}
+#yes,
+#no {
+  width: 50%;
+}
+
+#FeedBox {
+  width: 100%;
+  height: 22px;
+}
+
+#FeedButton {
+  width: 100%;
+  height: 22px;
+}
+
+#logo_signup,
+#logo-signup p {
+  margin: auto;
+  text-align: center;
+  width: 200px;
+}
+
+#feed,
+#profileleftcontainer {
+  text-align: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 50%;
+}
+
+#gamesframe,
+#profilerightcontainer {
+  text-align: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 50%;
+}
+
+.FeedContainerBox,
+.ProfileContainerBox {
+  border-radius: 1px;
+  text-align: left;
+  width: 100%;
+  vertical-align: top;
+  display: inline-flex;
+  border: 1px solid #787373;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  border-width: 1px;
+  margin-bottom: 5px;
+}
+
+.FriendsContainerBox {
+  border-radius: 1px;
+  text-align: left;
+  width: 100%;
+  min-width: max-content;
+  vertical-align: top;
+  display: inline-flex;
+  border: 1px solid #000000;
+  border-width: 1px;
+  margin-bottom: 5px;
+}
+
+#btncontainer {
+  margin-left: 75%;
+}
+
+.navbarbutton {
+  position: relative;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 18px;
+}
+
+.smallnavbarbutton {
+  position: relative;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 15px;
+}
+
+.smallnav {
+  height: 25px;
+  margin: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  position: fixed;
+  z-index: 100;
+  top: 43px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  line-height: normal;
+  color: rgb(255, 255, 255);
+  text-size-adjust: auto;
+  text-align: left;
+  background: #000000;
+  background: linear-gradient(#303030 10%, #000000 100%);
+}
+
+.invisible,
+#invisible {
+  display: none !important;
+}
+
+html {
+  animation-name: animatedbackground;
+  animation-duration: 50s;
+  animation-iteration-count: infinite;
+  background: url('../img/animated.png');
+  background-position: center bottom;
+  background-repeat: repeat-x;
+  background-attachment: fixed;
+  margin: 0px;
+  font-family: "Helvetica";
+  src: url('Helvetica.ttf') format('truetype'), ;
+  font-style: normal;
+  background-color: rgb(1, 17, 48);
+  height: 100%;
+  color: white;
+}
+
+body {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  min-width: 700px;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+  height: 100%;
+}
+
+.content_special,
+#content_special {
+  display: inline-flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: flex-start;
+  align-content: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+
+.content {
+  color: white;
+  max-width: 1000px;
+  margin: auto;
+  margin-top: 105px;
+  padding-left: 5px;
+  padding-right: 5px;
+  min-height: 300px;
+  background: rgb(25,25,25);
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.content_signup {
+  color: rgb(255, 255, 255);
+  max-width: 500px;
+  margin: auto;
+  margin-top: 30px;
+  padding-left: 5px;
+  padding-right: 5px;
+  background: rgb(25,25,25);
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.content_signup button {
+  width: 100%;
+}
+
+.content_signup input {
+  width: 98%;
+}
+
+.content p a,
+.content a,
+.content_signup p a,
+.content_signup a,
+.content_special p a,
+.content_special a {
+  color: #d1d1d1;
+}
+
+#footer {
+  text-align: center;
+  max-width: 1000px;
+  margin: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  background: rgb(0,0,0);
+  /* Fallback for IE 11*/
+  min-height: fit-content;
+}
+
+/*Button gradients by TersisWilvin*/
+
+.tab {
+  background: rgb(255, 255, 255);
+  background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
+  border-radius: 1px;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  padding-left: 5px;
+  padding-right: 5px;
+  color: rgb(0, 0, 0) !important;
+}
+
+.tab_selected {
+  background: rgb(35, 98, 222);
+  background: linear-gradient(0deg,#00a2ff 0%,#0074bd 49%,#08f 50%,#57c2fe 95%,#99daff 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
+  border-radius: 1px;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  padding-left: 5px;
+  padding-right: 5px;
+  color: #fff !important;
+}
+
+button {
+  background: rgb(255, 255, 255);
+  /*Fallback for IE 11*/
+  background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
+  border-radius: 3px;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  color: #fff;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+button.bluebutton {
+  background: rgb(35, 98, 222);
+  /*Fallback for IE 11*/
+  background: linear-gradient(0deg,#00a2ff 0%,#0074bd 49%,#08f 50%,#57c2fe 95%,#99daff 100%);
+}
+
+button:hover.bluebutton {
+  background: linear-gradient(0deg,#32b5ff 0%,#0074bd 49%,#2c99f8 50%,#71c9fa 95%,#b6e5ff 100%);
+}
+
+button:active.bluebutton, button:focus.bluebutton  {
+  background: linear-gradient(0deg,#32b5ff 0%,#0074bd 49%,#2c99f8 50%,#71c9fa 95%,#b6e5ff 100%);
+}
+
+button.greybutton {
+  background: rgb(255, 255, 255);
+  color: black;
+  /*Fallback for IE 11*/
+  background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
+}
+
+button:hover.greybutton {
+  background: linear-gradient(0deg,#fff 0%,#b8b8b8 49%,#e3e3e3 50%,#f2f2f2 95%,#fff 100%);
+}
+
+button.redbutton {
+  background: rgb(223, 24, 24);
+  /*Fallback for IE 11*/
+  background: linear-gradient(0deg,#d86868 0%,#a95151 49%,#bc5c5c 50%,#e96f6f 95%,#fe7979 100%);
+}
+
+button:hover.redbutton {
+  background: linear-gradient(0deg,#e27676 0%,#a95151 49%,#ca6363 50%,#f07272 95%,#fd8888 100%);
+}
+
+button.greenbutton {
+  background: rgb(26, 92, 46);
+  /*Fallback for IE 11*/
+  background: linear-gradient(0deg,#02b757 0%,#118237 49%,#01a64e 50%,#3fc679 95%,#a3e2bd 100%);
+}
+
+button:hover.greenbutton {
+  background: linear-gradient(0deg,#3fc679 0%,#15933f 49%,#3cc175 50%,#46dc86 95%,#53ff9d 100%);
+}
+
+
+#footer_signup {
+  text-align: center;
+  max-width: 500px;
+  margin: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  background: rgb(0,0,0);
+  min-height: fit-content;
+}
+
+#footer p,
+#footer a,
+#footer_signup p,
+#footer_signup a {
+  color: white;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+img {
+  object-fit: contain;
+}
+
+a,
+#navbarusername {
+  color: white;
+  text-decoration: none;
+  font-weight: bolder;
+}
+
+.nonbolded {
+  font-weight: normal !important;
+}
+
+.logoutframe {
+  color: black;
+  max-width: fit-content;
+  margin: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+  background: rgb(255, 255, 255);
+  /* Fallback for IE 11*/
+  background-color: rgb(255, 255, 255);
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.w-5 {
+  display: none;
+}
+
+.flex {
+  display: table;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.iphone-sidebar {
+  position: fixed;
+  color: rgb(255, 255, 255);
+  width: 20%;
+  height: 100%;
+  margin-left: 0px;
+  background-color: rgb(0,0,0);
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.iphone-content {
+  position: relative;
+  color: white;
+  width: 80%;
+  height: 100%;
+  left: 20%;
+  background-color: rgb(0,0,0);
+  padding-bottom: 5px;
+  padding-top: 5px;
+  padding-left: 5px; 
+  padding-right: 0px; 
+  overflow-x: hidden; 
+  position: fixed; 
+  height: 100%;
+}
+
+#InviteTreeContainer {
+  background-color: rgb(255, 255, 255);
+}

resources/views/auth/passwords/email.blade.php

@@ -41,7 +41,7 @@
             @enderror
             <br><br>
 
-            <button type="submit" onClick="this.form.submit();this.disabled=true">
+            <button class="greybutton" type="submit" onClick="this.form.submit();this.disabled=true">
                 Send Password Reset Link
             </button>
         </form>

resources/views/home.blade.php

@@ -1,18 +1,18 @@
 @extends('layouts.app')
 @section('title')
-    <title>Home - {{ env('APP_NAME') }}</title>
+<title>Home - {{ env('APP_NAME') }}</title>
 @endsection
 @section('titlediscord')
-    <meta content="Home - {{ env('APP_NAME') }}" property="og:title" />
+<meta content="Home - {{ env('APP_NAME') }}" property="og:title" />
 @endsection
 @section('descdiscord')
-    <meta content="ARCHBLOX is a work in progress revival." property="og:description" />
+<meta content="ARCHBLOX is a work in progress revival." property="og:description" />
 @endsection
 
 @section('content')
-    <h1 id="usernameframe">Hello, {{ Auth::user()->name }}!</h1>
+<h1 id="usernameframe">Hello, {{ Auth::user()->name }}!</h1>
-    <br>
+<br>
-    <div class="content_special">
+<div class="content_special">
     <div id="feed">
         <h2>My Feed</h2>
         <br>
@@ -66,8 +66,8 @@
         <div class="content_special" style="justify-content: center;">
             <h2>Friends ({{ Auth::user()->getFriendsCount() }})</h2>
             @if (Auth::user()->getFriendsCount() > 0)
-                    <a alt="View All, button" href="{{ route('friends') }}" style="margin-left: 5px"> <button
+            <a alt="View All, button" href="{{ route('friends') }}" style="margin-left: 5px"> <button class="bluebutton"
-                            class="bluebutton" style="margin-top: 5px">View
+                    style="margin-top: 5px">View
                     All</button></a>
             @endif
         </div>
@@ -82,14 +82,14 @@
                     <a href="{{ route('profile', $friend->id) }}"><img alt="Profile Image"
                             src="{{ asset('img/defaultrender.png') }}" width="150px" height="110px"></a>
                     <br>
-                                <a href="{{ route('profile', $friend->id) }}"
+                    <a href="{{ route('profile', $friend->id) }}" id="FeedContainerBox1Username">{{ $friend->name }}</a>
-                                    id="FeedContainerBox1Username">{{ $friend->name }}</a>
                 </div>
                 @endforeach
             </div>
         </div>
         @else
         <p>You don't have any friends yet!</p>
+    </div>
     @endif
     <br>
     <h2>Recently Played</h2>
@@ -98,7 +98,7 @@
         <p>You haven't played any games yet!</p>
     </div>
     <br>
-        </div>
+</div>
-    </div>
+</div>
-    <br>
+<br>
 @endsection

resources/views/layouts/app.blade.php

@@ -18,6 +18,9 @@
     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
     @auth
         @switch (Auth::user()->settings->theme)
+            @case(3)
+            <link href="{{ asset('css/appdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
+            @break
             @case(2)
                 <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
                 <link href="{{ asset('css/2018.css?id=' . Str::random(8)) }}" rel="stylesheet">

resources/views/misc/settings.blade.php

@@ -170,11 +170,14 @@
             <h3>Theme</h3>
             <p>Selected Theme: @php
                 switch (Auth::user()->settings->theme) {
+                    case 3:
+                        echo 'Dark';
+                        break;
                     case 2:
                         echo '2018';
                         break;
                     default:
-                        echo 'ARCHBLOX';
+                        echo 'Light';
                 }
             @endphp</p>
             <form action="{{ route('change_theme') }}" method="POST" class="theme_form">
@@ -182,8 +185,9 @@
                 <div class="content_special" style="width: 100%; flex-wrap: nowrap;">
                     <div class="custom-select" style="width: 90%;">
                         <select name="theme_change" style="width: 100%;">
-                            <option value="1">ARCHBLOX</option>
+                            <option value="1">Light</option>
                             <option value="2">2018</option>
+                            <option value="3">Dark</option>
                         </select>
                     </div>
                     <button style="width: max-content;" class="greenbutton" type="submit">Save</button>