diff options
Diffstat (limited to 'src')
23 files changed, 588 insertions, 281 deletions
diff --git a/src/assets/images/icon-articles.svg b/src/assets/images/icon-articles.svg index e8141d6..acf5c64 100644 --- a/src/assets/images/icon-articles.svg +++ b/src/assets/images/icon-articles.svg @@ -16,139 +16,57 @@ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs - id="defs81" /><sodipodi:namedview - id="namedview79" - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1.0" - inkscape:pageshadow="2" - inkscape:pageopacity="0.0" - inkscape:pagecheckerboard="0" - showgrid="false" - inkscape:zoom="10.100958" - inkscape:cx="53.757279" - inkscape:cy="56.826295" - inkscape:window-width="1920" - inkscape:window-height="1019" - inkscape:window-x="0" - inkscape:window-y="33" - inkscape:window-maximized="1" - inkscape:current-layer="Layer_1" /> - - - - - - - - - - - - - - - - - - - - - -<g - id="g48" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g50" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g52" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g54" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g56" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g58" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g60" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g62" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g64" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g66" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g68" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g70" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g72" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g74" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<g - id="g76" - transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)"> -</g> -<path - id="rect920-3-6" - style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" - d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" /><path - id="rect920-3" - style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" - d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" /><path - id="rect920" - style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" - d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" /><path - id="rect1194" - style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" - d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" /><path - id="rect1194-7" - style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" - d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" /><path - id="rect1338" - style="fill:#00080c;stroke-width:1.56766" - d="m 17.618576,41.908926 h 45 v 2 h -45 z" /><path - id="rect1338-5" - style="fill:#00080c;stroke-width:1.56766" - d="m 17.618576,49.908926 h 45 v 2 h -45 z" /><path - id="rect1338-5-3" - style="fill:#00080c;stroke-width:1.56766" - d="m 17.618576,57.908926 h 45 v 2 h -45 z" /><path - id="rect1338-5-3-5" - style="fill:#00080c;stroke-width:1.56766" - d="m 17.618576,65.908926 h 45 v 2 h -45 z" /><path - id="rect1338-5-3-5-6" - style="fill:#00080c;stroke-width:1.06543" - d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" /><path - id="rect1338-5-3-5-6-2" - style="fill:#00080c;stroke-width:1.06543" - d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" /><path - id="rect1338-5-3-5-6-2-9" - style="fill:#00080c;stroke-width:1.06543" - d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" /></svg> + id="defs81" /><sodipodi:namedview + id="namedview79" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="7.331491" + inkscape:cx="41.464963" + inkscape:cy="38.600607" + inkscape:window-width="1920" + inkscape:window-height="1019" + inkscape:window-x="0" + inkscape:window-y="33" + inkscape:window-maximized="1" + inkscape:current-layer="Layer_1" /><path + id="rect920-3-6" + style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" + d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" /><path + id="rect920-3" + style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" + d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" /><path + id="rect920" + style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1" + d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" /><path + id="rect1194" + style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" + d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" /><path + id="rect1194-7" + style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" + d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" /><path + id="rect1338" + style="fill:#00080c;stroke-width:1.56766" + d="m 17.618576,41.908926 h 45 v 2 h -45 z" /><path + id="rect1338-5" + style="fill:#00080c;stroke-width:1.56766" + d="m 17.618576,49.908926 h 45 v 2 h -45 z" /><path + id="rect1338-5-3" + style="fill:#00080c;stroke-width:1.56766" + d="m 17.618576,57.908926 h 45 v 2 h -45 z" /><path + id="rect1338-5-3-5" + style="fill:#00080c;stroke-width:1.56766" + d="m 17.618576,65.908926 h 45 v 2 h -45 z" /><path + id="rect1338-5-3-5-6" + style="fill:#00080c;stroke-width:1.06543" + d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" /><path + id="rect1338-5-3-5-6-2" + style="fill:#00080c;stroke-width:1.06543" + d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" /><path + id="rect1338-5-3-5-6-2-9" + style="fill:#00080c;stroke-width:1.06543" + d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" /></svg> diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg index 58dd3a9..f108234 100644 --- a/src/assets/images/icon-close.svg +++ b/src/assets/images/icon-close.svg @@ -1,54 +1,42 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg - viewbox="0 0 40 40" - style="stroke: #000; stroke-width: 5; stroke-linecap: round;" - version="1.1" - id="svg4" sodipodi:docname="icon-close.svg" width="100" height="100" - viewBox="0 0 100.00005 100.00005" + viewBox="0 0 100 100" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" + version="1.1" + id="svg825" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" - xmlns:svg="http://www.w3.org/2000/svg" - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:cc="http://creativecommons.org/ns#" - xmlns:dc="http://purl.org/dc/elements/1.1/"> - <metadata - id="metadata10"> - <rdf:RDF> - <cc:Work - rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - </cc:Work> - </rdf:RDF> - </metadata> + xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs8" /> <sodipodi:namedview id="namedview6" - inkscape:zoom="3.0499873" - inkscape:cx="13.442679" - inkscape:cy="79.672463" + inkscape:zoom="2.729418" + inkscape:cx="-18.318924" + inkscape:cy="74.374829" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="33" inkscape:window-maximized="1" - inkscape:current-layer="svg4" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" - showgrid="false" /> + showgrid="false" + inkscape:current-layer="svg825" /> + <path + id="rect843" + style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" + d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z" /> <path - style="color:#000000;fill:#1d8fc9;stroke:#010304;stroke-width:3;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - d="m 9.1489631,1.5 a 7.659573,7.6587251 0 0 0 -5.4155577,2.2437671 7.659573,7.6587251 0 0 0 0,10.8299149 L 39.168904,50.005259 3.7334054,85.436835 a 7.659573,7.6587251 0 0 0 0,10.829915 7.659573,7.6587251 0 0 0 10.8311146,0 L 50.000019,60.835175 85.435518,96.26675 a 7.659573,7.6587251 0 0 0 10.831115,0 7.659573,7.6587251 0 0 0 0,-10.829915 L 60.831134,50.005259 96.266633,14.573682 a 7.659573,7.6587251 0 0 0 0,-10.8299149 7.659573,7.6587251 0 0 0 -10.831115,0 L 50.000019,39.175343 14.56452,3.7437671 A 7.659573,7.6587251 0 0 0 9.1489631,1.5 Z" - id="path2" /> + id="rect843-3" + style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" + d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z" /> </svg> diff --git a/src/assets/images/icon-home.svg b/src/assets/images/icon-home.svg index 11b4f0a..5bfe7f7 100644 --- a/src/assets/images/icon-home.svg +++ b/src/assets/images/icon-home.svg @@ -1,76 +1,14 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg - version="1.1" - id="Layer_1" - x="0px" - y="0px" - viewBox="0 0 100 100" - xml:space="preserve" - sodipodi:docname="icon-home.svg" - inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" - width="100" - height="100" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns="http://www.w3.org/2000/svg" - xmlns:svg="http://www.w3.org/2000/svg"><defs - id="defs71" /><sodipodi:namedview - id="namedview69" - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1.0" - inkscape:pageshadow="2" - inkscape:pageopacity="0.0" - inkscape:pagecheckerboard="0" - showgrid="false" - inkscape:zoom="2.9150813" - inkscape:cx="7.2039157" - inkscape:cy="87.133076" - inkscape:window-width="1920" - inkscape:window-height="1019" - inkscape:window-x="0" - inkscape:window-y="33" - inkscape:window-maximized="1" - inkscape:current-layer="Layer_1" /><rect - style="fill:#f6f8f8;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="wall" - width="81.442894" - height="82.338066" - x="9.2669392" - y="15.413749" /><rect - style="fill:#000203;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="indoor" - width="21.594872" - height="31.91539" - x="39.190941" - y="65.836418" /><rect - style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="door" - width="21.594872" - height="31.91539" - x="39.190941" - y="65.836418" /><path - id="roof" - style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598" - d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" - sodipodi:nodetypes="ccccc" /><rect - style="fill:#f6f8f8;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="chimney" - width="12.538733" - height="20.388027" - x="70.41848" - y="2.2481852" /><rect - style="fill:#080808;fill-opacity:1;stroke:none;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="line1" - width="57.049389" - height="3.2935634" - x="3.9536645" - y="19.342648" /><rect - style="fill:#080808;fill-opacity:1;stroke:none;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="line2" - width="57.049389" - height="3.2935634" - x="38.973709" - y="32.057171" /></svg> +<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve" sodipodi:docname="icon-home.svg" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" width="100" height="100" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + <defs id="defs71" /> + <sodipodi:namedview id="namedview69" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" showgrid="false" inkscape:zoom="2.9150813" inkscape:cx="7.2039157" inkscape:cy="87.133076" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="33" inkscape:window-maximized="1" inkscape:current-layer="Layer_1" /> + <path id="wall" style="fill:#f6f8f8;stroke:#000000;stroke-width:3.25598" d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z" /> + <path id="indoor" style="fill:#000203;stroke:#000000;stroke-width:3.25598" d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" /> + <path class="door" style="fill:#1d8fc9;stroke:#000000;stroke-width:3.25598" d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" /> + <path id="roof" style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598" d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" sodipodi:nodetypes="ccccc" /> + <path id="chimney" style="fill:#f6f8f8;stroke:#000000;stroke-width:3.25598" d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z" /> + <path id="line1" style="fill:#080808;stroke-width:3.25598" d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z" /> + <path id="line2" style="fill:#080808;stroke-width:3.25598" d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z" /> +</svg> diff --git a/src/assets/images/icon-search.svg b/src/assets/images/icon-search.svg index 796283d..cbb1860 100644 --- a/src/assets/images/icon-search.svg +++ b/src/assets/images/icon-search.svg @@ -1,6 +1,4 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> - <svg version="1.1" x="0px" @@ -29,24 +27,20 @@ inkscape:window-x="0" inkscape:window-y="33" inkscape:window-maximized="1" - inkscape:zoom="4.5358955" - inkscape:cx="18.959872" - inkscape:cy="47.179217" + inkscape:zoom="2.3129303" + inkscape:cx="-62.258686" + inkscape:cy="27.670527" inkscape:current-layer="svg3545" showgrid="false" /><path id="rect1408" - style="fill:#14578a;stroke:#000000;stroke-width:2;fill-opacity:1" - transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)" - d="m 67.137863,3.0622735 h 7.476434 V 20.929606 h -7.476434 z" /><path + style="fill:#14578a;fill-opacity:1;stroke:#000000;stroke-width:2" + d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" /><path id="path1246" style="fill:#1d8fc9;stroke:#000000;stroke-width:2" - transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)" - d="M 103.36876,11.53057 A 29.302338,29.300789 0 0 1 74.066422,40.831359 29.302338,29.300789 0 0 1 44.764084,11.53057 29.302338,29.300789 0 0 1 74.066422,-17.770219 29.302338,29.300789 0 0 1 103.36876,11.53057 Z" /><path + d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" /><path id="path1246-5" - style="fill:#e4ffff;stroke:#000000;stroke-width:1.5;fill-opacity:1" - transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)" - d="M 94.422329,11.53057 A 20.355907,20.35483 0 0 1 74.066422,31.8854 20.355907,20.35483 0 0 1 53.710514,11.53057 20.355907,20.35483 0 0 1 74.066422,-8.8242598 20.355907,20.35483 0 0 1 94.422329,11.53057 Z" /><path + style="fill:#e4ffff;fill-opacity:1;stroke:#000000;stroke-width:1.5" + d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" /><path id="rect1408-3" style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linejoin:round" - transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)" - d="m 67.075075,19.587082 h 7.662958 c 1.329636,0 2.400065,1.070429 2.400065,2.400064 v 40.068158 c 0,1.329635 -1.070429,2.400064 -2.400065,2.400064 h -7.662958 c -1.329636,0 -2.400064,-1.070429 -2.400064,-2.400064 V 21.987146 c 0,-1.329635 1.070428,-2.400064 2.400064,-2.400064 z" /></svg> + d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" /></svg> diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx index a2635aa..be5a9bc 100644 --- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx +++ b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx @@ -1,5 +1,4 @@ -import CloseIcon from '@assets/images/icon-close.svg'; -import SearchIcon from '@assets/images/icon-search.svg'; +import { CloseIcon, SearchIcon } from '@components/Icons'; import { t } from '@lingui/macro'; import { SetStateAction } from 'react'; import styles from '../Buttons.module.scss'; diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index a043649..fb93d5a 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -82,10 +82,10 @@ } .search { - display: flex; - place-content: center; + display: block; width: var(--btn-size); height: var(--btn-size); + padding: 0; background: none; border: none; font-size: var(--font-size-md); @@ -103,7 +103,10 @@ .front, .back { - display: block; + display: flex; + place-content: center; + width: var(--btn-size); + height: var(--btn-size); position: absolute; top: 0; right: 0; diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss new file mode 100644 index 0000000..d5c2639 --- /dev/null +++ b/src/components/Icons/Blog/Blog.module.scss @@ -0,0 +1,23 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.lines { + fill: var(--color-fg); + stroke-width: 4; +} + +.picture { + fill: var(--color-primary-lighter); + stroke: var(--color-border); +} + +.background { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Blog/Blog.tsx b/src/components/Icons/Blog/Blog.tsx new file mode 100644 index 0000000..bd32111 --- /dev/null +++ b/src/components/Icons/Blog/Blog.tsx @@ -0,0 +1,62 @@ +import styles from './Blog.module.scss'; + +const BlogIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.background} + d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" + /> + <path + className={styles.background} + d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" + /> + <path + className={styles.background} + d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" + /> + <path + className={styles.picture} + d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" + /> + <path + className={styles.picture} + d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" + /> + <path + className={styles.lines} + d="m 17.618576,41.908926 h 45 v 2 h -45 z" + /> + <path + className={styles.lines} + d="m 17.618576,49.908926 h 45 v 2 h -45 z" + /> + <path + className={styles.lines} + d="m 17.618576,57.908926 h 45 v 2 h -45 z" + /> + <path + className={styles.lines} + d="m 17.618576,65.908926 h 45 v 2 h -45 z" + /> + <path + className={styles.lines} + d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" + /> + <path + className={styles.lines} + d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" + /> + <path + className={styles.lines} + d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" + /> + </svg> + ); +}; + +export default BlogIcon; diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss new file mode 100644 index 0000000..448bac6 --- /dev/null +++ b/src/components/Icons/CV/CV.module.scss @@ -0,0 +1,53 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.lock { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 3; +} + +.lines { + stroke-width: 4; +} + +.seal-top { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 2; +} + +.seal-bottom { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 2; +} + +.diploma { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.top { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.handle { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.bottom { + fill: var(--color-primary); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/CV/CV.tsx b/src/components/Icons/CV/CV.tsx new file mode 100644 index 0000000..0672ac4 --- /dev/null +++ b/src/components/Icons/CV/CV.tsx @@ -0,0 +1,58 @@ +import styles from './CV.module.scss'; + +const CVIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.bottom} + d="M 0.72670447,42.521138 H 77.467597 v 54.36591 H 0.72670447 Z" + /> + <path + className={styles.handle} + d="m 22.263958,32.886587 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z" + /> + <path + className={styles.top} + d="M 0.72670447,42.521138 H 77.467597 V 73.884317 H 0.72670447 Z" + /> + <path + className={styles.diploma} + d="M 44.217117,1.106205 H 98.921356 V 36.610421 H 44.217117 Z" + /> + <path + className={styles['seal-bottom']} + d="m 84.933665,34.721635 h 6.957554 v 10.216808 l -3.478793,-3.767744 -3.478761,3.767744 z" + /> + <path + className={styles['seal-top']} + d="m 93.326919,30.779639 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z" + /> + <path + className={styles.lines} + d="m 54.53557,14.438273 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,21.384062 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,28.329927 h 17.563315 v 1.515454 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 63.495911,7.4924218 h 16.146628 v 1.515452 H 63.495911 Z" + /> + <path + className={styles.lock} + d="M 34.048314,65.601104 H 44.145988 V 80.557785 H 34.048314 Z" + /> + </svg> + ); +}; + +export default CVIcon; diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss new file mode 100644 index 0000000..235991c --- /dev/null +++ b/src/components/Icons/Close/Close.module.scss @@ -0,0 +1,13 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.line { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx new file mode 100644 index 0000000..0e7dab7 --- /dev/null +++ b/src/components/Icons/Close/Close.tsx @@ -0,0 +1,22 @@ +import styles from './Close.module.scss'; + +const CloseIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.line} + d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z" + /> + <path + className={styles.line} + d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z" + /> + </svg> + ); +}; + +export default CloseIcon; diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss new file mode 100644 index 0000000..cf4b03e --- /dev/null +++ b/src/components/Icons/Contact/Contact.module.scss @@ -0,0 +1,29 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.envelop { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.lines { + fill: var(--color-border); +} + +.background { + fill: var(--color-shadow-dark); + stroke: var(--color-border); + stroke-width: 4; +} + +.paper { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Contact/Contact.tsx b/src/components/Icons/Contact/Contact.tsx new file mode 100644 index 0000000..19295d0 --- /dev/null +++ b/src/components/Icons/Contact/Contact.tsx @@ -0,0 +1,54 @@ +import styles from './Contact.module.scss'; + +const ContactIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.background} + d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z" + /> + <path + className={styles.envelop} + d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z" + /> + <path + className={styles.paper} + d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z" + /> + <path + className={styles.envelop} + d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z" + /> + <path + className={styles.lines} + d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z" + /> + <path + className={styles.lines} + d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z" + /> + <path + className={styles.lines} + d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z" + /> + <path + className={styles.lines} + d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z" + /> + <path + className={styles.envelop} + d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z" + /> + <path + className={styles.envelop} + d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z" + /> + </svg> + ); +}; + +export default ContactIcon; diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index 1ae01bb..5916e8c 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -6,17 +6,17 @@ &, &::before, &::after { - background: var(--color-primary); + background: var(--color-primary-lighter); background-image: linear-gradient( to right, var(--color-primary-light) 0%, - var(--color-highlight) 100% + var(--color-primary-lighter) 100% ); border: fun.convert-px(1) solid var(--color-border); border-radius: fun.convert-px(3); display: block; width: var(--btn-size, fun.convert-px(50)); - height: fun.convert-px(6); + height: fun.convert-px(7); margin: auto; transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; } @@ -25,6 +25,7 @@ &::after { content: ""; position: absolute; + left: fun.convert-px(-1); } &::before { diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss new file mode 100644 index 0000000..2e1df3a --- /dev/null +++ b/src/components/Icons/Home/Home.module.scss @@ -0,0 +1,42 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.wall { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.indoor { + fill: var(--color-shadow); + stroke: var(--color-border); + stroke-width: 4; +} + +.door { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.roof { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.chimney { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.lines { + fill: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Home/Home.tsx b/src/components/Icons/Home/Home.tsx new file mode 100644 index 0000000..11c0c8c --- /dev/null +++ b/src/components/Icons/Home/Home.tsx @@ -0,0 +1,42 @@ +import styles from './Home.module.scss'; + +const HomeIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.wall} + d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z" + /> + <path + className={styles.indoor} + d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" + /> + <path + className={styles.door} + d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" + /> + <path + className={styles.roof} + d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" + /> + <path + className={styles.chimney} + d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z" + /> + <path + className={styles.lines} + d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z" + /> + <path + className={styles.lines} + d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z" + /> + </svg> + ); +}; + +export default HomeIcon; diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss new file mode 100644 index 0000000..5016ae1 --- /dev/null +++ b/src/components/Icons/Search/Search.module.scss @@ -0,0 +1,31 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.big-handle { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.glass { + fill: var(--color-bg-opacity); + stroke: var(--color-border); + stroke-width: 2; +} + +.upright { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.small-handle { + fill: var(--color-primary); + stroke: var(--color-border); + stroke-width: 2; +} diff --git a/src/components/Icons/Search/Search.tsx b/src/components/Icons/Search/Search.tsx new file mode 100644 index 0000000..abb7b53 --- /dev/null +++ b/src/components/Icons/Search/Search.tsx @@ -0,0 +1,30 @@ +import styles from './Search.module.scss'; + +const SearchIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles['small-handle']} + d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" + /> + <path + className={styles.upright} + d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" + /> + <path + className={styles.glass} + d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" + /> + <path + className={styles['big-handle']} + d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" + /> + </svg> + ); +}; + +export default SearchIcon; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index da4e029..b32c3d3 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -1,3 +1,17 @@ +import BlogIcon from './Blog/Blog'; +import CloseIcon from './Close/Close'; +import ContactIcon from './Contact/Contact'; +import CVIcon from './CV/CV'; import HamburgerIcon from './Hamburger/Hamburger'; +import HomeIcon from './Home/Home'; +import SearchIcon from './Search/Search'; -export { HamburgerIcon }; +export { + BlogIcon, + CloseIcon, + ContactIcon, + CVIcon, + HamburgerIcon, + HomeIcon, + SearchIcon, +}; diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss index d732b99..8bd730f 100644 --- a/src/components/MainNav/MainNav.module.scss +++ b/src/components/MainNav/MainNav.module.scss @@ -3,6 +3,8 @@ @use "@styles/abstracts/placeholders"; .wrapper { + --icon-size: #{fun.convert-px(25)}; + display: flex; flex-flow: column nowrap; place-items: center; @@ -17,6 +19,8 @@ } @include mix.dimensions("md") { + --icon-size: #{fun.convert-px(30)}; + width: unset; height: unset; } @@ -123,18 +127,6 @@ } } -.icon { - display: block; - width: fun.convert-px(25); - margin: auto; - - @include mix.media("screen") { - @include mix.dimensions("md") { - width: fun.convert-px(30); - } - } -} - .checkbox:not(:checked) { ~ .nav { opacity: 0; diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx index eb44e77..0f5147b 100644 --- a/src/components/MainNav/MainNav.tsx +++ b/src/components/MainNav/MainNav.tsx @@ -1,12 +1,14 @@ import { SetStateAction } from 'react'; import Link from 'next/link'; import { t } from '@lingui/macro'; -import { HamburgerIcon } from '@components/Icons'; +import { + BlogIcon, + ContactIcon, + CVIcon, + HamburgerIcon, + HomeIcon, +} from '@components/Icons'; import { mainNav } from '@config/nav'; -import ArticlesIcon from '@assets/images/icon-articles.svg'; -import ContactIcon from '@assets/images/icon-contact.svg'; -import CVIcon from '@assets/images/icon-cv.svg'; -import HomeIcon from '@assets/images/icon-home.svg'; import styles from './MainNav.module.scss'; const MainNav = ({ @@ -21,7 +23,7 @@ const MainNav = ({ case 'home': return <HomeIcon />; case 'blog': - return <ArticlesIcon />; + return <BlogIcon />; case 'contact': return <ContactIcon />; case 'cv': @@ -36,7 +38,7 @@ const MainNav = ({ <li key={item.id} className={styles.item}> <Link href={item.slug}> <a className={styles.link}> - <span className={styles.icon}>{getIcon(item.id)}</span> + {getIcon(item.id)} <span>{item.name}</span> </a> </Link> diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index cd66341..441b20c 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -12,7 +12,6 @@ --color-primary-dark: #{var.$color_blue-dark}; --color-border: #{var.$color_grey-dark}; --color-border-light: #{var.$color_grey}; - --color-highlight: #{var.$color_blue-brighter}; --color-shadow: #{var.$color_grey-dark-o70}; --color-shadow-light: #{var.$color_grey-dark-o40}; --color-shadow-lighter: #{var.$color_grey-dark-o20}; |
