From 2aa39762543af801b4bf5416b8c4762882f0ec95 Mon Sep 17 00:00:00 2001 From: hans-hc Date: Wed, 14 Jan 2026 12:27:22 -0500 Subject: [PATCH 1/5] Fixed Upload Data Modal and Download Data Modal as title indicates, fixed the sizing glitches when the window is squished. Also slightly adjusted the download data modal so by default full window the box isnt surpassing the height of the window. --- .../downloadModal/downloadModal.module.scss | 51 +++++++++++++++++- .../uploadModal/uploadModal.module.scss | 30 +++++++++++ .../ui/baseModal/BaseModal.module.scss | 10 ++++ .../ui/uploadForm/UploadForm.module.scss | 52 +++++++++++++++++++ 4 files changed, 142 insertions(+), 1 deletion(-) diff --git a/front-end/src/components/composite/downloadModal/downloadModal.module.scss b/front-end/src/components/composite/downloadModal/downloadModal.module.scss index e1d5690b..039856ed 100644 --- a/front-end/src/components/composite/downloadModal/downloadModal.module.scss +++ b/front-end/src/components/composite/downloadModal/downloadModal.module.scss @@ -14,11 +14,60 @@ } .tableWrapper { - height: 35rem; + height: 30rem; @include mixins.scrollbar-dark; } .submitButton { margin-top: 1.25rem; } +} + +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1400px) { + .downloadModal { + width: 60rem; + + .tableWrapper { + height: 32rem; + } + } +} + +@media screen and (max-width: 1200px) { + .downloadModal { + width: 50rem; + padding: 0 1.5rem; + + .tableWrapper { + height: 30rem; + } + + .submitButton { + margin-top: 1rem; + } + } +} + +@media screen and (max-width: 1000px) { + .downloadModal { + width: 40rem; + padding: 0 1rem; + + .tableWrapper { + height: 25rem; + } + } +} + +@media screen and (max-width: 850px) { + .downloadModal { + width: 90vw; + max-width: 35rem; + padding: 0 1rem; + + .tableWrapper { + height: 20rem; + } + } } \ No newline at end of file diff --git a/front-end/src/components/composite/uploadModal/uploadModal.module.scss b/front-end/src/components/composite/uploadModal/uploadModal.module.scss index fdf3856d..59eacc22 100644 --- a/front-end/src/components/composite/uploadModal/uploadModal.module.scss +++ b/front-end/src/components/composite/uploadModal/uploadModal.module.scss @@ -16,4 +16,34 @@ .submitButton { margin-top: 1.25rem; } +} + +@media screen and (max-width: 1200px) { + .uploadModal { + width: 35rem; + height: 32rem; + padding: 0 1.5rem; + + .submitButton { + margin-top: 1rem; + } + } +} + +@media screen and (max-width: 1000px) { + .uploadModal { + width: 30rem; + height: 30rem; + padding: 0 1rem; + } +} + +@media screen and (max-width: 850px) { + .uploadModal { + width: 90vw; + max-width: 26rem; + height: auto; + min-height: 26rem; + padding: 0 1rem; + } } \ No newline at end of file diff --git a/front-end/src/components/ui/baseModal/BaseModal.module.scss b/front-end/src/components/ui/baseModal/BaseModal.module.scss index fdc5a4bf..9438c203 100644 --- a/front-end/src/components/ui/baseModal/BaseModal.module.scss +++ b/front-end/src/components/ui/baseModal/BaseModal.module.scss @@ -36,6 +36,16 @@ &.close { animation: fadeOut 0.3s ease-in-out forwards; } + + /* Responsive adjustments for smaller windows */ + @media screen and (max-width: 1200px) { + padding: 0.75rem; + } + + @media screen and (max-width: 850px) { + max-width: calc(100vw - 2 * 1rem); + padding: 0.5rem; + } } .closeButton { diff --git a/front-end/src/components/ui/uploadForm/UploadForm.module.scss b/front-end/src/components/ui/uploadForm/UploadForm.module.scss index b6421d58..fc1e2e0b 100644 --- a/front-end/src/components/ui/uploadForm/UploadForm.module.scss +++ b/front-end/src/components/ui/uploadForm/UploadForm.module.scss @@ -15,6 +15,23 @@ border-radius: 10px; overflow: hidden; + /* Responsive styles for smaller screens */ + @media screen and (max-width: 1200px) { + min-width: 30rem; + min-height: 18rem; + } + + @media screen and (max-width: 1000px) { + min-width: 25rem; + min-height: 16rem; + } + + @media screen and (max-width: 850px) { + min-width: auto; + width: 100%; + min-height: 14rem; + } + &:hover { cursor: pointer; .uploadFormContent { @@ -72,6 +89,16 @@ height: 10rem; transition: opacity 1s ease; pointer-events: none; + + @media screen and (max-width: 1000px) { + width: 12rem; + height: 8rem; + } + + @media screen and (max-width: 850px) { + width: 10rem; + height: 6.5rem; + } } .uploadFormContent { @@ -86,6 +113,21 @@ width: fit-content; transition: transform 0.3s ease, filter 0.3s ease, border-color 0.3s ease; + @media screen and (max-width: 1200px) { + padding: 1.5rem 3rem; + gap: 1rem; + } + + @media screen and (max-width: 1000px) { + padding: 1.25rem 2rem; + gap: 0.75rem; + } + + @media screen and (max-width: 850px) { + padding: 1rem 1.5rem; + gap: 0.5rem; + } + &.disabled { display: none; } @@ -99,6 +141,16 @@ height: 3.125rem; //mix-blend-mode: overlay; // This gets fucked by the filter and transform opacity: 0.8; + + @media screen and (max-width: 1000px) { + width: 2.5rem; + height: 2.5rem; + } + + @media screen and (max-width: 850px) { + width: 2rem; + height: 2rem; + } } .text, .textHover { From cdb8d75426efe71d17992aeafc335a179c8aa18f Mon Sep 17 00:00:00 2001 From: hans-hc Date: Wed, 14 Jan 2026 13:50:48 -0500 Subject: [PATCH 2/5] fixed nit pick visual (thanks salma) --- .../composite/downloadModal/downloadModal.module.scss | 1 + .../composite/uploadModal/uploadModal.module.scss | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/front-end/src/components/composite/downloadModal/downloadModal.module.scss b/front-end/src/components/composite/downloadModal/downloadModal.module.scss index 039856ed..8107631d 100644 --- a/front-end/src/components/composite/downloadModal/downloadModal.module.scss +++ b/front-end/src/components/composite/downloadModal/downloadModal.module.scss @@ -20,6 +20,7 @@ .submitButton { margin-top: 1.25rem; + margin-bottom: 0.5rem; } } diff --git a/front-end/src/components/composite/uploadModal/uploadModal.module.scss b/front-end/src/components/composite/uploadModal/uploadModal.module.scss index 59eacc22..b69feff7 100644 --- a/front-end/src/components/composite/uploadModal/uploadModal.module.scss +++ b/front-end/src/components/composite/uploadModal/uploadModal.module.scss @@ -1,11 +1,11 @@ @use '@styles/_fonts'; + .uploadModal { display: flex; flex-direction: column; align-items: center; width: 40rem; - height: 34rem; padding: 0 2rem; .title { @@ -15,17 +15,18 @@ .submitButton { margin-top: 1.25rem; + margin-bottom: 0.5rem; } } @media screen and (max-width: 1200px) { .uploadModal { width: 35rem; - height: 32rem; padding: 0 1.5rem; .submitButton { margin-top: 1rem; + margin-bottom: 0.5rem; } } } @@ -33,7 +34,6 @@ @media screen and (max-width: 1000px) { .uploadModal { width: 30rem; - height: 30rem; padding: 0 1rem; } } @@ -42,8 +42,6 @@ .uploadModal { width: 90vw; max-width: 26rem; - height: auto; - min-height: 26rem; padding: 0 1rem; } } \ No newline at end of file From 1778cc5e284acb92911a7f201d91616499502733 Mon Sep 17 00:00:00 2001 From: hans-hc Date: Fri, 16 Jan 2026 20:08:08 -0500 Subject: [PATCH 3/5] fixed super awesome home page pre approved by kai and salma for real --- .../presetList/PresetList.module.scss | 47 ++++++ .../simple/footer/Footer.module.scss | 134 +++++++++++++++++- .../simple/howItWorks/HowItWorks.module.scss | 110 +++++++++++++- .../simple/titleCard/titleCard.module.scss | 72 ++++++++++ .../src/pages/Homepage/Homepage.module.scss | 21 ++- 5 files changed, 371 insertions(+), 13 deletions(-) diff --git a/front-end/src/components/composite/presetList/PresetList.module.scss b/front-end/src/components/composite/presetList/PresetList.module.scss index 0e556155..7f05ff33 100644 --- a/front-end/src/components/composite/presetList/PresetList.module.scss +++ b/front-end/src/components/composite/presetList/PresetList.module.scss @@ -7,6 +7,7 @@ background-color: var(--background); width: 100%; padding-bottom: 4rem; + padding-right: 1rem; .title { all: unset; @@ -23,5 +24,51 @@ width: max-content; margin: 0 auto; } +} + +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1200px) { + .presetListWrapper { + padding-right: 0.75rem; + + .title { + margin-left: 10%; + } + + .presetList { + gap: 1.25rem; + } + } +} +@media screen and (max-width: 1000px) { + .presetListWrapper { + padding-right: 0.5rem; + + .title { + margin-left: 5%; + } + + .presetList { + grid-template-columns: repeat(2, auto); + gap: 1rem; + } + } } + +@media screen and (max-width: 850px) { + .presetListWrapper { + padding-left: 0.5rem; + padding-right: 0.5rem; + + .title { + margin-left: 0.5rem; + } + + .presetList { + grid-template-columns: 1fr; + width: 100%; + gap: 1rem; + } + } +} \ No newline at end of file diff --git a/front-end/src/components/simple/footer/Footer.module.scss b/front-end/src/components/simple/footer/Footer.module.scss index 667a2761..bc0efff6 100644 --- a/front-end/src/components/simple/footer/Footer.module.scss +++ b/front-end/src/components/simple/footer/Footer.module.scss @@ -7,45 +7,58 @@ background: var(--background); display: flex; justify-content: space-between; - padding: 1rem; + align-items: center; + padding: 1rem 2rem 2rem 2rem; color: var(--text-colour); position: sticky; z-index: map.get(variables.$z-index, footer); width: 100%; - height: 3rem; - padding-bottom: 2rem; + min-height: 3rem; + gap: 1.5rem; > * { - margin: 0 2rem; + margin: 0 1rem; } .title-group { display: flex; justify-content: start; align-items: center; + flex-shrink: 0; .copyright { @include fonts.text-huge; color: var(--tertiary); filter: brightness(2); + white-space: nowrap; } .title { @include fonts.nav-title; margin-left: 0.5rem; + white-space: nowrap; } } + img { + height: auto; + flex-shrink: 0; + } + .buttons { display: flex; + gap: 0.5rem; + flex-shrink: 0; + margin-left: auto; > * { background: none; width: fit-content; font-size: 2.5rem; - margin: 0rem 1rem; + padding: 0 0.5rem; align-items: center; display: flex; + flex-shrink: 0; &:hover { filter: brightness(0.8); @@ -66,4 +79,115 @@ } } +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1200px) { + .footer { + padding: 1rem 1.5rem 2rem 1.5rem; + + > * { + margin: 0 0.75rem; + } + + .title-group { + .copyright { + font-size: 0.8rem; + } + + .title { + font-size: 0.9rem; + } + } + + .buttons { + > * { + font-size: 2rem; + padding: 0 0.35rem; + + .icon { + width: 2rem; + height: 2rem; + } + } + } + } +} + +@media screen and (max-width: 1000px) { + .footer { + padding: 0.75rem 1rem 1.5rem 1rem; + gap: 1rem; + + > * { + margin: 0 0.5rem; + } + + .title-group { + .copyright { + font-size: 0.7rem; + } + + .title { + font-size: 0.8rem; + margin-left: 0.25rem; + } + } + + .buttons { + gap: 0.35rem; + + > * { + font-size: 1.5rem; + padding: 0 0.25rem; + + .icon { + width: 1.5rem; + height: 1.5rem; + } + } + } + } +} + +@media screen and (max-width: 850px) { + .footer { + padding: 0.5rem 0.5rem 1rem 0.5rem; + gap: 0.75rem; + + > * { + margin: 0; + } + + .title-group { + min-width: fit-content; + + .copyright { + font-size: 0.6rem; + } + + .title { + font-size: 0.7rem; + margin-left: 0.15rem; + } + } + + img { + display: none; + } + + .buttons { + gap: 0.25rem; + + > * { + font-size: 1.2rem; + padding: 0 0.2rem; + + .icon { + width: 1.2rem; + height: 1.2rem; + } + } + } + } +} + diff --git a/front-end/src/components/simple/howItWorks/HowItWorks.module.scss b/front-end/src/components/simple/howItWorks/HowItWorks.module.scss index 2cbf48e3..c6fbcac0 100644 --- a/front-end/src/components/simple/howItWorks/HowItWorks.module.scss +++ b/front-end/src/components/simple/howItWorks/HowItWorks.module.scss @@ -114,21 +114,117 @@ } } - // Responsive design - @media (max-width: 768px) { + // Responsive design for smaller desktop windows + @media screen and (max-width: 1200px) { + .title { + margin-left: 10%; + margin-bottom: 1.5rem; + } + + .stepsContainer { + gap: 3rem; + margin-bottom: 3rem; + } + + .step { + gap: 2rem; + + .stepContent { + max-width: 400px; + } + + .stepImage { + max-width: 400px; + min-height: 250px; + height: 250px; + } + } + } + + @media screen and (max-width: 1000px) { + .title { + margin-left: 5%; + margin-bottom: 1.25rem; + } + + .stepsContainer { + gap: 2.5rem; + margin-bottom: 2.5rem; + } + .step { flex-direction: column !important; + gap: 1.5rem; + max-width: 100%; + + .stepContent { + max-width: 100%; + } + + .stepImage { + max-width: 100%; + min-height: 250px; + height: 250px; + } + } + } + + @media screen and (max-width: 850px) { + .title { + margin-left: 0.5rem; + margin-bottom: 1rem; + padding-right: 0.5rem; + } + + .stepsContainer { gap: 2rem; + margin-bottom: 2rem; + padding: 0 0.5rem; + } + + .step { + flex-direction: column !important; + gap: 1.25rem; + max-width: 100%; + + .stepContent { + max-width: 100%; + + .stepHeadline { + font-size: 1.1rem; + } + + .stepText { + font-size: 0.9rem; + } + } - .stepContent, .stepImage { + .stepImage { max-width: 100%; + min-height: 200px; + height: 200px; } } - .flowDiagram { - .flowStep { - font-size: 0.875rem; - padding: 0.5rem 1rem; + .summary { + gap: 1.5rem; + padding: 0 0.5rem; + + .summaryText { + font-size: 0.9rem; + } + + .flowDiagram { + gap: 0.75rem; + + .flowStep { + font-size: 0.75rem; + padding: 0.4rem 0.8rem; + } + + .flowArrow { + font-size: 0.9rem; + } } } } diff --git a/front-end/src/components/simple/titleCard/titleCard.module.scss b/front-end/src/components/simple/titleCard/titleCard.module.scss index 7c4b3c3f..df9af53f 100644 --- a/front-end/src/components/simple/titleCard/titleCard.module.scss +++ b/front-end/src/components/simple/titleCard/titleCard.module.scss @@ -10,6 +10,7 @@ width: 100%; height: 21.69rem; background: linear-gradient(0deg, #222222 0%, #525252 98.5%); + padding-right: 1rem; .textContainer { display: flex; @@ -59,4 +60,75 @@ margin-bottom: 1.5rem; // Subtle shift up border-bottom: 1px solid grey; } +} + +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1400px) { + .titleCard { + gap: 6rem; + height: 20rem; + + .textContainer { + width: 25rem; + height: 12rem; + margin-left: 2rem; + + .title { + width: 95%; + } + + .description { + width: 85%; + } + } + + .graphContainer { + margin-right: 3rem; + } + } +} + +@media screen and (max-width: 1200px) { + .titleCard { + gap: 4rem; + height: 18rem; + padding-right: 0.75rem; + + .textContainer { + width: 22rem; + height: 11rem; + margin-left: 1.5rem; + } + + .graphContainer { + margin-right: 2rem; + } + } +} + +@media screen and (max-width: 1000px) { + .titleCard { + gap: 2rem; + height: 16rem; + padding-right: 0.5rem; + + .textContainer { + width: 18rem; + height: 20rem; + margin-left: 1rem; + + .title { + font-size: 3.5rem; + } + + .description { + display: none; + } + } + + .graphContainer { + margin-right: 1rem; + display: none; + } + } } \ No newline at end of file diff --git a/front-end/src/pages/Homepage/Homepage.module.scss b/front-end/src/pages/Homepage/Homepage.module.scss index 96609ee8..d66e1689 100644 --- a/front-end/src/pages/Homepage/Homepage.module.scss +++ b/front-end/src/pages/Homepage/Homepage.module.scss @@ -12,11 +12,30 @@ .body { padding-top: 2rem; + padding-right: 1rem; flex-grow: 1; - } .footerWrapper { margin-top: auto; } +} + +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1200px) { + .homepage { + .body { + padding-right: 0.75rem; + padding-left: 0.5rem; + } + } +} + +@media screen and (max-width: 1000px) { + .homepage { + .body { + padding-right: 0.5rem; + padding-left: 0.5rem; + } + } } \ No newline at end of file From c4680bdfe0dafa095874b49f3cd5759c2d36b067 Mon Sep 17 00:00:00 2001 From: hans-hc Date: Mon, 19 Jan 2026 20:55:04 -0500 Subject: [PATCH 4/5] Home Page minor tweaks, Preset Card modal fix Some more tweaks on the home page, and made the preset card modal when clicked from the home screen responsive. Removed upload file option from preset card as per instructed --- .../PresetFilesModal.module.scss | 86 +++++++++++-------- .../presetFilesModal/PresetFilesModal.tsx | 43 +++------- .../presetList/PresetList.module.scss | 3 +- .../presetList/presetCard/PresetCard.tsx | 3 +- .../components/simple/titleCard/accel_x.csv | 4 +- .../simple/titleCard/titleCard.module.scss | 8 ++ 6 files changed, 75 insertions(+), 72 deletions(-) diff --git a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss index 16ba0aea..b1933d48 100644 --- a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss +++ b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss @@ -5,45 +5,63 @@ display: flex; flex-direction: column; align-items: center; - padding: 0 1rem; - max-width: 90rem; - - .formWrapper { - display: flex; - gap: 2rem; - - .uploadForm { - display: flex; - flex-direction: column; - align-items: center; - width: 50%; - - .title { - all: unset; - @include fonts.title-large; - } - } + padding: 0 2rem; + max-width: 50rem; - .selectFiles { - display: flex; - flex-direction: column; - align-items: center; - width: 50%; - - .title { - all: unset; - @include fonts.title-large; - } - - .tableWrapper { - height: 35rem; - @include mixins.scrollbar-dark; - } - } + .title { + all: unset; + @include fonts.title-large; + margin-bottom: 1rem; + } + + .tableWrapper { + height: 28rem; + width: 100%; + @include mixins.scrollbar-dark; } .submitButton { margin-top: 1.25rem; } +} + +/* Responsive styles for smaller desktop windows */ +@media screen and (max-width: 1200px) { + .presetFilesModal { + padding: 0 1.5rem; + max-width: 40rem; + + .tableWrapper { + height: 28rem; + } + } +} +@media screen and (max-width: 900px) { + .presetFilesModal { + padding: 0 1rem; + max-width: 100vw; + + .tableWrapper { + height: 18rem; + } + } +} + +@media screen and (max-width: 600px) { + .presetFilesModal { + padding: 0 0.5rem; + + .title { + margin-bottom: 0.75rem; + } + + .tableWrapper { + height: 18rem; + } + + .submitButton { + margin-top: 0.75rem; + } + } } \ No newline at end of file diff --git a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx index 239bbb53..bf9baecd 100644 --- a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx +++ b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx @@ -1,7 +1,6 @@ import styles from './PresetFilesModal.module.scss'; import { BaseModal } from '@components/ui/baseModal/BaseModal'; import { FileTable } from '@components/ui/fileTable/FileTable'; -import { UploadForm } from '@components/ui/uploadForm/UploadForm'; import { Button } from '@components/ui/button/Button'; import { useState, useEffect } from 'react'; import { rightArrowIcon } from '@assets/icons'; @@ -22,8 +21,7 @@ interface PresetFilesModalProps { export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }: PresetFilesModalProps) => { // TODO: Adjust based on preset const [selectedFiles, setSelectedFiles] = useState([]); - const [uploadedFiles, setUploadedFiles] = useState([]); - const { data: files, refetch } = useFiles(); + const { data: files } = useFiles(); // Pre-select files based on currentSources prop useEffect(() => { @@ -37,47 +35,26 @@ export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }: }, [currentSources, files]); const handleSubmit = async () => { - if (selectedFiles.length === 0 && uploadedFiles.length === 0) { - showWarningToast('Oops!', 'Please select or upload at least one file'); + if (selectedFiles.length === 0) { + showWarningToast('Oops!', 'Please select at least one file'); return; } - const uploadPromises = uploadedFiles.map((file) => ApiUtil.uploadFile(file)); - await Promise.all(uploadPromises); - const fileKeys = selectedFiles.map((file) => file.key); - - const uploadedFolderNames = uploadedFiles.map((file) => { - return file.name.substring(0, file.name.lastIndexOf('.')); - }); - - fileKeys.push(...uploadedFolderNames); - onSubmit(fileKeys); onClose(); - refetch(); // Refetch files after upload }; return (
- -
-
-

Upload your files

- -
- -
-

...Or select existing ones

-
- -
-
+

Select a file

+
+
); -}; - +}; \ No newline at end of file diff --git a/front-end/src/components/simple/titleCard/accel_x.csv b/front-end/src/components/simple/titleCard/accel_x.csv index 6f017c2a..ffe0d451 100644 --- a/front-end/src/components/simple/titleCard/accel_x.csv +++ b/front-end/src/components/simple/titleCard/accel_x.csv @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b9765acd5e4ed956ca30dd44b375a067b1d7114e37f587596019ad80b713b78f -size 47470 +oid sha256:60b11400a9fb5a8b4d14673519f8d063a708f659817dcc6fe97c4b2e7341305f +size 47472 diff --git a/front-end/src/components/simple/titleCard/titleCard.module.scss b/front-end/src/components/simple/titleCard/titleCard.module.scss index df9af53f..70b2b0f4 100644 --- a/front-end/src/components/simple/titleCard/titleCard.module.scss +++ b/front-end/src/components/simple/titleCard/titleCard.module.scss @@ -98,6 +98,14 @@ width: 22rem; height: 11rem; margin-left: 1.5rem; + + .title { + font-size: 3.25rem; + } + + .description { + display: none; + } } .graphContainer { From ac59c7dc9b437a0634158f4f7d1b329e253153e1 Mon Sep 17 00:00:00 2001 From: hans-hc Date: Wed, 11 Feb 2026 14:38:23 -0500 Subject: [PATCH 5/5] Fixed px -> rem, adjusted breakpoints, fixed footer, added mixin for different screen sizes. Added ultrawide/high resolution monitor compatibility --- .../downloadModal/downloadModal.module.scss | 26 +-------- .../composite/downloadModal/downloadModal.tsx | 3 +- .../PresetFilesModal.module.scss | 26 +-------- .../presetFilesModal/PresetFilesModal.tsx | 3 +- .../presetList/PresetList.module.scss | 39 +++++++------ .../uploadModal/uploadModal.module.scss | 21 +------ .../composite/uploadModal/uploadModal.tsx | 3 +- .../simple/footer/Footer.module.scss | 1 + .../simple/howItWorks/HowItWorks.module.scss | 56 +++++-------------- .../ui/baseModal/BaseModal.module.scss | 25 ++++++++- front-end/src/styles/_mixins.scss | 10 ++++ front-end/src/styles/_variables.scss | 7 +++ 12 files changed, 91 insertions(+), 129 deletions(-) diff --git a/front-end/src/components/composite/downloadModal/downloadModal.module.scss b/front-end/src/components/composite/downloadModal/downloadModal.module.scss index 8107631d..8c874e5f 100644 --- a/front-end/src/components/composite/downloadModal/downloadModal.module.scss +++ b/front-end/src/components/composite/downloadModal/downloadModal.module.scss @@ -17,11 +17,6 @@ height: 30rem; @include mixins.scrollbar-dark; } - - .submitButton { - margin-top: 1.25rem; - margin-bottom: 0.5rem; - } } /* Responsive styles for smaller desktop windows */ @@ -30,12 +25,12 @@ width: 60rem; .tableWrapper { - height: 32rem; + height: 30rem; } } } -@media screen and (max-width: 1200px) { +@media screen and (max-width: 1024px) { .downloadModal { width: 50rem; padding: 0 1.5rem; @@ -43,25 +38,10 @@ .tableWrapper { height: 30rem; } - - .submitButton { - margin-top: 1rem; - } - } -} - -@media screen and (max-width: 1000px) { - .downloadModal { - width: 40rem; - padding: 0 1rem; - - .tableWrapper { - height: 25rem; - } } } -@media screen and (max-width: 850px) { +@media screen and (max-width: 768px) { .downloadModal { width: 90vw; max-width: 35rem; diff --git a/front-end/src/components/composite/downloadModal/downloadModal.tsx b/front-end/src/components/composite/downloadModal/downloadModal.tsx index 4fda6cf8..6c2d97ba 100644 --- a/front-end/src/components/composite/downloadModal/downloadModal.tsx +++ b/front-end/src/components/composite/downloadModal/downloadModal.tsx @@ -1,4 +1,5 @@ import styles from './downloadModal.module.scss'; +import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss'; import { BaseModal } from '@components/ui/baseModal/BaseModal'; import { FileTable } from '@components/ui/fileTable/FileTable'; import { Button } from '@components/ui/button/Button'; @@ -61,7 +62,7 @@ export const DownloadModal = ({ onClose, isOpen }: DownloadModalProps) => {