From cec8dbaf38f7908b4b78592dd8e3cf2e7f304759 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Tue, 24 Mar 2020 16:02:38 +0100 Subject: [PATCH] Introduces bottom menu redesign (Menu component) --- assets/fonts/Menu.ttf | Bin 0 -> 3488 bytes components/common/menu-icon.js | 21 +++++++++ components/menu/index.js | 50 +++++++-------------- components/menu/menu-item.js | 78 ++++++++++++++++++++++++--------- components/pages.js | 8 ++-- selection.json | 1 + styles/typography.js | 4 +- 7 files changed, 100 insertions(+), 62 deletions(-) create mode 100644 assets/fonts/Menu.ttf create mode 100644 components/common/menu-icon.js create mode 100755 selection.json diff --git a/assets/fonts/Menu.ttf b/assets/fonts/Menu.ttf new file mode 100644 index 0000000000000000000000000000000000000000..985d8eeebc1d9fea33d57f044b75805f8329cb6a GIT binary patch literal 3488 zcmd56+UPFx$Mkdyz9M;o%P;k?OkWL+3fDDcfE!u^l_b z_8Qw!V#P=iB&e>$rHB?4q(Bpq`1@&`N3ymdx^3DbT_K|#Q zwz0BAqn~6xx@PCsE}Z)2&xc690-(Mc2?-2f2M|skyRB>!jwr z#(7}u8h#BV0O4ifEz*3|9`UbWqDpdSLt6HO?GV6Sfo<+=!XZYTNPZUWmb3t$jrTs{ z?2%bkeIUXx={0bHKtF`!U14W?XUFnN-USQe&YyIV{5sjv_i&vL zU}uv8Z$b|wVGNq^4fp~42z~-Tg`dG~cpct=U(Cu|YvxcoD6uNdF{FgeTDnHwrJxz6xZ$);Jxd*_4>`R? zBfG<7u{AHbP!L5tDEq`hkqOAy`PRGm83D7cGb<=Erm*2s>G+T8+%uY^j zZJa*6v0)hI2^z5algiC)2@v@T1^sNh!iW->?PiQcP5>s%eDgT1*^!*m8`b8AO%!3d-ShGA?6 zjLGyQ0gx#_H`xy5mJfAI<9_@IJ_!&sFT4L;ubv3 zC^_irWPR^rN4YNO?(+b<#IrMG6Oou@oxus~Doo9LBJ% zxsS^hRkmy*C1Q)#y-fC;A{P!qWloigbcIPIJd9?s%vrip_R?87LN8L<$P87g{}X4e z_m3>iZbj1+-q|}_!;;5i=#i+}>+|ZWOO@1~crG5#p`ZsO$=9t#ySnyhUbiUvLWsoV z1tH>>L`~KDLOe#I;MLqr^7tqMS-MqG?9y#Z#Ar~Gyj@z4uRE@F2Nl`t6@+|@#|Q=j zF|Ws32T$(@8heKa{-s~n{r*Vg7Ii=2*Btpam$iUQX)EY{wy7zvadWzD8GR!oHx3^f zbZM#*G^1uChN2M9<>Ini8dyJaV8zfp9<66AQ+O&Ws$x8!k4qjYd7+*?9*af!nG6ml zP7D^#^tm**razJ1e>Ntn5|1Fcr2a1)t1qNg)$i?{$fXbWNFJF-kUes5CiAI6Aum)F zRaLf=4{U}DJTgvMyPzH6Y#X(JcF1?B;|ac3)g>?#716I-UwzoQV|`~2!x4BIF2i+r z0bYSy@GATYehYtuzrf#7Kp*bGELQLkj^i1e#wGkbK94WqckFMlAzSZ-ohUZ0(uXZI zWam(xJ`kppMh@$|6sZ9Hg4A(0ng`w0j}xq&l-$DnKLn}6NAJKN9IVsogYbtjs&G#( zCKb0^i6jycJ|>IupSOSweo%&8sZpY=;RqKeXv!J7T$oOUZEZb-L$m0$BFx!Xv z$m2_oxUhCzck5&Cv1htIdJo*9RTBRG#p`c!V2@7qMm03mj&`Hk&#FbKu;h*I_p3qM zLa`ZJ;BH*zcK^|95P~?43wOkKEpG+COO-2c?O80rx%sGGwC6yen%%(y;d2gVgsTn~ z314!sME@AV4wgy(2?uMi2cGBkuBej6M~saH!m|!$gbz4aB)slm2_jU>+V(Q(PdZqG z3ViS4RCA%(T!f1-MaAv{^(HJ%&MdE7Y%V5Cg(6JC3@pP684y8nN>G5}u3oz;PtMF< znr|%Aq%*Y8OE3=&Sl-q0XmfEjIXkmBv)ovnnNFTxOO8!7kJH);aMYT6m1du%FpJiT f8n8;^H0jR68r{dN4IH;OKx?%BU35N`|HA(UwB6!l literal 0 HcmV?d00001 diff --git a/components/common/menu-icon.js b/components/common/menu-icon.js new file mode 100644 index 0000000..636235e --- /dev/null +++ b/components/common/menu-icon.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { createIconSetFromIcoMoon } from 'react-native-vector-icons' +import iconConfig from '../../selection.json' + +import { Colors, Sizes } from '../../styles/redesign' + +const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu') + +const MenuIcon = ({ isActive, name }) => { + const color = isActive ? Colors.greyDark : Colors.grey + + return +} + +MenuIcon.propTypes = { + isActive: PropTypes.bool, + name: PropTypes.string.isRequired +} + +export default MenuIcon \ No newline at end of file diff --git a/components/menu/index.js b/components/menu/index.js index 969082e..ab7c3c9 100644 --- a/components/menu/index.js +++ b/components/menu/index.js @@ -1,30 +1,23 @@ import React from 'react' -import { View } from 'react-native' -import PropTypes from 'prop-types' +import { StyleSheet, View } from 'react-native' import MenuItem from './menu-item' -import { connect } from 'react-redux' -import { getNavigation, navigate } from '../../slices/navigation' - +import { Containers } from '../../styles/redesign' import { pages } from '../pages' -import styles from '../../styles' - -const Menu = ({ navigate, navigation }) => { +const Menu = () => { const menuItems = pages.filter(page => page.isInMenu) + return ( - - { menuItems.map(({ icon, label, component, children }) => { - const isActive = (component === navigation.currentPage) || - (children && children.indexOf(navigation.currentPage) !== -1) + + { menuItems.map(({ icon, label, component }) => { return ( navigate(component)} /> )} )} @@ -32,24 +25,11 @@ const Menu = ({ navigate, navigation }) => { ) } -Menu.propTypes = { - navigation: PropTypes.object, - navigate: PropTypes.func, -} +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + ...Containers.rowContainer + } +}) -const mapStateToProps = (state) => { - return({ - navigation: getNavigation(state), - }) -} - -const mapDispatchToProps = (dispatch) => { - return({ - navigate: (page) => dispatch(navigate(page)), - }) -} - -export default connect( - mapStateToProps, - mapDispatchToProps, -)(Menu) \ No newline at end of file +export default Menu \ No newline at end of file diff --git a/components/menu/menu-item.js b/components/menu/menu-item.js index 8dc1bcd..fc26212 100644 --- a/components/menu/menu-item.js +++ b/components/menu/menu-item.js @@ -1,36 +1,72 @@ import React from 'react' import PropTypes from 'prop-types' -import { Text, TouchableOpacity } from 'react-native' +import { StyleSheet, Text, TouchableOpacity } from 'react-native' -import styles, { iconStyles, secondaryColor } from '../../styles' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' +import Icon from '../common/menu-icon' -import { menuTitles } from '../../i18n/en/labels' +import { connect } from 'react-redux' +import { getNavigation, navigate } from '../../slices/navigation' -const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => { - acc[curr] = menuTitles[curr].toLowerCase() - return acc -}, {}) +import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles/redesign' -export default function MenuItem({ active, icon, label, onPress }) { - const styleActive = active ? { color: secondaryColor } : null +const MenuItem = ({ component, icon, label, navigate, navigation }) => { + const isActive = (component === navigation.currentPage) + const textStyle = isActive ? styles.menuTextActive : styles.menuText + const testID = isActive ? 'activeMenuItem' : `menuItem${label}` return ( - - - - {menuTitlesLowerCase[label]} - + navigate(component)} + > + + {label} ) } MenuItem.propTypes = { - active: PropTypes.bool, + component: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, label: PropTypes.string.isRequired, - onPress: PropTypes.func.isRequired -} \ No newline at end of file + navigation: PropTypes.object, + navigate: PropTypes.func, +} + +const text = { + fontFamily: Fonts.bold, + fontSize: Sizes.small, + textTransform: 'uppercase' +} + +const styles = StyleSheet.create({ + button: { + padding: Spacing.base, + ...Containers.centerItems + }, + menuText: { + color: Colors.grey, + ...text + }, + menuTextActive: { + color: Colors.orange, + ...text + } +}) + +const mapStateToProps = (state) => { + return({ + navigation: getNavigation(state), + }) +} + +const mapDispatchToProps = (dispatch) => { + return({ + navigate: (page) => dispatch(navigate(page)), + }) +} + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(MenuItem) diff --git a/components/pages.js b/components/pages.js index 3f11562..a4e6bc6 100644 --- a/components/pages.js +++ b/components/pages.js @@ -19,26 +19,25 @@ export const pages = [ { component: 'Home', icon: 'home', - isInMenu: true, label: 'Home', }, { component: 'Calendar', - icon: 'calendar-range', + icon: 'calendar', isInMenu: true, label: 'Calendar', parent: 'Home', }, { component: 'Chart', - icon: 'chart-line', + icon: 'chart', isInMenu: true, label: 'Chart', parent: 'Home', }, { component: 'Stats', - icon: 'chart-pie', + icon: 'statistics', isInMenu: true, label: 'Stats', parent: 'Home', @@ -47,7 +46,6 @@ export const pages = [ children: Object.keys(settingsViews), component: 'SettingsMenu', icon: 'settings', - isInMenu: true, label: 'Settings', parent: 'Home', }, diff --git a/selection.json b/selection.json new file mode 100755 index 0000000..22aea2a --- /dev/null +++ b/selection.json @@ -0,0 +1 @@ +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M978.192 487.15c-3.642-2.692-8.217-3.808-12.7-3.108l-404.883 62.3c-6.692 1.025-12.15 5.917-13.892 12.458-1.75 6.542 0.533 13.5 5.817 17.725l319.775 255.833c7.367 5.892 18.108 4.7 24-2.658 60.858-75.458 93.9-169.558 93.558-266.5-0.008-21.708-1.642-43.392-4.9-64.85-0.683-4.483-3.117-8.517-6.775-11.2v0zM880.042 794.808l-275.883-220.65 349.217-53.725c1.558 14.2 2.342 28.475 2.358 42.767 0.308 83.333-26.233 164.542-75.692 231.608z","M492.717 553.217l-114.842-387.667c-1.283-4.35-4.25-8.008-8.225-10.167-3.983-2.158-8.667-2.65-13.008-1.358-149.65 44.225-263.183 166.675-295.983 319.233s20.367 310.85 138.608 412.675l-103.933 103.933h-95.333v34.133h102.4c4.525 0 8.867-1.8 12.067-5l111.633-111.633c184.242 135.142 442.283 100.867 584.875-77.667 5.892-7.367 4.7-18.108-2.667-24l-315.592-252.483zM475.525 952.442c-80.117 0.058-158.242-24.958-223.417-71.542l55.092-55.075v56.708l34.133-34.133v-80.4h-80.433l-34.133 34.133h56.708l-58.025 58.025c-105.542-89.675-154.825-229.1-129.1-365.183 25.733-136.083 122.525-247.883 253.517-292.833l109.583 369.425c0.983 3.275 2.933 6.175 5.6 8.325l300.933 240.642c-73.108 84.008-179.092 132.133-290.458 131.908z","M921.6 0c-4.525 0-8.867 1.8-12.067 5l-132.492 132.492c-104.008-68.267-232.842-87.167-352.083-51.667-9.042 2.675-14.2 12.175-11.517 21.217l116.358 392.742c2.142 7.233 8.783 12.2 16.333 12.217 0.875 0 1.75-0.067 2.608-0.208l404.908-62.292c9.3-1.433 15.692-10.133 14.267-19.433-17.025-108.425-75.267-206.083-162.575-272.592l123.325-123.342h95.333v-34.133h-102.4zM926.092 416.425l-366.575 56.325-105.358-355.283c101.033-25.342 208.033-8.283 296.175 47.208l-84.733 84.7v-56.708l-34.133 34.133v80.4h80.433l34.133-34.133h-56.708l89.15-89.125c76.158 56.675 128.717 139.458 147.617 232.483v0z","M938.667 51.2h85.333v34.133h-85.333z","M887.467 102.4h136.533v34.133h-136.533z","M989.867 153.6h34.133v34.133h-34.133z","M887.467 153.6h85.333v34.133h-85.333z","M0 938.667h85.333v34.133h-85.333z","M0 887.467h136.533v34.133h-136.533z","M0 836.267h34.133v34.133h-34.133z","M51.2 836.267h85.333v34.133h-85.333z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["statistics"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":2,"id":2,"name":"statistics","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M18.006 0c-9.322 0-16.88 7.558-16.88 16.88v187.092c0.002 9.322 7.558 16.88 16.88 16.88s16.88-7.558 16.88-16.88v-187.092c0-9.322-7.556-16.88-16.88-16.88z","M1005.996 990.24h-967.94c13.25-74.266 64.254-339.404 134.452-446.468 12.788 11.386 29.62 18.324 48.046 18.324 17.384 0 33.35-6.166 45.84-16.422 9.598 26.156 15.472 60.96 21.592 97.334 11.464 68.13 23.322 138.452 63.164 176.572-0.254 2.464-0.39 4.964-0.39 7.496 0 39.89 32.452 72.344 72.344 72.344 39.89 0 72.342-32.452 72.342-72.344 0-7.7-1.22-15.114-3.46-22.080 31.302-49.986 38.098-137.474 45.272-229.966 6.288-81.084 12.784-164.584 36.87-210.060 13.13 13.336 31.372 21.624 51.522 21.624 20.19 0 38.464-8.322 51.6-21.704 17.594 32.478 22.606 84.46 27.474 135.012 5.922 61.51 11.526 119.708 38.352 155.906-1.414 5.634-2.174 11.522-2.174 17.59 0 39.89 32.452 72.344 72.344 72.344s72.344-32.452 72.344-72.344c0-7.744-1.236-15.2-3.5-22.2 28.724-43.006 35.702-114.888 43.062-190.832 5.062-52.238 10.294-106.254 23.212-145.062 12.93-38.846 30.704-56.172 57.63-56.172 9.324 0 16.88-7.558 16.88-16.88s-7.556-16.88-16.88-16.88c-41.986 0-72.152 26.668-89.662 79.268-14.118 42.42-19.542 98.366-24.784 152.468-5.914 61.050-12.014 123.864-30.228 162.294-12.79-11.402-29.636-18.348-48.076-18.348-19.902 0-37.948 8.080-51.042 21.128-14.75-30.794-19.38-78.816-23.876-125.518-5.99-62.238-12.184-126.46-42.508-164.826 1.414-5.636 2.174-11.526 2.174-17.592 0-39.89-32.452-72.344-72.344-72.344s-72.344 32.452-72.344 72.344c0 5.964 0.74 11.754 2.106 17.302-36.906 48.862-44.162 142.184-51.814 240.864-5.892 75.98-11.968 154.218-32.7 200.42-12.756-11.256-29.488-18.106-47.796-18.106-23.846 0-45.026 11.602-58.212 29.452-24.506-33.326-34.206-90.86-43.616-146.78-7.982-47.44-15.566-92.416-32.324-124.136 2.546-7.38 3.946-15.286 3.946-23.518 0-39.89-32.452-72.344-72.342-72.344s-72.344 32.452-72.344 72.344c0 8.406 1.456 16.474 4.104 23.986-50.636 68.72-91.154 209.734-117.428 323.118v-565.372c0-9.322-7.558-16.88-16.88-16.88s-16.88 7.558-16.88 16.88v735.642c0 0.104 0.014 0.202 0.016 0.306 0.006 0.336 0.024 0.668 0.050 1 0.018 0.234 0.036 0.466 0.062 0.696 0.038 0.32 0.088 0.634 0.144 0.948 0.042 0.246 0.088 0.488 0.14 0.73 0.062 0.282 0.138 0.56 0.216 0.838 0.072 0.264 0.146 0.526 0.232 0.784 0.082 0.248 0.174 0.488 0.268 0.732 0.106 0.274 0.212 0.55 0.33 0.818 0.098 0.22 0.208 0.434 0.312 0.65 0.136 0.272 0.272 0.542 0.42 0.806 0.12 0.21 0.248 0.412 0.374 0.614 0.158 0.252 0.316 0.502 0.486 0.748 0.146 0.21 0.302 0.41 0.46 0.612 0.172 0.22 0.34 0.442 0.52 0.652s0.37 0.412 0.558 0.614c0.176 0.186 0.348 0.374 0.534 0.554 0.212 0.204 0.432 0.4 0.654 0.596 0.182 0.16 0.362 0.32 0.552 0.472 0.234 0.19 0.48 0.364 0.724 0.542 0.198 0.142 0.392 0.284 0.596 0.416 0.246 0.16 0.498 0.308 0.752 0.456 0.224 0.13 0.45 0.26 0.68 0.382 0.24 0.124 0.486 0.238 0.734 0.354 0.264 0.122 0.526 0.24 0.796 0.348 0.228 0.090 0.462 0.174 0.694 0.254 0.302 0.106 0.606 0.208 0.916 0.294 0.22 0.064 0.446 0.118 0.672 0.174 0.326 0.078 0.654 0.152 0.988 0.212 0.1 0.018 0.194 0.048 0.292 0.062 0.086 0.014 0.168 0.010 0.254 0.020 0.796 0.118 1.606 0.196 2.438 0.198 0.014 0 0.024 0.002 0.038 0.002 0.016 0 0.032-0.002 0.050-0.002h987.914c9.324 0 16.88-7.558 16.88-16.88 0.004-9.32-7.55-16.88-16.874-16.88zM813.25 634.816c21.274 0 38.586 17.308 38.586 38.586 0 21.276-17.308 38.586-38.586 38.586-21.274 0-38.586-17.308-38.586-38.586s17.312-38.586 38.586-38.586zM625.654 275.666c21.274 0 38.586 17.308 38.586 38.586 0 21.276-17.308 38.586-38.586 38.586-21.274 0-38.586-17.308-38.586-38.586 0-21.276 17.312-38.586 38.586-38.586zM423.108 788.49c21.276 0 38.584 17.308 38.584 38.586s-17.308 38.586-38.584 38.586c-21.276 0-38.586-17.308-38.586-38.586s17.308-38.586 38.586-38.586zM220.558 451.166c21.276 0 38.584 17.308 38.584 38.586 0 21.276-17.308 38.586-38.584 38.586-13.382 0-25.186-6.856-32.11-17.23-0.652-2.33-1.822-4.528-3.468-6.434-1.934-4.594-3.006-9.634-3.006-14.922-0.002-21.276 17.308-38.586 38.584-38.586z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chart"]},"attrs":[{},{}],"properties":{"order":3,"id":1,"name":"chart","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M757.389 70.621c-8.21-40.236-43.855-70.621-86.493-70.621-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655c29.202 0 52.966 23.764 52.966 52.966s-23.764 52.966-52.966 52.966c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655c42.62 0 78.283-30.385 86.493-70.621h231.3v158.897h-953.379v-158.897h300.138c9.763 0 17.655-7.892 17.655-17.655s-7.892-17.655-17.655-17.655h-32.062c7.309-20.515 26.73-35.31 49.717-35.31 29.202 0 52.966 23.764 52.966 52.966s-23.764 52.966-52.966 52.966c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655c48.675 0 88.276-39.601 88.276-88.276s-39.601-88.276-88.276-88.276c-42.62 0-78.283 30.385-86.493 70.621h-266.611v935.724h1024v-935.724h-266.611zM988.69 971.034h-953.379v-670.897h953.379v670.897z","M459.034 35.31c29.202 0 52.966 23.764 52.966 52.966s-23.764 52.966-52.966 52.966c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655c48.675 0 88.276-39.601 88.276-88.276s-39.601-88.276-88.276-88.276c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655z","M564.966 35.31c29.202 0 52.966 23.764 52.966 52.966s-23.764 52.966-52.966 52.966c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655c48.675 0 88.276-39.601 88.276-88.276s-39.601-88.276-88.276-88.276c-9.763 0-17.655 7.892-17.655 17.655s7.892 17.655 17.655 17.655z","M409.747 423.724c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M533.333 423.724c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M656.92 423.724c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M780.506 423.724c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M904.092 423.724c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M162.575 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M286.161 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M409.747 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M533.333 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M656.92 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M780.506 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M904.092 564.966c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M162.575 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M286.161 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M409.747 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M533.333 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M656.92 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M780.506 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M904.092 688.552c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M162.575 829.793c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M286.161 829.793c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M409.747 829.793c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M533.333 829.793c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z","M656.92 829.793c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["calendar"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":4,"id":0,"name":"calendar","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":2}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}} \ No newline at end of file diff --git a/styles/typography.js b/styles/typography.js index effa01c..82527a8 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -7,9 +7,11 @@ export const fonts = { } export const sizes = { + small: 14, base: 18, subtitle: 22, - title: 24 + title: 24, + icon: 40 } const title = {