From 70c5cd704544c936d2bdab976327e9fa5e605f9b Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Fri, 21 May 2021 14:06:40 +0200 Subject: [PATCH] feat: update color scheme and logo (#301) * feat: update color scheme * fix: update favicon * fix: remove drawer title container padding and font size --- frontend/public/favicon.ico | Bin 41662 -> 15086 bytes frontend/src/assets/icons/logo_wbg.svg | 1 + .../component/common/NotFound/NotFound.tsx | 4 ++-- frontend/src/component/menu/drawer.jsx | 13 ++++--------- .../src/component/menu/drawer.module.scss | 12 ++++++------ frontend/src/themes/main-theme.js | 12 ++++++------ 6 files changed, 19 insertions(+), 23 deletions(-) create mode 100644 frontend/src/assets/icons/logo_wbg.svg diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index 857aef80d573d92ab3726711fe281841a4780285..551d158eee9678935e6b26ecb07611fe1b186ac8 100644 GIT binary patch literal 15086 zcmdU0TZ|M%6s>VpetaN`Fx>;YDi{qvBqY8-x@RBk^uQ7mvl^ojBM9Q-$A#S$G>$)L ze6I09{7_>2&_wx=l@%0{{SZNdCV&thK*mR+@r$?wH`$f;oSv?xcc!27rjy$0sj7SL zsav;h-@aWdL_)NPg$o7hHu3R%A#M>uw6)p4rwefkZPQV+|Iv$u*n$B!VGKybLnv&w zu6c#37JpYRzUJ~wTJ112b-kghLs?zfX6VUJSPJ**>sDX8+OF#}FRKNHxIBR~mC=d!xFvq8 z<~lE5GWV(yKrtG+?`%!N#t+vUyCY9ijxAfN%!vWn8A`tZK6!_izs*k3TMfqNSG1>8 z2Uvs~%Vse58el1NuIkYkwv+(w9nFK?ex_*2olt$~o(66_QzAcy%G77s{OOl`uWmgx z57_JBBg>ul*`VhGVu3H3Sod^+^W=Gs+S?DEK63(d9J1)ilRos#%M z>*ejr9mR7nus@>WC-!o#qq)uIxlPY|7S1cGe2m-S#!vr>w#lgU4abj|&;498(#cIx zv2$F*@fZB#fLsG$I&cBv|C;#u-URG%-aVQ{{}YBW5QX$j%^bAF%7(n0?!lG z#Q(?dC(Yd>A90O;rcIn zf3emeMvk-L_>sGpx|g+`(~lHG1--xDf46@e$v)2AtB|MHUh`~AD~ly=cMTib?K!@g z@>zvEoEx@tzhY@>KJYhl{%Sniq2A~K_PBvBeY$Da0N+qNAWvz^32{+#+L1a!Y*WDc z{OIUVuf`f2Z<=*LE}uDlAGn^)%nxB5erSLX5L+Jzs+y41~zDo_4+-Ht!@@#kE zmGdZ`pPaYU15{$^#nDsV)|=F$)T`99t#_W&YD3XcoO4>!@uPxk+0t3p!B*D5X5O~; zdEtB$&N!(f*!ypxtmc>sM3j*B_Aa;-KHy=0QEl?+4AIMT;&eVHl$Ueyj)c zJrz}M$v90tnbp-5F+^HJdwWF-c)eJ{FXH@5=rr|RT^BgP7k<%S@EKjgqg>ez9i9sz z{w2rfc`eUzA>N^G{j^}`9V6LT1^Ri}OTMAaHY(s53v;neQtzPpvnPJ^7eZcCNlRSSRogavd=D?}Fr0cGz`duz$+;e_{#ZNgqY| z_Su%ev9*v-Z1mNLRn`XKWM8f1^H~Dl{!U!^WB;5s4}ZUJN;&ZCMw4qG3+*9{FZ$m^ z*%dafc>a`KOv5(!MVjIu?X$*>mfv9gC$~0C|5nVDT-PZ1+<$g% zvLW^-&&OtxMGrGDeXbp;=Kc8)XuS8#L<35#zG(kKW(@ObvyjQn;5@TA% z)lxp|Ogfbf#2ezHV$mY5cFUIci1A~8vyLSfbI54PSEan-n(I*O_%kdHXN-(Fh5E$U z^JYvR5`Rm5H1hpJVqk6CWF`CJ2;*uu&$#zF#Kx9?2#FDk*5eRqNE=sP(0KaljLzpp za;yE0wjXl$Tlb8k5X;5Q^O@tVra9W;q-c@i+a&$un1ui+iri&+ax!Pg>c|dtU65ZFbG|{l(oDi(XTH0<92d1 zI%lrD=e)SKE?Hw)edcW1A=(C9?d~zY_mu6j;Y6HsZM1c_{n~u^e=x-1*rErfGqg7k wS_g`)j{(GfdqFSv?;g^z&lzanOd=P28hPJQ=2lU1*qJQFmu#2gNJHBH0Vj5x6951J literal 41662 zcmeI5TSzoz7{^C8T|sKoM92iw&!PhrB+-TDA-~X~qY%O8MMS1XP*N9_VSZwEz#A{q zA~Xn+yb$cd@LZY)gP?{kc_<-$`#-a@>*A-o^UmyHX8k|%xIQz_d;0y~ zncbOv2MwbDKi%C1e&1?*`MF_K7>02N9Gi?E;Idt;S=Ep8B5{*H`eD;Wxv*WI=T1CHPP9eC3~P zT>oL*3-CwbxwHZ_{sR0Dc(VSUr+q(y#Y6CH+XXcEJ^Vbewma4%aQO^=JvRm z-Ts}|ysKbzPlg3~1@#|N3)^#X2do~+kS4EF2irO%o)i87x8^i!atZaxc`>ma{%xO! zoZr)R?viVYJ!;{4F8&IJZm%VaP{%LS!nGE$bBTQJa$|3yaI7xhzE)ONs@~pSH8C-v z=I7_t;^LwspPijm`}si`S-czCGN zZIMVs4GavZ;^Jc6v0edFxt7+o_fSB$EzjgPHa4pD_4Rbia7}&7%gd^|x>|SKy7yM( zp44A{)uX2jwat|9vpHFu2a8fazmkzT3cJo6#6skotvA} zVIbGkw`gecgUg~jtZsqyvm<3LP zIe#Ca9=X>baUSHU9v>!-(NBN-P>-j_ zeB`!*y1F_Yb`Pc!1N)!xs~)Ybt!{C;D!;e4r-H$tjvn%SOe(tz2|9IpCbzJ#P;G5( zxnk<3u;zD!@_dXP3n0n2&(e&Ijk!VUs%(3EyUyIy`40VSXrfcMXL8HR%GAcjhAXa4 z3NI`y=rWMCZFa2(iMsWBCSTV292^`t!Rn|?I2=|L6&1SUmvy*yEri5nT3K09H8nN5FH@D=Xs~=cV+GGgrOZrKL`}{EjimI&~*D zi9$}>Wx3PYJ?}&atISP!-J~XIo0H#xrIWSPmK^5GWB4uWBnF_3FIS=*Kl^X+%I z7`zwek*wE!Djh;tb;vR1`_Ee#L$0)WEsa{ls=5w;;J=0CY)rXg>84#dE?$iR%)qN0 zC-Qw2-%nD{%Uy7KE(02zR^{W^xB+)Fck;RH&tP-sY2Y%rtqgU449|;eMvNmJ^W$&S z^9H;So-4Zz4Sxdn_5CjN-;EyYC_e<3IqDUYXWd_f&%w9gZpP<_vcF-BQ}8F?xjY`w zd`gq=v~Gt>U*-9QH{l<^<+FeveZ(4r+y}e}uY%J^fCNZ@1W14cNPq-LfCNZ@1W14c zNPq-LfCNZ@1W14cNPq-LfCNZ@1W14cNPq-LfCNZ@1Uy6_@nO;k`o;K|Kz4Y@qXMv? zQqlIpW{BmdR&0evbu^aM(xwHY@xQUSAR0?0QH#dmSZEBH^)JQaW;4DVkE_i%9vUHu zt=`GjlW|b?$Gc+~fz#r6_pJR1ae?HgiY3P~Ge03V|LI~L$0x^Yi&p~AQ}sBhSAxE# zo+o2jC~TRjzq%X?jp%$ij-&HwDZYP5v{B)BtjsvxL2JIoI~0iSk2e^y;w7tsW-GQT R2*i$;Y#*;|FGfK0{2$vvR1g3F diff --git a/frontend/src/assets/icons/logo_wbg.svg b/frontend/src/assets/icons/logo_wbg.svg new file mode 100644 index 0000000000..b79f917031 --- /dev/null +++ b/frontend/src/assets/icons/logo_wbg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx index 8e6909b48a..f63393ac87 100644 --- a/frontend/src/component/common/NotFound/NotFound.tsx +++ b/frontend/src/component/common/NotFound/NotFound.tsx @@ -1,7 +1,7 @@ import { Button, Typography } from '@material-ui/core'; import { useHistory } from 'react-router'; -import logo from '../../../assets/img/logo.png'; +import { ReactComponent as LogoIcon } from '../../../assets/icons/logo_wbg.svg'; import { useStyles } from './NotFound.styles'; @@ -20,7 +20,7 @@ const NotFound = () => { return (
- unleash logo +
Ooops. That's a page we haven't toggled on yet. diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx index 3bed45a12f..3736209ca2 100644 --- a/frontend/src/component/menu/drawer.jsx +++ b/frontend/src/component/menu/drawer.jsx @@ -8,7 +8,7 @@ import styles from './drawer.module.scss'; import { baseRoutes as routes } from './routes'; -import logo from '../../assets/img/logo.png'; +import { ReactComponent as LogoIcon } from '../../assets/icons/logo_wbg.svg'; const filterByFlags = flags => r => { if (r.flag && !flags[r.flag]) { @@ -76,15 +76,10 @@ export const DrawerMenu = ({ onClose={() => toggleDrawer()} >
-
+
- Unleash Logo + + {title}
diff --git a/frontend/src/component/menu/drawer.module.scss b/frontend/src/component/menu/drawer.module.scss index f616d8258e..33c52efd4a 100644 --- a/frontend/src/component/menu/drawer.module.scss +++ b/frontend/src/component/menu/drawer.module.scss @@ -4,7 +4,6 @@ } .drawerTitle { - font-size: var(--h1-size); display: flex; align-items: center; } @@ -13,13 +12,14 @@ width: var(--drawer-width); } -.drawerTitleContainer { - padding: var(--drawer-padding); +.drawerTitleLogo { + width: 65px; + height: 65px; } -.drawerTitleLogo { - padding-right: 16px; - width: 48px; +.drawerTitleText { + font-size: 1.1rem; + margin-left: 0.25rem; } .drawerList { diff --git a/frontend/src/themes/main-theme.js b/frontend/src/themes/main-theme.js index 6a214fbe14..70d76a175f 100644 --- a/frontend/src/themes/main-theme.js +++ b/frontend/src/themes/main-theme.js @@ -3,12 +3,12 @@ import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { primary: { - main: '#607d8b', - light: '#8eacbb', - dark: '#34515e', + main: '#1A4049', + light: '#B3DAED', + dark: '#0A1A1d', }, secondary: { - main: '#0b5644', + main: '#122D33', light: '#40836f', dark: '#002c1d', }, @@ -59,8 +59,8 @@ const theme = createMuiTheme({ }, cards: { gradient: { - top: '#617D8B', - bottom: '#31627C', + top: '#265f6d', + bottom: '#1A4049', }, container: { bg: '#f1f1f1',