From 4b03d0dd8f2507783af9bb6667d43d5b611cf134 Mon Sep 17 00:00:00 2001 From: hensm Date: Thu, 13 Aug 2020 04:57:09 +0100 Subject: [PATCH] Improve options page about box --- .../ui/options/assets/icons8-github-24.png | Bin 0 -> 487 bytes .../ui/options/assets/icons8-github-48.png | Bin 0 -> 903 bytes .../ui/options/assets/icons8-icons8-24.png | Bin 0 -> 392 bytes .../ui/options/assets/icons8-icons8-48.png | Bin 0 -> 674 bytes .../ui/options/assets/icons8-paypal-24.png | Bin 0 -> 500 bytes .../ui/options/assets/icons8-paypal-48.png | Bin 0 -> 912 bytes ext/src/ui/options/index.tsx | 120 +++++++++++------- ext/src/ui/options/styles/index.css | 35 +++-- 8 files changed, 103 insertions(+), 52 deletions(-) create mode 100644 ext/src/ui/options/assets/icons8-github-24.png create mode 100644 ext/src/ui/options/assets/icons8-github-48.png create mode 100644 ext/src/ui/options/assets/icons8-icons8-24.png create mode 100644 ext/src/ui/options/assets/icons8-icons8-48.png create mode 100644 ext/src/ui/options/assets/icons8-paypal-24.png create mode 100644 ext/src/ui/options/assets/icons8-paypal-48.png diff --git a/ext/src/ui/options/assets/icons8-github-24.png b/ext/src/ui/options/assets/icons8-github-24.png new file mode 100644 index 0000000000000000000000000000000000000000..3292b25258ac5bc67912bb2eb355ecde67c4e858 GIT binary patch literal 487 zcmVorA7;_=@j1kCj%{UkKIRDZ6F#U@PS< zv?IO>29GKj)KCw(BRSH5oo@Mw!3qX28w}=hgt0()Qc)aEh5R>hp(}lBA-39q!MiXY z${F;BSZ@ag@v=p&ZG(*vyQJI`5-}R)Uvh-Ac3+~23gSocHsn6fk-G6IkTw+;sb>%I zGm1lv#a(Mfo=Jo$+(`2um{+uM#MO*&Lvf?~wLl*};5Sav*kwH{HsJ&nwv+qxgo;xQDwX3?AG2ymnz2FYG+a&6rMW8;Xvr+Sc1RjVqaW4dXia dn;qaE`~~v!g$u`ztiS*O002ovPDHLkV1jo?+tUC5 literal 0 HcmV?d00001 diff --git a/ext/src/ui/options/assets/icons8-github-48.png b/ext/src/ui/options/assets/icons8-github-48.png new file mode 100644 index 0000000000000000000000000000000000000000..a2ee366bfefc332ce9e86e62f7cb0aeb7967efad GIT binary patch literal 903 zcmV;219<$2P)Mo>&!Gx(3B9cDY;mUfe2K+ob$Jh0+-Ae%&yl~|9TvcUIceXhxZFJp0KV!y5Y z=DXAfE70BAp7lAQz&r6tX1atcg1#?dAMU`~?A}`3j_0r^7=M-CRodTz-D7%pn+tv5 zN@wH*)rZJ0NYRdDq=SNVt*MJoyVPJczd(~ zCxf_$niyRt&TU>S$Jc~ng2S`o z?Yr~G`N)tTy|RGHf=eL?GJGoF`H z_Qe6a z4dEBGtP#DN8GhJx?*-}H+*yrZarpqhbqy!*P8)bqVs)&`a9%2%w^3dAqY5REQ#jRS zd`hbE468cuC$XtTj2>;V`oKMh_odzHMqDqI2->q$+qFRgM1|8;eqB zn!sDqyHIih^HQOA&?Zn!+i*C8n5#MVpKRP=aRN7TO-lvXGkC4$nAhSrnI2EqDkicaQcY%ST0-24BxyPac^BM6jj0;b;kieSI(CXs5Xv0pDX!wRe zgngl*5!x|T08%$A9n%-?^egTw_!)RSz~WgcIo=`B9@SCWF6W zwArEpe{QsLQGr@UJ1Z)XXS5D%Cy5WERpNCur|@u`SCVeD4lLj*ZF8S6t@5T>1zW<~ mU&aldgz2`2!JNbWBOC7%>|zr}88`O;0000-sinph^22 zRZ$V$yA;%Ckfs}LvPo5JH;s)+7c(IzL#EC>XQBhn2bYX+&;Q>;CimRqg_M+7$pD{$ zD$q8JDp26R5?UKn<7$ z>W*>0fMrbrQpAGPxfah&;482Mi~x`Q&t+f@xDj*z0{J8)&>7#j{T-hIDkA0*n9v$q z=(qUch_S=;Cb6wGwjgzyxbH5n>Ap@ayxq&$*n-qqQ)+AojgJ~*3sPrEsqtQD9BGU# zNS$X&jjYh9YK$#NonSSN$`hf{2%GdsDel5h3~|51Cf!8>)5^Fv;`t}4B!NZT zzkzdL!D?(F>^I=jku`v~Nl2hGv>n-~*4RS7#cMmVJ*}~YU?qO=9oZL+u?4B~PN^X~ zvSW?01*tQl)Q}z7xyIOn)OoNSncTJNVUv>Fk;%Bzut`bo$X3Pke$=2r)d6cqcCU4y zjjbcw(i&UncNWriWaC<63t^{GmyS$zKVZEZ3yw2%H#Ao$Z)i#}C-BMF9RoIrc1N~_ z<7*?y_(@p5i68#rgH?DEC;*3aZz-#I|9vjtu-l}hq@*N+f6^ict5NVM4gdfE07*qo IM6N<$f^I54cK`qY literal 0 HcmV?d00001 diff --git a/ext/src/ui/options/assets/icons8-paypal-24.png b/ext/src/ui/options/assets/icons8-paypal-24.png new file mode 100644 index 0000000000000000000000000000000000000000..54dcbb30d723e0a01b0cd9e447469cbdb459a1b2 GIT binary patch literal 500 zcmV}23m_kp;JxO(7!4Fm@lLLc&HpM$lHszm@PvNV^N?x z@PK-IzT;Bt-NdTY^@iBiq(BvmSO|P3v%d?Y@%;-sa2{=~cJL1OYw+t#2k$Wyd(&8p z^_SRFMBWw2S6dJ=66DvUE`Q)|Z9*g8s_~wScaQqRZV#0wq$~OecO+W!*X6iTc{roT)`*YYk~Y2e&cptQom%w zxxhyPUu=@!fj->8SIN50yaHE(uq*Ir;KPB3HJ(drc#Qp7!t5DTrK@%!@F2e6Rp3+7 zUpx_{AMrsN6-#-_|HVQBbq{OyUu1A$WJg7}bg&id#vkcAlDs{nt3RY4TSe_Cl;WCfNO5fM@lSwxf`f{#j|3AiDAO#(f@tYl>Rqe)EoC;@+afZxLBzOW98LyoT({fA*E zQ_umN5r4NN;4=`NxVv>g;ZNZo=cB+=;E2a&G4Lll<||M%9m2uH=MN!hxiUsBFsL2$ z*u4>4Me@=OYQ-dP6@DI&!EOO}J+^~_s|q73%pGVDeJ%cX0HqPhOF5$2@uCpu}Fpq)bw^MNCz;nT!j62y`;p|)l`!ZlD zCiYJN_sA_Hz5%N|Hpd0u5lOW`mvFXU;m_kA|M}V%ax=UG`E0+6BYrlym#bPC^EiU= zG2j|{LL~dUGxmLuxO`ZTNm5`k<_8ZyAJ~}3M+O)M-eF#=ZcH*83b2t6#kk)fn+3=O z)~E1w!p{J(&cde+WFpftKVX-M<(sdS&|5`6i3-($ycelfo9C9I%vl{wUN<-yA!(={*K^JD|{RNc_65bXKiDh zXbGlpbDS>m@Wq%Cz~LL1iv9@VyU0D+$k-yBYR{NV^%Y6z*uPNCGo&#PAF=z|AN m8tiv}TH`-OiWDhk9)AHj!JuNfr7KbZ0000 { return (
+
+ +

About

+ +
+ + +
+ +
+ +

License

+ + +
+ +
+ +
+ +

Translators

+ +
    +
  • + @RAVMN +
    es
    +
    • +
  • + @rimrul +
    de
    +
    • +
  • + @ThaDaVos +
    nl
    +
    • +
  • + @Vistaus +
    nl
    +
    • +
+
+
+
{ this.form = form; }} onSubmit={ this.handleFormSubmit } onChange={ this.handleFormChange }> @@ -448,50 +524,6 @@ class OptionsApp extends Component<{}, OptionsAppState> {
- -
- -

ABOUT

- -
-

GitHub

: @hensm/fx_cast - -
- -
- -

LICENSE

- -
- { LICENSE.replace(/(\S)\n(\S)/g, "$1 $2") } -
-
- -
- -
-

TRANSLATORS

-
    -
  • - @RAVMN -
    es
    -
    • -
  • - @rimrul -
    de
    -
    • -
  • - @ThaDaVos -
    nl
    -
    • -
  • - @Vistaus -
    nl
    -
    • -
-
-
-
); } diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css index aa44825..ad58acf 100644 --- a/ext/src/ui/options/styles/index.css +++ b/ext/src/ui/options/styles/index.css @@ -39,6 +39,10 @@ .about hr { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } + + .about__link > img { + filter: invert(1); + } } *:invalid { @@ -427,8 +431,8 @@ button.ghost:not(:hover) { .about { - border-radius: 5px; - margin-top: 30px; + border-radius: 2px; + margin-bottom: 40px; overflow: hidden; } @@ -455,6 +459,7 @@ button.ghost:not(:hover) { font: inherit; font-weight: bold; margin: 5px 0; + text-transform: uppercase; } .about hr { @@ -463,12 +468,26 @@ button.ghost:not(:hover) { margin: 10px 0; } -.about__license-text { - cursor: text; - font-family: monospace; - pointer-events: initial; - user-select: text; - white-space: pre-line; +.about__links { + margin: initial; + padding: initial; + list-style: none; +} +.about__link { + align-items: center; + display: inline-flex; + font-size: 1.2em; + gap: 5px; +} +.about__link > img { + vertical-align: middle; +} + +.about__license > textarea { + height: 200px; + resize: vertical; + overflow-y: auto; + width: 100%; } .about__translators > ul {