From 34900986c0070e585f800b3af3d01009cd5fe194 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 24 Sep 2024 14:57:06 +0200 Subject: [PATCH 1/5] fix: Refactor Docker commands in scripts (#1282) Update the Docker commands in the scripts to use the "docker compose" syntax instead of "docker-compose". --- .github/workflows/ci.yml | 18 +++++++++--------- .github/workflows/podman.yml | 28 ++++++++++++++-------------- README.md | 10 +++++----- docker-compose.yaml | 2 +- scripts/build-front | 3 +-- scripts/lint-back | 2 +- scripts/lint-front | 2 +- scripts/manage | 2 +- scripts/test-back | 3 +-- scripts/test-back-coverage | 3 +-- scripts/test-front | 3 +-- scripts/test-front-ci | 2 +- scripts/test-front-watch | 3 +-- 13 files changed, 38 insertions(+), 43 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 05544648e..ef41a3067 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -11,16 +11,16 @@ jobs: steps: - uses: actions/checkout@v3 - name: Run Backend Tests - run: sudo docker-compose --env-file .env-github-actions run server bash -c "coverage run manage.py test" + run: sudo docker compose --env-file .env-github-actions run server bash -c "coverage run manage.py test" - name: Generate Backend Coverage Report (Inline) - run: sudo docker-compose --env-file .env-github-actions run server bash -c "coverage report --show-missing" + run: sudo docker compose --env-file .env-github-actions run server bash -c "coverage report --show-missing" # Generate coverage badge (only for main and develop branches) - name: Generate Backend Coverage Report (XML) and Badge if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop' run: | - sudo docker-compose --env-file .env-github-actions run server bash -c "coverage xml" - sudo docker-compose --env-file .env-github-actions run server bash -c "genbadge coverage -i coverage.xml -o coverage-backend-badge-new.svg -n \"Backend Code Coverage\"" + sudo docker compose --env-file .env-github-actions run server bash -c "coverage xml" + sudo docker compose --env-file .env-github-actions run server bash -c "genbadge coverage -i coverage.xml -o coverage-backend-badge-new.svg -n \"Backend Code Coverage\"" # Push coverage badge to separate branch (only for main and develop branches) - name: Push Backend Coverage Badge to separate branch continue-on-error: true @@ -55,7 +55,7 @@ jobs: - uses: actions/checkout@v3 - name: Lint Backend continue-on-error: false - run: sudo docker-compose --env-file .env-github-actions run server bash -c "flake8" + run: sudo docker compose --env-file .env-github-actions run server bash -c "flake8" frontend-test: name: Test Frontend @@ -63,7 +63,7 @@ jobs: steps: - uses: actions/checkout@v3 - name: Run Frontend Tests - run: sudo docker-compose --env-file .env-github-actions run client yarn test:ci + run: sudo docker compose --env-file .env-github-actions run client yarn test:ci frontend-coverage-badge: name: Generate Frontend Coverage Badge @@ -74,8 +74,8 @@ jobs: - uses: actions/checkout@v3 - name: Generate Frontend Coverage Report (XML) and Badge run: | - sudo docker-compose --env-file .env-github-actions run client yarn test:ci - sudo docker-compose --env-file .env-github-actions run client yarn coverage-badges -s public/coverage/coverage-summary.json -o public/coverage/coverage-frontend-badge-new.svg --label 'Frontend Code Coverage' + sudo docker compose --env-file .env-github-actions run client yarn test:ci + sudo docker compose --env-file .env-github-actions run client yarn coverage-badges -s public/coverage/coverage-summary.json -o public/coverage/coverage-frontend-badge-new.svg --label 'Frontend Code Coverage' - name: Push Frontend Coverage Badge to separate branch continue-on-error: true run: | @@ -106,4 +106,4 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - run: sudo docker-compose --env-file .env-github-actions run client yarn lint + - run: sudo docker compose --env-file .env-github-actions run client yarn lint diff --git a/.github/workflows/podman.yml b/.github/workflows/podman.yml index 6f0ee907b..56888ff7b 100644 --- a/.github/workflows/podman.yml +++ b/.github/workflows/podman.yml @@ -79,11 +79,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker-compose-deploy.yml build + run: podman-compose -f docker compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker-compose-deploy.yml down + run: podman compose -f docker compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker-compose-deploy.yml up -d + run: podman-compose -f docker compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -101,9 +101,9 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker-compose-deploy.yml ps + run: podman-compose -f docker compose-deploy.yml ps - name: Check logs - run: podman-compose -f docker-compose-deploy.yml logs + run: podman-compose -f docker compose-deploy.yml logs deploy-acceptance: name: Deploy to acceptance environment @@ -171,11 +171,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker-compose-deploy.yml build + run: podman-compose -f docker compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker-compose-deploy.yml down + run: podman compose -f docker compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker-compose-deploy.yml up -d + run: podman-compose -f docker compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -193,9 +193,9 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker-compose-deploy.yml ps + run: podman-compose -f docker compose-deploy.yml ps - name: Check logs - run: podman-compose -f docker-compose-deploy.yml logs + run: podman-compose -f docker compose-deploy.yml logs deploy-production: name: Deploy to production environment @@ -260,11 +260,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker-compose-deploy.yml build + run: podman-compose -f docker compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker-compose-deploy.yml down + run: podman compose -f docker compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker-compose-deploy.yml up -d + run: podman-compose -f docker compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -282,7 +282,7 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker-compose-deploy.yml ps + run: podman-compose -f docker compose-deploy.yml ps e2e-acceptance: name: E2E tests on acceptance environment diff --git a/README.md b/README.md index 71989f196..63e9aaf4a 100644 --- a/README.md +++ b/README.md @@ -30,8 +30,8 @@ Install [Docker Desktop](https://docs.docker.com/desktop/). Make a copy of [the file](https://github.com/Amsterdam-Music-Lab/MUSCLE/blob/develop/.env.dist) `.env.dist` (in the same directory as this README) and rename it to `.env.` This file contains variables used by Docker to start up a container network serving MUSCLE. Start Docker (the app icon is a whale carrying containers). Then, open a terminal and run -`docker-compose up` (add `sudo` on Linux). -This command starts up the containers defined in `docker-compose.yaml`: +`docker compose up` (add `sudo` on Linux). +This command starts up the containers defined in `docker compose.yaml`: - a PostgreSQL container, for storing experiment/user/playlist data, saved on the host machine in the Docker user data, represented in the volume `db_data`. Data added to the database will persist if the container is shut down. - a ip2country container, which provides country codes for ip addresses, used for demographic information of users. - a container of the server, defined in DockerfileDevelop in `backend`. The Dockerfile defines the Python version and installs development dependencies. The startup command runs migrations and then starts up a Django development server. @@ -39,13 +39,13 @@ This command starts up the containers defined in `docker-compose.yaml`: Once you see all containers have started up, open your browser and navigate to [localhost:3000](http://localhost:3000). You should now be able to see the first screen of the Goldsmiths Musical Sophistication Index questionnaire. -Since the `docker-compose.yaml` defines bind mounts for `backend` and `frontend`, any changes to the files on the host are immediately reflected in the containers, which means code watching works and hot reload works in the same way as with a native node or Django server. +Since the `docker compose.yaml` defines bind mounts for `backend` and `frontend`, any changes to the files on the host are immediately reflected in the containers, which means code watching works and hot reload works in the same way as with a native node or Django server. To stop the containers, press `ctrl-c` or (in another terminal) run -`docker-compose down`. +`docker compose down`. ## Production build -A production build should define its own `docker-compose.yaml`, making use of the `Dockerfile` of the `backend` and `frontend` environments. It should also define a custom .env file, with safe passwords for the SQL database and the Python backend. Instead of mounting the entire backend and frontend directory and using the development servers, the backend should serve with gunicorn, and the frontend should use a build script to compile static html, css and JavaScript. +A production build should define its own `docker compose.yaml`, making use of the `Dockerfile` of the `backend` and `frontend` environments. It should also define a custom .env file, with safe passwords for the SQL database and the Python backend. Instead of mounting the entire backend and frontend directory and using the development servers, the backend should serve with gunicorn, and the frontend should use a build script to compile static html, css and JavaScript. ## Troubleshooting diff --git a/docker-compose.yaml b/docker-compose.yaml index 6ef61d3ae..90fb76bec 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -1,4 +1,4 @@ -# Docker-compose definition for development +# docker compose definition for development version: '2.4' diff --git a/scripts/build-front b/scripts/build-front index 8b70ab8fb..55c79114c 100755 --- a/scripts/build-front +++ b/scripts/build-front @@ -1,3 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn build - +docker compose run --rm client yarn build diff --git a/scripts/lint-back b/scripts/lint-back index 533b74a94..c83b8fbc1 100755 --- a/scripts/lint-back +++ b/scripts/lint-back @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm server bash -c "flake8" +docker compose run --rm server bash -c "flake8" diff --git a/scripts/lint-front b/scripts/lint-front index ad826e4f8..2e313c2f5 100755 --- a/scripts/lint-front +++ b/scripts/lint-front @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn lint $@ +docker compose run --rm client yarn lint $@ diff --git a/scripts/manage b/scripts/manage index 8c7cccdc5..9e3ca3918 100755 --- a/scripts/manage +++ b/scripts/manage @@ -1,4 +1,4 @@ #!/bin/bash # This script executes Django management commands through Docker. -docker-compose run --rm server python manage.py $@ \ No newline at end of file +docker compose run --rm server python manage.py $@ diff --git a/scripts/test-back b/scripts/test-back index 8d367adff..9600c7a95 100755 --- a/scripts/test-back +++ b/scripts/test-back @@ -1,3 +1,2 @@ #!/bin/bash -docker-compose run --rm server bash -c "python manage.py test $@" - +docker compose run --rm server bash -c "python manage.py test $@" diff --git a/scripts/test-back-coverage b/scripts/test-back-coverage index 67a0101e0..0c9161475 100755 --- a/scripts/test-back-coverage +++ b/scripts/test-back-coverage @@ -1,3 +1,2 @@ #!/bin/bash -docker-compose run --rm server bash -c "coverage run manage.py test && coverage report --show-missing" - +docker compose run --rm server bash -c "coverage run manage.py test && coverage report --show-missing" diff --git a/scripts/test-front b/scripts/test-front index a2fd3536d..b85d425df 100755 --- a/scripts/test-front +++ b/scripts/test-front @@ -1,3 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn test --watch=false - +docker compose run --rm client yarn test --watch=false diff --git a/scripts/test-front-ci b/scripts/test-front-ci index d630b82c9..14a83b113 100755 --- a/scripts/test-front-ci +++ b/scripts/test-front-ci @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn test:ci +docker compose run --rm client yarn test:ci diff --git a/scripts/test-front-watch b/scripts/test-front-watch index bb76f6de1..ce5ac315b 100755 --- a/scripts/test-front-watch +++ b/scripts/test-front-watch @@ -1,3 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn test --watch=true - +docker compose run --rm client yarn test --watch=true From df7f3d591ce56cece5f2c48eb5c0a7bb69fd256b Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 24 Sep 2024 15:05:34 +0200 Subject: [PATCH 2/5] fix: Fix some search & replace too many, where I mistook `docker-compose-deploy.yml` for a `docker-compose` command (#1283) --- .github/workflows/podman.yml | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/.github/workflows/podman.yml b/.github/workflows/podman.yml index 56888ff7b..e0f813526 100644 --- a/.github/workflows/podman.yml +++ b/.github/workflows/podman.yml @@ -79,11 +79,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker compose-deploy.yml build + run: podman-compose -f docker-compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker compose-deploy.yml down + run: podman compose -f docker-compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker compose-deploy.yml up -d + run: podman-compose -f docker-compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -101,15 +101,15 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker compose-deploy.yml ps + run: podman-compose -f docker-compose-deploy.yml ps - name: Check logs - run: podman-compose -f docker compose-deploy.yml logs + run: podman-compose -f docker-compose-deploy.yml logs deploy-acceptance: name: Deploy to acceptance environment environment: Acceptance runs-on: ACC - + # this job runs only on commits to the main branch, tags, or when manually triggered for the main branch if: github.ref == 'refs/heads/main' || github.ref == 'refs/tags/*' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main') concurrency: @@ -171,11 +171,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker compose-deploy.yml build + run: podman-compose -f docker-compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker compose-deploy.yml down + run: podman compose -f docker-compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker compose-deploy.yml up -d + run: podman-compose -f docker-compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -193,9 +193,9 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker compose-deploy.yml ps + run: podman-compose -f docker-compose-deploy.yml ps - name: Check logs - run: podman-compose -f docker compose-deploy.yml logs + run: podman-compose -f docker-compose-deploy.yml logs deploy-production: name: Deploy to production environment @@ -260,11 +260,11 @@ jobs: echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env cp .env frontend/.env - name: Build Podman images - run: podman-compose -f docker compose-deploy.yml build + run: podman-compose -f docker-compose-deploy.yml build - name: Shut down running containers - run: podman compose -f docker compose-deploy.yml down + run: podman compose -f docker-compose-deploy.yml down - name: Deploy Podman images - run: podman-compose -f docker compose-deploy.yml up -d + run: podman-compose -f docker-compose-deploy.yml up -d - name: Notify Sentry of new release run: | curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \ @@ -282,8 +282,8 @@ jobs: - name: Prune old images run: podman image prune -a -f - name: Check Podman images - run: podman-compose -f docker compose-deploy.yml ps - + run: podman-compose -f docker-compose-deploy.yml ps + e2e-acceptance: name: E2E tests on acceptance environment runs-on: ACC From db6c8579e425cf9a965adee5988c5b1f1d37a4f7 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 24 Sep 2024 15:22:48 +0200 Subject: [PATCH 3/5] fix(style): Prevent percentage circle from overlapping background circle (#1281) --- frontend/src/components/Circle/Circle.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Circle/Circle.scss b/frontend/src/components/Circle/Circle.scss index 0e82be724..5fd324734 100644 --- a/frontend/src/components/Circle/Circle.scss +++ b/frontend/src/components/Circle/Circle.scss @@ -3,20 +3,20 @@ margin-bottom: 15px; margin-top: 15px; - > svg, + >svg, .content { position: absolute; left: 0; top: 0; } - > svg { + >svg { @extend .circleIntro; } .circle-percentage { transition: stroke-dashoffset 0.1s linear; transform: rotate(-90deg); - transform-origin: 50% 50%; + transform-origin: 0% 0%; } } From 6653ef00f581fccafb072c443da418ca3f13b6dd Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 24 Sep 2024 17:36:20 +0200 Subject: [PATCH 4/5] Added: Disable pinch zoom on iOS (#1284) * feat: Add useDisableIOSPinchZoomOnTouchDevices hook This commit adds a new hook called useDisableIOSPinchZoomOnTouchDevices to the frontend codebase. The hook is responsible for preventing pinch zoom gestures on iOS devices. It is used in the App component to disable pinch zoom on touch devices. * feat: Add touch-action property to disable pinch zoom on iOS --- frontend/src/components/App/App.tsx | 2 ++ ...eDisableIOSPinchZoomOnTouchDevices.test.ts | 36 +++++++++++++++++++ .../useDisableIOSPinchZoomOnTouchDevices.ts | 20 +++++++++++ frontend/src/scss/layout.scss | 3 ++ 4 files changed, 61 insertions(+) create mode 100644 frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.test.ts create mode 100644 frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.ts diff --git a/frontend/src/components/App/App.tsx b/frontend/src/components/App/App.tsx index dadbe8a40..bc89cc405 100644 --- a/frontend/src/components/App/App.tsx +++ b/frontend/src/components/App/App.tsx @@ -18,6 +18,7 @@ import Profile from "../Profile/Profile"; import Reload from "../Reload/Reload"; import StoreProfile from "../StoreProfile/StoreProfile"; import useDisableRightClickOnTouchDevices from "../../hooks/useDisableRightClickOnTouchDevices"; +import useDisableIOSPinchZoomOnTouchDevices from "@/hooks/useDisableIOSPinchZoomOnTouchDevices"; import { InternalRedirect } from "../InternalRedirect/InternalRedirect"; import Helmet from "@/components/Helmet/Helmet"; @@ -31,6 +32,7 @@ const App = () => { const queryParams = window.location.search; useDisableRightClickOnTouchDevices(); + useDisableIOSPinchZoomOnTouchDevices(); useEffect(() => { const urlParams = new URLSearchParams(queryParams); diff --git a/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.test.ts b/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.test.ts new file mode 100644 index 000000000..f94e1fdd2 --- /dev/null +++ b/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.test.ts @@ -0,0 +1,36 @@ +import { vi, describe, test, expect, afterEach } from "vitest"; +import { renderHook } from "@testing-library/react-hooks"; +import { waitFor } from "@testing-library/react"; +import useDisableIOSPinchZoomOnTouchDevices from "./useDisableIOSPinchZoomOnTouchDevices"; + +describe("useDisableIOSPinchZoomOnTouchDevices", () => { + afterEach(() => { + vi.unstubAllGlobals(); + }); + + test("should prevent gesturestart on touch devices", async () => { + vi.stubGlobal("ontouchstart", true); + + const mockEvent = new Event('gesturestart'); + mockEvent.preventDefault = vi.fn(); + + const spy = vi.spyOn(mockEvent, 'preventDefault').mockImplementation(() => { }); + + renderHook(() => useDisableIOSPinchZoomOnTouchDevices()); + + await waitFor(() => document.dispatchEvent(mockEvent)); + await waitFor(() => expect(spy).toHaveBeenCalledTimes(1)); + }); + + test("should not prevent gesturestart on non-touch devices", () => { + const mockEvent = new Event('gesturestart'); + mockEvent.preventDefault = vi.fn(); + + const spy = vi.spyOn(mockEvent, 'preventDefault').mockImplementation(() => { }); + + renderHook(() => useDisableIOSPinchZoomOnTouchDevices()); + + document.dispatchEvent(mockEvent); + expect(spy).not.toHaveBeenCalled(); + }); +}); diff --git a/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.ts b/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.ts new file mode 100644 index 000000000..aa607aa14 --- /dev/null +++ b/frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.ts @@ -0,0 +1,20 @@ +import { useEffect } from 'react'; + +const useDisableIOSPinchZoomOnTouchDevices = () => useEffect(() => { + const isTouchDevice = () => !!('ontouchstart' in window || !!(navigator.maxTouchPoints)); + + const handlePinchZoom = (event: Event) => { + if (isTouchDevice()) { + event.preventDefault(); + } + }; + + document.addEventListener('gesturestart', handlePinchZoom); + + return () => { + document.removeEventListener('gesturestart', handlePinchZoom); + }; +}, []); + + +export default useDisableIOSPinchZoomOnTouchDevices; diff --git a/frontend/src/scss/layout.scss b/frontend/src/scss/layout.scss index 728cd0dba..3221346ed 100644 --- a/frontend/src/scss/layout.scss +++ b/frontend/src/scss/layout.scss @@ -6,6 +6,9 @@ body.root { background-position: center center; background-repeat: no-repeat; min-height: 100vh; + + /* disable pinch zoom on iOS */ + touch-action: manipulation; } #root { From 6d94000bbdb13a2dad52c6bb90576bdeba67fa56 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Wed, 25 Sep 2024 09:56:45 +0200 Subject: [PATCH 5/5] fix(style): Move percentage circle down 100% to align with background circle --- frontend/src/components/Circle/Circle.scss | 6 ++++-- frontend/src/stories/Circle.stories.jsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Circle/Circle.scss b/frontend/src/components/Circle/Circle.scss index 5fd324734..d9f0e20e4 100644 --- a/frontend/src/components/Circle/Circle.scss +++ b/frontend/src/components/Circle/Circle.scss @@ -16,7 +16,9 @@ .circle-percentage { transition: stroke-dashoffset 0.1s linear; - transform: rotate(-90deg); - transform-origin: 0% 0%; + + // 102.5px is the radius of the circle + // translateX because the circle is rotated -90deg + transform: rotate(-90deg) translateX(calc(-102.5px * 2)); } } diff --git a/frontend/src/stories/Circle.stories.jsx b/frontend/src/stories/Circle.stories.jsx index 746051a2a..14b4cb7c0 100644 --- a/frontend/src/stories/Circle.stories.jsx +++ b/frontend/src/stories/Circle.stories.jsx @@ -113,7 +113,7 @@ export const LongDuration = { radius: 100, strokeWidth: 5, color: "white", - duration: 30, + duration: 60, animateCircle: true, running: true, },