From c414fdf451525184d8f2b586cc88c5dbb7182647 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 19 Sep 2021 16:59:43 -0500
Subject: [PATCH] Made nav bar icons more consistent

---
 public/images/discord.png       | Bin 1990 -> 0 bytes
 public/images/options_wheel.png | Bin 4419 -> 0 bytes
 src/components/system/Info.vue  |   9 +++---
 src/components/system/Nav.vue   |  49 +++++++++++---------------------
 4 files changed, 20 insertions(+), 38 deletions(-)
 delete mode 100644 public/images/discord.png
 delete mode 100644 public/images/options_wheel.png

diff --git a/public/images/discord.png b/public/images/discord.png
deleted file mode 100644
index 14fc5779958d5a9f9f6df3d0cdd39b23af1c991d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1990
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
YA9w!&c$<<$hyVZp07*qoM6N<$f((q%8~^|S

diff --git a/public/images/options_wheel.png b/public/images/options_wheel.png
deleted file mode 100644
index 9a60fff4c724a67754ac451c3d0e157b59fed738..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4419
zcmZvgc{~){_s2&jdl<_w*~Xe(L)i^ec7sZfZIE?P)?_zic`}1gWM@Q)WS2E#9b|1H
zjV&Te8OvnJTEFT0{QLXk-upU#opV0-zTW4Yi@RZAbb;j}3jhGPU}CI)i*`EFmNOFr
zZI5{tT}wOYf^HdI15}R*ey15gPlP!F0H{l2J#{%xvzY^o?ScRR_MX3sj#t|BAppQh
zHql4i4s+U^vn$s&;$_&Oz+n9fFhA!jUOc>4w#t=~N?LTwi%a-#+`N(S5X;}kCn9zT
zm6k1$HUxD$g7(dUAT@`;*p|g=9B#U~b1if`s?N_7-4=;fo=87hbbH-iX;HZQsp9n(
zLFLz>+d!&N^FT;o4<#r~!By#)y_OHdNKPiuQw$d94obEGk)+Uv71-z@3b(~wc$%)f
zuwLtif9h<6w@Ay>4BHI6IjKTNu+aM5R&AJoMFHmi-c;{Wx5kQkO!ksF5yhU$?xJ_A
zllTtalq7?-=(3hi{}<FMC!wwsKcR|f*(#v(@{Fw?7bx_)T(hkuX!U+CBUz1anJsok
zInaTlAbzsWr*Y}J&4+4pU$(I+*xMBYL$O$tOJT-5gVE6=F;1{p^+v8x_1j@qt%Q(j
zoz7q+;=#3GmDF0`(0ym2rf&sW;)u7cWnmH2NinUd9}B#H)a5)wyej8-Bb^pP)yp!!
zCuGgnXD;eTcu~)YufW^ZDSCb9AW8rM8Fh60Aj7v4q8d*OD#e_>Y;>$1b9dORot^u;
z6_Jn6L%F+9TsDx|zqsq_N)ra%yOvxdE44AJsf8#gVyRC($;ADV=MuygY$)5=^%r+T
zr4EsH0;=S@zS}%joH}ObVeX}t(JrbZ!Ci)ww-~+SFS2FOHpwnS88?seH&@SaZW#`I
zKDEy}u8ACf^gO^;xw4e(b~`3n_PBEvpImNWnbCqa?UN2#|E9d*+g|s+PrGb*Bp4*%
zgRWx4Y<*)#vy{wAGhYYXlZV*{s-9P!o=PO_<(fxS<_syg0qODu?~mAPE5TMZ3P<ab
znFRB_XAfHcL5fZsr7wCsXDqbg;bVq_eQJqPv#oBVHH)Q%+c)ggJgkN+rK3B-0;yjt
zM$+L83GR*^mef&VWino#>n=!H0PGRUr~1K?XFA%9S|Ijf`|#tBZcjooLOvZrKUDeM
zGkhALV08&>nJ0v|c~`>J46adhveoWbKdxx7^tDigzYH^@9@CyqezF=*jqE`z#sP?F
zcn@#?JPOA<OzJklsZVNVh}E`z-`e=!YS`x4e4Wb>uh`|zTW(0Q0iTC(ZO@3U;jM3{
zkqct{Nmp<D%IjUC!%if^NhkrI4f?%`Z8mNEVZYJm!?}K_RGp*+tVZHgO7)i2$d$KF
z_Ln-m>izOQmQ{K5xJ4$LC5g!Vei8PF`@EIziZ+hDwcQvnoRzoXi4TYM53~z|IgT+%
z>OQeqgVfdW&O_e;XQCBYmrFKs;Vy}PMYxwdE*D)f2ubCNi~l3@rBs?Jei0!l=4hwg
zux=}`KkYiv5iFbues1}I-fPEI4&(L8KRVVe7%OkG)NowweSMLSx6>LqQd%cNI#0R!
z#-_rly9rW!`g!S$J@t25Wl|r*G+M8b*IoHO)3Lt43jq6TLChs%vq}jO<+pre>Hud@
zlWfD~Z#B%yIlLEC;A3tGdQx6?)x{&DEx}YulM#Jw=>4I`I(LVosr@W)<Y)JzmEPcz
z*Zw!;MJY*-Mc{9(Y<$uYkQAmS_6HH&F4QiNYrn}DNINxrRMz-fds)nWqc}j_2<UqZ
z6p3SE2gz>0TrfZXwTxO8U&n7(8|+Z5psS>~-W=qb!>mc)*U1&4YKu=&0>!VyaZe+i
zGN~4cK2MjaB8^UnX1ewcJB<!u#h}r93TC+H^XuJgZ8lGo_;qeTR@qGz4@9S5?^^2%
z@l$~dgz}5xVFjas$w+@fKgWS@lB(A2v99vcYSmrf=D{>03@aI*%}<m+*emrvGwnH4
z=ew>_NM}dSrovJ`EA?%Tx53S#pN`!_bL_gDUahgTS)Ap;r<<vpz%9YpOkC%nHEXou
zbys5~W%%c*!4LyQ9V=30Vf5j%=z991At%4-<uZX+Z-NV;*m_NnE9AI3zT4eWby$(P
zYuoxA@Oz%-kGrLt%52~72-VeIQiUbGoo~0-in7bwysppjQM7NT0gbQM2{2E*JPCi*
zs|fTm^(?bPRei1Buu+lKTDw?YX|75H4<F|x_Cd=+ifL)A@t{yoGp(I(_$3DWLo_~y
z<d~1NVmp1pV@26*?cGN`h-S$P@?7dB&O`aZ<BEj(!$q;L3NXw%H$EW25_$XsE;C^G
z<M5k*pKhFJi3;b}r@pBg;sG0BWp}cm13v;T_sI8fl47h+eW*di7_i9gZ=d~>c5216
zVx)^4qr9mrL?gZv&Tg<MOhO7;78`)19~TA*I`pmw19LTpyVBVq*oUcaG5XYA3m&GT
zV8y~;%y8g>qSNhD=bHy%rl&Tfr$5sn&kBRgg@WIbLL4O?twZ}IvdP}X7OqYGW_l4G
z>8Z~1E0SRjR7T<!_lvO;2GudijGtrlaHptompV1^c4OylX~IEm*f)&naY6g^Rp(1~
zlnE!7(&#8^B9X-Z^gCv;ajXhYFnQ)|-YzPB5w^*wtQsev4{28<JF}8$<Z~X>OG3#1
zFcpJwIgSLWv~uKg>TG1`5o{X?XD_9f6UjD4{milgcxcr^jI5@veu3i0)C*1Igt^X*
zpz;`3PzITBqp^-&ptO#e)a|FpX(yWDq%6n5J6taj>CPVLgI$pQ(%C}umTca%|6B>f
z{;zG{i^t0IkLDnw#4`Qt6(D-NtVd%hsFtHl9@JGBx4g~!$B`1*0y(EjcFpj`JcJAV
z62-YI@S(V5rr{U!Ip_0=gy4v2TODBzkWRiGgGKu|kH^P3RP__*c!mFHuHhce86V=x
zmG8zAwB>3@!w#z~<VR8As5TE<oqyY<W#HEujZSIJQ0qVtS5ynr|7Z>xY84f5QAQzu
zpceKot@dfK<PSYaeeTUv#O5)Pjx<M|#6hDSqx47*oWfbu{_|yY0Hwt9_lZdjIu&n@
zDLeKz(y6O*g6cSCm`x9u;w;z6N5P=ky2>=Nuxy*Hdw7<3NaOtUJnIvcf6n*iZiCG`
zebR@aVfU)(o*Hl{wT(`MO#f8o`CmB4AF|<zY_FUCO5B$t2{LlyE(z*7tJF((D|?{)
zngjiBh^mx_QnmIBN~^=u4tUn+0Q^s}bu;`BW{{01Bbw_~4)K4I@$3#b4B8(pFMU86
zrh0Cs@+--;jdD}k{$`=lQamnNf<wsD^x{X1XrY{-u{qU(Uvu7E6l;@_y*DYz@}$U4
z0;~3DBaU|S?kHN}T}xj<IM!iJeC(cb?Rxo`KFBvOYq|O%J8%xh_WlJ>u_d#rqek)f
z&qXht+HP=uahgOgCy59J!#vWsHqx~kTFIH~^?J}RZnNd?44#QVA|vEmh7g_oy|dpF
z9Kq9%jos2i{!_v0<UfJya8DdVtb3%KHt(;WmgrvL$HXR_+ZYZ(NCq)2lX<fKS&(tE
zO&EFc+}K$}4&Fg#DI!dM=Z3>}<R+&?jOTu}!&xvwahl96Cr4dNj7ho*Wy1H_j)93}
zE~eTHZ{(Y1@Y%~jN2VuRPK}D(q-6~na`H5fHl8;50P=Ban3vlg#%!*pQ538l#i^XA
z*r(dKGJE;T1msi2<H14M_6sK{(xc3v)>-3_md?%DfJf?!vmJQF<NL4qY@_u61b?QZ
zqHnrMzxg-KilW26&bH7f1gCN1a@UnW%2<DP>g2tBQh)2L3w9kOIHUYP00n*^#rb)1
zbNB$x=pLy2=NGXC+<EKW8~)jI`vdEIJor0}sn=&iK*#!?s5u-ieSSZx=mNnzQi~0w
z^LWDBknGi2x2~kJ6~D`!ol>m{@_<ALN%L#d%Vr?$Fo&{t2*)nCC%z1G5u?p-7HGi;
z^@-4_1aUW*AD0?nR#K(j=b|RX`P<%crh%Th8Sj++#3wJl+t36XpW9+}$e+ShGksyR
zuS9fGE=77MHx8UGu{Qd~``y8mc%m;wAH2ooWT~2^BvxSy$6NVjBLsILZW>0wLfd=W
z<u#vHMvE{&Y-O6Y&)G@~s?$Ktc{A%TL>p2DxyCf8XmDdr{tB(GaK@JA9J5^vTsu_)
z;|q+}1ban?%|ysj!uGE2Jb}Ag!hhLWIQcom5i3f4$WP283r$E5TjZw%!LCenJQ+R#
z-Fw;f@OsOZ&C5WiN7p|a#vzpfUsdR5^)G(>QxY9dHbx>MKXV!PVdt~bih~0nV(R(<
z(1#ZIz<>wR=RDQ3E3zxL?1u{8PbM!`<!sg={Ki@P^>%gQ*=3r8C%}gpyWdql*V_O@
zRC0z~YhCg+qK1ZbnqNBJoLz2>>-~V-rcb1-p0lzD37Bc*b5Q<QC4pW=;@1(HyL^D*
zX5!q>V0vsiBI>4P&kGSkTfY&6m8w9vTRLL&;ftQBd?+&4v6S}0PP(WAV4S2J(8PE^
z|1vag=Ykx9xnHAuM&$5oUW(N?jE>f3oFnMvPpe`YJ_B}Qm7<mebPpE`jv*3MPC?;+
zB*M0y(h!(i?PiGG>nV9<$R7CdL8yWmpz%)rZi}DNW%XjAZjYzC?>~C1Gkh4`bN5G^
z9|P<tQBI=G1ca;CS(qPHz~JnS#1|=Loefdcosg2^5f^-cszL)F(~o%r-PqHcusCje
zOo>-12ETY+Z|7jjT;%v1WR#JxBNI1pC)&0*gEVur#D!-bn+hA;yRef|7KNtvyGGyN
zQu}>W(SncAt<Pyg&uAqdc}M(OTaBJrNIXSiNaLT*I%A7FqQj|<#Q15r_`)Gm)M_NO
zs3Ex`(%wp#*m~)6@dEi|^t6?DT2{0heeX}+l8nLrsa3ps)#!PHV4M$t?V|oeS}QlN
zYwgT2y~c_!x;^se%A(otT%gENUc@?HUBd1#KW1n#?8;h^ph<2VbJwL;V@f@e#1N?$
zPBW{!1Y&ZMo;HF5fnV3V0$rR<UgK$pJ8uZ!kD|S)ORlay%gFhg+Uo%WwW~AS^{{Z<
zURg;@s`DlVrM5|@u=**~XrHi@m=qK0`skTjZ}8>wq<HK$d#{w?i0IfpuIMqu2dnyz
zK%>^vLM&lstKE)s_Drc8w**$)*@|*J9M@lx(C*$h2w4B(<ageRvyj|cnEC8IJRTI-
zU!32XfL4Rx34LD*B~jfx`r{of@}d3~S9;{y)13I~NJ#~ZZRXmHDg8Y9*`whPsmy(%
zrc+C>bw!#_75cm3r0k!vD&D@dF-dF%mvuRv54l;`|9Xdb^IUVyMdg;z8DttqpK;de
z{&%S?zJ(ddw(R@IPghzEIwsJXh`2Ycr(#JdBN`<jRwhsDmMngz@;OBTje%5;G9lZ2
zYdgXe&9DCxo7M!;B>&K(Pb%HJ#hECxxQb=JzHr|;KTXf+9R|`L&M-$<Zk3bkLGFqV
zZ2;>9(J|{`-9vs^Ce-i0D+!$@*gg84zQ|i^Q$OW*8cx!^IuY^(&#zKU@mTfYwE}hU
zYBi^(ibqv*CwXP@T~?_#jBi?W$l~_Br5ndMzg*>fw}uWoD!ODKy##tSI#g{7Nnr!?
zO9$Vo5gL&<uW0`VX|RVSE6PlHlr*|(8L201adlf{$sPz+_FBx;y2P7zRJqBP7-?T~
zj+DFP7Vj<vBh_tyYCD9PY8{I*-E`NQlVqyCe_-JhMY$AMIelwv%R%~YqM`S{02<@l
wuOhw8J13yIwFBU~|L6OlV;waRIB>?nf1Y&DbPzg9`}hEu7+C06UvrN8KeZ@oDgXcg

diff --git a/src/components/system/Info.vue b/src/components/system/Info.vue
index fd2c522..af2b8c1 100644
--- a/src/components/system/Info.vue
+++ b/src/components/system/Info.vue
@@ -27,25 +27,25 @@
                         v-if="discordLink !== 'https://discord.gg/WzejVAx'"
                         class="info-modal-discord-link"
                     >
-                        <img src="images/discord.png" class="info-modal-discord" />
+                        <span class="material-icons info-modal-discord">discord</span>
                         {{ discordName }}
                     </a>
                 </div>
                 <div>
                     <a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
-                        <img src="images/discord.png" class="info-modal-discord" />
+                        <span class="material-icons info-modal-discord">discord</span>
                         The Paper Pilot Community
                     </a>
                 </div>
                 <div>
                     <a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
-                        <img src="images/discord.png" class="info-modal-discord" />
+                        <span class="material-icons info-modal-discord">discord</span>
                         The Modding Tree
                     </a>
                 </div>
                 <div>
                     <a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
-                        <img src="images/discord.png" class="info-modal-discord" />
+                        <span class="material-icons info-modal-discord">discord</span>
                         Jacorb's Games
                     </a>
                 </div>
@@ -138,7 +138,6 @@ export default defineComponent({
 }
 
 .info-modal-discord {
-    height: 2em;
     margin: 0;
     margin-right: 4px;
 }
diff --git a/src/components/system/Nav.vue b/src/components/system/Nav.vue
index 10d1e94..a5dcfcf 100644
--- a/src/components/system/Nav.vue
+++ b/src/components/system/Nav.vue
@@ -9,7 +9,7 @@
         </div>
         <div style="flex-grow: 1; cursor: unset;"></div>
         <div class="discord">
-            <img src="images/discord.png" @click="openDiscord" />
+            <span @click="openDialog('Info')" class="material-icons">discord</span>
             <ul class="discord-links">
                 <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
@@ -28,7 +28,9 @@
             </ul>
         </div>
         <div @click="openDialog('Info')">
-            <tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
+            <tooltip display="<span>Info</span>" bottom class="info">
+                <span class="material-icons">info</span>
+            </tooltip>
         </div>
         <div @click="openDialog('Saves')">
             <tooltip display="Saves" bottom class="saves" xoffset="-20px">
@@ -37,13 +39,13 @@
         </div>
         <div @click="openDialog('Options')">
             <tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
-                <img src="images/options_wheel.png" />
+                <span class="material-icons">settings</span>
             </tooltip>
         </div>
     </div>
     <div v-else class="overlay-nav" v-bind="$attrs">
         <div @click="openDialog('Changelog')" class="version-container">
-            <tooltip display="Changelog" right xoffset="25%" class="version"
+            <tooltip display="<span>Changelog</span>" right xoffset="25%" class="version"
                 ><span>v{{ version }}</span></tooltip
             >
         </div>
@@ -53,15 +55,17 @@
             >
         </div>
         <div @click="openDialog('Options')">
-            <tooltip display="<span>Options</span>" right class="options"
-                ><img src="images/options_wheel.png"
-            /></tooltip>
+            <tooltip display="<span>Options</span>" right class="options">
+                <span class="material-icons">settings</span>
+            </tooltip>
         </div>
         <div @click="openDialog('Info')">
-            <tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
+            <tooltip display="<span>Info</span>" right class="info">
+                <span class="material-icons">info</span>
+            </tooltip>
         </div>
         <div class="discord">
-            <img src="images/discord.png" @click="openDiscord" />
+            <span @click="openDialog('Info')" class="material-icons">discord</span>
             <ul class="discord-links">
                 <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
@@ -230,33 +234,12 @@ export default defineComponent({
     right: 0;
 }
 
-.info {
-    font-size: 30px;
-    color: var(--link);
-    line-height: 14px;
-}
-
-.info:hover span {
-    transform: scale(1.2, 1.2);
-    text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--link);
-}
-
-.saves span {
+.material-icons {
     font-size: 36px;
 }
 
-.saves:hover span {
-    transform: scale(1.2, 1.2);
-    text-shadow: 5px 0 10px var(--foreground), -3px 0 12px var(--foreground);
-}
-
-.options img {
-    width: 100%;
-    height: 100%;
-}
-
-.options:hover img {
-    transform: rotate(360deg);
+.material-icons:hover {
+    text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--foreground);
 }
 
 .nav .version-container {