diff --git a/rogue-thi-app/components/RoomMap.jsx b/rogue-thi-app/components/RoomMap.jsx
index 2b6c9771..42e0de69 100644
--- a/rogue-thi-app/components/RoomMap.jsx
+++ b/rogue-thi-app/components/RoomMap.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
@@ -8,15 +8,21 @@ import Form from 'react-bootstrap/Form'
import { AttributionControl, CircleMarker, FeatureGroup, LayerGroup, LayersControl, MapContainer, Polygon, Popup, TileLayer } from 'react-leaflet'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faLinux } from '@fortawesome/free-brands-svg-icons'
+
import { NoSessionError, UnavailableSessionError } from '../lib/backend/thi-session-handler'
+import { TUX_ROOMS, filterRooms, getNextValidDate, getTranslatedRoomFunction } from '../lib/backend-utils/rooms-utils'
import { USER_GUEST, useUserKind } from '../lib/hooks/user-kind'
-import { filterRooms, getNextValidDate, getTranslatedRoomFunction } from '../lib/backend-utils/rooms-utils'
import { formatFriendlyTime, formatISODate, formatISOTime } from '../lib/date-utils'
import { useLocation } from '../lib/hooks/geolocation'
+import { ThemeContext } from '../pages/_app'
import styles from '../styles/RoomMap.module.css'
import { useTranslation } from 'next-i18next'
+import themes from '../data/themes.json'
+
const SPECIAL_ROOMS = {
G308: { text: 'Linux PC-Pool', color: '#F5BD0C' }
}
@@ -58,6 +64,18 @@ export default function RoomMap ({ highlight, roomData }) {
const { t, i18n } = useTranslation(['rooms', 'api-translations'])
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+ const [theme] = useContext(ThemeContext)
+
+ function isDark () {
+ const themeSettings = themes.filter(item => item.style === theme)[0].mapTheme ?? 'system'
+ if (themeSettings === 'system') {
+ return systemDark
+ } else {
+ return themeSettings === 'dark'
+ }
+ }
+
/**
* Preprocessed room data for Leaflet.
*/
@@ -181,32 +199,40 @@ export default function RoomMap ({ highlight, roomData }) {
return (
-
+
{entry.properties.Raum}
- {`, ${getTranslatedRoomFunction(entry?.properties?.Funktion, i18n)}`}
+ {`, ${getTranslatedRoomFunction(entry?.properties?.Funktion, i18n)}`}
{avail && (
<>
+
{t('rooms.map.freeFromUntil', {
from: formatFriendlyTime(avail.from),
until: formatFriendlyTime(avail.until)
})}
-
)}
{!avail && availableRooms && (
<>
+
{t('rooms.map.occupied')}
)}
- {special?.text}
+ {special && (
+ <>
+
+ {special.text}
+ {TUX_ROOMS.includes(entry.properties.Raum) && <> }
+
+ )}
@@ -275,7 +301,7 @@ export default function RoomMap ({ highlight, roomData }) {
>
@@ -322,7 +348,6 @@ export default function RoomMap ({ highlight, roomData }) {
center={[location.latitude, location.longitude]}
fillOpacity={1.0}
color='#ffffff'
- fillColor='rgb(51, 136, 255)'
radius={8}
weight={3}
className={styles.locationMarker}
diff --git a/rogue-thi-app/data/themes.json b/rogue-thi-app/data/themes.json
index 2ab5b722..f8025ac6 100644
--- a/rogue-thi-app/data/themes.json
+++ b/rogue-thi-app/data/themes.json
@@ -1,11 +1,11 @@
[
- { "name": { "en": "Automatic", "de": "Automatisch" }, "style": "default" },
- { "name": { "en": "Light", "de": "Hell" }, "style": "light" },
- { "name": { "en": "THI Light", "de": "THI Hell" }, "style": "thi-light" },
- { "name": { "en": "Dark", "de": "Dunkel" }, "style": "dark" },
- { "name": { "en": "Barbie & Ken", "de": "Barbie & Ken" }, "style": "barbie" },
- { "name": { "en": "Retro", "de": "Retro" }, "style": "retro" },
- { "name": { "en": "Windows 95", "de": "Windows 95" }, "style": "95" },
- { "name": { "en": "Pride", "de": "Pride" }, "style": "pride" },
- { "name": { "en": "Hackerman", "de": "Hackerman" }, "style": "hacker", "requiresToken": true }
+ { "name": { "en": "Automatic", "de": "Automatisch" }, "style": "default", "mapTheme": "system" },
+ { "name": { "en": "Light", "de": "Hell" }, "style": "light", "mapTheme": "light"},
+ { "name": { "en": "THI Light", "de": "THI Hell" }, "style": "thi-light", "mapTheme": "light"},
+ { "name": { "en": "Dark", "de": "Dunkel" }, "style": "dark", "mapTheme": "dark" },
+ { "name": { "en": "Barbie & Ken", "de": "Barbie & Ken" }, "style": "barbie", "mapTheme": "light" },
+ { "name": { "en": "Retro", "de": "Retro" }, "style": "retro", "mapTheme": "dark" },
+ { "name": { "en": "Windows 95", "de": "Windows 95" }, "style": "95", "mapTheme": "light" },
+ { "name": { "en": "Pride", "de": "Pride" }, "style": "pride", "mapTheme": "system" },
+ { "name": { "en": "Hackerman", "de": "Hackerman" }, "style": "hacker", "requiresToken": true, "mapTheme": "dark" }
]
diff --git a/rogue-thi-app/lib/backend-utils/rooms-utils.js b/rogue-thi-app/lib/backend-utils/rooms-utils.js
index 8179a2a5..5aba6a03 100644
--- a/rogue-thi-app/lib/backend-utils/rooms-utils.js
+++ b/rogue-thi-app/lib/backend-utils/rooms-utils.js
@@ -12,6 +12,7 @@ export const BUILDINGS_ALL = 'Alle'
export const ROOMS_ALL = 'Alle'
export const DURATION_PRESET = '01:00'
export const SUGGESTION_DURATION_PRESET = 90
+export const TUX_ROOMS = ['G308']
/**
* Adds minutes to a date object.
diff --git a/rogue-thi-app/next.config.js b/rogue-thi-app/next.config.js
index 0771ca5d..ff69ab04 100644
--- a/rogue-thi-app/next.config.js
+++ b/rogue-thi-app/next.config.js
@@ -72,7 +72,7 @@ module.exports = {
{
key: 'Content-Security-Policy',
value: `default-src 'none';
- img-src 'self' data: https://tile.openstreetmap.org;
+ img-src 'self' data: https://tiles-eu.stadiamaps.com/;
font-src 'self';
connect-src 'self' ${PROXY_URL} ${API_URL};
style-src 'self' 'unsafe-inline';
diff --git a/rogue-thi-app/package-lock.json b/rogue-thi-app/package-lock.json
index 28a00e89..9d9e23fe 100644
--- a/rogue-thi-app/package-lock.json
+++ b/rogue-thi-app/package-lock.json
@@ -38,7 +38,7 @@
"react-swipeable-views": "^0.14.0",
"react-swipeable-views-utils": "^0.14.0",
"sass": "^1.45.1",
- "win95.css": "github:neuland-ingolstadt/win95.css#477a223",
+ "win95.css": "github:neuland-ingolstadt/win95.css#commit=477a22394b61b57b20ee2c3a83b769c9a6dc8e46",
"xml-js": "^1.6.11"
},
"devDependencies": {
@@ -119,15 +119,15 @@
}
},
"node_modules/@capacitor/cli": {
- "version": "4.6.2",
- "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.6.2.tgz",
- "integrity": "sha512-035RIynwnmusv9Z/1jPDP+i7Z54ZY3qxNtf6cA69TxZlnozAqBkjPyHGuaAugxSn+4jzCobSLE3456VHhHMx1g==",
+ "version": "4.8.1",
+ "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.8.1.tgz",
+ "integrity": "sha512-Ssxh+YaMuP+ZHJYaRJ78NCxS5L+u3X3XWK+NGhe+aluRZDigK5LJIiqjp+K3Xx1zQBG62gWWCEZoDvXJvafPIw==",
"dev": true,
"dependencies": {
- "@ionic/cli-framework-output": "^2.2.5",
- "@ionic/utils-fs": "^3.1.6",
- "@ionic/utils-subprocess": "^2.1.11",
- "@ionic/utils-terminal": "^2.3.3",
+ "@ionic/cli-framework-output": "2.2.5",
+ "@ionic/utils-fs": "3.1.6",
+ "@ionic/utils-subprocess": "2.1.11",
+ "@ionic/utils-terminal": "2.3.3",
"commander": "^9.3.0",
"debug": "^4.3.4",
"env-paths": "^2.2.0",
@@ -140,7 +140,7 @@
"semver": "^7.3.7",
"tar": "^6.1.11",
"tslib": "^2.4.0",
- "xml2js": "^0.4.23"
+ "xml2js": "^0.5.0"
},
"bin": {
"cap": "bin/capacitor",
@@ -2133,9 +2133,9 @@
}
},
"node_modules/eslint-plugin-import/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
@@ -2172,9 +2172,9 @@
}
},
"node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
@@ -2288,9 +2288,9 @@
}
},
"node_modules/eslint-plugin-react/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
@@ -5232,9 +5232,9 @@
}
},
"node_modules/tough-cookie": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
- "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+ "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
"dependencies": {
"psl": "^1.1.33",
"punycode": "^2.1.1",
@@ -5531,9 +5531,9 @@
"resolved": "git+ssh://git@github.com/neuland-ingolstadt/win95.css.git#477a22394b61b57b20ee2c3a83b769c9a6dc8e46"
},
"node_modules/word-wrap": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
- "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+ "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
@@ -5579,9 +5579,9 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
},
"node_modules/xml2js": {
- "version": "0.4.23",
- "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
- "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+ "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
"dev": true,
"dependencies": {
"sax": ">=0.6.0",
diff --git a/rogue-thi-app/pages/personal.jsx b/rogue-thi-app/pages/personal.jsx
index b41376a6..60df10a6 100644
--- a/rogue-thi-app/pages/personal.jsx
+++ b/rogue-thi-app/pages/personal.jsx
@@ -51,7 +51,7 @@ export default function Personal () {
const [, setShowPersonalDataModal] = useContext(ShowPersonalDataModal)
const [, setShowThemeModal] = useContext(ShowThemeModal)
const [, setShowLanguageModal] = useContext(ShowLanguageModal)
- const theme = useContext(ThemeContext)
+ const [theme] = useContext(ThemeContext)
const router = useRouter()
const { t, i18n } = useTranslation('personal')
@@ -172,7 +172,7 @@ export default function Personal () {
- {themes.filter(item => item.style.includes(theme[0])).map(item => (
+ {themes.filter(item => item.style === theme).map(item => (
setShowThemeModal(true)} key={item.style}>
diff --git a/rogue-thi-app/pages/rooms/list.jsx b/rogue-thi-app/pages/rooms/list.jsx
index a4134249..68a432d9 100644
--- a/rogue-thi-app/pages/rooms/list.jsx
+++ b/rogue-thi-app/pages/rooms/list.jsx
@@ -14,7 +14,7 @@ import AppNavbar from '../../components/page/AppNavbar'
import AppTabbar from '../../components/page/AppTabbar'
import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
-import { ROOMS_ALL, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { ROOMS_ALL, TUX_ROOMS, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
import { formatFriendlyTime, formatNearDate } from '../../lib/date-utils'
import API from '../../lib/backend/authenticated-api'
@@ -23,8 +23,6 @@ import styles from '../../styles/RoomsList.module.css'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
-const TUX_ROOMS = ['G308']
-
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale ?? 'en', [
diff --git a/rogue-thi-app/pages/rooms/search.jsx b/rogue-thi-app/pages/rooms/search.jsx
index 6c3aaa83..074359ea 100644
--- a/rogue-thi-app/pages/rooms/search.jsx
+++ b/rogue-thi-app/pages/rooms/search.jsx
@@ -15,7 +15,7 @@ import AppContainer from '../../components/page/AppContainer'
import AppNavbar from '../../components/page/AppNavbar'
import AppTabbar from '../../components/page/AppTabbar'
-import { BUILDINGS, BUILDINGS_ALL, DURATION_PRESET, filterRooms, getNextValidDate, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { BUILDINGS, BUILDINGS_ALL, DURATION_PRESET, TUX_ROOMS, filterRooms, getNextValidDate, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
import { formatFriendlyTime, formatISODate, formatISOTime } from '../../lib/date-utils'
@@ -25,7 +25,6 @@ import { Trans, useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
const DURATIONS = ['00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00']
-const TUX_ROOMS = ['G308']
export const getStaticProps = async ({ locale }) => ({
props: {
diff --git a/rogue-thi-app/pages/rooms/suggestions.jsx b/rogue-thi-app/pages/rooms/suggestions.jsx
index 5ee7252a..178915df 100644
--- a/rogue-thi-app/pages/rooms/suggestions.jsx
+++ b/rogue-thi-app/pages/rooms/suggestions.jsx
@@ -23,7 +23,7 @@ import AppTabbar from '../../components/page/AppTabbar'
import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
import { formatFriendlyTime, isSameDay } from '../../lib/date-utils'
-import { SUGGESTION_DURATION_PRESET, findSuggestedRooms, getAllUserBuildings, getEmptySuggestions, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { SUGGESTION_DURATION_PRESET, TUX_ROOMS, findSuggestedRooms, getAllUserBuildings, getEmptySuggestions, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
import styles from '../../styles/RoomsSearch.module.css'
@@ -34,8 +34,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { Trans, useTranslation } from 'next-i18next'
import { useBuildingFilter } from '../../lib/hooks/building-filter'
-const TUX_ROOMS = ['G308']
-
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale ?? 'en', [
diff --git a/rogue-thi-app/public/locales/en/rooms.json b/rogue-thi-app/public/locales/en/rooms.json
index b057d0e0..13fb049e 100644
--- a/rogue-thi-app/public/locales/en/rooms.json
+++ b/rogue-thi-app/public/locales/en/rooms.json
@@ -13,7 +13,7 @@
"automaticSuggestion": "Automatic Suggestions",
"occupied": "Occupied",
"freeFromUntil": "Free from {{from}} to {{until}}",
- "attribution": "© OpenStreetMap contributors",
+ "attribution": "© Stadia Maps © OpenMapTiles © OpenStreetMap contributors",
"legend": {
"free": "Free",
"occupied": "Occupied",
diff --git a/rogue-thi-app/scss/common.scss b/rogue-thi-app/scss/common.scss
index ddbc8a6c..06e59467 100644
--- a/rogue-thi-app/scss/common.scss
+++ b/rogue-thi-app/scss/common.scss
@@ -150,7 +150,7 @@ pre {
--home-card-mobile-border: #{$gray-700};
--rooms-controls-background: #{$body-bg};
- --rooms-controls-border: #{$gray-700};
+ --rooms-controls-border: #{rgba($gray-700, .1)};
}
// use our CI color
@@ -158,4 +158,3 @@ $theme-colors: (
"primary": $primary
);
-@import "../node_modules/bootstrap/scss/bootstrap";
diff --git a/rogue-thi-app/scss/themes/95.scss b/rogue-thi-app/scss/themes/95.scss
index d39435eb..f1df47cd 100644
--- a/rogue-thi-app/scss/themes/95.scss
+++ b/rogue-thi-app/scss/themes/95.scss
@@ -1,5 +1,5 @@
+// stylelint-disable
$enable-rounded: false;
-// $border-radius: 0;
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/win95.css/assets/win95";
diff --git a/rogue-thi-app/scss/themes/barbie.scss b/rogue-thi-app/scss/themes/barbie.scss
index dcea6c7f..98ddae3a 100644
--- a/rogue-thi-app/scss/themes/barbie.scss
+++ b/rogue-thi-app/scss/themes/barbie.scss
@@ -5,6 +5,7 @@ $body-bg: #FACDE5;
$body-color: black;
@import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
@font-face {
font-family: sacramento;
diff --git a/rogue-thi-app/scss/themes/dark.scss b/rogue-thi-app/scss/themes/dark.scss
index 438faab1..2a261a66 100644
--- a/rogue-thi-app/scss/themes/dark.scss
+++ b/rogue-thi-app/scss/themes/dark.scss
@@ -42,3 +42,4 @@ $light: $gray-300;
$dark: $gray-800;
@import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
\ No newline at end of file
diff --git a/rogue-thi-app/scss/themes/hacker.scss b/rogue-thi-app/scss/themes/hacker.scss
index 6e4fb0bd..bb8da24e 100644
--- a/rogue-thi-app/scss/themes/hacker.scss
+++ b/rogue-thi-app/scss/themes/hacker.scss
@@ -5,6 +5,7 @@ $body-bg: #404040BB;
$body-color: white;
@import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
@font-face {
font-family: fasterone;
diff --git a/rogue-thi-app/scss/themes/light.scss b/rogue-thi-app/scss/themes/light.scss
index 7397416e..51e99ca2 100644
--- a/rogue-thi-app/scss/themes/light.scss
+++ b/rogue-thi-app/scss/themes/light.scss
@@ -1,11 +1,14 @@
-$theme-colors: (
- "primary": #8845ef
-);
+$primary: #8845ef;
@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "../common.scss";
// react-placeholder
// declare after bootstrap, since we need bootstrap variables
.text-row, .rect-shape, .round-shape {
background: $gray-200 !important;
}
+
+:root {
+ --home-card-mobile-border: #{$gray-300};
+}
\ No newline at end of file
diff --git a/rogue-thi-app/scss/themes/retro.scss b/rogue-thi-app/scss/themes/retro.scss
index 9b8222b1..65cf872e 100644
--- a/rogue-thi-app/scss/themes/retro.scss
+++ b/rogue-thi-app/scss/themes/retro.scss
@@ -5,6 +5,7 @@ $body-bg: #121212;
$body-color: white;
@import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
@font-face {
font-family: fasterone;
diff --git a/rogue-thi-app/scss/themes/thi-light.scss b/rogue-thi-app/scss/themes/thi-light.scss
index 6691f0a0..0b19d8a4 100644
--- a/rogue-thi-app/scss/themes/thi-light.scss
+++ b/rogue-thi-app/scss/themes/thi-light.scss
@@ -1,9 +1,8 @@
-$theme-colors: (
- "primary": #005a9b,
- "secondary": #3a93c3
-);
+$primary: #005a9b;
+$secondary: #3a93c3;
@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "../common.scss";
// react-placeholder
// declare after bootstrap, since we need bootstrap variables
@@ -12,9 +11,8 @@ $theme-colors: (
}
:root {
- --navbar-border-image: linear-gradient(90deg, #005a9b, #00b1ec);
- --tabbar-tab-active: #005a9b;
- // --navbar-border-image: none;
+ --navbar-border-image: linear-gradient(90deg, #{$primary}, #00b1ec);
+ --home-card-mobile-border: #{$gray-300};
}
diff --git a/rogue-thi-app/styles/AppTabbar.module.css b/rogue-thi-app/styles/AppTabbar.module.css
index 9d8d9948..472f37c7 100644
--- a/rogue-thi-app/styles/AppTabbar.module.css
+++ b/rogue-thi-app/styles/AppTabbar.module.css
@@ -2,7 +2,6 @@
/* prevent iOS home bar from overlapping tab bar */
padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
background: var(--tabbar-background, white);
- border-top: 1px solid var(--tabbar-border, #eeeeee);
box-shadow: 0px 0px 3px var(--tabbar-shadow, #00000020);
}
@@ -32,7 +31,9 @@
* this spacer is placed directly under the app body and provides
* clerance to ensure nothing is displayed under the tab bar
*/
-.spacer {
- /* 56px footer height + iOS home bar height */
- height: calc(56px + env(safe-area-inset-bottom, 0px));
-}
+ @media only screen and (max-width: 768px) {
+ .spacer {
+ /* 56px footer height + iOS home bar height */
+ height: calc(56px + env(safe-area-inset-bottom, 0px));
+ }
+ }
diff --git a/rogue-thi-app/styles/RoomMap.module.css b/rogue-thi-app/styles/RoomMap.module.css
index 1b174cd5..41cce119 100644
--- a/rogue-thi-app/styles/RoomMap.module.css
+++ b/rogue-thi-app/styles/RoomMap.module.css
@@ -27,14 +27,54 @@
.mapContainer {
flex: 1;
- margin-top: 5px;
+ margin: 5px 0 25px 0;
+ border-radius: 8px;
+}
+
+@media only screen and (max-width: 576px) {
+ .mapContainer {
+ border-radius: 0px;
+ margin: 5px 0 0 0;
+ }
}
.mapContainer :global(.leaflet-control) {
overflow: hidden;
background-color: var(--rooms-controls-background, #ffffff);
- border-color: var(--rooms-controls-border, #00000033);
color: unset;
+ border-radius: 8px;
+ border: 1px solid var(--rooms-controls-border, #ced4da);
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.mapContainer :global(.leaflet-control-attribution) {
+ padding: 5px 10px;
+ margin: 0 0 11px 10px;
+ max-width: 50vw;
+}
+
+/* Ugly workaround for line between tiles especially on dark map (see https://github.com/Leaflet/Leaflet/issues/3575) */
+.mapContainer :global(.leaflet-tile) {
+ width: 257px !important;
+ height: 257px !important;
+}
+
+.mapContainer :global(.leaflet-control-attribution) > a:link {
+ color: var(--primary);
+ transition: color 0.2s ease-in-out;
+}
+
+.mapContainer :global(.leaflet-control-attribution) > a:visited {
+ color: var(--primary);
+}
+
+.mapContainer :global(.leaflet-control-attribution) > a:hover {
+ color: var(--secondary);
+ text-decoration: none;
+}
+
+.test {
+ background-color: red;
}
/* restyle the layers control without modifying the html */
@@ -73,7 +113,7 @@
height: 1em;
margin-bottom: -2px;
border-radius: 0.5em;
- background-color: #8845ef;
+ background-color: var(--primary);
}
.roomAvailable {
@@ -94,7 +134,7 @@
height: 1em;
margin-bottom: -2px;
border-radius: 0.5em;
- background-color: #6c757d;
+ background-color: var(--gray);
}
.legendSpecial::before {
@@ -109,4 +149,45 @@
.locationMarker {
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .25));
+ fill: var(--primary);
+}
+
+/* Popup close button */
+.popup :global(.leaflet-popup-close-button) > span {
+ color: var(--white);
+ font-size: 1.5rem !important;
+ user-select: none !important;
+}
+
+.popup :global(.leaflet-popup-close-button) {
+ top: calc(50% - 0.9rem) !important;
+ right: 1rem !important;
+ background-color: var(--primary) !important;
+ border-radius: 50% !important;
+ height: 1.7rem !important;
+ width: 1.7rem !important;
+ transition: background-color 0.2s ease-in-out !important;
+}
+
+.popup :global(.leaflet-popup-close-button:hover) {
+ background-color: var(--navbar-border) !important;
+}
+
+/* Whole Popup */
+.popup > div {
+ border-radius: 10px;
+ font-size: 0.8rem;
+ color: var(--tabbar-tab);
+}
+
+/* Popup wrapper */
+.popup :global(.leaflet-popup-content-wrapper) {
+ padding: 0.2rem;
+ background-color: var(--rooms-controls-background);
+ padding-right: 2.2rem;
+}
+
+/* Popup tip */
+.popup :global(.leaflet-popup-tip) {
+ background-color: var(--tabbar-background);
}
\ No newline at end of file