From 053458916d729fd1984d3f47676c6bfe50459401 Mon Sep 17 00:00:00 2001
From: tersiswilvin <52929976+tersiswilvin@users.noreply.github.com>
Date: Fri, 12 Aug 2022 11:51:14 -0700
Subject: [PATCH] More accurate navbar hovers.

Replaces the background gradient with accurate hovers roblox used at the time, also made the submenu a bit more accurate as well as fixing the text alignment.
---
 public/css/2018.css                           |  21 +++--
 public/css/app.css                            |  82 ++++++++++++++----
 public/css/classicapp.css                     |  12 ++-
 public/css/classicappdark.css                 |  12 ++-
 .../RevisedHeader/bg-main_menu_hover.png      | Bin 0 -> 95 bytes
 public/images/RevisedHeader/bg-rbx_header.png | Bin 0 -> 137 bytes
 .../RevisedHeader/bg-sub_menu_hover.png       | Bin 0 -> 108 bytes
 public/images/btn-login_dropdown.png          | Bin 0 -> 1534 bytes
 resources/views/index.blade.php               |   2 +-
 resources/views/layouts/app.blade.php         |  10 +--
 10 files changed, 101 insertions(+), 38 deletions(-)
 create mode 100644 public/images/RevisedHeader/bg-main_menu_hover.png
 create mode 100644 public/images/RevisedHeader/bg-rbx_header.png
 create mode 100644 public/images/RevisedHeader/bg-sub_menu_hover.png
 create mode 100644 public/images/btn-login_dropdown.png

diff --git a/public/css/2018.css b/public/css/2018.css
index d34afb4..f7195eb 100644
--- a/public/css/2018.css
+++ b/public/css/2018.css
@@ -69,14 +69,13 @@ body {
 	color: #191919;
 	display: flex;
 	margin: 3px;
+	padding: 2px 5px;
+	float: none;
 	font-size: 16px;
     font-weight: 500;
 	line-height: 1.92857;
 	height: 28px;
 }
-.Redesign .smallnavbarbutton:hover {
-	background: transparent;
-}
 
 #alert, #success {
 	top: 40px;
@@ -165,10 +164,6 @@ body {
     background-position: -28px -475px;
 }
 
-.navbarbuttoncontainer li:hover {
-	background: none;
-  }
-
 .smallnavbarbutton:nth-child(6):before {
     content: '';
     background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
@@ -203,7 +198,7 @@ body {
 	margin: 0;
 	width: 100%;
 }
-.subbar {
+.mySubmenuFixed.Redesign {
 	top: 0;
 	height: 0;
 	width: 0;
@@ -290,7 +285,7 @@ body {
 	width: 30px;
 	height: 30px;
 }
-#logo_full img {
+#logo_full .btn-logo {
 	padding: 5px 0;
 	max-width: 120px;
 	height: 30px;
@@ -308,12 +303,16 @@ body {
 	height: 30px;
 	float: left;
 }
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
+	background: none;
+}
 
 #NavigationRedesignBannerContainer p {
 	color: #fff;
 }
 
-#logo_full, #logo_full img {
+#logo_full, #logo_full .btn-logo {
 	height: 30px;
 }
 
@@ -537,7 +536,7 @@ iframe {
 	#smallnav_open {
 		display: none;
 	}
-	.subbar {
+	.mySubmenuFixed {
 		display: block;
 	}
 	#logo_full img, #logo_full {
diff --git a/public/css/app.css b/public/css/app.css
index 40ab950..b0686f3 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -77,10 +77,6 @@
   text-align: center;
 }
 
-.navbarbuttoncontainer li:hover {
-  background: linear-gradient(180deg, rgb(255,255,255,.3), transparent);
-}
-
 #alert {
   background: linear-gradient(#f07575 10%, #de2323 100%);
 }
@@ -101,7 +97,7 @@
   display: inline-block;
   float: left;
 }
-#logo_full, #logo_full img {
+#logo_full, #logo_full .btn-logo {
   width: 200px;
   Height: 35px;
 }
@@ -177,7 +173,7 @@
 .BannerRedesign {
   height: 35px;
   background: #114081;
-  background: linear-gradient(#1951A5 0%, #114081);
+  background-image: url(/images/RevisedHeader/bg-rbx_header.png);
   border-bottom: 1px solid #0A2246;
   position: fixed;
   width: 100%;
@@ -185,13 +181,31 @@
   top: 0;
   display: inline-flex;
 }
-.subbar {
-  display: block;
-  height: 25px;
-  width: 100%;
-  top: 36px;
+.btn-logo:hover, .navbarbuttoncontainer li:hover {
+  background-image: url(/images/RevisedHeader/bg-main_menu_hover.png);
+  background-size: auto 35px;
+}
+.smallnavbarbutton:hover {
+  background-image: url(/images/RevisedHeader/bg-sub_menu_hover.png);
+}
+div.mySubmenuFixed {
   position: fixed;
+  top: 68px;
+  width: 100%;
+  z-index: 10000;
+}
+div.mySubmenuFixed {
+  top: 36px;
   background: linear-gradient(#000 10%, #191919 100%);
+  height: 25px;
+}
+.mySubmenuFixed.Redesign {
+  position: fixed;
+  top: 35px;
+}
+.mySubmenuFixed.Redesign {
+  position: fixed;
+  top: 35px;
 }
 .subMenu {
   background: #A3514F;
@@ -248,6 +262,38 @@
   align-items: center;
 }
 
+#HeaderSignUp {
+  font-family: Arial;
+  font-weight: bold;
+  color: #fff;
+  font-size: 13px;
+  top: -8px;
+  position: relative;
+  *top: -6px;
+}
+#HeaderOr {
+  font-family: Arial;
+  font-weight: normal;
+  color: #9Ec3E7;
+  font-size: 13px;
+  top: -8px;
+  *top: -6px;
+  position: relative;
+  margin: 0 6px;
+}
+#headerLogin {
+  color: white;
+  background: url(/images/btn-login_dropdown.png) no-repeat;
+  display: inline-block;
+  height: 27px;
+  width: 62px;
+  position: relative;
+  cursor: pointer;
+}
+#headerLogin:hover {
+  background-position: 0 -54px;
+}
+
 iframe {
   width: 100%;
   height: 2000px;
@@ -390,7 +436,7 @@ iframe {
   position: relative;
 }
 #navbarlogincontainer {
-  margin-top: 9px;
+  margin-top: 5px;
   float: right;
   position: relative;
 }
@@ -416,10 +462,7 @@ iframe {
 .Redesign .smallnavbarbutton {
   font-size: 12px;
   padding: 5px;
-  line-height: 26px;
-}
-.Redesign .smallnavbarbutton:hover {
-  background: linear-gradient(0deg,#191919 10%, #474747 100%);
+  float: left;
 }
 
 .invisible,
@@ -493,8 +536,13 @@ body {
   /* Fallback for IE 11*/
   background-color: rgb(255, 255, 255);
 }
-.content_signup a[href="https://discord.gg/nudzQ7hkWY"]{
+.content_signup .hyperlink{
   display: block;
+  color: #0074bd;
+  transition: .25s all ease-in-out;
+}
+.content_signup .hyperlink:hover {
+  color: #32cfff;
 }
 .content_signup h1, .content_signup a, .content_signup p {
   text-align: center;
diff --git a/public/css/classicapp.css b/public/css/classicapp.css
index d6ea744..148c53d 100644
--- a/public/css/classicapp.css
+++ b/public/css/classicapp.css
@@ -40,9 +40,10 @@ html {
   Height: 40px;
 }
 
-.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
 	background: none;
-  }
+}
 
 .BannerRedesign {
   height: 40px;
@@ -112,6 +113,13 @@ html {
   padding-right: 5px;
   text-align: center;
   font-size: 15px;
+  line-height: 25px;
+  float: none;
+}
+.mySubmenuFixed.Redesign {
+  background: none;
+  height: 29px;
+  top: 44px;
 }
 
 @media (min-width: 1688px) {
diff --git a/public/css/classicappdark.css b/public/css/classicappdark.css
index c3ff77d..6ce4aed 100644
--- a/public/css/classicappdark.css
+++ b/public/css/classicappdark.css
@@ -40,9 +40,10 @@ html {
   Height: 40px;
 }
 
-.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
 	background: none;
-  }
+}
 
 .BannerRedesign {
   height: 40px;
@@ -112,6 +113,13 @@ html {
   padding-right: 5px;
   text-align: center;
   font-size: 15px;
+  line-height: 25px;
+  float: none;
+}
+.mySubmenuFixed.Redesign {
+  background: none;
+  height: 29px;
+  top: 44px;
 }
 
 @media (min-width: 1688px) {
diff --git a/public/images/RevisedHeader/bg-main_menu_hover.png b/public/images/RevisedHeader/bg-main_menu_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9291939252cbc9726a31ddef371703916f4de65
GIT binary patch
literal 95
zcmeAS@N?(olHy`uVBq!ia0vp^tU#>9!3HF!9}~_7Qfi(qjv*T7lmGnxzn_^|Dj_i;
u;fMd02liDfm&|@}UvSM_v8EDFGlsWeDlPl+w#ou^FnGH9xvX<aXaWGH(;eji

literal 0
HcmV?d00001

diff --git a/public/images/RevisedHeader/bg-rbx_header.png b/public/images/RevisedHeader/bg-rbx_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdd1348bfff0ef0986a4ce17df60125727092a48
GIT binary patch
literal 137
zcmeAS@N?(olHy`uVBq!ia0vp^tU#>7!2~4F{Y_T{QURVWjv*T7lc(@R9cy5TkofoC
z{h6`h0;XyIdH#P~nVxuHLb`&&|9+FtoHxG9JO7jSeD+uUf!(2huI1<LCtaERM()qE
n#3S;KpE-}*??2u?@h5{$uJxbHRnlvKW;1xY`njxgN@xNAT!}Uy

literal 0
HcmV?d00001

diff --git a/public/images/RevisedHeader/bg-sub_menu_hover.png b/public/images/RevisedHeader/bg-sub_menu_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc4c1d729197ca1950af05d8b5a7add66b201d2f
GIT binary patch
literal 108
zcmeAS@N?(olHy`uVBq!ia0vp^tUxTu!3HFMRzCr8j6Gc(Lp07O|M~xazbvy<LSjNf
z!V$F}{cKJ38#(_i^s)Y!_D}WJBKs*f{kR<;F+Z^nyv4}(UMhkA`#&e3b_P#ZKbLh*
G2~7ZzQY2vj

literal 0
HcmV?d00001

diff --git a/public/images/btn-login_dropdown.png b/public/images/btn-login_dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..35c302867f4919b44741b64ee9bae522cf3f7dde
GIT binary patch
literal 1534
zcmV<a1p)erP)<h;3K|Lk000e1NJLTq002G!002=40{{R3y}jl60006{P)t-s;o;#7
zFkk=x0A^-p;Nali-roEC|MK?#%-R3Z-2eUk{rdX)-{0Tk<KzDR{{H^|`1tty`}_I%
z`TYF+`TGC%_V)1f|IXY0$kzY&`TzX=|Hsw;;^N}<_y5Y+|L*et_4W1T<>lt)=F{H)
z)!_g0^YiQQ|Lg1P+vNY<=KtyG=?@PN<Ldw5=>P8S?(OaE=;-L!;{WFC|M2ke=<fgW
z^70T65G^e&czAfy($WtQ5ic(<4-XM6E;BGNFxlDJJUl#)kB`H{!w?V=(b?|Z-QAX!
zmTqotZ*OmWe0(h~GihmQT3TA4pP$Ic$bf)=dwz&6FEh^0&V7A-4i6D6FEcJKE{BJQ
zc6*3_e}Bx??sa;I9v&WfeTaU3es_F`D=jliOG|rud!?nNKR-X$-0p90aNFD4R$693
zK|#gK-OAJME-*7)UuI!pVb0g?o12?HKSW(!UDnptARr)ecZiXbnZ?ZD!O7rpadA&i
zPfbltdU|@)+U}#Hqho1zNJ~}8$;qdur_9XEk&%&}o}Q_xsgjhLq@<+k>gvkS;Gm?f
zfq{X})8ORf<l^V`o1m?`#NBIaYoMT@=jZ2$jF~+?M8L=0ZEbCmn5t%Kca4ylJ3T~_
zl9G*$jW|0*Yi@TRA0izeBE`?{)6>&SO;wzvyB;4Rqou8Ue~6Wvs+pati;tOcc8F|m
zca)TrkCB-=JVZV|J~1&daBy(g-}Q5Oh;DCilarH>m#W?4^*ud3)7<sY(9ke2Glhzo
zo}#Ulm6abKA8u}N$<Ezhn}<UH00U}CL_t(o!|m1gcav2d$MJ_xisHZlZjqK!NYm^#
zxk;WpNk^bkN(+USP0LhKKoAgAhI{X=py0&4_g;UPpL?I=20TgN`29%_?{jXxPtMJ&
zH_1uQ<4h9eOu9%A`T2s#rwby#R1o<Eg2<-{BELis`Q?JhTWm_T)JT2VQaAEBHl^mA
zuHOTu1&{bo$<sEa{CNkkHJ48BfZB@3)2f&*Vh3=)-rDW+d&`2n%chhWU*Wl?;-0R>
zSlm_QQbj$Q%A22>!=En;@|aC2f9#3HR-tz@mU66$sbZ|i%OWQ0&9^n*R1xHHn^O95
zKJJXiAHaAX^W)<fkE?uKU+Sg%j)y;45#&LeQvUcO7+i+eH{(8zWkHn>=5eE0x}O7q
zhpiy*uqkE6%h=hS&vy)9pd-(v@*Le}nO<AaWCeM`7KUzT;x^!mdlDSsyD*RlFHbB-
zw^^p8hpK|SwN4wcvGrLz*xD%aS#{d|Bj3t_Sq&qfDu{fBAaX|#d6OXW3k8u+7DO(*
z%Luvfn?K9{^E@1`^^$N##80W$zsp?T-GC1QJ$;U|2;m-N_30Tb0#@j)VV@5*IDHWP
zxy)K8OPZ<hY_7c7d-CBmd3dcuyP^ku=1&;j$Cb0k4>kDgIc#v8eq{CQEzecBKHeUF
z#-~^L@JWZ)|LmDlKYNusz1742!OcyopI>?9o8M4_4-cKuuTGynh)w_YN1N;6TgjgN
zhyA~D;Z5pdLFCs6B0onE`DKF0uNFjpognga1(9DNh`iZWDmB-r^h<Ny$miNhrMai;
zA^$FO!&ClK@|4YW{rL&7>#tO5JKSA(Kjm&qZNqlpBfa&6&)+Kx@=lxUnsFQ-ZW(!_
za|xDoj&QjndTc3g-fj;6p)ANFHrMsXiAZD}UU(5VbF7QFW05glj^Uu*d{pztDuO&}
z^E~}H5AQ^yA7El3=0ztk5%m^E^`&0A&jNvOzpe=Kkj?Y_@n$Hr62BhBOB^dhULjP#
zt!C-=1p>cWLEdijJTqR!E2|5I_BB}3Uf}Wy9IMST9r^PoE69_!QFD{}K6w-H`7=q5
z(Yx_Ya&&!iJ#I0}wEyX<AaASFUhHi<jCb1_MLxSuZyn=X`FM82$j=i*ex)GtDT2sn
k3L?Ks5c#!&q<5LW0b-tt=YL9=d;kCd07*qoM6N<$g13%CIsgCw

literal 0
HcmV?d00001

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 33fb7f1..7bdb8bf 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -14,5 +14,5 @@
 <br>
 <p><a alt="Sign Up button" href="{{ route('register') }}" >Sign Up</a> or <a alt="Log In button" href="{{ route('login') }}">Login</a></p>
 <br>
-<a href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
+<a class="hyperlink" href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f4836a7..69e6378 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -89,14 +89,14 @@
 
 <body>
     <div class="BannerRedesign">
-        <div ID="NavigationRedesignBannerContainer" class="BannerCenterContainer">
+        <div id="NavigationRedesignBannerContainer" class="BannerCenterContainer">
             @auth
             @switch (Auth::user()->settings->theme)
             @case(2)
             <a id="smallnav_open"></a>
             <script>
             function third() {
-                document.querySelector('.subbar.Redesign').classList.toggle('invisible_navbar');
+                document.querySelector('.mySubmenuFixed.Redesign').classList.toggle('invisible_navbar');
             }
             document.querySelector('#smallnav_open').addEventListener('click', third);
             </script>
@@ -104,7 +104,7 @@
             @default
             @endswitch
             @endauth
-            <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
+            <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" class = "btn-logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
             <a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
                     src="{{ asset('img/MORBLOXlogoshort.png') }}"/></a>
             <div class="navbarbuttoncontainer">
@@ -118,7 +118,7 @@
             </div>
             @guest
             <div id="navbarlogincontainer">
-                <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Login</a></p>
+                <p><a id="HeaderSignUp" href="{{ route('register') }}">Sign Up</a><span id="HeaderOr">or</span><span id="loginSpan"><a id="headerLogin" href="{{ route('login') }}"></a></span></p>
             </div>
             @else
             <div id="HeaderLoginButton" class="RightNav">
@@ -139,7 +139,7 @@
             </div>
         </div>
     </div>
-    <div class="subbar Redesign invisible_navbar">
+    <div class="mySubmenuFixed Redesign invisible_navbar">
         <div class="subMenu">
             <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() &&
                 count(Auth::user()->getFriendRequests()))