created jobs card component

package.json

@@ -20,11 +20,14 @@
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "ionicons": "^5.4.0",
+    "node": "^17.7.2",
+    "node-sass": "^7.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
+    "sass": "^1.50.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",

src/App.tsx

@@ -1,7 +1,7 @@
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Home from './pages/Home';
+import WorkWithUs from './pages/WorkWithUs';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -28,11 +28,11 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route exact path="/home">
-          <Home />
+        <Route exact path="/WorkWithUs">
+          <WorkWithUs />
         </Route>
         <Route exact path="/">
-          <Redirect to="/home" />
+          <Redirect to="/WorkWithUs" />
         </Route>
       </IonRouterOutlet>
     </IonReactRouter>

src/assets/icons/Developer.svg

@@ -0,0 +1,23 @@
+<svg id="Developer" xmlns="http://www.w3.org/2000/svg" width="26.562" height="26.585" viewBox="0 0 26.562 26.585">
+  <path id="Path_4" data-name="Path 4" d="M270.939,38.414H260.875a1.516,1.516,0,0,0-1.516,1.516v5.693a1.515,1.515,0,0,0,1.516,1.516h3.58l-.579,2.335a.331.331,0,0,0,.523.343l3.486-2.678h3.053a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,270.939,38.414Zm0,0" transform="translate(-245.892 -36.419)" fill="#88dbfd"/>
+  <path id="Path_5" data-name="Path 5" d="M346.606,206.962l-.448,1.806a.331.331,0,0,0,.523.343l3.486-2.678h-2.873Zm0,0" transform="translate(-328.174 -195.715)" fill="#5abfe9"/>
+  <path id="Path_6" data-name="Path 6" d="M429.9,38.414h-2.873a1.516,1.516,0,0,1,1.516,1.516v5.693a1.516,1.516,0,0,1-1.516,1.516H429.9a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,429.9,38.414Zm0,0" transform="translate(-404.858 -36.419)" fill="#5abfe9"/>
+  <g id="Group_2" data-name="Group 2" transform="translate(17.592 4.165)">
+    <path id="Path_7" data-name="Path 7" d="M338.958,106.729l1.259-.817a.149.149,0,0,1,.094-.025.375.375,0,0,1,.337.362.227.227,0,0,1-.089.193l-.872.565.872.565a.227.227,0,0,1,.089.193.375.375,0,0,1-.337.362.15.15,0,0,1-.094-.025l-1.259-.817a.327.327,0,0,1,0-.555Zm0,0" transform="translate(-338.805 -104.554)" fill="#f2f2f2"/>
+    <path id="Path_8" data-name="Path 8" d="M386.585,80.481a.215.215,0,0,1-.02.094l-1.744,3.572a.248.248,0,0,1-.223.124.274.274,0,0,1-.277-.263.223.223,0,0,1,.025-.094l1.739-3.572a.218.218,0,0,1,.208-.124A.284.284,0,0,1,386.585,80.481Zm0,0" transform="translate(-381.957 -80.219)" fill="#f2f2f2"/>
+    <path id="Path_9" data-name="Path 9" d="M439.635,107.284l-1.258.817a.15.15,0,0,1-.094.025.375.375,0,0,1-.337-.362.227.227,0,0,1,.089-.193l.872-.565-.872-.565a.227.227,0,0,1-.089-.193.375.375,0,0,1,.337-.362.149.149,0,0,1,.094.025l1.258.817a.327.327,0,0,1,0,.555Zm0,0" transform="translate(-432.798 -104.554)" fill="#f2f2f2"/>
+  </g>
+  <path id="Path_10" data-name="Path 10" d="M21.136,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316h-4.4v2.316a.826.826,0,0,1-.675.812A49.874,49.874,0,0,0,2.2,239.2a3.444,3.444,0,0,0-2.107,2.9L0,247.627a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(0.002 -222.157)" fill="#fcc18b"/>
+  <path id="Path_11" data-name="Path 11" d="M202.7,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316H191.5v3.7a.826.826,0,0,0,.675.812,49.873,49.873,0,0,1,5.539,1.75,3.444,3.444,0,0,1,2.107,2.9l.087,5.247h1.776a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(-181.56 -222.157)" fill="#eaab65"/>
+  <path id="Path_12" data-name="Path 12" d="M89.59,121.426h-.578a.893.893,0,0,0-.88,1.076l.227,1.25c.176.927,1.233.5,1.233.5Zm0,0" transform="translate(-83.54 -115.121)" fill="#eaab65"/>
+  <path id="Path_13" data-name="Path 13" d="M292.333,121.426h.578a.893.893,0,0,1,.88,1.076l-.227,1.25c-.176.927-1.233.5-1.233.5Zm0,0" transform="translate(-277.153 -115.121)" fill="#fcc18b"/>
+  <path id="Path_14" data-name="Path 14" d="M122.126,5.846a4.553,4.553,0,0,0-6.409,0,4.848,4.848,0,0,0-1.478,3.562v4.738c0,2.24,2.911,4.56,4.682,4.56s4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,122.126,5.846Zm0,0" transform="translate(-108.307 -4.292)" fill="#fcc18b"/>
+  <path id="Path_15" data-name="Path 15" d="M181.4,5.846a4.729,4.729,0,0,0-3.2-1.319,4.6,4.6,0,0,0-1.437.244,4.981,4.981,0,0,1,1.768,1.075,4.848,4.848,0,0,1,1.478,3.562v4.738c0,1.695-1.667,3.435-3.245,4.182a3.482,3.482,0,0,0,1.437.378c1.77,0,4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,181.4,5.846Zm0,0" transform="translate(-167.583 -4.292)" fill="#eaab65"/>
+  <path id="Path_16" data-name="Path 16" d="M105.145,0H99.352a2.7,2.7,0,0,0-2.7,2.7V6.424a1.864,1.864,0,0,1,1.221.456.158.158,0,0,0,.268-.113V3.847a1.193,1.193,0,0,1,1.193-1.193h1.084a1.233,1.233,0,0,1,.78.278l.106.087a1.49,1.49,0,0,0,1.886,0l.106-.087a1.233,1.233,0,0,1,.78-.278h1.084a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.863,1.863,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,105.145,0Zm0,0" transform="translate(-91.634)" fill="#426175"/>
+  <path id="Path_17" data-name="Path 17" d="M241.92,0h-1a4.071,4.071,0,0,1,.829,2.654h.19a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.864,1.864,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,241.92,0Zm0,0" transform="translate(-228.409)" fill="#2c4456"/>
+  <path id="Path_18" data-name="Path 18" d="M19.029,304.531a32.729,32.729,0,0,0-3.9-1.3l-.281.106a11.963,11.963,0,0,1-8.475,0l-.281-.106a32.724,32.724,0,0,0-3.9,1.3,3.443,3.443,0,0,0-2.107,2.9L0,312.955a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115l-.091-5.521A3.444,3.444,0,0,0,19.029,304.531Zm0,0" transform="translate(0.002 -287.486)" fill="#33bca5"/>
+  <path id="Path_19" data-name="Path 19" d="M59.432,312.683H45.722a.8.8,0,0,1-.793-.738l-.561-7.867a.8.8,0,0,1,.793-.851H59.993a.8.8,0,0,1,.793.851l-.561,7.868A.8.8,0,0,1,59.432,312.683Zm0,0" transform="translate(-42.063 -287.482)" fill="#f2f2f2"/>
+  <path id="Path_20" data-name="Path 20" d="M292.465,303.23H289.57a.8.8,0,0,1,.793.851l-.613,8.605H291.9a.8.8,0,0,0,.793-.738l.561-7.867A.8.8,0,0,0,292.465,303.23Zm0,0" transform="translate(-274.535 -287.486)" fill="#cdd6df"/>
+  <path id="Path_21" data-name="Path 21" d="M58.257,486.743H42.781a.692.692,0,0,1,0-1.383H58.257a.692.692,0,0,1,0,1.383Zm0,0" transform="translate(-39.904 -460.158)" fill="#cdd6df"/>
+  <path id="Path_22" data-name="Path 22" d="M185.323,380.193a1.107,1.107,0,1,1-1.107-1.107A1.107,1.107,0,0,1,185.323,380.193Zm0,0" transform="translate(-173.602 -359.402)" fill="#fff"/>
+</svg>

src/assets/icons/infinite.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.591" height="11.042" viewBox="0 0 22.591 11.042">
+  <g id="infinite" transform="translate(-1.06 -10.06)" opacity="0.6">
+    <path id="Path_3356" data-name="Path 3356" d="M12.356,15.581S10.19,11.25,6.671,11.25a4.332,4.332,0,1,0,0,8.662,5.359,5.359,0,0,0,3.519-1.444" transform="translate(0 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
+    <path id="Path_3357" data-name="Path 3357" d="M18,15.581s2.165,4.331,5.684,4.331a4.332,4.332,0,1,0,0-8.662,5.531,5.531,0,0,0-3.519,1.444" transform="translate(-5.644 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
+  </g>
+</svg>

src/assets/icons/officechair.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.25" height="19" viewBox="0 0 14.25 19">
+  <path id="officechair" d="M13.657,11.875H11.875a1.2,1.2,0,0,1-1.188,1.188H8.313v2.375h2.969a.594.594,0,0,1,0,1.188H2.969a.594.594,0,0,1,0-1.188H5.938V13.063H3.563a1.133,1.133,0,0,1-.844-.353,1.154,1.154,0,0,1-.343-.835H.594A.571.571,0,0,1,.176,11.7.571.571,0,0,1,0,11.282V6.531a.571.571,0,0,1,.176-.417.571.571,0,0,1,.417-.176.571.571,0,0,1,.417.176.571.571,0,0,1,.176.417v4.156h4.75V9.482a10.463,10.463,0,0,1-1.169-.055A4.894,4.894,0,0,1,3.8,9.213a2.207,2.207,0,0,1-.77-.408,1.874,1.874,0,0,1-.473-.668,2.493,2.493,0,0,1-.186-1.011A8.916,8.916,0,0,1,3.711,1.856a4.068,4.068,0,0,1,6.829,0,8.92,8.92,0,0,1,1.336,5.269,2.479,2.479,0,0,1-.186,1.011,1.889,1.889,0,0,1-.473.668,2.189,2.189,0,0,1-.77.408,4.956,4.956,0,0,1-.965.213,10.288,10.288,0,0,1-1.169.055v1.206h4.75V6.531a.594.594,0,0,1,1.188,0v4.75a.6.6,0,0,1-.594.594ZM11.875,17.8a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353A1.168,1.168,0,0,1,9.5,17.8a1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,11.875,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,8.313,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,4.75,17.8Z" fill="#50decb" opacity="0.9"/>
+</svg>

src/assets/icons/pin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.584" height="16.504" viewBox="0 0 11.584 16.504">
+  <path id="pin" d="M5.773.25A5.629,5.629,0,0,1,9.879,1.935a5.536,5.536,0,0,1,1.7,4.087,7.9,7.9,0,0,1-.6,2.77A16.08,16.08,0,0,1,9.53,11.7q-.852,1.337-1.7,2.518T6.392,16.1l-.62.659q-.232-.232-.62-.7t-1.375-1.8q-.988-1.337-1.763-2.6A17.7,17.7,0,0,1,.62,8.812,7.83,7.83,0,0,1,0,6.023,5.566,5.566,0,0,1,1.685,1.935,5.566,5.566,0,0,1,5.773.25Zm0,7.825a2.044,2.044,0,0,0,1.472-.6,2.013,2.013,0,0,0,0-2.906,2.041,2.041,0,0,0-1.472-.6A2.051,2.051,0,0,0,3.719,6.023,2.05,2.05,0,0,0,5.773,8.075Z" transform="translate(0 -0.25)" fill="#eb3e19" opacity="0.6"/>
+</svg>

src/assets/icons/share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.386" height="15.495" viewBox="0 0 14.386 15.495">
+  <path id="share" d="M13.843,12.181a2.764,2.764,0,0,0-2.15,1.045L7.652,10.7a2.466,2.466,0,0,0,0-1.459l4.041-2.526A2.764,2.764,0,1,0,11.079,5a2.648,2.648,0,0,0,.111.73L7.149,8.251a2.764,2.764,0,1,0,0,3.438l4.041,2.526a2.648,2.648,0,0,0-.111.73,2.764,2.764,0,1,0,2.764-2.764Zm0-8.844A1.658,1.658,0,1,1,12.185,5a1.658,1.658,0,0,1,1.658-1.658ZM5,11.628A1.658,1.658,0,1,1,6.657,9.97,1.658,1.658,0,0,1,5,11.628ZM13.843,16.6A1.658,1.658,0,1,1,15.5,14.945,1.658,1.658,0,0,1,13.843,16.6Z" transform="translate(-2.221 -2.214)"/>
+</svg>

src/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

src/components/ExploreContainer.tsx

@@ -1,14 +0,0 @@
-import './ExploreContainer.css';
-
-interface ContainerProps { }
-
-const ExploreContainer: React.FC<ContainerProps> = () => {
-  return (
-    <div className="container">
-      <strong>Ready to create an app?</strong>
-      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/components/JobsCard.scss

@@ -0,0 +1,116 @@
+.jobsCard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #FFFFFF;
+    box-shadow: 0rem 0rem 0.6rem #00000029;
+    width: 34rem;
+    height: 32rem;
+    border-radius: 2.5rem;
+    margin-left: 1.5rem;
+    margin-top: 5rem;
+    
+    .jobsCardHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        width: 90%;
+        border-bottom: 0.1rem solid #EFEFEF;
+        height: 8rem;
+
+        .developerIcon {
+            background-color: #F2F2F2;
+            border-radius: 2.5rem;
+            width: 5rem;
+            height: 5rem;
+
+            svg {
+                margin-left: 1.5rem;
+                margin-top: 1.2rem;
+                width: 2.5rem;
+                height: 2.5rem;
+            }
+        }
+        
+        .jobRole {
+            text-align: left;
+            width: 20rem;
+            h3 {
+                font-size: 2.1rem;
+                color: #5C5A5A;
+                margin: 0;
+                font-family: 'Oswald', sans-serif;
+                font-weight: 600;
+                letter-spacing: 0.1rem;
+                margin-bottom: 0.4rem;
+            }
+            div {
+                color: #C1C1C1;
+                font-size: 1.2rem;
+                text-transform: uppercase;
+            }
+        }
+
+        .shareIcon {
+            svg {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+ 
+    }
+
+    .jobsCardDetails {
+        width: 90%;
+        font-size: 1.3rem;
+        color: #868686;
+        height: 60%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        // margin-left: 4rem;
+
+        .openPosition {
+            display: flex;
+            align-items: center;
+            margin-left: 2rem;
+
+            span {
+                margin-left: 2.5rem;
+            }
+        }
+
+        .experience {
+            display: flex;
+            align-items: center;
+            margin-left: 2rem;
+    
+            span {
+                margin-left: 1.4rem;
+            }
+        }
+
+        .location {
+            display: flex;
+            align-items: center;
+            margin-left: 2rem;
+    
+            span {
+                margin-left: 2.5rem;
+            }
+        }
+
+        button {
+            width: 30rem;
+            height: 4.5rem;
+            border: 0.1rem solid #2CC38C;
+            color: #2CC38C;
+            background-color: transparent;
+            border-radius: 2.7rem;
+            font-size: 1.4rem;
+            font-weight: 600;
+        }
+        
+    }
+}

src/components/JobsCard.tsx

@@ -0,0 +1,51 @@
+import './JobsCard.scss';
+
+import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
+import { ReactComponent as ChairIcon } from '../assets/icons/officechair.svg';
+import { ReactComponent as InfiniteIcon } from '../assets/icons/infinite.svg';
+import { ReactComponent as PinIcon } from '../assets/icons/pin.svg';
+
+interface Props {
+    role: string;
+    team: string;
+    openPosition: string;
+    experience: string;
+    location: string;
+    icon: JSX.Element,
+
+}
+const JobsCard: React.FC<Props> = (props: Props) => {
+    return (
+        <div className='jobsCard'>
+            <header className='jobsCardHeader'>
+                <div className='developerIcon'>
+                    {props.icon}
+                </div>
+                <div className='jobRole'>
+                    <h3>{props.role}</h3>
+                    <div>{props.team}</div>
+                </div>
+                <div className='shareIcon'>
+                    <ShareIcon />
+                </div>
+            </header>
+            <section className='jobsCardDetails'>
+                <div className='openPosition'>
+                    <ChairIcon />
+                    <span>{props.openPosition}</span>
+                </div>
+                <div className='experience'>
+                    <InfiniteIcon />
+                    <span>{props.experience}</span>
+                </div>
+                <div className="location">
+                    <PinIcon />
+                    <span>{props.location}</span>
+                </div>
+                <button>Show more details</button>
+            </section>
+        </div>
+    );
+}
+
+export default JobsCard;

src/pages/Home.tsx

@@ -1,25 +0,0 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
-import './Home.css';
-
-const Home: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Blank</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Blank</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <ExploreContainer />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Home;

src/pages/WorkWithUs.tsx

@@ -0,0 +1,24 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import JobsCard from '../components/JobsCard';
+import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';
+
+import './WorkWithUs.scss';
+
+const WorkWithUs: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent fullscreen className='content'>
+        <JobsCard
+          role='Software Developer'
+          team='engineering'
+          openPosition='4 Open Position'
+          experience='Minimum 3 years Experience'
+          location='Montreal, Canada'
+          icon={<DeveloperIcon />} />
+
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default WorkWithUs;

src/theme/variables.css

@@ -2,7 +2,17 @@
 http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:wght@100&display=swap');
+
 :root {
+
+  /* font size */
+  font-size: 62.5%;
+  font-family: 'Poppins', sans-serif;
+  /* box-sizing */
+  box-sizing: border-box;
+
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;
@@ -84,65 +94,65 @@ http://ionicframework.com/docs/theming/ */
 
   body {
     --ion-color-primary: #428cff;
-    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-rgb: 66, 140, 255;
     --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
     --ion-color-primary-shade: #3a7be0;
     --ion-color-primary-tint: #5598ff;
 
     --ion-color-secondary: #50c8ff;
-    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-rgb: 80, 200, 255;
     --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
     --ion-color-secondary-shade: #46b0e0;
     --ion-color-secondary-tint: #62ceff;
 
     --ion-color-tertiary: #6a64ff;
-    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-rgb: 106, 100, 255;
     --ion-color-tertiary-contrast: #ffffff;
-    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
     --ion-color-tertiary-shade: #5d58e0;
     --ion-color-tertiary-tint: #7974ff;
 
     --ion-color-success: #2fdf75;
-    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-rgb: 47, 223, 117;
     --ion-color-success-contrast: #000000;
-    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
     --ion-color-success-shade: #29c467;
     --ion-color-success-tint: #44e283;
 
     --ion-color-warning: #ffd534;
-    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-rgb: 255, 213, 52;
     --ion-color-warning-contrast: #000000;
-    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
     --ion-color-warning-shade: #e0bb2e;
     --ion-color-warning-tint: #ffd948;
 
     --ion-color-danger: #ff4961;
-    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-rgb: 255, 73, 97;
     --ion-color-danger-contrast: #ffffff;
-    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
     --ion-color-danger-shade: #e04055;
     --ion-color-danger-tint: #ff5b71;
 
     --ion-color-dark: #f4f5f8;
-    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-rgb: 244, 245, 248;
     --ion-color-dark-contrast: #000000;
-    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
     --ion-color-dark-shade: #d7d8da;
     --ion-color-dark-tint: #f5f6f9;
 
     --ion-color-medium: #989aa2;
-    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-rgb: 152, 154, 162;
     --ion-color-medium-contrast: #000000;
-    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
     --ion-color-medium-shade: #86888f;
     --ion-color-medium-tint: #a2a4ab;
 
     --ion-color-light: #222428;
-    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-rgb: 34, 36, 40;
     --ion-color-light-contrast: #ffffff;
-    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
   }
@@ -154,10 +164,10 @@ http://ionicframework.com/docs/theming/ */
 
   .ios body {
     --ion-background-color: #000000;
-    --ion-background-color-rgb: 0,0,0;
+    --ion-background-color-rgb: 0, 0, 0;
 
     --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
+    --ion-text-color-rgb: 255, 255, 255;
 
     --ion-color-step-50: #0d0d0d;
     --ion-color-step-100: #1a1a1a;
@@ -198,10 +208,10 @@ http://ionicframework.com/docs/theming/ */
 
   .md body {
     --ion-background-color: #121212;
-    --ion-background-color-rgb: 18,18,18;
+    --ion-background-color-rgb: 18, 18, 18;
 
     --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
+    --ion-text-color-rgb: 255, 255, 255;
 
     --ion-border-color: #222222;
 
@@ -233,4 +243,4 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-card-background: #1e1e1e;
   }
-}
+}