Emge/menu and settings #303

emgerold · 2023-11-23T21:34:37Z

new layout for menu page
new layout for subpages of menu (my account, settings,...)

This is a first-impression branch!

If you like the style I think we have to discuss a few general interactions on the site to provide a standardised interface. I am happy to discuss it :-)

reviewpad · 2023-11-23T21:35:25Z

AI-Generated Summary: This pull request introduces substantial updates in the application concerning typography, link styling, translations, user interface, and Firebase authentication functionality:

Fonts.css has been updated with new classes and global properties, and enhanced styling directives for links and typography.
A new TypeScript declaration file global.d.ts was created to augment the Window interface with an optional recaptchaWidgetId property.
Language translation JSON files for German, French, and English were updated with new key-value pairs and other modifications imrpoving login features and adding new translation strings.
User profile interface, menu, back arrow component, settings, my account, contact support, and several page layouts (Driver/RouteSummary.tsx, Profile/Settings.tsx, Sender/RequestSummary.tsx, MyAccount.tsx, ContactSupport.tsx, ProfilePagesLayout.tsx) have been refactored or updated. These changes include new states,handlers, UI enhancements, form field layout changes, style class changes, functionality updates, and more to improve user experience and code readability.
FirebaseAuth component and FirebaseAuth.tsx file received significant updates. New states, useEffect hooks, and multiple function handlers for managing user sign in, Recaptcha verification, and transitions between different user journey stages were added.
CSS rules and styling were extended in Core.css, Forms.css, and Icons.css. New style rules were added for back-link class, modals, form elements, and icon styling.
The .gitignore file was updated with a new rule to ignore 'portatoapp.code-workspace' files, preventing them from being tracked by Git.

These critical updates require comprehensive testing for the authentication functionality, updated interface, and compatibility of the CSS changes with existing design aspects. Also, the introduced translation strings should be validated for accuracy and appropriateness.

github-actions · 2023-11-23T21:38:04Z

Visit the preview URL for this PR (updated for commit c3ab914):

https://portatodev--pr303-emge-menu-and-settin-r9b1lc44.web.app

_{(expires Sat, 16 Dec 2023 11:58:37 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1ad69377d0acebce2cf10d7d9603fe0f03acd164}

…u-and-settings # Conflicts: # src/CSS/Fonts.css # src/CSS/Icons.css # src/Components/FirebaseAuth.tsx # src/Translation/English/translation.json # src/Translation/French/translation.json # src/Translation/German/translation.json

reviewpad · 2023-12-09T11:54:55Z

AI-Generated Summary: This pull request covers a wide range of modifications across several files focused on UX, UI, and localization. Key changes include the following:

.gitignore file was updated to avoid accidental commits of personal 'VS Code' workspace settings.
The BackArrow component was refactored for enhanced customization and localization. Localization support is introduced via the React-i18next's useTranslation hook.
Significant changes were made to the UI components, such as ContactSupport.tsx, Settings.tsx and Menu.tsx among others. These changes enhanced the layout, styling, and user experience. Notably, new components were imported and existing ones replaced or rearranged for improved layouts.
Several CSS files namely Fonts.css, Core.css, and Forms.css were updated with added css classes, style modifications and style additions. This has resulted in more consistent appearance and enhanced visual design along with improved handling of various UI elements.
Translation files were updated across French, German and English versions for enhanced localization. These updates accommodate new items and changes in existing translations.
Modifications in the ProfilePagesLayout.tsx and MyAccount.tsx files reflect revamping of profiles page layout and restructuring of form layout respectively.

Overall, these changes bring about a more versatile UI, improved UX design, enhanced localization and better management of developer environments. The pull request is extensive, impacting several components, styles, and translations. Care must be taken to thoroughly validate these changes across different environments.

reviewpad · 2023-12-09T11:56:54Z

AI-Generated Summary: This pull request introduces various changes across multiple files, mainly focusing on frontend enhancements and multilingual support:

Addition of new key-value pairs in the English, German, and French translation files. These additions support new terms, mainly the "Back" button, in these languages.
Major UI layout and appearance overhaul in files such as Profile.css, MyAccount.tsx, Forms.css, ContactSupport.tsx, Settings.tsx, Core.css, ProfilePagesLayout.tsx and Fonts.css. This includes updates to existing CSS rules, introduction of new ones, deletion of some elements, addition of new components, migration from inline styles to CSS classes, and changes to the structure of the components. Several files also indicate the addition of a BackButton component, enhancing UI navigation.
Updates to the .gitignore file to exclude the portatoapp.code-workspace file from version control.
Refactoring of the BackArrow component to switch from a hardcoded button to a more flexible, i18n-supported component using class-based styling.
Changes to the Menu.tsx, including a revamp of the visual presentation while keeping the functionality largely unchanged.
Updates in Icons.css including addition of two new CSS selectors.

Considering the overall changes made in all files, this pull request appears to be focused on improving user interface and experience, enhancing multilingual support, and implementing better coding practices and cleaner codebase. These changes might bring significant differences in the visual appeal of the website/application, while also enhancing navigational efficiency. It is recommended to validate these changes on various screen sizes and configurations to ensure as-expected display and functionality.

mischakolbe · 2023-12-09T21:55:33Z

Minor thing:
The language selection defaults to no selection and allows deselecting all buttons. This should probably be radio-buttons, where exactly one button is active at any time.

mischakolbe · 2023-12-09T22:08:22Z

When I'm in the "My Account" or "Settings" page, I can't click the "Menu" button in the bottom toolbar anymore, to get back to the profile page. I think that button should bring the user to the Profile overview, no matter which sub-menu they're in.

mischakolbe

Mostly just minor things, but setting to "Request changes" because of the removal of the admin window and such.

mischakolbe · 2023-12-09T22:02:01Z

src/Pages/Menu.tsx

-                onClick={handleAdminClick}
-                className="settings-list-item"
-              >
-                {t('navigationMenu.adminWindow')}


With this change we'd lose the adminWindow. That would be good to keep.

mischakolbe · 2023-12-09T22:04:06Z

src/CSS/Profile.css


 .settings-card {
-    background-color: var(--color-green-lighter);
+    /*background-color: var(--color-green-lighter);*/


Feel free to remove these settings entirely. I'd rather re-write a few lines than accruing zombie code over time.

mischakolbe · 2023-12-09T22:10:42Z

src/Pages/Profile/Settings.tsx

+        <Form className="portato-form">
+          <div className="input-wrapper">
+            <label>{t('settings.languageLabel')}</label>
+            <Selector


This selector should default to the currently selected language and always have 1 of the options active. Deselecting all buttons should be impossible.

mischakolbe · 2023-12-09T22:12:32Z

src/Translation/German/translation.json

@@ -38,6 +38,7 @@
    "yes": "Ja",
    "no": "Nein",
    "edit": "edit",


If you have time; "edit" should be "Editieren" in German.

mischakolbe · 2023-12-09T22:14:51Z

src/Pages/Profile/MyAccount.tsx

+              onChange={onEmailChange}
+              value={email || ''}
+              className="form-input"
+              placeholder={t('accountPage.name') || 'Your name'}


This should be:
placeholder={t('accountPage.emailAddress') || 'Your email address'}

mischakolbe · 2023-12-09T22:16:16Z

src/Pages/Profile/MyAccount.tsx

              {imageUrl ? (
-                <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
+                <img src={imageUrl} alt="avatar" className="profile-image" />


For some reason I can upload a profile picture, but it doesn't remain. And it didn't use the profile picture that I was using before. Maybe just an issue of this test-deployment, but haven't noticed that in the past.

emgerold added 2 commits November 21, 2023 09:39

new text link in signup section

e38f59b

New design for Menu and nested pages

ffac43a

emgerold temporarily deployed to dev November 23, 2023 21:34 — with GitHub Actions Inactive

reviewpad bot added frontend size XL labels Nov 23, 2023

conradbielitz requested a review from mischakolbe December 5, 2023 09:12

hugo2410 had a problem deploying to dev December 9, 2023 11:54 — with GitHub Actions Failure

merging with main

c3ab914

hugo2410 temporarily deployed to dev December 9, 2023 11:56 — with GitHub Actions Inactive

mischakolbe requested changes Dec 9, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Emge/menu and settings #303

Emge/menu and settings #303

emgerold commented Nov 23, 2023

reviewpad bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 •

edited

Loading

reviewpad bot commented Dec 9, 2023

reviewpad bot commented Dec 9, 2023

mischakolbe commented Dec 9, 2023

mischakolbe commented Dec 9, 2023

mischakolbe left a comment

mischakolbe Dec 9, 2023

mischakolbe Dec 9, 2023

mischakolbe Dec 9, 2023

mischakolbe Dec 9, 2023

mischakolbe Dec 9, 2023

mischakolbe Dec 9, 2023

Emge/menu and settings #303

Are you sure you want to change the base?

Emge/menu and settings #303

Conversation

emgerold commented Nov 23, 2023

reviewpad bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 • edited Loading

reviewpad bot commented Dec 9, 2023

reviewpad bot commented Dec 9, 2023

mischakolbe commented Dec 9, 2023

mischakolbe commented Dec 9, 2023

mischakolbe left a comment

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

mischakolbe Dec 9, 2023

Choose a reason for hiding this comment

github-actions bot commented Nov 23, 2023 •

edited

Loading