switched to evergreen ui and bumped package versions
This commit is contained in:
parent
5e09f3bd84
commit
fe49a0f75a
14 changed files with 12424 additions and 44311 deletions
43744
frontend/package-lock.json
generated
43744
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,26 +10,18 @@
|
|||
"analyze": "source-map-explorer 'build/static/js/*.js'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/app": "^1.0.3",
|
||||
"@capacitor/cli": "^3.2.4",
|
||||
"@capacitor/core": "^3.2.4",
|
||||
"@capacitor/haptics": "^1.1.0",
|
||||
"@capacitor/keyboard": "^1.1.0",
|
||||
"@capacitor/status-bar": "^1.0.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.15",
|
||||
"@ionic/react": "^5.8.1",
|
||||
"@ionic/react-router": "^5.8.1",
|
||||
"ionicons": "^5.5.3",
|
||||
"evergreen-ui": "^6.5.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router": "^5.2.1",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-spinners": "^0.11.0",
|
||||
"styled-components": "^5.3.1",
|
||||
"web-vitals": "^2.1.0",
|
||||
"web-vitals": "^2.1.2",
|
||||
"workbox-background-sync": "^6.3.0",
|
||||
"workbox-broadcast-update": "^6.3.0",
|
||||
"workbox-cacheable-response": "^6.3.0",
|
||||
|
|
@ -46,17 +38,17 @@
|
|||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"@testing-library/user-event": "^13.3.0",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/node": "^16.10.2",
|
||||
"@types/react": "^17.0.27",
|
||||
"@types/node": "^16.10.4",
|
||||
"@types/react": "^17.0.29",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-router": "^5.1.16",
|
||||
"@types/react-router-dom": "^5.3.0",
|
||||
"@types/styled-components": "^5.1.14",
|
||||
"@types/react-router": "^5.1.17",
|
||||
"@types/react-router-dom": "^5.3.1",
|
||||
"@types/styled-components": "^5.1.15",
|
||||
"react-scripts": "^4.0.3",
|
||||
"source-map-explorer": "^2.5.2",
|
||||
"typescript": "^4.4.3"
|
||||
"typescript": "^4.4.4"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
|
|
|||
|
|
@ -1,35 +1,37 @@
|
|||
import { lazy, Suspense } from "react"
|
||||
import { IonApp } from "@ionic/react"
|
||||
import { IonReactRouter } from "@ionic/react-router"
|
||||
import { Route } from "react-router-dom"
|
||||
import styled from "styled-components"
|
||||
import { ThemeProvider } from "evergreen-ui"
|
||||
import { BrowserRouter as Router, Route } from "react-router-dom"
|
||||
import styled, { createGlobalStyle, css } from "styled-components"
|
||||
|
||||
import Loader from "react-spinners/CircleLoader"
|
||||
import Navbar from "./components/Navbar"
|
||||
import Footer from "./components/Footer"
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import "@ionic/react/css/core.css"
|
||||
|
||||
/* Basic CSS for apps built with Ionic */
|
||||
import "@ionic/react/css/normalize.css"
|
||||
import "@ionic/react/css/structure.css"
|
||||
import "@ionic/react/css/typography.css"
|
||||
|
||||
/* Optional CSS utils that can be commented out */
|
||||
import "@ionic/react/css/padding.css"
|
||||
import "@ionic/react/css/float-elements.css"
|
||||
import "@ionic/react/css/text-alignment.css"
|
||||
import "@ionic/react/css/text-transformation.css"
|
||||
import "@ionic/react/css/flex-utils.css"
|
||||
import "@ionic/react/css/display.css"
|
||||
|
||||
/* Theme variables */
|
||||
import "./theme/variables.css"
|
||||
import darkTheme from "./theme/dark"
|
||||
|
||||
const Home = lazy(() => import("./pages/Home"))
|
||||
const Servers = lazy(() => import("./pages/Servers"))
|
||||
const Dashboard = lazy(() => import("./pages/Dashboard"))
|
||||
// const Dashboard = lazy(() => import("./pages/Dashboard"))
|
||||
|
||||
// wrapping it using css because prettier extension does not work well with styled-components
|
||||
// https://github.com/styled-components/vscode-styled-components/issues/175
|
||||
const _globalStyle = css`
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
${_globalStyle}
|
||||
`
|
||||
|
||||
const StyledSpinContainer = styled.div`
|
||||
width: 100%;
|
||||
|
|
@ -57,7 +59,9 @@ const StyledSpinContainer = styled.div`
|
|||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<IonApp>
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<ThemeProvider value={darkTheme}>
|
||||
<Suspense
|
||||
fallback={
|
||||
<StyledSpinContainer>
|
||||
|
|
@ -65,9 +69,8 @@ const App: React.FC = () => {
|
|||
</StyledSpinContainer>
|
||||
}
|
||||
>
|
||||
<IonReactRouter>
|
||||
<Navbar />
|
||||
|
||||
<Router>
|
||||
<Route exact path="/">
|
||||
<Home />
|
||||
</Route>
|
||||
|
|
@ -76,14 +79,14 @@ const App: React.FC = () => {
|
|||
<Servers />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/server/:server/dashboard">
|
||||
{/* <Route exact path="/server/:server/dashboard">
|
||||
<Dashboard />
|
||||
</Route>
|
||||
|
||||
</Route> */}
|
||||
</Router>
|
||||
<Footer />
|
||||
</IonReactRouter>
|
||||
</Suspense>
|
||||
</IonApp>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,214 +0,0 @@
|
|||
import { useLocation } from "react-router-dom"
|
||||
import {
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonList,
|
||||
IonMenu,
|
||||
IonMenuToggle,
|
||||
} from "@ionic/react"
|
||||
import {
|
||||
heartOutline,
|
||||
heartSharp,
|
||||
paperPlaneOutline,
|
||||
paperPlaneSharp,
|
||||
warningOutline,
|
||||
warningSharp,
|
||||
} from "ionicons/icons"
|
||||
import styled from "styled-components"
|
||||
|
||||
interface AppPage {
|
||||
url: string
|
||||
iosIcon: string
|
||||
mdIcon: string
|
||||
title: string
|
||||
}
|
||||
|
||||
const appPages: AppPage[] = [
|
||||
{
|
||||
title: "Favorites",
|
||||
url: "/favorites",
|
||||
iosIcon: heartOutline,
|
||||
mdIcon: heartSharp,
|
||||
},
|
||||
{
|
||||
title: "Modules",
|
||||
url: "/modules",
|
||||
iosIcon: heartOutline,
|
||||
mdIcon: heartSharp,
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
url: "/logs",
|
||||
iosIcon: paperPlaneOutline,
|
||||
mdIcon: paperPlaneSharp,
|
||||
},
|
||||
{
|
||||
title: "Incidents",
|
||||
url: "/incidents",
|
||||
iosIcon: warningOutline,
|
||||
mdIcon: warningSharp,
|
||||
},
|
||||
]
|
||||
|
||||
const StyledIonMenu = styled(IonMenu)`
|
||||
ion-menu ion-content {
|
||||
--background: var(
|
||||
--ion-item-background,
|
||||
var(--ion-background-color, #fff)
|
||||
);
|
||||
}
|
||||
|
||||
ion-menu.md ion-content {
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
--padding-top: 20px;
|
||||
--padding-bottom: 20px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-list {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
ion-menu.md ion-note {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-list-header,
|
||||
ion-menu.md ion-note {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-list#inbox-list {
|
||||
border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
|
||||
}
|
||||
|
||||
ion-menu.md ion-list#inbox-list ion-list-header {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-list#labels-list ion-list-header {
|
||||
font-size: 16px;
|
||||
margin-bottom: 18px;
|
||||
color: #757575;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-item {
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
ion-menu.md ion-item.selected {
|
||||
--background: rgba(var(--ion-color-primary-rgb), 0.14);
|
||||
}
|
||||
|
||||
ion-menu.md ion-item.selected ion-icon {
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
ion-menu.md ion-item ion-icon {
|
||||
color: #616e7e;
|
||||
}
|
||||
|
||||
ion-menu.md ion-item ion-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-content {
|
||||
--padding-bottom: 20px;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-list {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-note {
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-item {
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
--min-height: 50px;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-item ion-icon {
|
||||
font-size: 24px;
|
||||
color: #73849a;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-item .selected ion-icon {
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
ion-menu.ios ion-list#labels-list ion-list-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-list-header,
|
||||
ion-menu.ios ion-note {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
ion-menu.ios ion-note {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
ion-note {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: var(--ion-color-medium-shade);
|
||||
}
|
||||
|
||||
ion-item.selected {
|
||||
--color: var(--ion-color-primary);
|
||||
}
|
||||
`
|
||||
|
||||
const Menu: React.FC = () => {
|
||||
// todo: collapse button
|
||||
|
||||
const location = useLocation()
|
||||
|
||||
return (
|
||||
<StyledIonMenu contentId="main" type="overlay">
|
||||
<IonContent>
|
||||
<IonList id="inbox-list">
|
||||
{appPages.map((appPage, index) => {
|
||||
return (
|
||||
<IonMenuToggle key={index} autoHide={false}>
|
||||
<IonItem
|
||||
className={
|
||||
location.pathname === appPage.url
|
||||
? "selected"
|
||||
: ""
|
||||
}
|
||||
routerLink={location.pathname + appPage.url}
|
||||
routerDirection="none"
|
||||
lines="none"
|
||||
detail={false}
|
||||
>
|
||||
<IonIcon
|
||||
slot="start"
|
||||
ios={appPage.iosIcon}
|
||||
md={appPage.mdIcon}
|
||||
/>
|
||||
<IonLabel>{appPage.title}</IonLabel>
|
||||
</IonItem>
|
||||
</IonMenuToggle>
|
||||
)
|
||||
})}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</StyledIonMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export default Menu
|
||||
|
|
@ -3,9 +3,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|||
import { faGithub } from "@fortawesome/free-brands-svg-icons"
|
||||
import styled from "styled-components"
|
||||
|
||||
import { IonFooter } from "@ionic/react"
|
||||
const StyledFooter = styled.div`
|
||||
min-height: 5rem;
|
||||
margin-top: auto;
|
||||
|
||||
const StyledFooter = styled(IonFooter)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { IonHeader } from "@ionic/react"
|
||||
|
||||
import styled from "styled-components"
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"
|
||||
import { Button, LogOutIcon } from "evergreen-ui"
|
||||
|
||||
const StyledLlamaBotText = styled.b`
|
||||
font-size: 1.5rem;
|
||||
`
|
||||
|
||||
const StyledHeader = styled(IonHeader)`
|
||||
const StyledHeader = styled.div`
|
||||
height: 3.75rem;
|
||||
|
||||
color: white;
|
||||
|
|
@ -19,6 +19,8 @@ const StyledHeader = styled(IonHeader)`
|
|||
display: flex;
|
||||
justify-items: space-between;
|
||||
|
||||
padding: 0 0.5rem 0 0.5rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -45,6 +47,21 @@ const StyledHeader = styled(IonHeader)`
|
|||
}
|
||||
`
|
||||
|
||||
const StyledLoginButton = styled(Button)`
|
||||
color: white;
|
||||
padding: 8 12 8 12;
|
||||
border-radius: 5;
|
||||
background-color: indianred;
|
||||
|
||||
:hover {
|
||||
background-color: firebrick !important;
|
||||
}
|
||||
|
||||
:active {
|
||||
background-color: darkred !important;
|
||||
}
|
||||
`
|
||||
|
||||
const Navbar: React.FC = () => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false)
|
||||
const [userName, setUserName] = useState("")
|
||||
|
|
@ -87,9 +104,17 @@ const Navbar: React.FC = () => {
|
|||
</div>
|
||||
<div>
|
||||
{isLoggedIn && `Logged in as ${userName}`}
|
||||
<a href={isLoggedIn ? "/api/logout" : "/api/login"}>
|
||||
{isLoggedIn ? `Logout` : "Login"}
|
||||
</a>
|
||||
|
||||
<StyledLoginButton
|
||||
appearance="mini1mal"
|
||||
onClick={() => {
|
||||
window.location.href = isLoggedIn
|
||||
? "/api/logout"
|
||||
: "/api/login"
|
||||
}}
|
||||
>
|
||||
{isLoggedIn ? `${(<LogOutIcon />)} Logout` : "Login"}
|
||||
</StyledLoginButton>
|
||||
</div>
|
||||
</StyledHeader>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import {
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonMenuButton,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from "@ionic/react"
|
||||
import { useParams } from "react-router"
|
||||
import ExploreContainer from "../components/ExploreContainer"
|
||||
|
||||
const Page: React.FC = () => {
|
||||
const { name } = useParams<{ name: string }>()
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton />
|
||||
</IonButtons>
|
||||
<IonTitle>{name}</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">{name}</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<ExploreContainer name={name} />
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
import { IonHeader } from "@ionic/react"
|
||||
|
||||
const Incidents: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<IonHeader>Incidents</IonHeader>
|
||||
<h3>Incidents</h3>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { IonHeader } from "@ionic/react"
|
||||
|
||||
const Logs: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<IonHeader>Logs</IonHeader>
|
||||
<h3>Logs</h3>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { IonHeader } from "@ionic/react"
|
||||
|
||||
const Modules: React.FC = () => {
|
||||
return <IonHeader>Modules</IonHeader>
|
||||
return <h3>Modules</h3>
|
||||
}
|
||||
|
||||
export default Modules
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { IonHeader } from "@ionic/react"
|
||||
import styled from "styled-components"
|
||||
|
||||
const StyledServers = styled.div`
|
||||
|
|
@ -8,7 +7,7 @@ const StyledServers = styled.div`
|
|||
const Servers: React.FC = () => {
|
||||
return (
|
||||
<StyledServers>
|
||||
<IonHeader>Available servers</IonHeader>
|
||||
<h3>Available servers</h3>
|
||||
</StyledServers>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
7
frontend/src/theme/dark.ts
Normal file
7
frontend/src/theme/dark.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defaultTheme, Theme } from "evergreen-ui"
|
||||
|
||||
const theme: Theme = {
|
||||
...defaultTheme,
|
||||
}
|
||||
|
||||
export default theme
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/ */
|
||||
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--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
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body {
|
||||
--ion-color-primary: #afccff;
|
||||
--ion-color-primary-rgb: 175, 204, 255;
|
||||
--ion-color-primary-contrast: #000000;
|
||||
--ion-color-primary-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-primary-shade: #9ab4e0;
|
||||
--ion-color-primary-tint: #b7d1ff;
|
||||
|
||||
--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;
|
||||
}
|
||||
}
|
||||
12323
frontend/yarn.lock
Normal file
12323
frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue