Add light theme (#29)

FreekBes · web-flow · commit 0ff67aff1c98 · 2024-11-11T17:35:57.000+01:00
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,10 +17,6 @@ jobs:
 
     needs: build
 
-    strategy:
-      matrix:
-        node-version: [12.x]
-
     steps:
     - uses: actions/checkout@v4
 
@@ -38,7 +34,7 @@ jobs:
       uses: softprops/action-gh-release@v1
       if: startsWith(github.ref, 'refs/tags/v')
       with:
-        files: ./artifacts/codam-web-greeter.zip
+        files: ./artifacts/*.zip
         tag_name: ${{ github.ref }}
         name: codam-web-greeter ${{ github.ref_name }}
         generate_release_notes: true
diff --git a/.github/workflows/webpack.yml b/.github/workflows/webpack.yml
@@ -18,6 +18,8 @@ jobs:
     strategy:
       matrix:
         node-version: [12.x]
+        theme: [dark, light]
+        boxed: [default, boxed]
 
     steps:
     - uses: actions/checkout@v4
@@ -37,7 +39,7 @@ jobs:
 
     - name: Build codam-web-greeter
       run: |
-        make build
+        make build CLIENT_THEME=${{ matrix.theme }} CLIENT_THEME_BOXED=${{ matrix.boxed }}
 
     - name: Add dist folder to artifact
       working-directory: dist
@@ -51,6 +53,6 @@ jobs:
     - name: Upload Artifact
       uses: actions/upload-artifact@v3
       with:
-        name: codam-web-greeter
+        name: codam-web-greeter-${{ matrix.theme }}-${{ matrix.boxed }}
         path: codam-web-greeter.zip
         retention-days: 1
diff --git a/.gitignore b/.gitignore
@@ -140,3 +140,4 @@ server/messages.json
 server/configs/certs/*
 server/build/*
 static/data.json
+static/greeter.css
diff --git a/Makefile b/Makefile
@@ -6,46 +6,90 @@ THEME_DIR := /usr/share/web-greeter/themes
 # - credit: https://stackoverflow.com/a/23324703/2726733
 ROOT_DIR := $(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 
+# Theme of the codam-web-greeter client
+# can either be 'light' or 'dark', default is 'dark'
+CLIENT_THEME := dark
+# Add a background color to the form of the login/unlock screen (for better readability if your wallpaper requires this)
+# if set to 'boxed' the form will have a background color
+CLIENT_THEME_BOXED :=
+
+# Detect MacOS
+ifeq ($(shell uname),Darwin)
+	SED := sed -i ''
+else
+	SED := sed -i
+endif
+
+# CLIENT
 all: build
 
 npm-install:
 	npm install
 
-build: npm-install copy-files
+build: static/greeter.css npm-install copy-files
 	npm run build
 	npm run bundle
 
 copy-files:
-	mkdir -p $(ROOT_DIR)/dist
-	cp README.md LICENSE $(ROOT_DIR)/dist
-	cp -r $(ROOT_DIR)/static/* $(ROOT_DIR)/dist
+ifeq ($(CLIENT_THEME), light)
+	$(MAKE) use-light-theme
+else # fallback to dark theme
+	$(MAKE) use-dark-theme
+endif
+ifeq ($(CLIENT_THEME_BOXED), boxed)
+	$(MAKE) use-boxed-theme
+else # fallback to no boxed theme
+	$(MAKE) no-boxed-theme
+endif
+	mkdir -p "$(ROOT_DIR)/dist"
+	cp README.md LICENSE "$(ROOT_DIR)/dist"
+	cp -r "$(ROOT_DIR)/static/"* "$(ROOT_DIR)/dist"
 
 install: build
 	install -dm755 $(THEME_DIR)/$(THEME_NAME)
-	cp -r $(ROOT_DIR)/dist/* $(THEME_DIR)/$(THEME_NAME)
-	bash $(ROOT_DIR)/systemd/install.sh
+	cp -r "$(ROOT_DIR)/dist"/* "$(THEME_DIR)/$(THEME_NAME)"
+	bash "$(ROOT_DIR)/systemd/install.sh"
 	@echo "Update your /etc/lightdm/web-greeter.yml config file manually to enable the Codam theme"
 
 uninstall:
-	rm -r $(THEME_DIR)/$(THEME_NAME)
+	rm -r "$(THEME_DIR)/$(THEME_NAME)"
 	[ -f /usr/share/codam/uninstall-codam-web-greeter-service.sh ] && bash /usr/share/codam/uninstall-codam-web-greeter-service.sh
 	@echo "Update your /etc/lightdm/web-greeter.yml config file manually to disable the Codam theme if needed"
 
+re:
+	rm -f "$(ROOT_DIR)/static/greeter.css"
+	rm -rf "$(ROOT_DIR)/build"
+	rm -rf "$(ROOT_DIR)/dist"
+	make build
+
+# CLIENT THEMING
+static/greeter.css:
+	echo "@import 'css/styles.css';" > "$(ROOT_DIR)/static/greeter.css"
+	echo "@import 'css/dark.css';" >> "$(ROOT_DIR)/static/greeter.css"
+
+use-light-theme:
+	$(SED) 's/dark.css/light.css/' "$(ROOT_DIR)/static/greeter.css"
+
+use-dark-theme:
+	$(SED) 's/light.css/dark.css/' "$(ROOT_DIR)/static/greeter.css"
+
+use-boxed-theme:
+	echo "@import 'css/boxed.css';" >> "$(ROOT_DIR)/static/greeter.css"
+
+no-boxed-theme:
+	$(SED) '/boxed.css/d' "$(ROOT_DIR)/static/greeter.css"
+
+# SERVER
 update_server_version:
-	bash $(ROOT_DIR)/server/match_versions.sh
+	bash "$(ROOT_DIR)/server/match_versions.sh"
 
 server: update_server_version
-	[ -f $(ROOT_DIR)/server/messages.json ] || echo "{}" > $(ROOT_DIR)/server/messages.json
+	[ -f $(ROOT_DIR)/server/messages.json ] || echo '{}' > "$(ROOT_DIR)/server/messages.json"
 	cd $(ROOT_DIR)/server
-	docker compose -f $(ROOT_DIR)/server/docker-compose.yaml up -d
+	docker compose -f "$(ROOT_DIR)/server/docker-compose.yaml" up -d
 
 server-stop:
 	cd $(ROOT_DIR)/server
-	docker compose -f $(ROOT_DIR)/server/docker-compose.yaml down
-
-re:
-	rm -rf $(ROOT_DIR)/build
-	rm -rf $(ROOT_DIR)/dist
-	make build
+	docker compose -f "$(ROOT_DIR)/server/docker-compose.yaml" down
 
-.PHONY: all npm-install build copy-files install uninstall server update_server_version re
+.PHONY: all npm-install build copy-files install uninstall re use-light-theme use-boxed-theme server update_server_version server-stop
diff --git a/README.md b/README.md
@@ -66,9 +66,28 @@ sudo systemctl restart lightdm
 ```
 
 
-## Troubleshooting
+## Development
+
+### Client
+Use the provided Makefile to build the theme:
+```bash
+make
+```
+
+You can optionally build the theme in light mode:
+```bash
+make CLIENT_THEME=light
+```
+
+Or in light mode with a boxed form to make the login/unlock form more readable:
+```bash
+make CLIENT_THEME=light CLIENT_THEME_BOXED=boxed
+```
+
+
+#### Debugging the client
+You can then open the *static/index.html* file in your browser to do some basic editing, but for most things you'll want to install the greeter on your system and run it in debug mode.
 
-### How to debug
 Add the following line to `/usr/share/xsessions/ubuntu.desktop`:
 ```conf
 X-LightDM-Allow-Greeter=true
@@ -83,6 +102,21 @@ You can then open the Developer Tools sidebar from the greeter's menu and view t
 
 Do not forget to remove the line from `/usr/share/xsessions/ubuntu.desktop` after you're done debugging - it's a security risk to allow the greeter to be run by regular users.
 
+
+### Server
+Use the provided Makefile to build the server or use the docker-compose file in the *server/* directory directly:
+```bash
+# Makefile method
+make server
+
+# Docker-compose method
+cd server
+docker compose up
+```
+
+
+## Troubleshooting
+
 ### Locking the screen doesn't work at all
 Make sure the LightDM config allows user-switching. Add the following line to */etc/lightdm/lightdm.conf*:
 ```conf
diff --git a/static/css/boxed.css b/static/css/boxed.css
@@ -0,0 +1,4 @@
+form {
+	background-color: var(--bg-color-darken-strong) !important;
+	border-radius: var(--border-radius) !important;
+}
diff --git a/static/css/dark.css b/static/css/dark.css
@@ -0,0 +1,38 @@
+:root {
+	/* Codam colors (do not change) */
+	--color-yellow: #F2911A;
+	--color-orange: #EA5C28;
+	--color-red: #E52A2D;
+	--color-purple: #B73188;
+	--color-blue: #3AA2DB;
+	--color-black: #000000;
+	--color-white: #FFFFFF;
+
+	/* Theme colors */
+	--color-primary: var(--color-blue);
+
+	/* Text colors */
+	--color-text-primary: #EDEDED;
+	--color-text-secondary: #A6A6A6;
+	--color-text-tertiary: #6E6E6E;
+	--color-text-error: var(--color-red);
+	--color-text-success: var(--color-blue);
+	--color-text-warning: var(--color-yellow);
+
+	/* Backgrounds */
+	--color-bg: var(--color-black);
+	--bg-color-darken: rgba(0, 0, 0, 0.2);
+	--bg-color-darken-strong: rgba(0, 0, 0, 0.65);
+	--bg-color-lighten: rgba(255, 255, 255, 0.2);
+	--bg-color-disabled-button: rgba(16, 16, 16, 0.3);
+	--text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+
+	/* Events */
+	--event-color-default: #00BABC;
+	--event-color-exam: #ED8179;
+	--event-color-association: #7E93D4;
+	--event-color-standup: #8E9C9C; /* Bocal Stand-up */
+	--event-color-workshop: #39D88F;
+	--event-color-rush: #F2911A;
+	--event-color: var(--event-color-default); /* fallback */
+}
diff --git a/static/css/light.css b/static/css/light.css
@@ -0,0 +1,38 @@
+:root {
+	/* Codam colors (do not change) */
+	--color-yellow: #F2911A;
+	--color-orange: #EA5C28;
+	--color-red: #E52A2D;
+	--color-purple: #B73188;
+	--color-blue: #3AA2DB;
+	--color-black: #000000;
+	--color-white: #FFFFFF;
+
+	/* Theme colors */
+	--color-primary: var(--color-blue);
+
+	/* Text colors */
+	--color-text-primary: #121212;
+	--color-text-secondary: #595959;
+	--color-text-tertiary: #919191;
+	--color-text-error: var(--color-red);
+	--color-text-success: var(--color-blue);
+	--color-text-warning: var(--color-yellow);
+
+	/* Backgrounds */
+	--color-bg: var(--color-white);
+	--bg-color-darken: rgba(255, 255, 255, 0.2);
+	--bg-color-darken-strong: rgba(255, 255, 255, 0.65);
+	--bg-color-lighten: rgba(0, 0, 0, 0.2);
+	--bg-color-disabled-button: rgba(16, 16, 16, 0.2);
+	--text-shadow: 0 0 5px rgba(255, 255, 255, 0.33);
+
+	/* Events */
+	--event-color-default: #00BABC;
+	--event-color-exam: #ED8179;
+	--event-color-association: #7E93D4;
+	--event-color-standup: #8E9C9C; /* Bocal Stand-up */
+	--event-color-workshop: #39D88F;
+	--event-color-rush: #F2911A;
+	--event-color: var(--event-color-default); /* fallback */
+}
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -1,43 +1,10 @@
 :root {
-	/* Codam colors (do not change) */
-	--color-yellow: #F2911A;
-	--color-orange: #EA5C28;
-	--color-red: #E52A2D;
-	--color-purple: #B73188;
-	--color-blue: #3AA2DB;
-	--color-black: #000000;
-
-	/* Theme colors */
-	--color-primary: var(--color-blue);
-
-	/* Text colors */
-	--color-text-primary: #EDEDED;
-	--color-text-secondary: #A6A6A6;
-	--color-text-tertiary: #6E6E6E;
-	--color-text-error: var(--color-red);
-	--color-text-success: var(--color-blue);
-	--color-text-warning: var(--color-yellow);
-
-	/* Backgrounds */
-	--color-bg: var(--color-black);
-	--default-bg-img: url('assets/default-wallpaper.png');
-	--bg-color-darken: rgba(0, 0, 0, 0.2);
-	--bg-color-darken-strong: rgba(0, 0, 0, 0.65);
+	/* Colors can be found in css/dark.css and css/light.css */
+
+	/* Generic settings */
+	--default-bg-img: url('../assets/default-wallpaper.png');
 	--blur-bg-filter: blur(5px);
 	--blur-bg-filter-lock-screen: blur(25px);
-	--bg-color-lighten: rgba(255, 255, 255, 0.2);
-	--text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-
-	/* Events */
-	--event-color-default: #00BABC;
-	--event-color-exam: #ED8179;
-	--event-color-association: #7E93D4;
-	--event-color-standup: #8E9C9C; /* Bocal Stand-up */
-	--event-color-workshop: #39D88F;
-	--event-color-rush: #F2911A;
-	--event-color: var(--event-color-default); /* fallback */
-
-	/* Others */
 	--border-radius: 4px;
 	--padding: 8px;
 	--header-footer-height: 31px;
@@ -306,17 +273,21 @@ form button:not(:disabled):focus {
 
 form button:disabled {
 	cursor: default;
-	color: rgba(16, 16, 16, 0.3);
+	color: var(--bg-color-disabled-button);
 	text-shadow: none;
 }
 
 form button:not(:disabled):active {
 	transform: scale(0.95);
 }
 
+form#lock-form {
+	margin-top: -50%;
+}
+
 #active-user-session-avatar {
 	display: block;
-	margin: -50% auto calc(var(--padding) * 6) auto;
+	margin: 0 auto calc(var(--padding) * 6) auto;
 	width: 100%;
 	aspect-ratio: 1 / 1;
 	object-fit: cover;
diff --git a/static/index.html b/static/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="stylesheet" href="styles.css" />
+		<!-- optional: you can use the following setup to load required css without building greeter.css -->
+		<!-- <link rel="stylesheet" href="css/dark.css" /> -->
+		<!-- <link rel="stylesheet" href="css/styles.css" /> -->
+		<!-- <link rel="stylesheet" href="css/boxed.css" /> -->
+		<link rel="stylesheet" href="greeter.css" onerror="console.error('Styles are missing: did you use the Makefile to build static/greeter.css?');" />
 		<title>Codam Theme for nody-greeter</title>
 	</head>
 	<body>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +form {
 +	background-color: var(--bg-color-darken-strong) !important;
 +	border-radius: var(--border-radius) !important;
 +}