feat(apps/phone): new icons

apps/phone/package.json

@@ -23,7 +23,8 @@
     "i18next": "^20.6.1",
     "jest": "^27.4.7",
     "jsonschema": "^1.4.0",
-    "lucide-react": "^0.125.0",
+    "lucide-react": "^0.294.0",
+    "non.geist": "^1.0.1",
     "notistack": "3.0.0-alpha.7",
     "parse-path": "^7.0.0",
     "parse-url": "^5.0.7",

apps/phone/src/apps/dialer/components/DialerNavBar.tsx

@@ -7,6 +7,7 @@ import PhoneIcon from '@mui/icons-material/Phone';
 import PersonIcon from '@mui/icons-material/Person';
 import HistoryIcon from '@mui/icons-material/History';
 import { useTranslation } from 'react-i18next';
+import { Contact, History, Phone } from 'lucide-react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -31,26 +32,23 @@ const DialerNavBar: React.FC = () => {
   return (
     <BottomNavigation value={page} onChange={handleChange} showLabels className={classes.root}>
       <BottomNavigationAction
-        label={t('DIALER.NAVBAR_HISTORY')}
         value="/phone"
         component={NavLink}
-        icon={<HistoryIcon />}
+        icon={<History />}
         to="/phone"
       />
       <BottomNavigationAction
-        label={t('DIALER.NAVBAR_DIAL')}
         value="/phone/dial"
         color="secondary"
         component={NavLink}
-        icon={<PhoneIcon />}
+        icon={<Phone />}
         to="/phone/dial"
       />
       <BottomNavigationAction
-        label={t('DIALER.NAVBAR_CONTACTS')}
         value="/phone/contacts"
         color="secondary"
         component={NavLink}
-        icon={<PersonIcon />}
+        icon={<Contact />}
         to="/phone/contacts"
       />
     </BottomNavigation>

apps/phone/src/config/ThemeConfig.ts

@@ -3,9 +3,6 @@ import { ThemeOptions } from '@mui/material';
 // Configure all of the phone's default themes here.
 export const PhoneThemes: Record<string, ThemeOptions> = {
   'taso-dark': {
-    typography: {
-      fontFamily: "'SegoeUI', 'Roboto', 'Arial', sans-serif",
-    },
     components: {
       MuiDivider: {
         styleOverrides: {

apps/phone/src/main.css

@@ -1,26 +1,26 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('non.geist');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body {
-  font-family: 'Inter', sans-serif;
-  font-size: 20px;
-  margin: 0;
-  padding: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  font-family: 'Geist Variable', sans-serif;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 code {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Geist Variable', sans-serif;
 }
 
 a,
 a:visited,
 a:hover,
 a:active {
-  text-decoration: none;
+    text-decoration: none;
 }

apps/phone/src/os/apps/icons/material/app/BROWSER.tsx

@@ -1,5 +1,5 @@
-import { Language } from '@mui/icons-material';
+import { ChromeIcon } from 'lucide-react';
 
-const BrowserIcon = () => <Language fontSize="large" />;
+const BrowserIcon = () => <ChromeIcon size={30}/>;
 
 export default BrowserIcon;

apps/phone/src/os/apps/icons/material/app/CALCULATOR.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CalculatorIcon } from '../../../../../apps/calculator/components/CalculatorIcon';
+import { Calculator as LCalc } from 'lucide-react';
 
-const Calculator: React.FC = () => <CalculatorIcon fontSize="large" />;
+const Calculator: React.FC = () =><LCalc size={30} />;
 
 export default Calculator;

apps/phone/src/os/apps/icons/material/app/CAMERA.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CameraAlt } from '@mui/icons-material';
+import { Camera as LCamera } from 'lucide-react';
 
-const Camera: React.FC = () => <CameraAlt fontSize="large" />;
+const Camera: React.FC = () => <LCamera size={30} />;
 
 export default Camera;

apps/phone/src/os/apps/icons/material/app/CONTACTS.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Contacts } from '@mui/icons-material';
+import { BookUser } from 'lucide-react';
 
-const ContactIcon: React.FC = () => <Contacts fontSize="large" />;
+const ContactIcon: React.FC = () => <BookUser size={30} />;
 
 export default ContactIcon;

apps/phone/src/os/apps/icons/material/app/DIALER.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Phone } from '@mui/icons-material';
+import { Phone } from 'lucide-react';
 
-const DialerIcon: React.FC = () => <Phone fontSize="large" />;
+const DialerIcon: React.FC = () => <Phone size={30} />;
 
 export default DialerIcon;

apps/phone/src/os/apps/icons/material/app/MARKETPLACE.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MonetizationOn } from '@mui/icons-material';
+import { Store } from 'lucide-react';
 
-const MarketplaceIcon: React.FC = () => <MonetizationOn fontSize="large" />;
+const MarketplaceIcon: React.FC = () => <Store size={30}/>
 
 export default MarketplaceIcon;

apps/phone/src/os/apps/icons/material/app/MATCH.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Favorite } from '@mui/icons-material';
+import { HeartHandshake } from 'lucide-react';
 
-const MatchIcon: React.FC = () => <Favorite fontSize="large" />;
+const MatchIcon: React.FC = () => <HeartHandshake size={30} />
 
 export default MatchIcon;

apps/phone/src/os/apps/icons/material/app/MESSAGES.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Message } from '@mui/icons-material';
+import { MessageSquare } from 'lucide-react';
 
-const MessagesIcon: React.FC = () => <Message fontSize="large" />;
+const MessagesIcon: React.FC = () => <MessageSquare size={30} />;
 
 export default MessagesIcon;

apps/phone/src/os/apps/icons/material/app/NOTES.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import StickyNote from '../misc/StickyNote';
+import { StickyNote } from 'lucide-react';
 
-const NotesIcon: React.FC = () => <StickyNote fontSize="large" />;
+const NotesIcon: React.FC = () => <StickyNote size={30} />
 
 export default NotesIcon;

apps/phone/src/os/apps/icons/material/app/SETTINGS.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Settings } from '@mui/icons-material';
+import { Settings } from 'lucide-react';
 
-const SettingsIcon: React.FC = () => <Settings fontSize="large" />;
+const SettingsIcon: React.FC = () => <Settings size={30} />;
 
 export default SettingsIcon;

apps/phone/src/os/navigation-bar/components/Navigation.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { usePhone } from '@os/phone/hooks/usePhone';
-//import { useNotifications } from '@os/notifications/hooks/useNotifications';
 import { ChevronLeft, Circle, LayoutGrid } from 'lucide-react';
 
 export const Navigation: React.FC = () => {
   const history = useHistory();
   const { isExact } = useRouteMatch('/');
   const { closePhone } = usePhone();
-  //const { setBarUncollapsed } = useNotifications();
 
   const handleGoBackInHistory = () => {
     history.goBack();

apps/phone/tailwind.config.js

@@ -3,4 +3,9 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
   plugins: [],
+  extend: {
+    fontFamily: {
+      sans: ['var(--font-geist-sans)'],
+    },
+  },
 };