From 2ce558c5c8ff0f703fc291bad027c7a7e2fbc327 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Tue, 19 Apr 2022 20:43:00 +0530 Subject: [PATCH] created form input component --- src/App.scss | 1 + src/App.tsx | 9 +- src/assets/icons/user.svg | 3 + src/common/styles/global.scss | 19 +-- .../JobDescriptionModal.module.scss | 142 ---------------- src/components/JobDescriptionModal.tsx | 59 ------- src/components/JobsCard.module.scss | 116 ------------- src/components/JobsCard.tsx | 51 ------ src/components/button/Button.module.scss | 64 +++++++ src/components/button/Button.tsx | 49 ++++++ src/components/formInput/Input.module.scss | 49 ++++++ src/components/formInput/Input.tsx | 32 ++++ src/pages/ConnectWithUs.tsx | 10 -- src/pages/WorkWithUs.module.scss | 3 - src/pages/WorkWithUs.tsx | 27 --- .../ConnectWithUs.module.scss | 0 src/pages/connectWithUs/ConnectWithUs.tsx | 23 +++ src/theme/variables.scss | 159 +----------------- 18 files changed, 234 insertions(+), 582 deletions(-) create mode 100644 src/assets/icons/user.svg delete mode 100644 src/components/JobDescriptionModal.module.scss delete mode 100644 src/components/JobDescriptionModal.tsx delete mode 100644 src/components/JobsCard.module.scss delete mode 100644 src/components/JobsCard.tsx create mode 100644 src/components/formInput/Input.module.scss create mode 100644 src/components/formInput/Input.tsx delete mode 100644 src/pages/ConnectWithUs.tsx delete mode 100644 src/pages/WorkWithUs.module.scss delete mode 100644 src/pages/WorkWithUs.tsx rename src/pages/{ => connectWithUs}/ConnectWithUs.module.scss (100%) create mode 100644 src/pages/connectWithUs/ConnectWithUs.tsx diff --git a/src/App.scss b/src/App.scss index 309d1ea..1145d07 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,3 +1,4 @@ @import '/src/common/styles/global.scss'; + /* Theme variables */ @import '/src/theme/variables.scss'; \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index def7c80..d47d466 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import { Redirect, Route } from 'react-router-dom'; import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; -import WorkWithUs from './pages/WorkWithUs'; /* Core CSS required for Ionic components to work properly */ import '@ionic/react/css/core.css'; @@ -20,7 +19,8 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; import './App.scss'; -import ConnectWithUs from './pages/ConnectWithUs'; +import ConnectWithUs from './pages/connectWithUs/ConnectWithUs'; + setupIonicReact(); @@ -28,14 +28,11 @@ const App: React.FC = () => ( - - - - + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 0000000..0611004 --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/styles/global.scss b/src/common/styles/global.scss index 7a315cc..bba46b0 100644 --- a/src/common/styles/global.scss +++ b/src/common/styles/global.scss @@ -1,15 +1,12 @@ -@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'); - - +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap'); :root { - /* font size */ font-size: 62.5%; +} + +body { font-family: 'Poppins', sans-serif; - /* box-sizing */ - box-sizing: border-box; +} - /* margin and padding */ - margin: 0; - padding: 0; -} \ No newline at end of file +h1,h2,h3,h4,h5,h6 { + font-family: 'Oswald', sans-serif; +} diff --git a/src/components/JobDescriptionModal.module.scss b/src/components/JobDescriptionModal.module.scss deleted file mode 100644 index aa57e34..0000000 --- a/src/components/JobDescriptionModal.module.scss +++ /dev/null @@ -1,142 +0,0 @@ -.tempDiv { - background-color: black; - height: 100vh; - width: 100vw; - - .descriptionModal { - position: absolute; - left: 0; - // top: 20%; - top: calc(100vh - 56rem); - background-color: #FFFFFF; - // height: 80vh; - // height: 80%; - height: 56rem; - width: 100vw; - border-radius: 3rem 3rem 0rem 0rem; - display: flex; - flex-direction: column; - justify-content: space-between; - - .iconHolder { - display: flex; - justify-content: space-around; - align-items: center; - margin-top: 2.5rem; - - .developerIcon { - background-color: #F2F2F2; - border-radius: 2.5rem; - width: 5rem; - height: 5rem; - - svg { - margin-left: 1.4rem; - margin-top: 1.2rem; - width: 2.8rem; - height: 2.8rem; - } - } - } - - .roleHeader { - text-align: center; - // margin: 2rem 0; - h3 { - color: #676767; - font-size: 2.1rem; - margin: 0; - font-family: 'Oswald', sans-serif; - font-weight: 600; - letter-spacing: 0.1rem; - margin-bottom: 0.4rem; - } - - div { - color: #A3A3A3; - font-size: 1.4rem; - font-weight: 600; - } - } - - .jd { - display: flex; - justify-content: center; - - button { - width: 16rem; - height: 4.5rem; - border-radius: 1rem; - font-size: 1.4rem; - font-weight: 600; - } - - .requirement { - background-color: #DAF3F5; - color: #6CB3B9; - } - - .description { - background-color: #EDEDED; - color: #A3A3A3; - margin-left: 2rem; - } - } - - .qualification { - width: 95%; - overflow-y: scroll; - max-height: 28.2rem; - h4 { - font-family: 'Oswald', sans-serif; - color: #747474; - font-size: 1.8rem; - font-weight: 600; - margin-left: 2.8rem; - } - - ul { - list-style: none; - - li { - color: #A3A3A3; - font-weight: 600; - font-size: 1.4rem; - line-height: 1.6; - margin-left: 1.8rem; - position: relative; - &::before { - content: ""; - position: absolute; - background: #BEBEBE; - width: 0.8rem; - height: 0.8rem; - border-radius: 50%; - left: -3rem; - top: 0.7rem; - } - } - } - - } - - .applyBtn { - display: flex; - justify-content: center; - // margin-bottom: 2rem; - background-color: #FFFFFF; - box-shadow: 0rem -0.2rem 2.5rem #0000001C; - height: 7.7rem; - button { - width: 30rem; - height: 4rem; - background-color: #33CE93; - border-radius: 2.5rem; - color: #FFFFFF; - font-size: 1.6rem; - font-weight: 600; - align-self: center; - } - } - } -} \ No newline at end of file diff --git a/src/components/JobDescriptionModal.tsx b/src/components/JobDescriptionModal.tsx deleted file mode 100644 index c8f2a5a..0000000 --- a/src/components/JobDescriptionModal.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import styles from './JobDescriptionModal.module.scss' - -import { ReactComponent as BackIcon } from '../assets/icons/back-2.svg'; -import { ReactComponent as ShareIcon } from '../assets/icons/share.svg'; -import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg'; - - -interface Props { } - -const JobDescriptionModal: React.FC = (props) => { - return ( -
-
-
-
- -
-
- -
-
- -
-
-
-

Software Developer

-
Full stack developer
-
-
- - -
-
-

Minimum Qualification:

- -
    -
  • Lorem, ipsum dolor sit amet consectetur elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    • -
- -
-
- -
-
-
- - ) -} - -export default JobDescriptionModal; \ No newline at end of file diff --git a/src/components/JobsCard.module.scss b/src/components/JobsCard.module.scss deleted file mode 100644 index 97fd7d6..0000000 --- a/src/components/JobsCard.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -.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; - } - - } -} \ No newline at end of file diff --git a/src/components/JobsCard.tsx b/src/components/JobsCard.tsx deleted file mode 100644 index 7cc6878..0000000 --- a/src/components/JobsCard.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import styles from './JobsCard.module.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) => { - return ( -
-
-
- {props.icon} -
-
-

{props.role}

-
{props.team}
-
-
- -
-
-
-
- - {props.openPosition} -
-
- - {props.experience} -
-
- - {props.location} -
- -
-
- ); -} - -export default JobsCard; \ No newline at end of file diff --git a/src/components/button/Button.module.scss b/src/components/button/Button.module.scss index e69de29..86e4b06 100644 --- a/src/components/button/Button.module.scss +++ b/src/components/button/Button.module.scss @@ -0,0 +1,64 @@ +$steam: #DDDDDD; + +.CommonButton { + + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + + span { + font-weight: 600; + color: white; + } + + &:disabled { + opacity: 0.5; + pointer-events: none; + background-color: $steam; + border-color: $steam; + font-weight: 600; + } + +} + +.Small { + height: 3rem; + min-width: 3rem; + font-size: 1.2rem; + border-radius: 1.5rem; +} + +.Medium { + height: 4rem; + min-width: 15rem; + margin-top: 1.2rem; + margin-bottom: 1.2rem; + border-radius: 2.5rem; + span { + font-size: 1.2rem; + font-weight: 600; + } +} + +.Large { + height: 4rem; + min-width: 35rem; + font-size: 1.6rem; + border-radius: 2.5rem; + margin: 2rem 2rem; +} + +.Primary { + background-color: var(--primary-button-color); + color: white; + border-color: var(--primary-button-color); + +} + +.Secondary { + background-color: transparent; + border-color: var(--primary-button-color); + color: var(--primary-button-color); + +} diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index e69de29..c7788c5 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -0,0 +1,49 @@ +import styles from './Button.module.scss'; + +interface Props { + text: string; + isDisabled?: boolean; + type?: 'primary' | 'secondary'; + size?: 'small' | 'medium' | 'large'; +} + +const Button: React.FC = (props) => { + + const getButtonClass = () => { + let buttonType, buttonSize; + + if (props.type) { + switch (props.type) { + case 'primary': buttonType = styles.Primary; break; + case 'secondary': buttonType = styles.Secondary; break; + default: buttonType = styles.Primary; + } + } else { + buttonType = styles.Primary; + } + + if (props.size) { + switch (props.size) { + case 'small': buttonSize = styles.Small; break; + case 'medium': buttonSize = styles.Medium; break; + case 'large': buttonSize = styles.Large; break; + default: buttonSize = styles.Medium; + } + } else { + buttonSize = styles.Medium; + } + + return styles.CommonButton + ' ' + buttonType + ' ' + buttonSize; + + } + + return ( + + ); +} + +export default Button; \ No newline at end of file diff --git a/src/components/formInput/Input.module.scss b/src/components/formInput/Input.module.scss new file mode 100644 index 0000000..ea5eabb --- /dev/null +++ b/src/components/formInput/Input.module.scss @@ -0,0 +1,49 @@ +$clouded-vision: #D1D1D1; + +.inputContainer { + display: flex; + // align-items: center; + flex-direction: column; + // margin-top: 5rem; + // margin-left: 1.5rem; + position: relative; + + .icon { + position: absolute; + left: 2rem; + top: 1.2rem; + } + +} + +ion-icon { + width: 1rem; + height: 1rem; +} + +ion-input { + position: relative; + border: 0.1rem solid $clouded-vision; + box-shadow: inset 0rem 0rem 0.5rem $clouded-vision; + border-radius: 2.5rem; + font-size: 1.4rem !important; + --color: #696969 !important; + font-weight: 400 !important; + width: 25rem !important; + + input { + --padding-start: 4rem; + --placeholder-color: $clouded-vision; + } +} + +ion-item { + width: 34rem; +} + +ion-label { + color: #696969; + font-size: 1.4rem; + margin-left: 4rem; + margin-bottom: 0.8rem; +} \ No newline at end of file diff --git a/src/components/formInput/Input.tsx b/src/components/formInput/Input.tsx new file mode 100644 index 0000000..c1b399f --- /dev/null +++ b/src/components/formInput/Input.tsx @@ -0,0 +1,32 @@ +import styles from './Input.module.scss'; +import { IonIcon, IonInput, IonItem, IonLabel } from '@ionic/react'; + +interface Props { + placeholder?: string; + type?: "text" | "email" | "password" | "number"; + icon?: string; + text?: string; +} + +const Input: React.FC = (props) => { + return ( +
+ {props.text && + {props.text} + } + + +
+ {props.icon && + + } +
+ + + +
+ ) +} + +export default Input; \ No newline at end of file diff --git a/src/pages/ConnectWithUs.tsx b/src/pages/ConnectWithUs.tsx deleted file mode 100644 index a091a89..0000000 --- a/src/pages/ConnectWithUs.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styles from './WorkWithUs.module.scss'; - -const ConnectWithUs = () => { - return ( -
-
- ) -} - -export default ConnectWithUs; \ No newline at end of file diff --git a/src/pages/WorkWithUs.module.scss b/src/pages/WorkWithUs.module.scss deleted file mode 100644 index 9217480..0000000 --- a/src/pages/WorkWithUs.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -// IonContent { -// --background-color: black; -// } \ No newline at end of file diff --git a/src/pages/WorkWithUs.tsx b/src/pages/WorkWithUs.tsx deleted file mode 100644 index 1750b70..0000000 --- a/src/pages/WorkWithUs.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; -import JobsCard from '../components/JobsCard'; -import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg'; - -import styles from './WorkWithUs.module.scss'; -import JobDescriptionModal from '../components/JobDescriptionModal'; - -const WorkWithUs: React.FC = () => { - return ( - - - {/* } /> */} - - {/* */} - - - - ); -}; - -export default WorkWithUs; diff --git a/src/pages/ConnectWithUs.module.scss b/src/pages/connectWithUs/ConnectWithUs.module.scss similarity index 100% rename from src/pages/ConnectWithUs.module.scss rename to src/pages/connectWithUs/ConnectWithUs.module.scss diff --git a/src/pages/connectWithUs/ConnectWithUs.tsx b/src/pages/connectWithUs/ConnectWithUs.tsx new file mode 100644 index 0000000..670a28f --- /dev/null +++ b/src/pages/connectWithUs/ConnectWithUs.tsx @@ -0,0 +1,23 @@ +import Button from '../../components/button/Button'; +import styles from './ConnectWithUs.module.scss'; + +import { IonButton } from '@ionic/react'; +import userIcon from '../../assets/icons/user.svg'; + +import Input from '../../components/formInput/Input'; + +const ConnectWithUs: React.FC = () => { + return ( +
+ + + + {/* Success */} +
+ ) +} + +export default ConnectWithUs; \ No newline at end of file diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 40b8977..57f5a1a 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -76,163 +76,8 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; -} -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ + // button color + --primary-button-color: #33CE93; - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66, 140, 255; - --ion-color-primary-contrast: #ffffff; - --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-contrast: #ffffff; - --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-contrast: #ffffff; - --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-contrast: #000000; - --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-contrast: #000000; - --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-contrast: #ffffff; - --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-contrast: #000000; - --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-contrast: #000000; - --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-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } } \ No newline at end of file